mate-academy · ani-wska · Mar 3, 2026 · Mar 3, 2026 · Mar 5, 2026 · Mar 5, 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/.gitignore b/.gitignore
@@ -13,3 +13,5 @@ raw_reports
 reports
 cypress/screenshots
 cypress/videos
+main.css
+main.css.map
diff --git a/index.html b/index.html
@@ -1,22 +1,194 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0"
-    />
-    <title>Miami</title>
-    <link
-      rel="stylesheet"
-      href="src/styles/main.scss"
-    />
-    <script
-      src="src/scripts/main.js"
-      defer
-    ></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="src/images/Logo.svg"
+    type="image/svg">
+    <title>Boost</title>
+    <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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:wght@753&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="src/styles/main.css">
   </head>
   <body>
-    <h1>Miami</h1>
+    <header class="header" id="header">
+      <nav class="navigation header__navigation">
+        <a href="">
+          <img class="navigation__logo" src="src/images/Logo.svg"
+          alt="Logo">
+        </a>
+        <a class="phone navigation__phone" href="tel:+1 234 555-55-55"><span class="phone__label">+1 234 555-55-55</span><img src="src/images/Icon-Phone-call.svg" alt="Phone"></a>
+        <a href="#menu" class="burger navigation__icon"><span class="burger__label">Open menu</span></a>
+      </nav>
+      <h1 class="title title--decorated header__title">The world shades.<br>Your music shines.</h1>
+    </header>
+
+    <div class="menu" id="menu">
+      <nav class="navigation">
+        <img class="navigation__logo" src="src/images/Logo.svg"
+        alt="Logo">
+        <a href="#header">
+          <img class="navigation__icon" src="src/images/Icon-Close.svg"
+          alt="Menu">
+        </a>
+      </nav>
+
+      <nav class="links menu__links">
+        <ul class="links__list">
+          <li class="links__item"><a href="#header" class="links__link">Home</a></li>
+          <li class="links__item"><a href="#recommended" class="links__link">Recommended</a></li>
+          <li class="links__item"><a href="#categories" class="links__link">Categories</a></li>
+          <li class="links__item"><a href="#how-to-buy" class="links__link">How to buy</a></li>
+          <li class="links__item"><a href="#contacts" class="links__link">Contacts</a></li>
+        </ul>
+      </nav>
+
+      <p class="menu__paragraph">+1 234 5555-55-55</p>
+      <p class="menu__paragraph">
+        <a href="#" class="menu__link">call to order</a>
+      </p>
+
+    </div>
+
+    <main class="main">
+      <h2 id="recommended" class="title title--secondary">Recommended</h2>
+
+      <section class="recommended">
+        <article class="article">
+          <!-- <div class="pictures"> -->
+            <img class="article__image" src="src/images/Image1.jpg" alt="">
+          <!-- </div> -->
+          <p class="article__name">Bose portable Smart speaker</p>
+          <p class="article__category">Smart home</p>
+          <p class="article__price">$ 399.00</p>
+        </article>
+
+        <article class="article">
+          <!-- <div class="pictures"> -->
+            <img class="article__image" src="src/images/Image2.jpg" alt="">
+          <!-- </div> -->
+          <p class="article__name">SoundLink Flex Bluetooth speaker</p>
+          <p class="article__category">Portable bluetooth</p>
+          <p class="article__price">$ 149.00</p>
+        </article>
+
+        <article class="article">
+          <!-- <div class="pictures"> -->
+            <img class="article__image" src="src/images/Image3.jpg"
+            alt="Picture 1">
+          <!-- </div> -->
+          <p class="article__name">SoundLink Color Bluetooth speaker II</p>
+          <p class="article__category">Portable bluetooth</p>
+          <p class="article__price">$ 129.00</p>
+        </article>
+      </section>
+
+      <h2 id="categories" class="title title--third">Browse Bose<br>products by<br>category</h2>
+      <h2 id="categories" class="title title--hidden">Browse Bose<br>products by category</h2>
+
+      <section class="categories">
+        <article class="article">
+          <div class="article__grid article__grid--1">
+            <div class="article__image-wrapper article__image-wrapper--big">
+              <img src="src/images/picture-1.svg" class="pictures__item"
+              alt="">
+            </div>
+            <div class="article__image-wrapper article__image-wrapper--small">
+              <img src="src/images/picture-2.svg" class="pictures__item"
+              alt="">
+            </div>
+          </div>
+          <p class="article__product">Headphones & earbuds</p>
+        </article>
+
+        <article class="article">
+          <div class="article__grid article__grid--1">
+            <div class="article__image-wrapper article__image-wrapper--big">
+              <img src="src/images/picture-3.svg" class="pictures__item"
+              alt="">
+            </div>
+            <div class="article__image-wrapper article__image-wrapper--small">
+              <img src="src/images/picture-4.svg" class="pictures__item"
+              alt="">
+            </div>
+          </div>
+          <p class="article__product">Speakers</p>
+        </article>
+
+        <article class="article">
+          <div class="article__grid article__grid--2">
+            <div class="article__image-wrapper article__image-wrapper--small">
+              <img src="src/images/picture-5.svg" class="pictures__item"
+              alt="">
+            </div>
+            <div class="article__image-wrapper article__image-wrapper--big">
+              <img src="src/images/picture-6.svg" class="pictures__item"
+              alt="">
+            </div>
+          </div>
+          <p class="article__product">Audio sunglasses</p>
+        </article>
+      </section>
+
+      <a href="#" class="button">View all</a>
+
+
+      <section class="article__buy">
+        <h2  id="how-to-buy" class="article__buy article__buy--title">Why buy direct<br>from Bose</h2>
+        <p class="article__name article__name--secondary">Free 2-day shipping and returns</p>
+        <p class="article__name article__name--secondary">90-day risk-free trial</p>
+        <p class="article__name article__name--secondary">World class customer service</p>
+        <p class="article__name article__name--secondary">My Bose account management</p>
+        <p class="article__paragraph">A great product is more than what’s in the box. It’s a promise of premium performance, world-class support, and everything you expect from a trusted brand. It’s just one of many reasons why you’ll shop with confidence on Bose.com.</p>
+      </section>
+
+      <h2 id="contacts" class="title title--secondary">Contact us</h2>
+
+      <section class="contacts">
+        <form class="contacts form">
+          <div class="form__item">
+            <label class="form__label" for="name">Name</label>
+            <input id="name" class="form__input"
+            type="text" placeholder="Name"
+            required>
+          </div>
+
+          <div class="form__item">
+            <label class="form__label" for="email">Email</label>
+            <input id="email" class="form__input"
+            type="email" placeholder="Email"
+            required>
+          </div>
+
+          <div class="form__item">
+            <label class="form__label" for="message">Message</label>
+            <textarea id="message" class="form__textarea"
+            placeholder="Message" required></textarea>
+          </div>
+
+          <button class="button button--secondary" type="submit"
+          onclick="this.classList.toggle('active')">Send</button>
+        </form>
+
+        <adress class="contacts adress form">
+          <div class="form__adress">
+            <h3 class="adress__label">Phone</h3>
+            <a href="tel:+12345555555" class="adress__content adress__content--phone">+1 234 5555-55-55</a>
+            <h3 class="adress__label">Email</h3>
+            <p class="adress__content">hello@miami.com</p>
+            <h3 class="adress__label">Address</h3>
+            <a href="https://maps.google.com/?q=400+First+Ave,+Suite+700,+Minneapolis+MN+55401" class="adress__content adress__content--adress" target="_blank">
+              400 first ave.<br>suite 700<br>Minneapolis MN 55401
+            </a>
+          </div>
+        </adress>
+      </section>
+
+    </main>
+
+    <footer class="footer"></footer>
+
   </body>
