mate-academy · Chalaczi · Dec 16, 2025 · Dec 16, 2025 · Dec 16, 2025 · Jan 12, 2026
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,15 @@
+# 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
diff --git a/index.html b/index.html
@@ -6,7 +6,10 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Miami</title>
+    <title>Mybike</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
     <link
       rel="stylesheet"
       href="src/styles/main.scss"
@@ -17,6 +20,186 @@
     ></script>
   </head>
   <body>
-    <h1>Miami</h1>
+    <header class="header" id="home">
+      <nav class="navigation header__navigation">
+        <a href="#" class="logo navigation__logo">
+          <img class="logo__image" src="./src/images/MyBiKE.svg" alt="Logo">
+        </a>
+
+        <div class="navigation__actions">
+          <a class="phone" href="tel:+1 234 555-55-55"><span class="phone__label">+1 234 555-55-55</span><img class="phone_icon" src="./src/images/Icon-Phone-call.svg" alt="#"></a>
+          <a href="#menu" class="burger">
+            <span class="burger__text">Open menu</span>
+          </a>
+        </div>
+      </nav>
+      <h1 class="title header__title">Take the Streets</h1>
+    </header>
+
+    <div class="menu" id="menu">
+      <nav class="navigation navigation__menu">
+        <a href="#home"><img class="logo__image" src="./src/images/MyBiKE blk.svg" alt="3"></a>
+        <a href="#home"><img class="close__icon" src="./src/images/X icon.svg" alt="#"></a>
+      </nav>
+
+      <nav class="links menu__links">
+        <ul class="links__list">
+          <li class="links__item"><a href="#home" class="links__link">Home</a></li>
+          <li class="links__item"><a href="#about-us" class="links__link">About Us</a></li>
+          <li class="links__item"><a href="#compare-bikes" class="links__link">Compare Bikes</a></li>
+          <li class="links__item"><a href="#details" class="links__link">Details</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">Book a test ride</a>
+      </p>
+
+    </div>
+
+    <main class="main" id="about-us">
+      <h2 class="title title--secondary main__title">
+      Move Free
+      </h2>
+      <div class="main__content">
+        <p class="main__paragraph">Shift your ride, not gears. Find the fastest way to move in the city as the bike adapts intuitively to power the speed you need.
+        </p>
+      </div>
+      <section class="section main__section" id="compare-bikes">
+        <h3 class="title title--section section__title">Compare bikes</h3>
+        <div class="bike">
+          <article class="model bike__model">
+            <img class="model__photo" src="./src/images/Screenshot 2022-01-14 at 11.12 1.png"
+            alt="bike1">
+            <h4 class="model__name">Sporty 4</h4>
+            <p class="model__description">
+                The iconic frame brought to a new performance height as a sporty, active ride.
+            </p>
+            <h4 class="model__price"> $ 2 590</h4>
+          </article>
+
+          <article class="model bike__model">
+            <img class="model__photo" src="./src/images/Screenshot 2022-01-14 at 11.12 2.png"
+            alt="bike2">
+            <h4 class="model__name">Ride in town ST</h4>
+            <p class="model__description">
+                An open frame for an upright riding position as the most comfortable ride in town.
+            </p>
+            <h4 class="model__price"> $ 2 590</h4>
+          </article>
+
+          <article class="model bike__model">
+            <img class="model__photo" src="./src/images/Screenshot 2022-01-14 at 11.12 3 (1).jpg"
+            alt="bike3">
+            <h4 class="model__name">Agile ride 3</h4>
+            <p class="model__description">
+                The lightweight frame that has earned its street tread as a sleek, agile ride.
+            </p>
+            <h4 class="model__price"> $ 2 090</h4>
+          </article>
+
+        </div>
+
+      </section>
+
+      <section class="section main__section" id="details">
+        <h3 class="title title--section section__title">The Details</h3>
+        <article class="article section__article">
+          <div class="picturies article__picturies">
+            <div class="picturies__item picturies__item--big">
+              <img src="./src/images/picture-4.jpg" class="picturies__image"
+              alt="1">
+            </div>
+
+            <div class="picturies__item picturies__item--small">
+              <img src="./src/images/picture-5.jpg" class="picturies__image"
+              alt="2">
+            </div>
+          </div>
+          <h4 class="article__title">Auto Unlock</h4>
+          <p class="article__description">
+              The app senses when you're nearby to unlock automatically. GPS tracking so you know where your bike is and can track it anytime.
+          </p>
+        </article>
+
+        <article class="article section__article">
+          <div class="picturies article__picturies">
+            <div class="picturies__item picturies__item--big">
+              <img src="./src/images/picture-6.jpg" class="picturies__image"
+              alt="1">
+            </div>
+
+            <div class="picturies__item picturies__item--small">
+              <img src="./src/images/picture-7.jpg" class="picturies__image"
+              alt="2">
+            </div>
+          </div>
+          <h4 class="article__title">Range & Integrated lights</h4>
+          <p class="article__description">
+              The removable battery has up to 70km battery autonomy and weighs only 2.4 kg. Lights integrated into the frame give you always-on visibility day and night. track it anytime.
+          </p>
+        </article>
+
+        <article class="article section__article">
+          <div class="picturies article__picturies">
+            <div class="picturies__item picturies__item--small">
+              <img src="./src/images/picture-8.jpg" class="picturies__image"
+              alt="1">
+            </div>
+
+            <div class="picturies__item picturies__item--big">
+              <img src="./src/images/picture-9.jpg" class="picturies__image"
+              alt="2">
+            </div>
+          </div>
+          <h4 class="article__title">Hydraulic disc brakes & Lightweight</h4>
+          <p class="article__description">
+              Brakes with total stopping power the second you make contact. The removable battery has up to 70km battery autonomy and weighs only 2.4 kg. Lights integrated into the frame give you always-on visibility day and night. track it anytime.
+          </p>
+        </article>
+        <a href="#" class="button">Explore</a>
+      </section>
+
+      <section class="section main__section" id="contacts">
+        <h3 class="title title--section section__title">Contact us</h3>
+        <div class="contact">
+          <form class="form contact__form">
+            <div class="form__item">
+              <label for="name" class="form__label">Name</label>
+              <input id="name" class="form__imput"
+              type="text" placeholder="Name">
+            </div>
+            <div class="form__item">
+              <label for="email" class="form__label"></label>Email</label>
+              <input id="email" class="form__imput"
+              type="email" placeholder="Email">
+            </div>
+            <div class="form__item">
+              <label for="message" class="form__label"></label>Message</label>
+              <textarea id="message" class="form__textarea"
+              placeholder="Message"></textarea>
+            </div>
+            <button class="button button--primary">Send</button>
+          </form>
+          <address class="address contact__address">
+            <h4 class="address__label">Phone</h4>
+            <p class="address__content">+1 234 5555-55-55</p>
+            <h4 class="adress__label">Email</h4>
+            <p class="address__content">hello@miami.com</p>
+            <h4 class="adress__label">Address</h4>
+            <p class="address__content">
+              400 first ave.
+              <br>
+              suite 700
+              <br>
+              Minneapolis, MN 55401
+            </p>
+          </address>
+        </div>
+      </section>
+    </main>
-      </section>
-      <footer class="footer">
-        <img src="./src/images/footer pic.jpg" alt="footer bike">
-      </footer>
-    </main>
+      </section>
+    </main>
+    <footer class="footer"></footer>
-      </section>
-      <footer class="footer">
-        <img src="./src/images/footer pic.jpg" alt="footer bike">
-      </footer>
-    </main>
+      </section>
+    </main>
+    <footer class="footer"></footer>
++   <footer class="footer"></footer>
   </body>
 </html>
