mate-academy · ly-manka · Aug 9, 2024 · Aug 11, 2024 · Aug 15, 2024 · Aug 16, 2024
diff --git a/src/assets/icons/arrow-right.svg b/src/assets/icons/arrow-right.svg
diff --git a/src/assets/icons/burger-menu.svg b/src/assets/icons/burger-menu.svg
diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg
diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg
diff --git a/src/assets/images/events/events-art-1-big.png b/src/assets/images/events/events-art-1-big.png
diff --git a/src/assets/images/events/events-art-1-small.png b/src/assets/images/events/events-art-1-small.png
diff --git a/src/assets/images/events/events-art-2-big.png b/src/assets/images/events/events-art-2-big.png
diff --git a/src/assets/images/events/events-art-2-small.png b/src/assets/images/events/events-art-2-small.png
diff --git a/src/assets/images/footer.png b/src/assets/images/footer.png
diff --git a/src/assets/images/galery/galery-art-1-big.png b/src/assets/images/galery/galery-art-1-big.png
diff --git a/src/assets/images/galery/galery-art-2-big.png b/src/assets/images/galery/galery-art-2-big.png
diff --git a/src/assets/images/galery/galery-art-3-big.png b/src/assets/images/galery/galery-art-3-big.png
diff --git a/src/assets/images/galery/galery-art-4-big.png b/src/assets/images/galery/galery-art-4-big.png
diff --git a/src/assets/images/national-museum.png b/src/assets/images/national-museum.png
diff --git a/src/assets/images/sunset-big.png b/src/assets/images/sunset-big.png
diff --git a/src/assets/images/sunset-medium.png b/src/assets/images/sunset-medium.png
diff --git a/src/assets/images/sunset-small.png b/src/assets/images/sunset-small.png
diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep
diff --git a/src/fonts/IBMPlexSans-Bold.ttf b/src/fonts/IBMPlexSans-Bold.ttf
diff --git a/src/fonts/IBMPlexSans-Light.ttf b/src/fonts/IBMPlexSans-Light.ttf
diff --git a/src/fonts/IBMPlexSans-Medium.ttf b/src/fonts/IBMPlexSans-Medium.ttf
diff --git a/src/fonts/IBMPlexSans-Regular.ttf b/src/fonts/IBMPlexSans-Regular.ttf
diff --git a/src/fonts/IBMPlexSans-SemiBold.ttf b/src/fonts/IBMPlexSans-SemiBold.ttf
diff --git a/src/fonts/Montserrat-Bold.ttf b/src/fonts/Montserrat-Bold.ttf
diff --git a/src/fonts/Montserrat-Regular.ttf b/src/fonts/Montserrat-Regular.ttf
diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff
diff --git a/src/images/.gitkeep b/src/images/.gitkeep
diff --git a/src/index.html b/src/index.html
@@ -1,19 +1,297 @@
 <!doctype html>
-<html lang="en">
+<html
+  lang="uk"
+  class="page"
+>
   <head>
     <meta charset="UTF-8" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Title</title>
+    <title>НАМУ</title>
     <link
       rel="stylesheet"
       href="./styles/main.scss"
     />
+    <script
+      src="scripts/main.js"
+      defer
+    ></script>
   </head>