+  <script src="src/scripts/main.js"></script>
 </html>
diff --git a/src/images/Icon-Burger-menu-hover.svg b/src/images/Icon-Burger-menu-hover.svg
diff --git a/src/images/Icon-Burger-menu.svg b/src/images/Icon-Burger-menu.svg
diff --git a/src/images/Icon-Close.svg b/src/images/Icon-Close.svg
diff --git a/src/images/Icon-Phone-call.svg b/src/images/Icon-Phone-call.svg
diff --git a/src/images/Image1.jpg b/src/images/Image1.jpg
diff --git a/src/images/Image2.jpg b/src/images/Image2.jpg
diff --git a/src/images/Image3.jpg b/src/images/Image3.jpg
diff --git a/src/images/Logo.svg b/src/images/Logo.svg
diff --git a/src/images/Sound-waves.svg b/src/images/Sound-waves.svg
diff --git a/src/images/background-image.jpg b/src/images/background-image.jpg
diff --git a/src/images/background1020.jpg b/src/images/background1020.jpg
diff --git a/src/images/cross.svg b/src/images/cross.svg
diff --git a/src/images/crown.svg b/src/images/crown.svg
diff --git a/src/images/favicon.png b/src/images/favicon.png
diff --git a/src/images/footer.jpg b/src/images/footer.jpg
diff --git a/src/images/footer1.svg b/src/images/footer1.svg
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/menu.svg b/src/images/menu.svg
diff --git a/src/images/menu_hover.svg b/src/images/menu_hover.svg
diff --git a/src/images/phone.svg b/src/images/phone.svg
diff --git a/src/images/photos/1.jpg b/src/images/photos/1.jpg
diff --git a/src/images/photos/2.jpg b/src/images/photos/2.jpg
diff --git a/src/images/photos/3.jpg b/src/images/photos/3.jpg
diff --git a/src/images/photos/4.jpg b/src/images/photos/4.jpg
diff --git a/src/images/photos/5.jpg b/src/images/photos/5.jpg
diff --git a/src/images/photos/6.jpg b/src/images/photos/6.jpg
diff --git a/src/images/picture-1.svg b/src/images/picture-1.svg
diff --git a/src/images/picture-2.svg b/src/images/picture-2.svg
diff --git a/src/images/picture-3.svg b/src/images/picture-3.svg
diff --git a/src/images/picture-4.svg b/src/images/picture-4.svg
diff --git a/src/images/picture-5.svg b/src/images/picture-5.svg
diff --git a/src/images/picture-6.svg b/src/images/picture-6.svg
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -1 +1,10 @@
+console.log('Cześć, tu plik main.js - melduję się!');
+
 'use strict';
+window.addEventListener('hashchange', () => {
+      if (window.location.hash === '#menu') {
+        document.body.classList.add('page__body--with-menu');
+      } else {
+        document.body.classList.remove('page__body--with-menu');
+      }
+    });
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
@@ -0,0 +1,15 @@
+@use './utils/reset.scss';
+@use './blocks/title.scss';
+@use './blocks/header.scss';
+@use './blocks/main.scss';
+@use './blocks/article.scss';
+@use './blocks/pictures.scss';
+@use './blocks/button.scss';
+@use './blocks/form.scss';
+@use './blocks/adress.scss';
+@use './blocks/footer.scss';
+@use './blocks/navigation.scss';
+@use './blocks/menu.scss';
+@use './blocks/links.scss';
+@use './blocks/burger.scss';
+@use './blocks/phone.scss';
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss