mate-academy · valentin19939 · Mar 29, 2024 · Mar 29, 2024 · Mar 29, 2024
diff --git a/src/images/Group5.png b/src/images/Group5.png
diff --git a/src/images/arrow.png b/src/images/arrow.png
diff --git a/src/images/cross.png b/src/images/cross.png
diff --git a/src/images/facebook.png b/src/images/facebook.png
diff --git a/src/images/images1.png b/src/images/images1.png
diff --git a/src/images/images2.png b/src/images/images2.png
diff --git a/src/images/img_01.png b/src/images/img_01.png
diff --git a/src/images/img_05.png b/src/images/img_05.png
diff --git a/src/images/img_06.png b/src/images/img_06.png
diff --git a/src/images/img_07.png b/src/images/img_07.png
diff --git a/src/images/img_08.jpg b/src/images/img_08.jpg
diff --git a/src/images/img_09.jpg b/src/images/img_09.jpg
diff --git a/src/images/img_099.png b/src/images/img_099.png
diff --git a/src/images/img_99.png b/src/images/img_99.png
diff --git a/src/images/img_menu.png b/src/images/img_menu.png
diff --git a/src/images/instagram.png b/src/images/instagram.png
diff --git a/src/images/language.png b/src/images/language.png
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/scroll_up.png b/src/images/scroll_up.png
diff --git a/src/images/telegram.png b/src/images/telegram.png
diff --git a/src/images/twitter.png b/src/images/twitter.png
diff --git a/src/index.html b/src/index.html
@@ -1,19 +1,341 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" id="html">
   <head>
     <meta charset="UTF-8" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Title</title>
+    <title>Museum 2</title>
     <link
       rel="stylesheet"
       href="./styles/main.scss"
     />
   </head>