-  <body>
-    <h1>Hello Mate Academy</h1>
-    <script src="scripts/main.js"></script>
+  <body class="body page__body">
+    <header class="header">
+      <div class="header__content">
+        <button
+          class="header__icon icon icon--menu"
+          href="#menu"
+        ></button>
+
+        <h1 class="header__title">Художній музей</h1>
+
+        <div class="header__tickets">
+          <a
+            href="#"
+            class="action-button"
+          >
+            <span class="action-button__text">Квитки</span>
+            <span class="box"></span>
+          </a>
+        </div>
+
+        <div class="header__events">
+          <div class="scroll-to-section">
+            <span class="scroll-to-section__decor"></span>
+
+            <span class="scroll-to-section__text">Події</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="header__banner">
+        <div class="header__logo">
+          <a
+            href="#"
+            class="logo"
+          >
+            <img
+              class="logo__img"
+              src="assets/icons/logo.svg"
+              alt="Логотип NAMU"
+            />
+          </a>
+        </div>
+        <div class="header__image"></div>
+      </div>
+    </header>
+
+    <div class="page__menu">
+      <aside class="menu">
+        <div class="menu__content">
+          <button
+            class="menu__icon menu__icon--outside icon icon--close"
+          ></button>
+
+          <nav class="menu__nav nav">
+            <button
+              class="menu__icon menu__icon--inside icon icon--close"
+            ></button>
+            <ul class="menu__nav-list nav__list">
+              <li class="nav__item">
+                <a
+                  href="#gallery"
+                  class="nav__link"
+                >
+                  Галерея
+                </a>
+              </li>
+
+              <li class="nav__item">
+                <a
+                  href="#events"
+                  class="nav__link"
+                >
+                  Виставки та події
+                </a>
+              </li>
+
+              <li class="nav__item">
+                <a
+                  href="#"
+                  class="nav__link"
+                >
+                  Про Нас
+                </a>
+              </li>
+
+              <li class="nav__item">
+                <a
+                  href="#"
+                  class="nav__link"
+                >
+                  Контакти
+                </a>
+              </li>
+            </ul>
+          </nav>
+
+          <div class="d-line menu__d-line"></div>
+
+          <div class="menu__schedule">
+            <section class="schedule">
+              <p class="schedule__title">Графік роботи</p>
+
+              <div class="schedule__content">
+                <ul class="schedule__hours">
+                  <li class="schedule__item">
+                    <p class="schedule__hour">
+                      <span class="bold-text">12:00 — 20:00</span>
+                      середа
+                    </p>
+                  </li>
+
+                  <li>
+                    <p>
+                      <span class="bold-text">12:00 — 20:00</span>
+                      четвер
+                    </p>
+                  </li>
+
+                  <li>
+                    <p>
+                      <span class="bold-text">12:00 — 20:00</span>
+                      п’ятниця
+                    </p>
+                  </li>
+
+                  <li>
+                    <p>
+                      <span class="bold-text">11:00 — 19:00</span>
+                      субота
+                    </p>
+                  </li>
+
+                  <li>
+                    <p>
+                      <span class="bold-text">11:00 — 19:00</span>
+                      неділя
+                    </p>
+                  </li>
+                </ul>
+
+                <p class="schedule__extra-info">
+                  <span class="bold-text">Вихідні:</span>
+                  понеділок, вівторок
+                  <br />
+                  Каса припиняє роботу за 1 годину до закриття музею
+                </p>
+              </div>
+            </section>
+          </div>
+        </div>
+      </aside>
+    </div>
+
+    <main class="main">
+      <section
+        class="main__section events"
+        id="events"
+      >
+        <div class="events__container">
+          <h2 class="events__title">Актуальні події</h2>
+
+          <div class="events__content">
+            <article class="events__exhibition exhibition">
+              <picture class="exhibition__picture">
+                <source
+                  media="(min-width: 768px)"
+                  srcset="assets/images/events/events-art-1-big.png"
+                />
+                <img
+                  src="assets/images/events/events-art-1-small.png"
+                  alt="Кримський берег"
+                  class="exhibition__image"
+                />
+              </picture>
+
+              <div class="exhibition__details">
+                <p class="exhibition__period">
+                  <span class="exhibition__type label">Виставка</span>
+                  <time
+                    datetime="2019-08-26/2019-11-29"
+                    class="date"
+                  >
+                    26.08-29.11.2019
+                  </time>
+                </p>
+
+                <h3 class="exhibition__title">Йду і повертаюсь</h3>
+
+                <p class="exhibition__description">
+                  Національний Художній Музей України презентує унікальну
+                  частину колекції Градобанку - українське мистецтво другої
+                  половини 1980-1995 років.
+                </p>
+              </div>
+            </article>
+
+            <article class="events__exhibition exhibition">
+              <picture class="exhibition__picture">
+                <source
+                  media="(min-width: 768px)"
+                  srcset="assets/images/events/events-art-2-big.png"
+                />
+                <img
+                  src="assets/images/events/events-art-2-small.png"
+                  alt="Казка про дівчину та павича"
+                  class="exhibition__image"
+                />
+              </picture>
+
+              <div class="exhibition__details">
+                <p class="exhibition__period">
+                  <span class="exhibition__type label">Виставка</span>
+                  <time
+                    datetime="2019-08-26/2019-11-29"
+                    class="date"
+                  >
+                    26.08-29.11.2019
+                  </time>
+                </p>
+
+                <h3 class="exhibition__title">І спогади і мрії</h3>
+                <p class="exhibition__description">
+                  Національний художній музей України до 100 річчя від дня
+                  народження видатної української художниці Тетяни Яблонської
+                  відкриває ретроспективну ювілейну виставку «І спогади і мрії».
+                </p>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <article class="events__lecture lecture">
+          <picture>
+            <source
+              media="(min-width: 1280px)"
+              srcset="assets/images/sunset-big.png"
+            />
+            <source
+              media="(min-width: 768px)"
+              srcset="assets/images/sunset-medium.png"
+            />
+            <img
+              src="assets/images/sunset-small.png"
+              alt="Захід сонця над озером"
+              class="lecture__image"
+            />
+          </picture>
+
+          <div class="lecture__card">
+            <div class="lecture__details">
+              <p class="label">Лекція</p>
+              <time
+                datetime="2019-08-26 11:00"
+                class="date"
+              >
+                26/08/2019 - 11:00
+              </time>
+            </div>
+
+            <h3 class="lecture__title">Від класицизму до романтизму</h3>
+          </div>
+        </article>
+        <div class="events__space"></div>
+      </section>
+
+      <section
+        class="main__section gallery"
+        id="gallery"
+      >
+        <h2 class="gallery__title">Галерея</h2>
+      </section>
+    </main>
+
+    <footer></footer>
   </body>
 </html>