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

Footer navigation

Browse Source
This commit is contained in:
LJ5O
2025-03-17 18:50:20 +01:00
parent e984005f5e
commit fe83027055
2 changed files with 100 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
index.html
View File

@@ -137,9 +137,26 @@
</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">
<p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin</p>
</div> <nav id="footer_content_links">
<h1>Sitemap</h1>
<div class="footer_links_box">
<p class="footer_links_box_title">Projects</p>
<ul>
<li><p><a href="#">Project 1</a></p></li>
<li><p><a href="#">Project 2</a></p></li>
<li><p><a href="#">Project 3</a></p></li>
</ul>
</div>
</nav> <!-- Footer content links -->
</div> <!-- Footer content -->
<p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin</p>
</footer> </footer>
</body> </body>

81
style.css
View File

@@ -14,6 +14,14 @@ h1,h2,h3,h4,h5,p{
/*Family Roboto or Atma ?*/ /*Family Roboto or Atma ?*/
} }
a{
text-decoration: none;
}
a:visited{
color: #EAEAEA;
text-decoration: none;
}
.test{ .test{
border: red dotted 2px; border: red dotted 2px;
} }
@@ -249,3 +257,76 @@ h1,h2,h3,h4,h5,p{
font-size: 1.1em; font-size: 1.1em;
} }
footer{
background-color: #2c2b2b;
margin-top: 50px;
border-top: #EAEAEA 2px solid;
height: fit-content;
position: relative; /* So img can be absolute */
}
#footer_content{
width: 80%;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#footer_content_links{
display: flex;
flex-direction: row;
width: 25%;
min-width: 50px;
flex-wrap: wrap;
border: 2px rgb(212, 15, 230) dotted;
}
#footer_content_links h1{
font-size: 2em;
width: 100%;
margin: 0;
}
.footer_links_box{
border: 3px blue dotted;
width: fit-content;
margin-right: 20px;
margin-bottom: 15px;
}
.footer_links_box_title{
font-size: 1.8em;
border-bottom: rgb(179, 72, 122) 2px solid;
margin: 0;
margin-bottom: 2px;
margin-top: 2px;
}
.footer_links_box ul{
text-decoration: none;
padding: 0;
margin: 0;
margin-top: 4px;
}
.footer_links_box li p{
margin: 0;
font-size: 1.2em;
text-decoration: none;
margin-bottom: 2px;
}
#footer_little_text{
font-size: 0.8em;
margin: 0;
margin-left: 20px;
}
#footer_picture{
width: 5vw;
height: 5vw;
right: 10%;
top: 10px;
border: 2px green dotted;
position: absolute;
}
#footer_picture img{
width: 100%;
height: 100%;
}