Kevin/website
1
0
Fork 0
mirror of https://github.com/LJ5O/website.git synced 2026-08-11 22:54:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Contact button on footer

Browse Source 
Also added picture
This commit is contained in:
LJ5O
2025-03-17 23:16:07 +01:00
parent 71e34dfe13
commit 2b3c973386
2 changed files with 40 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@@ -137,9 +137,6 @@
</div> <!-- Projects summary --> </div> <!-- Projects summary -->
<footer> <footer>
<!--<div id="footer_picture">
<img src="https://picsum.photos/50/50">
</div>-->
<div id="footer_content"> <div id="footer_content">
<div id="footer_social_networks"> <div id="footer_social_networks">
@@ -167,8 +164,18 @@
</nav> <!-- Footer content links --> </nav> <!-- Footer content links -->
<div id="footer_contact_div">
<h1>Contact</h1>
<p>Want to contact me ? Let's have a talk !</p>
<div id="footer_contact_button" class="button">Contact</div>
</div>
<div id="footer_picture">
<img src="https://picsum.photos/50/50">
</div>-
</div> <!-- Footer content --> </div> <!-- Footer content -->
<p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin</p> <p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin. Copyright...</p>
</footer> </footer>
</body> </body>

36
style.css
View File

@@ -34,6 +34,7 @@ a:visited{
border: none; border: none;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
text-align: center;
} }
#welcome_div{ #welcome_div{
@@ -272,10 +273,11 @@ footer{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
gap: 30px;
} }
#footer_content h1{ #footer_content h1{
font-size: 2em; font-size: 1.8em;
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: 4px; margin-bottom: 4px;
@@ -289,7 +291,6 @@ footer{
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
margin-right: 20px;
} }
.footer_social_network_item{ .footer_social_network_item{
width: 50px; width: 50px;
@@ -320,7 +321,7 @@ footer{
margin-bottom: 15px; margin-bottom: 15px;
} }
.footer_links_box_title{ .footer_links_box_title{
font-size: 1.6em; font-size: 1.4em;
border-bottom: rgb(179, 72, 122) 2px solid; border-bottom: rgb(179, 72, 122) 2px solid;
margin: 0; margin: 0;
margin-bottom: 2px; margin-bottom: 2px;
@@ -339,18 +340,37 @@ footer{
margin-bottom: 2px; margin-bottom: 2px;
} }
#footer_contact_div{
border: rgb(82, 15, 170) 2px solid;
width: 15%;
}
#footer_contact_div h1{
width: fit-content !important;
margin: auto;
margin-bottom: 0;
}
#footer_contact_div p{
margin-top: 10px;
margin-bottom: 12px;
text-align: center;
}
#footer_contact_button{
background-color: rgb(65, 185, 61);
font-size: 1.1em;
width: 50%;
margin: auto;
}
#footer_little_text{ #footer_little_text{
font-size: 0.8em; font-size: 0.8em;
margin: 0; margin: 0;
margin-left: 20px; margin-left: 20px;
} }
#footer_picture{ #footer_picture{
width: 5vw; width: 100px;
height: 5vw; height: 100px;
right: 10%; margin-left: auto;
top: 10px;
border: 2px green dotted; border: 2px green dotted;
position: absolute;
} }
#footer_picture img{ #footer_picture img{
width: 100%; width: 100%;