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 social networks

Browse Source
This commit is contained in:
LJ5O
2025-03-17 19:05:41 +01:00
parent fe83027055
commit 71e34dfe13
2 changed files with 45 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@@ -142,11 +142,22 @@
</div>--> </div>-->
<div id="footer_content"> <div id="footer_content">
<div id="footer_social_networks">
<h1>Social networks</h1>
<a href="#">
<div class="footer_social_network_item">
<img src="https://picsum.photos/50">
</div>
</a>
</div>
<nav id="footer_content_links"> <nav id="footer_content_links">
<h1>Sitemap</h1> <h1>Sitemap</h1>
<div class="footer_links_box"> <div class="footer_links_box">
<p class="footer_links_box_title">Projects</p> <h2 class="footer_links_box_title">Projects</h2>
<ul> <ul>
<li><p><a href="#">Project 1</a></p></li> <li><p><a href="#">Project 1</a></p></li>
<li><p><a href="#">Project 2</a></p></li> <li><p><a href="#">Project 2</a></p></li>
@@ -155,6 +166,7 @@
</div> </div>
</nav> <!-- Footer content links --> </nav> <!-- Footer content links -->
</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</p>
</footer> </footer>

38
style.css
View File

@@ -274,6 +274,36 @@ footer{
flex-wrap: wrap; flex-wrap: wrap;
} }
#footer_content h1{
font-size: 2em;
width: 100%;
margin: 0;
margin-bottom: 4px;
height: fit-content;
}
#footer_social_networks{
width: 15%;
border: 2px rgb(16, 207, 102) dotted;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
margin-right: 20px;
}
.footer_social_network_item{
width: 50px;
height: 50px;
margin: 0;
margin-right: 20px;
margin-top: 10px;
}
.footer_social_network_item img{
border-radius: 50%;
width: 100%;
height: 100%;
}
#footer_content_links{ #footer_content_links{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -281,11 +311,7 @@ footer{
min-width: 50px; min-width: 50px;
flex-wrap: wrap; flex-wrap: wrap;
border: 2px rgb(212, 15, 230) dotted; border: 2px rgb(212, 15, 230) dotted;
} align-content: flex-start;
#footer_content_links h1{
font-size: 2em;
width: 100%;
margin: 0;
} }
.footer_links_box{ .footer_links_box{
border: 3px blue dotted; border: 3px blue dotted;
@@ -294,7 +320,7 @@ footer{
margin-bottom: 15px; margin-bottom: 15px;
} }
.footer_links_box_title{ .footer_links_box_title{
font-size: 1.8em; font-size: 1.6em;
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;