bientot pret

oldscss/layouts/footer.scss

@@ -0,0 +1,132 @@
+$social-icon-height: 2em;
+$footer-cover-height: 10em;
+
+.footer {
+  margin-top: 5em;
+
+  .footer-cover-back {
+    height: $footer-cover-height;
+    background-image: url("https://s.werobot.fr/footerCover.jpeg");
+    background-size: cover;
+    background-position-x: center;
+    background-position-y: top;
+  }
+
+  .footer-cover {
+    margin-top: -$footer-cover-height;
+    height: $footer-cover-height;
+    background-color: rgba(41, 128, 185, .8);
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
+  }
+
+  .footer-border {
+    display: flex;
+    .footer-border-item {
+      display: block;
+      content: "";
+      border-bottom: 1px solid black;
+    }
+    .footer-border-item:nth-child(1) {
+      border-color: #bdc3c7;
+      width: 100%;
+    }
+  }
+
+  .footer-container {
+    height: 20em;
+    padding-top: 3em;
+    padding-bottom: 3em;
+    .footer-title-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 2em;
+      .footer-title {
+        font-size: 1.8em;
+        opacity: 0.9;
+        margin-bottom: 0.5em;
+      }
+      .footer-description {
+        opacity: 0.9;
+        line-height: 1.5em;
+      }
+      .footer-logo {
+        margin-right: 2.5em;
+        img {
+          width: 38em;
+        }
+      }
+    }
+    .footer-footer {
+      margin-top: 3em;
+      padding-bottom: 2em;
+    }
+    .footer-socials {
+      margin-left: 1em;
+      display: flex;
+      justify-content: flex-start;
+
+      .footer-socials-item {
+        margin-right: 1em;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        opacity: 0.8 !important;
+        img, svg {
+          width: $social-icon-height;
+          height: $social-icon-height;
+        }
+        &:hover {
+          opacity: 1 !important;
+        }
+      }
+    }
+    .footer-links {
+      text-align: right;
+      display: flex;
+      flex-direction: column;
+      a {
+        margin-bottom: 10px;
+        font-size: 1em;
+        color: #2980b9;
+      }
+    }
+  }
+}
+
+@media (max-width: $responsive-medium) {
+  .footer {
+    .footer-container {
+      padding-top: 1em;
+      .footer-title-container {
+        flex-direction: column;
+        text-align: center;
+        .footer-logo {
+          margin-right: 0;
+          margin-bottom: 1em;
+          img {
+            display: flex;
+            margin: 0 auto;
+            width: 8em;
+          }
+        }
+      }
+      .footer-links {
+        text-align: center;
+        margin-top: 1em;
+        margin-bottom: 1em;
+      }
+      .footer-footer {
+        margin-top: 2em;
+        padding-bottom: 2em;
+      }
+      .footer-socials {
+        margin-left: 0;
+        .footer-socials-item img {
+          width: 2.4em;
+          height: 2.4em;
+        }
+      }
+    }
+  }
+}