Ajout du footer responsive
Co-authored-by: journeau <romainjourneau@gmail.com>
This commit is contained in:
parent
f4e44c2ddf
commit
3de7945308
132
assets/css/footer.css
Normal file
132
assets/css/footer.css
Normal file
@ -0,0 +1,132 @@
|
||||
footer {
|
||||
background: #616A6B;
|
||||
color: white;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer div p {
|
||||
font-size: 25pt;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#social ul {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#social li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
text-align: center;
|
||||
padding-top: 25px;
|
||||
padding-bottom: 25px;
|
||||
height: 100%;
|
||||
background-color: #45a1ff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#social, #sitemap, #contact {
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
#contact a, #sitemap a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#contact a:hover, #sitemap a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#social ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#social li {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#sitemap ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#sitemap li, #contact li {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
footer ul {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#contact ul {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#contact a[href^="tel:"]::before {
|
||||
content: "☎️ ";
|
||||
}
|
||||
|
||||
#contact a[href^="mailto:"]::before {
|
||||
content: "✉️ ";
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
footer {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 85% 15%;
|
||||
}
|
||||
|
||||
#social, #sitemap, #contact {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#social {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
#sitemap {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
#contact {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
grid-column: 1/4;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
footer {
|
||||
grid-template-columns: 100%;
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
#social, #sitemap, #contact, #copyright {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
#social {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#sitemap {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#contact {
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
grid-row: 4;
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,18 @@
|
||||
html {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
font-family: system-ui;
|
||||
}
|
||||
1
assets/img/facebook.svg
Normal file
1
assets/img/facebook.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1365.12" height="1365.12" viewBox="0 0 14222 14222"><circle cx="7111" cy="7112" r="7111" fill="#1977f3"/><path d="M9879 9168l315-2056H8222V5778c0-562 275-1111 1159-1111h897V2917s-814-139-1592-139c-1624 0-2686 984-2686 2767v1567H4194v2056h1806v4969c362 57 733 86 1111 86s749-30 1111-86V9168z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 358 B |
1
assets/img/instagram.svg
Normal file
1
assets/img/instagram.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.7 KiB |
4
assets/img/twitter.svg
Normal file
4
assets/img/twitter.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 248 204">
|
||||
<path fill="#1d9bf0" d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 732 B |
33
index.html
33
index.html
@ -2,9 +2,11 @@
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Elite Solar</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="assets/css/header.css">
|
||||
<link rel="stylesheet" href="assets/css/footer.css">
|
||||
<script type="text/javascript" src="assets/js/header.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@ -19,5 +21,36 @@
|
||||
<li><a href="faq">FAQ</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
<main></main>
|
||||
<footer>
|
||||
<div id="social">
|
||||
<p>Suivez-Nous</p>
|
||||
<ul>
|
||||
<li><a href="https://instagram.com/elitesolar77"><img src="assets/img/instagram.svg" width="50" height="50" alt="Instagram"/></a></li>
|
||||
<li><a href="https://www.facebook.com/profile.php?id=100089332237449"><img src="assets/img/facebook.svg" width="50" height="50" alt="Facebook"/></a></li>
|
||||
<li><a href="https://twitter.com/EliteSolar77"><img src="assets/img/twitter.svg" width="50" height="50" alt="Twitter"/></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="sitemap">
|
||||
<p>Plan du site</p>
|
||||
<ul>
|
||||
<li><a href="./">Page d'accueil</a></li>
|
||||
<li><a href="about">Qui sommes-nous ?</a></li>
|
||||
<li><a href="product">Notre produit</a></li>
|
||||
<li><a href="faq">Foire aux questions</a></li>
|
||||
<li><a href="contact">Contact</a></li>
|
||||
<li><a href="privacy">Politique de confidentialité</a></li>
|
||||
<li><a href="legal">Mentions légales</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="contact">
|
||||
<p>Contact</p>
|
||||
<ul>
|
||||
<li><a href="tel:+33160746800">+33 1 60 74 68 00</a></li>
|
||||
<li><a href="mailto:elitesolar.contact77@gmail.com">elitesolar.contact77@gmail.com</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<p id="copyright">© 2022 Elite Solar. Créé par Lyanis Souidi, Tom Moguljak et Romain Journeau.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user