-  <body>
-    <h1>Hello Mate Academy</h1>
+  <body class="page__body">
+    <header class="header">
+      <div class="header__top">
+        <a href="#">
+          <img
+            src="images/logo.png"
+            alt="namu"
+          />
+        </a>
+
+        <a
+          href="#menu"
+          class="icon icon--menu"
+        ></a>
+      </div>
+
+      <p class="text header__text--1">10 серпня - 10 листопада</p>
+      <h1 class="header__title">Мистецтво ХІХ - ХХ ст.</h1>
+      <p class="text header__text--2">
+        Внесок українських митців у світову культуру 19-20 ст.
+      </p>
+
+      <button class="header__button">Купити квиток</button>
+
+      <div class="header__data--line">
+        <div class="header__data">10.08 - 10.10</div>
+        <div class="header__line"></div>
+      </div>
+
+      <div class="header__img"></div>
+    </header>
+
+    <aside
+      class="menu page__menu"
+      id="menu"
+    >
+      <div class="menu__top">
+        <a href="#">
+          <img
+            src="images/logo.png"
+            alt="namu"
+          />
+        </a>
+
+        <div class="menu__icons">
+          <a
+            href="#"
+            class="icons icons--close"
+          ></a>
+          <a
+            href="#"
+            class="icons icons--language"
+          ></a>
+        </div>
+      </div>
+
+      <div class="menu__text">
+        <div class="menu__part1">
+          <p class="menu__text--1">Розклад сьогодні:</p>
+          <p class="menu__text--bold">12:00 - 19:00</p>
+        </div>
+
+        <div class="menu__part2">
+          <p class="menu__text--1">Адреса:</p>
+          <p class="menu__text--bold">Київ, вул. М. Грушевського, 6</p>
+        </div>
+      </div>
+
+      <div class="menu__section">
+        <a
+          class="menu__section--item"
+          href="#show"
+        >
+          Актуальні виставки
+        </a>
+        <a
+          class="menu__section--item"
+          href="#events"
+        >
+          Найближчі події
+        </a>
+        <a
+          class="menu__section--item"
+          href="#news"
+        >
+          Новини
+        </a>
+      </div>
+
+      <div class="menu__line"></div>
+
+      <button class="button menu__button">Купити квиток</button>
+
+      <div class="menu__img"></div>
+    </aside>
+
+    <main class="main">
+      <section
+        class="show"
+        id="show"
+      >
+        <div class="show__top">
+          <h2 class="show__text">Актуальні виставки</h2>
+          <button class="show__button">Архів виставок</button>
+        </div>
+
+        <div class="show__container">
+          <div class="show__container1">
+            <div class="show__img one"></div>
+
+            <p class="show__text1">11.07 - 22.09</p>
+            <h3 class="show__text2">Кураторська виставка “Ангели”</h3>
+            <p class="show__text3">
+              Виставковий проект «Ангели» – знакова подія для української
+              культури і водночас наймасштабніший...
+            </p>
+
+            <button class="show__button2">Купити квиток</button>
+          </div>
+
+          <div class="show__container2">
+            <div class="show__img two"></div>
+
+            <p class="show__text1">Діє постійно</p>
+            <h3 class="show__text2">Мистецтво ХХ ст. — XXI ст.</h3>
+            <p class="show__text3">
+              Знакові роботи Алли Горської, Миколи Самокиша, Федора Кричевського
+              та інших митців.
+            </p>
+
+            <button class="show__button2">Купити квиток</button>
+            <button class="show__button1">Архів виставок</button>
+          </div>
+        </div>
+      </section>
+
+      <section
+        class="events"
+        id="events"
+      >
+        <div class="events__top">
+          <h2 class="events__text">Найближчі події</h2>
+          <button class="events__button">Календар подій</button>
+        </div>
+
+        <div class="events__container1">
+          <div class="events__img one1"></div>
+          <div class="events__box1">
+            <p class="events__text1">14.08 о 13:00</p>
+            <h3 class="events__text2">
+              Кураторські екскурсії від Павла Гудімова
+            </h3>
+            <p class="events__text3">
+              Таємниці підготовки, історії експонатів, магія дійства до і в
+              момент вашої присутності – розгортатиметься...
+            </p>
+
+            <button class="events__button2">Зареєструватись</button>
+          </div>
+        </div>
+
+        <div class="events__container2">
+          <div class="events__img two2"></div>
+          <div class="events__box2">
+            <p class="events__text1">16.08 о 13:00</p>
+            <h3 class="events__text2">Майстер-клас “Подорож до Австралії”</h3>
+            <p class="events__text3">
+              Цієї неділі о 14:00 на арт-мандрівників чекає останній пункт
+              кругосвітньої подорожі - Австралія.
+            </p>
+
+            <button class="events__button2">Зареєструватись</button>
+            <button class="events__button1">Календар подій</button>
+          </div>
+        </div>
+      </section>
+
+      <section class="visit">
+        <div class="visit__container">
+          <div class="visit__bg"></div>
+          <div class="visit__container2">
+            <h1 class="visit__text">Сплануйте візит до музею</h1>
+            <p class="visit__text1">
+              Оберіть зручний день, зареєструйтесь на події, що цікавлять,
+              купіть квиток заздалегідь, щоб ніщо не завадило вам
+              насолоджуватись мистецтвом.
+            </p>
+
+            <button class="visit__button2">Почати</button>
+          </div>
+        </div>
+      </section>
+
+      <section
+        class="news"
+        id="news"
+      >
+        <div class="news__top">
+          <h2 class="news__text">Новини</h2>
+          <button class="news__button">Усі новини</button>
+        </div>
+
+        <div class="news__container">
+          <div class="news__container1">
+            <div class="news__img one01"></div>
+
+            <p class="news__text1">9 серпня 2019</p>
+            <h3 class="news__text2">Оголошення переможця</h3>
+            <p class="news__text3">
+              Друзі, сьогодні п'ятниця! А це означає, що час оголосити переможця
+              розіграшу...
+            </p>
+          </div>
+
+          <div class="news__container2">
+            <div class="news__img two02"></div>
+
+            <p class="news__text1">9 серпня 2019</p>
+            <h3 class="news__text2">Міжнародний день котів</h3>
+            <p class="news__text3">
+              Музей з левами не може просто так взяти і пропустити Міжнародний
+              день котів!
+            </p>
+
+            <button class="news__button1">Усі новини</button>
+          </div>
+        </div>
+      </section>
+      <section class="digest">
+        <h2 class="digest__text">Підпишіться на дайджест</h2>
+        <p class="digest__text1">
+          Першими дізнавайтесь про новини музею та розіграші, отримуйте
+          запрошення на події та читайте статті від кураторів
+        </p>
+        <input
+          type="text"
+          name="mail"
+          placeholder="e-mail"
+          class="digest__mail"
+        />
+        <br>
+        <button class="digest__button2">Підписатись</button>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <div class="footer__container">
+        <div class="footer__one">
+          <h2 class="footer__text">Контакти</h2>
+          <p class="footer__text1">
+            <a
+              class="footer__link"
+              target="_blank"
+              href="https://www.google.com/maps/place/%D1%83%D0%BB.+%D0%9C%D0%B8%D1%85%D0%B0%D0%B8%D0%BB%D0%B0+%D0%93%D1%80%D1%83%D1%88%D0%B5%D0%B2%D1%81%D0%BA%D0%BE%D0%B3%D0%BE,+6,+%D0%9A%D0%B8%D0%B5%D0%B2,+02000/@50.4494397,30.5307593,17z/data=!3m1!4b1!4m6!3m5!1s0x40d4ce52445a8315:0x5e30ef474eddac89!8m2!3d50.4494397!4d30.5307593!16s%2Fg%2F11l76wtstx?entry=ttu"
+            >
+              Київ,
+              <br />
+              вул. М. Грушевського, 6
+            </a>
+          </p>
+
+          <a
+            class="footer__info"
+            href="tel:278-13-57"
+          >
+            тел. 278-13-57, 278-74-54
+          </a>
+          <br />
+          <a
+            class="footer__mail"
+            href="mailto:info@namu.kiev.ua"
+          >
+            info@namu.kiev.ua
+          </a>
+
+          <div class="footer__social-icons">
+            <div class="footer__facebook"></div>
+            <div class="footer__twiter"></div>
+            <div class="footer__telegram"></div>
+            <div class="footer__instagram"></div>
+          </div>
+        </div>
+
+        <div class="footer__two">
+          <h2 class="footer__text-work">Розклад роботи</h2>
+          <p class="footer__text-days">
+            ПН: вихідний
+            <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
+          </p>
+        </div>
+
+        <div class="footer__three">
+          <h2 class="footer__text-three">Головна</h2>
+          <div class="footer__text-items">
+            <p>Виставки</p>
+            <p>Події</p>
+            <p>Новини</p>
+          </div>
+        </div>
+      </div>
+
+
+      <div class="footer__bottom">
+        <div class="footer__bottom1">
+          <p class="footer__copy">© 2010 — 2020</p>
+          <p class="footer__privacy">Privacy — Terms</p>
+        </div>
+        <a
+          href="#html"
+          class="footer__back"
+        ></a>
+      </div>
+    </footer>
     <script src="scripts/main.js"></script>
   </body>
 </html>
diff --git a/src/styles/button.scss b/src/styles/button.scss
@@ -0,0 +1,28 @@
+button {
+  font-family: Raleway, sans-serif;
+  background-color: $c-orenge;
+  border: 2px solid transparent;
+  width: 100%;
+  height: 60px;
+  color: $c-white;
+  font-size: 16px;
+  line-height: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.3s;
+
+  margin-top: 40px;
+
+  &:hover {
+    background-color: $c-orenge-hover;
+    transform: scale(1.1);
+  }
+
+  &:active {
+    background-color: $c-orenge-pressed;
+  }
+
+  &:disabled {
+    background-color: $c-orenge-disabled;
+  }
+}