From 3de7945308a8d501f495563b7d44dffa566f0a33 Mon Sep 17 00:00:00 2001 From: Lyanis Souidi Date: Mon, 9 Jan 2023 10:33:38 +0100 Subject: [PATCH] Ajout du footer responsive Co-authored-by: journeau --- assets/css/footer.css | 132 +++++++++++++++++++++++++++++++++++++++ assets/css/style.css | 15 +++++ assets/img/facebook.svg | 1 + assets/img/instagram.svg | 1 + assets/img/twitter.svg | 4 ++ index.html | 33 ++++++++++ 6 files changed, 186 insertions(+) create mode 100644 assets/css/footer.css create mode 100644 assets/img/facebook.svg create mode 100644 assets/img/instagram.svg create mode 100644 assets/img/twitter.svg diff --git a/assets/css/footer.css b/assets/css/footer.css new file mode 100644 index 0000000..eab314d --- /dev/null +++ b/assets/css/footer.css @@ -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; + } +} \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css index 4e41b69..3a57e25 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -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; } \ No newline at end of file diff --git a/assets/img/facebook.svg b/assets/img/facebook.svg new file mode 100644 index 0000000..d807aa9 --- /dev/null +++ b/assets/img/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/instagram.svg b/assets/img/instagram.svg new file mode 100644 index 0000000..4ce33d4 --- /dev/null +++ b/assets/img/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/twitter.svg b/assets/img/twitter.svg new file mode 100644 index 0000000..d60af2b --- /dev/null +++ b/assets/img/twitter.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/index.html b/index.html index f1b5f09..08221d2 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,11 @@ + Elite Solar + @@ -19,5 +21,36 @@
  • FAQ
    • +
    + \ No newline at end of file