SAE15_2022/assets/css/footer.css
Lyanis SOUIDI 3de7945308 Ajout du footer responsive
Co-authored-by: journeau <romainjourneau@gmail.com>
2023-01-09 10:33:38 +01:00

132 lines
1.8 KiB
CSS

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;
}
}