mate-academy · Eksonurit · Apr 29, 2026 · May 6, 2026 · 2pasha · Apr 29, 2026
diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template
@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data
diff --git a/README.md b/README.md
@@ -49,7 +49,7 @@ Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Ple
 11. `git push origin develop` - to send you code for PR.
 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo.
 13. Replace `<your_account>` with your Github username in the
-  [DEMO LINK](https://<your_account>.github.io/Museum/).
+  [DEMO LINK](https://Eksonurit.github.io/Museum/).
 14. Copy `DEMO LINK` to the PR description.
 
 > To update you PR repeat steps 7-11.
diff --git a/index.html b/index.html
@@ -6,14 +6,162 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Title</title>
+    <title>Museum</title>
     <link
       rel="stylesheet"
       href="src/styles/main.scss"
     />
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="src/icons/NA MU.svg"
+    />
   </head>
   <body>
-    <h1>Hello Mate Academy</h1>
-    <script src="src/scripts/main.js"></script>
+    <main>
+    <header class="header">
+      <a
+        class="burger-menu"
+        href="#aside-menu"
+        id="header-burger"
+      ></a>
+      <section class="header__content">
+        <div class="header__content__inner mt-md-1">
+          <img
+            src="src/icons/NA MU.svg"
+            alt="Museum Logo"
+            class="header__logo"
+          />
+        </div>
+
+        <aside
+          class="aside__menu text-white"
+          id="aside-menu"
+        >
+        <div class="menu">
+          <nav class="text-white menu__nav">
+            <a
+              class="burger-menu-close"
+              id="aside-burger"
+              href="#"
+            ></a>
+            <ul class="menu__list text-white list row g-0 flew-wrap gx-md-5">
+              <li class="menu__item col-6 col-md-6 col-lg-6">
+                <a
+                  class="text-white"
+                  href="#"
+                >
+                  Галерея
+                </a>
+              </li>
+
+              <li class="menu__item col-6 col-md-6 col-lg-6">
+                <a
+                  class="text-white"
+                  href="#"
+                >
+                  Про Нас
+                </a>
+              </li>
+
+              <li class="menu__item col-6 col-md-6 col-lg-6">
+                <a
+                  class="text-white"
+                  href="#"
+                >
+                  Виставки та події
+                </a>
+              </li>
+
+              <li class="menu__item col-6 col-md-6 col-lg-6">
+                <a
+                  class="text-white"
+                  href="#"
+                >
+                  Контакти
+                </a>
+              </li>
+            </ul>
+          </nav>
+          <div class="divider"></div>
+          <div class="schedule">
+            <span class="shedule-title">Графік роботи</span>
+            <ul class="schedule__list list">
+              <li class="schedule__list__element">
+                <span class="fw-semibold">12:00 - 20:00</span>
+                середа
+              </li>
+              <li class="schedule__list__element">
+                <span class="fw-semibold">12:00 - 20:00</span>
+                четвер
+              </li>
+              <li class="schedule__list__element">
+                <span class="fw-semibold">12:00 - 20:00</span>
+                п'ятниця
+              </li>
+              <li class="schedule__list__element">
+                <span class="fw-semibold">11:00 - 19:00</span>
+                субота
+              </li>
+              <li class="schedule__list__element">
+                <span class="fw-semibold">11:00 - 19:00</span>
+                неділя
+              </li>
+            </ul>
+            <div class="schedule-desc">
+              <span class="fw-semibold">Вихідні:</span>
+              понеділок, вівторок
+              <br />
+              Каса припиняє роботу за 1 годину до закриття музею
+            </div>
+          </div>
+          </div>
+        </aside>
+        <div
+          class="menu-overlay"
+          id="menu-overlay"
+        ></div>
+      </section>
+      <div class="header__main title-wrapper row g-0 mt-xl-6">
+        <h1 class="col-12 text-center text-md-start header__title">ХУДОЖНІЙ МУЗЕЙ</h1>
+        <div class="header__events d-none d-xl-block mt-xl-5">
+          <span class="header__events-span">ПОДІЇ</span>
+          <div class="header__events-line"></div>
+        </div>
+        <button class="ticket__button position-relative col-12">
+          <span class="ticket__button-text">КВИТКИ</span>
+          <div class="button-arrow for-ticket-block">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clip-path="url(#clip0_320_174)">
+                <path
+                  d="M8.59 16.59L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.59Z"
+                  fill="#D7DDE3"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_320_174">
+                  <rect
+                    width="24"
+                    height="24"
+                    fill="white"
+                  />
+                </clipPath>
+              </defs>
+            </svg>
+          </div>
+        </button>
+      </div>
+    </header>
+    </main>
+    <script
+      src="src/scripts/main.js"
+      type="module"
+    ></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "@mate-academy/eslint-config": "latest",
     "@mate-academy/jest-mochawesome-reporter": "^1.0.0",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^2.1.1",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/stylelint-config": "latest",
     "cypress": "^13.13.0",
     "eslint": "^8.57.0",
@@ -55,5 +55,8 @@
       "backstop": false,
       "cypress": true
     }
+  },
+  "dependencies": {
+    "bootstrap": "^5.3.8"
   }
 }
