mate-academy · svitlanak31 · Aug 4, 2024 · Aug 4, 2024 · Aug 4, 2024 · Aug 5, 2024
diff --git a/src/images/aside-icon-close.png b/src/images/aside-icon-close.png
diff --git a/src/images/burger-menu.png b/src/images/burger-menu.png
diff --git a/src/images/events/img1.png b/src/images/events/img1.png
diff --git a/src/images/events/img2.png b/src/images/events/img2.png
diff --git a/src/images/events/square.png b/src/images/events/square.png
diff --git a/src/images/footer/button.png b/src/images/footer/button.png
diff --git a/src/images/footer/facebook.png b/src/images/footer/facebook.png
diff --git a/src/images/footer/instagram.png b/src/images/footer/instagram.png
diff --git a/src/images/footer/instagram.svg b/src/images/footer/instagram.svg
diff --git a/src/images/header-background.svg b/src/images/header-background.svg
diff --git a/src/images/header-button.png b/src/images/header-button.png
diff --git a/src/images/logo/logo.png b/src/images/logo/logo.png
diff --git a/src/images/main-img.png b/src/images/main-img.png
diff --git a/src/images/slider/img1.png b/src/images/slider/img1.png
diff --git a/src/images/slider/img2.png b/src/images/slider/img2.png
diff --git a/src/images/slider/img3.png b/src/images/slider/img3.png
diff --git a/src/images/slider/img4.png b/src/images/slider/img4.png
diff --git a/src/images/subscription/background.png b/src/images/subscription/background.png
diff --git a/src/images/subscription/button.png b/src/images/subscription/button.png
diff --git a/src/index.html b/src/index.html
@@ -1,19 +1,252 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0"
-    />
-    <title>Title</title>
-    <link
-      rel="stylesheet"
-      href="./styles/main.scss"
-    />
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Hamy</title>
+    <link rel="icon" href="./images/logo/logo.png" type="image/png">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./styles/style.scss"/>
   </head>
   <body>
