develop footer

mate-academy · Sep 11, 2023 · c829c38 · c829c38
1 parent 68a3535
commit c829c38
Show file tree

Hide file tree

Showing 14 changed files with 313 additions and 1 deletion.
diff --git a/src/images/icons/icon-facebook.png b/src/images/icons/icon-facebook.png
diff --git a/src/images/icons/icon-instagram.png b/src/images/icons/icon-instagram.png
diff --git a/src/images/icons/icon-scroll-up.png b/src/images/icons/icon-scroll-up.png
diff --git a/src/images/icons/icon-telegram.png b/src/images/icons/icon-telegram.png
diff --git a/src/images/icons/icon-twitter.png b/src/images/icons/icon-twitter.png
diff --git a/src/index.html b/src/index.html
@@ -7,7 +7,7 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Museum</title>
+    <title>NAMU</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link
@@ -438,6 +438,155 @@ <h2 class="subscribe-to-digest__title section__title">
         </secton>
       </div>
     </main>
+
+    <footer class="page__footer footer">
+      <div class="container">
+        <div class="footer__content">
+          <div class="footer__contact-us contact-us-footer">
+            <h3 class="footer__subtitle">
+              Контакти
+            </h3>
+
+            <ul class="contact-us-footer__list">
+              <li class="contact-us-footer__item">
+                <a
+                  target="_blank"
+                  href="https://www.google.com/maps/place/%D0%B2%D1%83%D0%BB%D0%B8%D1%86%D1%8F+%D0%9C%D0%B8%D1%85%D0%B0%D0%B9%D0%BB%D0%B0+%D0%93%D1%80%D1%83%D1%88%D0%B5%D0%B2%D1%81%D1%8C%D0%BA%D0%BE%D0%B3%D0%BE,+6,+%D0%9A%D0%B8%D1%97%D0%B2,+02000/data=!4m2!3m1!1s0x40d4ce524453048d:0x49a2895b6cb43e10?sa=X&ved=2ahUKEwjcrdSauZ-BAxWf3wIHHeIpATEQ8gF6BAgTEAA&ved=2ahUKEwjcrdSauZ-BAxWf3wIHHeIpATEQ8gF6BAgYEAI"
+                  class="contact-us-footer__link"
+                >
+                  <p class="contact-us-footer__text">
+                    Київ, <br> вул. М. Грушевського, 6
+                  </p>
+                </a>
+              </li>
+
+              <li class="contact-us-footer__item">
+                <a href="tel:+278 13 57" class="contact-us-footer__link">
+                  <p class="contact-us-footer__text">
+                    тел. 278-13-57,
+                  </p>
+                </a>
+
+                <a href="tel:+278-74-54" class="contact-us-footer__link">
+                  <p class="contact-us-footer__text">
+                    278-74-54
+                  </p>
+                </a>
+              </li>
+
+              <li class="contact-us-footer__item">
+                <a href="mailto:[email protected]" class="contact-us-footer__link">
+                  <p class="contact-us-footer__text">
+                    [email protected]
+                  </p>
+                </a>
+              </li>
+            </ul>
+
+            <ul class="contact-us-footer__social-list">
+              <li class="contact-us-footer__item">
+                <a href="#" class="contact-us-footer__link icon-socia icon-socia__facebook"></a>
+              </li>
+
+              <li class="contact-us-footer__item">
+                <a href="#" class="contact-us-footer__link icon-socia icon-socia__twitter"></a>
+              </li>
+
+              <li class="contact-us-footer__item">
+                <a href="#" class="contact-us-footer__link icon-socia icon-socia__telegram"></a>
+              </li>
+
+              <li class="contact-us-footer__item">
+                <a href="#" class="contact-us-footer__link icon-socia icon-socia__instagram"></a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="footer__schedule schedule-footer">
+            <h3 class="footer__subtitle">
+              Розклад роботи
+            </h3>
+
+            <ul class="schedule-footer__list">
+              <li class="schedule-footer__item">
+                ПН: вихідний
+              </li>
+
+              <li class="schedule-footer__item">
+                ВТ: вихідний
+              </li>
+
+              <li class="schedule-footer__item">
+                СР: 10:00 - 17:00
+              </li>
+
+              <li class="schedule-footer__item">
+                ЧТ: 10:00 - 17:00
+              </li>
+
+              <li class="schedule-footer__item">
+                ПТ: 12:00 - 19:00
+              </li>
+
+              <li class="schedule-footer__item">
+                СБ: 11:00 - 18:00
+              </li>
+
+              <li class="schedule-footer__item">
+                НД: 10:00 - 17:00
+              </li>
+            </ul>
+          </div>
+
+          <nav class="footer__nav nav-footer">
+            <h3 class="footer__subtitle">
+              Головна
+            </h3>
+
+            <ul class="nav-footer__list">
+              <li class="nav-footer__item">
+                <a href="#" class="nav-footer__link">
+                  <p class="nav-footer__text">
+                    Виставки
+                  </p>
+                </a>
+              </li>
+
+              <li class="nav-footer__item">
+                <a href="#" class="nav-footer__link">
+                  <p class="nav-footer__text">
+                    Події
+                  </p>
+                </a>
+              </li>
+
+              <li class="nav-footer__item">
+                <a href="#" class="nav-footer__link">
+                  <p class="nav-footer__text">
+                    Новини
+                  </p>
+                </a>
+              </li>
+            </ul>
+          </nav>
+
+          <div class="footer__copy-rights copy-rights">
+            <div class="copy-rights__content">
+              <p class="copy-rights__year">
+                &copy; 2010 — 2020
+              </p>
+
+              <p class="copy-rights__text">
+                Privacy — Terms
+              </p>
+            </div>
+
+            <a href="#" class="footer__icon-scroll-up icon-scroll-up"></a>
+          </div>
+        </div>
+      </div>
+
+    </footer>
     <script type="text/javascript" src="scripts/main.js"></script>
   </body>
 </html>
diff --git a/src/styles/blocks/contact-us-footer.scss b/src/styles/blocks/contact-us-footer.scss
@@ -0,0 +1,28 @@
+.contact-us-footer {
+  &__list {
+    margin-block: 10px 30px;
+
+    @include onTable() {
+      margin-block: 30px 50px;
+    }
+  }
+
+  &__item {
+    line-height: 150%;
+  }
+
+  &__link {
+    display: inline-block;
+  }
+
+  &__social-list {
+    display: flex;
+    gap: 20px;
+
+    margin-bottom: 50px;
+
+    @include onTable() {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/src/styles/blocks/copy-rights.scss b/src/styles/blocks/copy-rights.scss
@@ -0,0 +1,23 @@
+.copy-rights {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+
+  margin-top: 60px;
+
+  @include onDesktop() {
+    margin-top: 70px;
+  }
+
+  &__content {
+    display: flex;
+    gap: 22px;
+
+    font-size: 14px;
+    line-height: 140%;
+
+    @include onDesktop() {
+      gap: 102px;
+    }
+  }
+}
diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss
@@ -0,0 +1,46 @@
+.footer {
+  background-color: $footer-background-color;
+
+  &__content {
+    color: $footer-text-color;
+
+    @include pageGrid();
+
+    padding-block: 34px 30px;
+  }
+
+  &__subtitle {
+    font-family: "Playfair Display", serif;
+
+    font-size: 18px;
+    line-height: 150%;
+  }
+
+  &__contact-us {
+    grid-column: span 2;
+
+    @include onDesktop() {
+      grid-column: span 4;
+    }
+  }
+
+  &__schedule {
+    grid-column: span 2;
+
+    @include onDesktop() {
+      grid-column: span 4;
+    }
+  }
+
+  &__nav {
+    grid-column: span 2;
+
+    @include onDesktop() {
+      grid-column: span 4;
+    }
+  }
+
+  &__copy-rights {
+    grid-column: 1 / -1;
+  }
+}
diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss
@@ -39,3 +39,34 @@
     background-repeat: no-repeat;
   }
 }
+
+.icon-socia {
+  width: 20px;
+  height: 20px;
+
+  background-position: center;
+  background-repeat: no-repeat;
+
+  &__facebook {
+    background-image: url(../images/icons/icon-facebook.png);
+  }
+
+  &__twitter {
+    background-image: url(../images/icons/icon-twitter.png);
+  }
+
+  &__telegram {
+    background-image: url(../images/icons/icon-telegram.png);
+  }
+
+  &__instagram {
+    background-image: url(../images/icons/icon-instagram.png);
+  }
+}
+
+.icon-scroll-up {
+  width: 30px;
+  height: 30px;
+
+  background-image: url(../images/icons/icon-scroll-up.png);
+}
diff --git a/src/styles/blocks/nav-footer.scss b/src/styles/blocks/nav-footer.scss
@@ -0,0 +1,13 @@
+.nav-footer {
+  &__list {
+    margin-top: 10px;
+
+    @include onTable() {
+      margin-top: 30px;
+    }
+  }
+
+  &__item {
+    line-height: 150%;
+  }
+}
diff --git a/src/styles/blocks/schedule-footer.scss b/src/styles/blocks/schedule-footer.scss
@@ -0,0 +1,13 @@
+.schedule-footer {
+  &__list {
+    margin-block: 10px 50px;
+
+    @include onTable() {
+      margin-block: 30px 0;
+    }
+  }
+
+  &__item {
+    line-height: 150%;
+  }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -17,6 +17,11 @@
 @import "blocks/plan-visit-to-museum";
 @import "blocks/news";
 @import "blocks/subscribe-to-digest";
+@import "blocks/footer";
+@import "blocks/contact-us-footer";
+@import "blocks/schedule-footer";
+@import "blocks/nav-footer";
+@import "blocks/copy-rights";
 
 body {
   margin: 0;

diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss
@@ -16,6 +16,10 @@ $menu-text-color: #f1f5f4;
 $plan-visit-to-museum-background-color: #3f5252;
 $plan-visit-to-museum-text-color: #f1f5f4;
 
+//footer
+$footer-background-color: #3f5252;
+$footer-text-color: #f1f5f4;
+
 //button
 $button-text-color-format-first: #f1f5f4;
 $button-background-color-format-first: $page-main-color;