diff --git a/src/fonts/IBMPlexSans-Bold.woff2 b/src/fonts/IBMPlexSans-Bold.woff2
diff --git a/src/fonts/IBMPlexSans-Light.woff2 b/src/fonts/IBMPlexSans-Light.woff2
diff --git a/src/fonts/IBMPlexSans-Medium.woff2 b/src/fonts/IBMPlexSans-Medium.woff2
diff --git a/src/fonts/IBMPlexSans-Regular.woff2 b/src/fonts/IBMPlexSans-Regular.woff2
diff --git a/src/fonts/IBMPlexSans-SemiBold.woff2 b/src/fonts/IBMPlexSans-SemiBold.woff2
diff --git a/src/fonts/Montserrat-Bold.woff2 b/src/fonts/Montserrat-Bold.woff2
diff --git a/src/fonts/Montserrat-Regular.woff2 b/src/fonts/Montserrat-Regular.woff2
diff --git a/src/icons/NA MU.svg b/src/icons/NA MU.svg
diff --git a/src/icons/Vector.svg b/src/icons/Vector.svg
diff --git a/src/icons/facebook-letter-logo.svg b/src/icons/facebook-letter-logo.svg
diff --git a/src/icons/instagram (3).svg b/src/icons/instagram (3).svg
diff --git a/src/images/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv-10-1800x1200.png b/src/images/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv-10-1800x1200.png
diff --git a/src/images/Rectangle 13.3.png b/src/images/Rectangle 13.3.png
diff --git a/src/images/Rectangle 13.4.png b/src/images/Rectangle 13.4.png
diff --git a/src/images/Rectangle 13.5.png b/src/images/Rectangle 13.5.png
diff --git a/src/images/Rectangle 2.1.png b/src/images/Rectangle 2.1.png
diff --git a/src/images/Rectangle 3.1.png b/src/images/Rectangle 3.1.png
diff --git a/src/images/Rectangle 4.1.png b/src/images/Rectangle 4.1.png
diff --git a/src/images/boat-desktop.png b/src/images/boat-desktop.png
diff --git a/src/images/boat-mobile.jpg b/src/images/boat-mobile.jpg
diff --git a/src/images/boat-tablet.png b/src/images/boat-tablet.png
diff --git a/src/images/subscribe-img-desktop.png b/src/images/subscribe-img-desktop.png
diff --git a/src/images/subscribe-img-mobile.png b/src/images/subscribe-img-mobile.png
diff --git a/src/images/subscribe-img-tablet.png b/src/images/subscribe-img-tablet.png
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -1 +1,57 @@
 'use strict';
+import '../styles/main.scss';
+import Swiper from 'swiper';
+import { Navigation, Pagination } from 'swiper/modules';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+
+// eslint-disable-next-line no-new
+new Swiper('.swiper', {
+  modules: [Navigation, Pagination],
+
+  slidesPerView: 1.1,
+  spaceBetween: 20,
+
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+  pagination: {
+    el: '.swiper-pagination',
+    clickable: true,
+  },
+  breakpoints: {
+    768: {
+      slidesPerView: 2.1,
+    },
+    1200: {
+      slidesPerView: 3.5,
+    },
+  },
+});
+
+const removeOverlay = () => {
+  menuOverlay.classList.remove('is-active');
+};
+
+const openMenuButton = document.getElementById('header-burger');
+
+const menuOverlay = document.getElementById('menu-overlay');
+
+openMenuButton.addEventListener('click', () => {
+  menuOverlay.classList.add('is-active');
+});
+
+const closeMenuButton = document.getElementById('aside-burger');
+
+closeMenuButton.addEventListener('click', removeOverlay);
+
+const links = document.querySelectorAll('a');
+
+links.forEach((link) => {
+  link.addEventListener('click', removeOverlay);
+});
+
+openMenuButton.removeEventListener('click', removeOverlay);