demo for mentor

mate-academy · Sep 13, 2023 · e0c958b · e0c958b
1 parent be0db83
commit e0c958b
Show file tree

Hide file tree

Showing 14 changed files with 374 additions and 37 deletions.
diff --git a/src/images/icons/arrow.png b/src/images/icons/arrow.png
diff --git a/src/images/icons/facebook.png b/src/images/icons/facebook.png
diff --git a/src/images/icons/instagram.png b/src/images/icons/instagram.png
diff --git a/src/images/icons/scroll-up.png b/src/images/icons/scroll-up.png
diff --git a/src/images/icons/telegram.png b/src/images/icons/telegram.png
diff --git a/src/images/icons/twitter.png b/src/images/icons/twitter.png
diff --git a/src/index.html b/src/index.html
@@ -323,34 +323,119 @@ <h3 class="news__info-date--title exibition__info-title">Міжнародний
 
         <section class="subscribe">
 
-          <div class="subscribe__content">
-            <div class="subscribe__title-wrapper">
-              <h2 class="subscribe__title">Підпишіться на дайджест</h2>
-            </div>
-            <div class="subscribe__info-wrapper">
-              <p class="subscribe__info">Першими дізнавайтесь про новини музею та розіграші, отримуйте запрошення на події та читайте статті від кураторів</p>
-            </div>
-            <div class="subscribe__form-wrapper">
-              <form
-                action="#"
-                id="form"
-                class="subscribe__form"
-                onsubmit="this.reset(); return false;">
-                <input
-                type="text"
-                name="email"
-                id="email"
-                placeholder="e-mail"
-                class="subscribe__input"
-                required>
-                <button type="submit" class="button exibition-button subscribe-button">Підписатись</button>
-              </form>
-            </div>
+
+          <div class="subscribe__title-wrapper">
+            <h2 class="subscribe__title">Підпишіться на дайджест</h2>
+          </div>
+
+          <div class="subscribe__info-wrapper">
+            <p class="subscribe__info">Першими дізнавайтесь про новини музею та розіграші, отримуйте запрошення на події та читайте статті від кураторів</p>
           </div>
 
+          <div class="subscribe__form-wrapper">
+            <form
+              action="#"
+              id="form"
+              class="subscribe__form"
+              onsubmit="this.reset(); return false;">
+              <input
+              type="text"
+              name="email"
+              id="email"
+              placeholder="e-mail"
+              class="subscribe__input"
+              required>
+              <button type="submit" class="button exibition-button subscribe-button">Підписатись</button>
+            </form>
+          </div>
+
+
         </section>
       </div>
     </main>
+
+    <footer class="footer">
+
+      <div class="footer__content--1">
+        <h3 class="footer__title">Контакти</h3>
+        <p class="footer__info">Київ, <br>
+          вул. М. Грушевського, 6 <br>
+          тел. 278-13-57, 278-74-54 <br>
+          [email protected]
+        </p>
+
+        <div class="footer__icon-wrapper">
+
+          <img
+            src="images/icons/facebook.png"
+            alt="facebook"
+            class="icon icon--facebook"
+          >
+
+          <img
+            src="images/icons/twitter.png"
+            alt="facebook"
+            class="icon icon--twitter"
+          >
+
+          <img
+            src="images/icons/telegram.png"
+            alt="facebook"
+            class="icon icon--telegram"
+          >
+
+          <img
+            src="images/icons/instagram.png"
+            alt="facebook"
+            class="icon icon--instagram"
+          >
+
+        </div>
+      </div>
+
+      <div class="footer__content--2">
+
+        <h3 class="footer__title">Розклад роботи</h3>
+        <p class="footer__info">
+          ПН: вихідний <br>
+          ВТ: вихідний <br>
+          СР: 10:00 - 17:00 <br>
+          ЧТ: 10:00 - 17:00 <br>
+          ПТ: 12:00 - 19:00 <br>
+          СБ: 11:00 - 18:00 <br>
+          НД: 10:00 - 17:00 <br>
+        </p>
+
+      </div>
+
+      <div class="footer__nav">
+
+        <h3 class="footer__title">Головна</h3>
+
+        <a href="#exibition" class="footer__nav-link footer__nav-link--1">Виставки</a>
+        <a href="#exibition" class="footer__nav-link">Події</a>
+        <a href="#exibition" class="footer__nav-link">Новини</a>
+
+      </div>
+
+      <div class="footer__endline">
+
+        <div class="footer__endline-text-wrapper">
+          <p class="footer__endline-text">© 2010 — 2020</p>
+          <p class="footer__endline-text">Privacy — Terms</p>
+        </div>
+
+        <a href="#" class="footer__endline-picture-link">
+          <img
+            src="images/icons/scroll-up.png"
+            alt="scroll-up"
+            class="footer__endline-picture"
+          >
+        </a>
+      </div>
+
+
+    </footer>
     <script type="text/javascript" src="scripts/main.js"></script>
   </body>
 </html>
diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss
@@ -0,0 +1,129 @@
+.footer {
+  background-color: #3f5252;
+  @include contentPaddingInline;
+
+  @include onTablet {
+    @include pageGrid;
+  }
+
+  &__content {
+    &--1 {
+      padding-top: 34px;
+
+      @include onTablet {
+        padding-top: 50px;
+        grid-column: 1 / 3;
+      }
+    }
+
+    &--2 {
+      margin-top: 50px;
+
+      @include onTablet {
+        grid-column: 3 / 5;
+      }
+
+      @include onDesktop {
+        grid-column: 5 / 7;
+      }
+    }
+
+  }
+
+  &__title {
+    font-family: "Playfair Display", sans-serif;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 125%;
+    color: #f1f5f4;
+  }
+
+  &__info {
+    color: #f1f5f4;
+    font-family: "Raleway", sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%;
+    margin-top: 10px;
+  }
+
+  &__icon {
+    &-wrapper {
+      margin-top: 30px;
+
+      @include onTablet {
+        margin-top: 50px;
+      }
+    }
+  }
+
+  &__nav {
+
+    margin-top: 50px;
+    @include onTablet {
+      grid-column: 5 / 6;
+    }
+
+    @include onDesktop {
+      grid-column: 9 / 11;
+    }
+
+    &-link {
+      text-decoration: none;
+      color: #f1f5f4;
+      font-family: "Raleway", sans-serif;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 150%;
+      display: block;
+      margin-top: 5px;
+
+      &--1 {
+        margin-top: 10px;
+      }
+    }
+  }
+
+  &__endline {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 60px;
+    padding-bottom: 30px;
+
+    @include onTablet {
+      grid-column: 1 / -1;
+      padding-top: 62px;
+    }
+
+    &-text {
+      font-family: "Raleway", sans-serif;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 140%;
+      color: #f1f5f4;
+      padding-right: 22px;
+
+      &:last-child {
+        padding-right: 0;
+      }
+
+      @include onDesktop {
+        padding-right: 102px;
+      }
+
+      &-wrapper {
+        display: flex;
+      }
+    }
+
+    &-picture {
+      height: 30px;
+      width: 30px;
+    }
+  }
+}
diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss
@@ -0,0 +1,9 @@
+.icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 20px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss
@@ -131,6 +131,10 @@
 
   &__info {
     margin-bottom: 50px;
+
+    @include onTablet {
+      margin-bottom: 0;
+    }
     &-date {
       color: #1c1b29;
       font-family: "Raleway", sans-serif;
@@ -184,6 +188,10 @@
 
     &--2 {
       margin-bottom: 30px;
+
+      @include onTablet {
+        margin-bottom: 0;
+      }
     }
   }
 

diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
@@ -4,6 +4,7 @@
 
 * {
   box-sizing: border-box;
+  scroll-behavior: smooth;
 }
 
 body {
@@ -43,3 +44,25 @@ h3 {
 main {
   background-color: #f1f5f4;
 }
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus,
+select:-webkit-autofill:focus-visible {
+  font-family: "Raleway", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  width: 280px;
+  color: #1c1b29;
+  border: none;
+  border-bottom: 1px solid #1c1b29;
+  background-color: #f1f5f4;
+}