-    <h1>Hello Mate Academy</h1>
+    <header class="header" id="header">
+      <img src="./images/header-background.svg" class="header-background">
+        <div class="container">
+          <div class="header__img">
+            <a href="#aside" class="header__burger-menu" onclick="document.body.classList.add('no-scroll')"></a>
+            <img src="./images/logo/logo.png" class="header__logo">
+          </div>
+        </div>
+        <div class="header__bottom">
+          <div class="container">
+            <h1 class="header__title">ХУДОЖНІЙ МУЗЕЙ</h1>
+          </div>
+        </div>
+        <div class="header__buttons">
+          <button class="header__buttons-text">квитки</button>
+          <button class="header__buttons-icon"></button>
+        </div>
+        <div class="event__wrapper">
+          <div class="event__line"></div>
+          <p class="event__text">події</p>
+        </div>
+
+    </header>
+
+    <aside class="aside" id="aside">
+      <div class="container">
+        <div class="aside__wrapper">
+          <div class="aside__container-navigatioin">
+            <div class="aside__icon">
+              <a href="#header" class="aside__icon-close" onclick="document.body.classList.remove('no-scroll')"></a>
+            </div>
+            <div class="aside__navigation">
+              <ul class="aside__list">
+                <li class="aside__item">
+                  <a href="#slider" class="aside__link" onclick="document.body.classList.remove('no-scroll')">Галерея</a>
+                </li>
+                <li class="aside__item">
+                  <a href="#events" class="aside__link" onclick="document.body.classList.remove('no-scroll')">Виставки та події</a>
+                </li>
+              </ul>
+              <ul class="aside__list">
+                <li class="aside__item">
+                  <a href="#subscription" class="aside__link" onclick="document.body.classList.remove('no-scroll')">Про Нас</a>
+                </li>
+                <li class="aside__item">
+                  <a href="#contacts" class="aside__link" onclick="document.body.classList.remove('no-scroll')">Контакти</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <hr class="aside__line">
+          <div class="aside__container-schedule">
+            <h2 class="schedule__title">Графік роботи</h2>
+            <div class="schedule__wrapper">
+              <ul class="schedule__list">
+                <li class="schedule__item"><b>12:00 — 20:00</b> середа</li>
+                <li class="schedule__item"><b>12:00 — 20:00</b> четвер</li>
+                <li class="schedule__item"><b>12:00 — 20:00</b> п'ятниця</li>
+                <li class="schedule__item"><b>11:00 — 19:00</b> субота</li>
+                <li class="schedule__item"><b>11:00 — 19:00</b> неділя</li>
+              </ul>
+              <div class="weekend">
+                <span class="weekend__content"><b>Вихідні:</b> понеділок, вівторок<br>Каса припиняє роботу за 1 годину до закриття музею</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </aside>
+    <div class="overlay" id="overlay"></div>
+
+    <main class="main">
+      <section class="events" id="events">
+        <div class="container">
+          <h2 class="events__title">Актуальні події</h2>
+          <div class="events__wrapper">
+            <div class="events__container">
+              <div class="events__img-wrapper">
+                <img src="./images/events/img1.png" class="events__img">
+              </div>
+              <div class="events__description">
+                <div class="events__description-container">
+                  <div class="events__date-wrapper">
+                    <p class="events__exhibition">Виставка</p>
+                    <p class="events__date"><b>26.08-29.11.2019</b></p>
+                  </div>
+                  <div class="events__name-wrapper">
+                    <p class="events__name">Йду і повертаюсь</p>
+                    <img src="./images/events/square.png" class="events__name-img">
+                  </div>
+                  <p class="events__text">Національний Художній Музей України презентує унікальну частину колекції Градобанку - українське мистецтво другої половини 1980-1995 років.</p>
+                </div>
+              </div>
+            </div>
+            <div class="events__container">
+              <div class="events__img-wrapper">
+                <img src="./images/events/img2.png" class="events__img">
+              </div>
+              <div class="events__description">
+                <div class="events__description-container">
+                  <div class="events__date-wrapper">
+                    <p class="events__exhibition">Виставка</p>
+                    <p class="events__date"><b>26.08-29.11.2019</b></p>
+                  </div>
+                  <div class="events__name-wrapper">
+                    <p class="events__name">І спогади і мрії</p>
+                    <img src="./images/events/square.png" class="events__name-img">
+                  </div>
+                  <p class="events__text">Національний художній музей України до 100 річчя від дня народження видатної української художниці Тетяни Яблонської відкриває ретроспективну ювілейну виставку «І спогади і мрії».</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <div class="main-img__container">
+        <div class="main-img"></div>
+      </div>
+      <section class="advert" id="advert">
+        <div class="advert__container">
+          <div class="advert__wrapper">
+            <p class="advert__name">Лекція</p>
+            <p class="advert__date">26/08/2019 - 11:00</p>
+          </div>
+          <p class="advert__title">Від класицизму до романтизму</p>
+        </div>
+      </section>
+      <section class="slider" id="slider">
+        <h2 class="slider__title">Галерея</h2>
+        <div class="slider-container">
+          <input type="radio" name="slider-wrapper" id="slide1" checked>
+          <input type="radio" name="slider-wrapper" id="slide2">
+          <input type="radio" name="slider-wrapper" id="slide3">
+          <input type="radio" name="slider-wrapper" id="slide4">
+
+          <div class="slider-wrapper">
+            <div class="slide slide1"><img src="./images/slider/img1.png" class="slider__img" alt="Image 1"></div>
+            <div class="slide slide2"><img src="./images/slider/img2.png" class="slider__img" alt="Image 2"></div>
+            <div class="slide slide3"><img src="./images/slider/img3.png" class="slider__img" alt="Image 3"></div>
+            <div class="slide slide4"><img src="./images/slider/img4.png" class="slider__img" alt="Image 4"></div>
+          </div>
+
+          <div class="slider-nav">
+            <label for="slide1" class="nav-dot" id="slide1"></label>
+            <label for="slide2" class="nav-dot" id="slide2"></label>
+            <label for="slide3" class="nav-dot"></label>
+            <label for="slide4" class="nav-dot"></label>
+          </div>
+        </div>
+      </section>
+
+      <section class="subscription" id="subscription">
+        <div class="subscription__content">
+          <h2 class="subscription__title">Підписка</h2>
+          <p class="subscription__description">Бути в курсі всіх актуальних подій та останніх новин.</p>
+          <form action="https://example.com/form-handler" method="POST" target="hidden_iframe" onsubmit="submitted=true; this.reset();">
+            <div class="subscription__input-wrapper">
+              <input class="subscription__input" placeholder="E-mail" type="email" name="email" required>
+              <div class="subscription__button-wrapper">
+                <button class="subscription__button" type="submit"></button>
+              </div>
+            </div>
+          </form>
+          <iframe name="hidden_iframe" style="display:none;"></iframe>
+        </div>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <div class="container">
+        <div class="footer__container">
+          <div class="footer__icons">
+            <img src="./images/logo/logo.png" class="footer__logo" alt="Logo">
+            <div class="footer__social-icons">
+              <a href="https://www.facebook.com/yourprofile" class="footer__icon footer__icon-facebook" target="_blank" rel="noopener noreferrer"></a>
+              <a href="https://www.instagram.com/yourprofile" class="footer__icon footer__icon-instagram" target="_blank" rel="noopener noreferrer"></a>
+            </div>
+          </div>
+          <div class="footer-schedule">
+            <h2 class="footer-schedule__title">Графік роботи</h2>
+            <div class="footer-schedule__wrapper">
+              <ul class="footer-schedule__list">
+                <li class="footer-schedule__item"><b>12:00 — 20:00</b> середа</li>
+                <li class="footer-schedule__item"><b>12:00 — 20:00</b> четвер</li>
+                <li class="footer-schedule__item"><b>12:00 — 20:00</b> п'ятниця</li>
+                <li class="footer-schedule__item"><b>11:00 — 19:00</b> субота</li>
+                <li class="footer-schedule__item"><b>11:00 — 19:00</b> неділя</li>
+              </ul>
+              <div class="footer__weekend">
+                <span class="footer__weekend__content">Вихідні: понеділок, вівторок<br>Каса припиняє роботу за 1 годину до закриття музею</span>
+              </div>
+            </div>
+          </div>
+          <div class="footer-contacts" id="contacts">
+            <h2 class="footer-contacts__title">Контакти:</h2>
+            <div class="footer-contacts__links">
+              <a href="https://www.google.com/maps?q=вул.+М.+Грушевського,+6;+Київ,+01001" class="footer-contacts__link" target="_blank" rel="noopener noreferrer">вул. М. Грушевського, 6; Київ, 01001</a>
+              <a href="tel:+380442781357" class="footer-contacts__link">тел. +38 (044) 278-13-57</a>
+              <a href="tel:+380442787454" class="footer-contacts__link">факс +38 (044) 278-74-54</a>
+              <a href="mailto:[email protected]" class="footer-contacts__link">e-mail: [email protected]</a>
+            </div>
+          </div>
+
+
+          <div class="footer__button-wrapper">
+            <div class="footer__button">
+              <a href="#header" class="footer__button-link"></a>
+            </div>
+          </div>
+          <hr class="footer__line">
+            <ul class="footer__list footer__list1">
+              <li class="footer__item">
+                <a href="#slider" class="footer__link">Галерея</a>
+              </li>
+              <li class="footer__item">
+                <a href="#events" class="footer__link">Виставки та події</a>
+              </li>
+            </ul>
+            <ul class="footer__list footer__list2">
+              <li class="footer__item">
+                <a href="#subscription" class="footer__link">Про Нас</a>
+              </li>
+              <li class="footer__item">
+                <a href="#contacts" class="footer__link">Контакти</a>
+              </li>
+            </ul>
+            <div class="designed-by">
+              <p class="designed-by__content">Copyright © 2019. All Rights Reserved.</p>
+              <p class="designed-by__content">Designed by Zhyriada Marina</p>
+            </div>
+        </div>
+      </div>
+    </footer>
     <script src="scripts/main.js"></script>
   </body>
 </html>
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
diff --git a/src/styles/blocks/advert.scss b/src/styles/blocks/advert.scss
@@ -0,0 +1,100 @@
+.main-img {
+  background-image: url(../images/main-img.png);
+  background-size: cover;
+  background-position: center;
+  width: 100%;
+  height: 210px;
+
+  @include onTablet {
+    height: 390px;
+  }
+
+  @include onDesktop {
+    height: 550px;
+  }
+
+  &__container {
+    padding-top: 60px;
+
+    @include onTablet {
+      padding-inline: 35px;
+      padding-top: 112px;
+    }
+
+    @include onDesktop {
+      padding-inline: 0;
+      padding-top: 104px;
+    }
+  }
+
+
+}
+
+.advert {
+  padding-inline: 20px;
+  display: flex;
+  justify-content: center;
+  @include hover(transform, scale(1.02));
+
+  &__container {
+    width: 280px;
+    background-color: #fff;
+    transform: translateY(-40%);
+    box-shadow: 0px 2px 0px 0px #1A5A4C40;
+
+    @include onTablet {
+      width: 570px;
+    }
+
+    @include onDesktop {
+      transform: translateY(-50%);
+    }
+  }
+
+  &__wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-inline: 21px;
+
+    @include onTablet {
+      padding-top: 45px;
+      padding-bottom: 16px;
+      padding-inline: 55px;
+    }
+  }
+
+  &__name {
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 16px;
+    color: #687480;
+    text-transform: uppercase;
+  }
+
+  &__date {
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    color: #1A5A4C;
+  }
+
+  &__title {
+    font-family: Montserrat, sans-serif;
+    font-size: 28px;
+    font-weight: 400;
+    line-height: 28px;
+    text-align: center;
+    padding-bottom: 20px;
+
+    @include onTablet {
+      text-align: left;
+      padding-bottom: 50px;
+      padding-inline: 55px;
+    }
+  }
+}