diff --git a/picture-1.jpg b/picture-1.jpg
diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff
diff --git a/src/images/Cover_photo.jpg b/src/images/Cover_photo.jpg
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/MyBiKE blk.svg b/src/images/MyBiKE blk.svg
diff --git a/src/images/MyBiKE.svg b/src/images/MyBiKE.svg
diff --git a/src/images/Screenshot 2022-01-14 at 11.12 1.png b/src/images/Screenshot 2022-01-14 at 11.12 1.png
diff --git a/src/images/Screenshot 2022-01-14 at 11.12 2.png b/src/images/Screenshot 2022-01-14 at 11.12 2.png
diff --git a/src/images/Screenshot 2022-01-14 at 11.12 3 (1).jpg b/src/images/Screenshot 2022-01-14 at 11.12 3 (1).jpg
diff --git a/src/images/X icon.svg b/src/images/X icon.svg
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 pic.jpg b/src/images/footer pic.jpg
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/mikkel-bech-yjAFnkLtKY0-unsplash 2.jpg b/src/images/mikkel-bech-yjAFnkLtKY0-unsplash 2.jpg
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.jpg b/src/images/picture-1.jpg
diff --git a/src/images/picture-2.jpg b/src/images/picture-2.jpg
diff --git a/src/images/picture-3.jpg b/src/images/picture-3.jpg
diff --git a/src/images/picture-4.jpg b/src/images/picture-4.jpg
diff --git a/src/images/picture-5.jpg b/src/images/picture-5.jpg
diff --git a/src/images/picture-6.jpg b/src/images/picture-6.jpg
diff --git a/src/images/picture-7.jpg b/src/images/picture-7.jpg
diff --git a/src/images/picture-8.jpg b/src/images/picture-8.jpg
diff --git a/src/images/picture-9.jpg b/src/images/picture-9.jpg
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss