Etheryo/saoulbonmonsieur
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added footer-bottom, replaced grid with flex

Browse source
This commit is contained in:
Yohan Boujon 2023-06-21 01:22:49 +02:00
parent ac937b78e3
commit 0609311bc0
3 changed files with 73 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
components/footer.html
View file

@ -1,12 +1,22 @@
<div id="footer"> <div id="footer">
<div class="footer-container"> <div class="footer-container">
<h1>Suivez-moi</h1> <div class="footer-container_grid">
<h1>Suivez-moi</h1>
</div>
<div class="footer-container_grid">
<h1>Informations</h1>
<p>Color Palette based on <a href="https://colorhunt.co/palette/4b4a5aa55540e79a58e1d5d2">this one</a> and <a href="https://colorhunt.co/palette/2d24245c3d2eb85c38e0c097">this one</a></p>
</div>
<div class="footer-container_grid">
<h1>Newsletter</h1>
</div>
</div> </div>
<div class="footer-container"> <div class="footer-bottom">
<h1>Informations</h1> <div class="footer-bottom_grid left-align">
<p>Color Palette based on <a href="https://colorhunt.co/palette/4b4a5aa55540e79a58e1d5d2">this one</a> and <a href="https://colorhunt.co/palette/2d24245c3d2eb85c38e0c097">this one</a></p> <p>Copyright © Yohan Boujon 2023</p>
</div>
<div class="footer-bottom_grid right-align">
<p><a href="#0">Mentions légales</a></p>
</div>
</div> </div>
<div class="footer-container"> </div>
<h1>Newsletter</h1>
</div>
</div>

8
css/base.css
View file

@ -22,4 +22,12 @@ h1 {
p { p {
font-family: 'Josefin Sans', sans-serif; font-family: 'Josefin Sans', sans-serif;
}
.right-align {
text-align: right;
}
.left-align {
text-align: left;
} }

53
css/footer.css
View file

@ -1,16 +1,57 @@
#footer .footer-container
{ {
display: grid; display: flex;
grid-gap: 0px; height: 15rem;
height: 30rem;
grid-template-columns: repeat(3, 33.3%);
background-color: var(--color-dark); background-color: var(--color-dark);
color: var(--color-white); color: var(--color-white);
overflow: clip; overflow: clip;
} }
.footer-container .footer-container_grid
{ {
flex: 1;
padding: 1rem 2rem; padding: 1rem 2rem;
word-wrap: break-word; word-wrap: break-word;
}
.footer-bottom
{
background-color: var(--color-gray);
color: var(--color-white);
display: flex;
align-items:center;
height: 2.5rem;
vertical-align: middle;
overflow: clip;
}
.footer-bottom_grid
{
flex: 1;
padding: 1rem 4rem;
word-wrap: break-word;
}
.footer-bottom_grid a:link
{
text-decoration: none;
color: var(--color-white);
}
.footer-bottom_grid a:visited
{
text-decoration: none;
color: var(--color-white);
}
.footer-bottom_grid a:hover
{
text-decoration: none;
color: var(--color-light);
}
.footer-bottom_grid.right-align:hover
{
transform: translateY(-2px);
transition: all .3s ease 0s;
} }