mate-academy · kmarchlewicz · Nov 10, 2025 · Nov 10, 2025 · Nov 10, 2025 · Nov 10, 2025
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,2 @@
+/backstop_data
 /dist
-/node_modules
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
@@ -1,15 +1,17 @@
+# IDE
 .idea
 .vscode
-build
-dist
+
+# Node
 node_modules
-.DS_Store
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# MacOS
+.DS_Store
 
-raw_reports
-reports
-cypress/screenshots
-cypress/videos
+# Generated files
+backstop_data
+dist
+.cache
+.parcel-cache
+styles.css
+styles.css.map
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -1,22 +1,301 @@
-<!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">
+    <title>Bang & Olufsen</title>
+    <link rel="icon"
+          type="image/x-icon"
+          href="favicon.ico">
+    <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=Manrope:wght@200..800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+    <script type="module" src="src/scripts/main.js"></script>
   </head>
-  <body>
-    <h1>Miami</h1>
+  <body class="page">
+    <header class="header" id="home">
+      <nav class="navigation header__navigation">
+        <div class="navigation__logo">
+          <a class="logo navigation__item" href="#home">
+            <img
+              src="src/images/logo.png"
+              class="logo__image"
+              alt="Bang & Olufsen logo"
+            />
+          </a>
+        </div>
+        <div class="navigation__icons">
+          <a class="phone navigation__item" href="tel:+1 234 555-55-55">
+            <span class="phone__label">+1 234 555-55-55</span>
+            <img
+              src="src/images/phone.svg"
+              class="navigation__icon phone__icon"
+              alt="Call us"
+            />
+          </a>
+          <a class="burger navigation__item" href="#menu">
+            <span class="burger__label">Open menu</span>
+          </a>
+        </div>
+      </nav>
+      <h1 class="title header__title">Your senses.<br>Set free.</h1>
+    </header>
+
+    <div class="menu" id="menu">
+      <nav class="navigation menu__navigation">
+        <div class="navigation__logo">
+          <a class="logo navigation__item" href="#home">
+            <img
+              src="src/images/logo.png"
+              class="logo__image"
+              alt="Bang & Olufsen logo"
+            />
+          </a>
+        </div>
+        <div class="navigation__icons">
+          <a class="navigation__item navigation__item--hidden" href="">
+            <img
+              src="src/images/phone.svg"
+              class="navigation__icon"
+              alt="Call us"
+            />
+          </a>
+          <a class="close navigation__item" href="#home">
+            <img
+              src="src/images/close.svg"
+              class="close__icon navigation__icon"
+              alt="Open menu"
+            />
+          </a>
+        </div>
+      </nav>
+
+      <nav class="links menu__links">
+        <ul class="links__list">
+          <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="#about-us" class="links__link">About Us</a>
+          </li>
+          <li class="links__item">
+            <a href="#contact" class="links__link">Contact Us</a>
+          </li>
+        </ul>
+      </nav>
+
+      <p class="menu__paragraph">
+        <a class="phone navigation__item" href="tel:+1 234 555-55-55">+1 234 5555-55-55</a>
+      </p>
+      <p class="menu__paragraph">
+        <a class="menu__call-link" href="">call to order</a>
+      </p>
+    </div>
+
+    <main class="main">
+      <section class="recommended" id="recommended">
+        <h2 class="title title--second recommended__title">Recommended</h2>
+        <article class="recommended__article article">
+          <div class="article__item">
+            <img
+              class="article__picture"
+              src="src/images/photos/product-1.jpg"
+              alt="Beosound A5 speaker"
+            />
+          </div>
+          <h3 class="title title--third">Beosound A5</h3>
+          <p class="article__description">
+            Huge sound anywhere – in the home or outdoors.
+            Beosound A5 is a Wi-Fi and Bluetooth speaker
+            with long-lasting battery and wireless charging built in.
+          </p>
+          <p class="article__price">1299.00</p>
+        </article>
+
+        <article class="recommended__article article">
+          <div class="article__item">
+            <img
+              class="article__picture"
+              src="src/images/photos/product-2.jpg"
+              alt="Beoplay HS headphones"
+            />
+          </div>
+          <h3 class="title title--third">Beoplay HX</h3>
+          <p class="article__description">
+            Wireless noise-cancelling headphones.
+            Listen in comfort whether you're on a call,
+            working from home or taking a moment for yourself.
+          </p>
+          <p class="article__price">499.00</p>
+        </article>
+
+        <article class="recommended__article article article--last">
+          <div class="article__item">
+            <img
+              class="article__picture"
+              src="src/images/photos/product-3.jpg"
+              alt="Beosound Theatre soundbarv"
+            />
+          </div>
+          <h3 class="title title--third">Beosound Theatre</h3>
+          <p class="article__description">
+            Four patent-pending acoustic innovations
+            in one sleek soundbar envelop you in sound
+            from every angle. Made to fit any TV,
+            and last for generations.
+          </p>
+          <p class="article__price">3199.00</p>
+        </article>
+      </section>
+
+      <section class="categories" id="categories">
+        <h2 class="title title--second categories__title">Sound. Vision.<br>It's your pick.</h2>
+
+        <div class="categories__group">
+          <article class="categories__item">
+            <img
+              class="categories__item-picture"
+              src="src/images/photos/category-1.jpg"
+              alt="Portable speaker 1"
+            />
+          </article>
+          <article class="categories__item">
+            <img
+              class="categories__item-picture"
+              src="src/images/photos/category-2.jpg"
+              alt="Portable speaker 2"
+            />
+          </article>
+          <h4 class="title title--fourth">Portable speakers</h4>
+        </div>
+
+        <div class="categories__group">
+          <article class="categories__item">
+            <img
+              class="categories__item-picture"
+              src="src/images/photos/category-3.jpg"
+              alt="Earphone 1"
+            />
+          </article>
+          <article class="categories__item">
+            <img
+              class="categories__item-picture"
+              src="src/images/photos/category-4.jpg"
+              alt="Earphone 2"
+            />
+          </article>
+          <h4 class="title title--fourth">Earphones</h4>
+        </div>
+
+        <div class="categories__group">
+          <article class="categories__item">
+            <img
+              class="categories__item-picture"
+              src="src/images/photos/category-5.jpg"
+              alt="Smart Home 1"
+            />
+          </article>
+          <article class="categories__item">
+            <img
+              class="categories__item-picture"
+              src="src/images/photos/category-6.jpg"
+              alt="Smart Home 2"
+            />
+          </article>
+          <h4 class="title title--fourth">Smart Home</h4>
+        </div>
+
+        <a class="categories__button button button--full" href="javascript:void(0)">View all</a>
+      </section>
+
+      <section class="about-us" id="about-us">
+        <article class="about-us__picture"></article>
+        <article class="about-us__info">
+          <h2 class="title title--second about-us__title">Timeless, for 50 years and counting</h2>
+          <p class="about-us__description">
+            Bang & Olufsen is expanding its Recreated Classics Program
+            with the launch of Beosystems – a limited edition music system
+            that transcends time by bridging the gap between
+            one of our iconic designs from 1972 and
+            today’s cutting-edge digital technology.
+          </p>
+        </article>
+      </section>
+
+    </main>
+
+    <footer class="footer">
+      <section class="contact" id="contact">
+        <h2 class="title title--second contact__title">Contact Us</h2>
+        <form class="contact__form" id="form">
+          <div class="contact__form-item">
+            <label for="name" class="contact__form-label">Name</label>
+            <input
+              id="name"
+              class="contact__form-input"
+              type="text"
+              placeholder="Name"
+              required
+            />
+          </div>
+
+          <div class="contact__form-item">
+            <label for="email" class="contact__form-label">Email</label>
+            <input
+              id="email"
+              class="contact__form-input"
+              type="email"
+              placeholder="Email"
+              required
+            />
+          </div>
+
+          <div class="contact__form-item contact__form-item--last">
+            <label for="message" class="contact__form-label">Message</label>
+            <textarea id="message" class="contact__form-textarea" placeholder="Message" required></textarea>
+          </div>
+
+          <button
+            id="form-submit"
+            class="button button--full"
+            type="submit">
+            Send
+          </button>
+        </form>
+
+        <address class="address">
+          <div class="address__data">
+            <h3 class="title title--fifth">Phone</h3>
+            <p class="address__info">
+              <a class="address__link" href="tel:+1 234 555-55-55">+1 234 5555-55-55</a>
+            </p>
+          </div>
+
+          <div class="address__data">
+            <h3 class="title title--fifth">Email</h3>
+            <p class="address__info">
+              <a class="address__link" href="mailto:hello@bang&olufsen.com">hello@bang&olufsen.com</a>
+            </p>
+          </div>
+
+          <div class="address__data">
+            <h3 class="title title--fifth">Address</h3>
+            <p class="address__info">
+              <a class="address__link" href="https://www.google.com/maps/place/400+N+1st+Ave,+Minneapolis,+MN+55401,+USA/@44.9813122,-93.2781363,17z/data=!3m1!4b1!4m6!3m5!1s0x52b3328fd8912e53:0x44a7faa9ed9bd24e!8m2!3d44.9813085!4d-93.2732654!16s%2Fg%2F11bw3xqc2p?entry=ttu&g_ep=EgoyMDI1MTEyMy4xIKXMDSoASAFQAw%3D%3D" target="_blank">
+                400 first ave.<br>
+                suite 700<br>
+                Minneapolis, MN 55401
+              </a>
+            </p>
+          </div>
+        </address>
+      </section>
+
+    </footer>
+
   </body>
 </html>