mate-academy · Patryk91sz · Dec 11, 2025 · Dec 11, 2025 · Dec 11, 2025 · Dec 12, 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,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/.stylelintrc.js b/.stylelintrc.js
@@ -3,5 +3,8 @@ module.exports = {
   plugins: [
     "stylelint-scss"
   ],
-  rules: {}
+  rules: {
+    "rule-empty-line-before": null,
+    "at-rule-empty-line-before": null
+  }
 };
diff --git a/README.md b/README.md
@@ -10,6 +10,8 @@ In this task, you will learn how to implement a landing page. To do that:
   - [Nothing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6802-139&t=L7eKz5YKLN0m5WxR-0)
 - watch the lesson videos and implement your page blocks similarly to the videos;
 - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar;
-- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://<your_account>.github.io/layout_miami/) 
+- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://Patryk91sz.github.io/layout_miami/)
 - after each next block do the same (add, commit and push the changes, and deploy the updated demo;
 - check yourself using the [CHECKLIST](https://github.com/mate-academy/layout_miami/blob/master/checklist.md) when finished;
+
+
diff --git a/index.html b/index.html
@@ -6,7 +6,13 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Miami</title>
+    <title>My-Bike</title>
+    <link rel="icon" type="image/png"
+    href="src/images/favicon.png">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com"
+    crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
     <link
       rel="stylesheet"
       href="src/styles/main.scss"
@@ -17,6 +23,261 @@
     ></script>
   </head>
   <body>
-    <h1>Miami</h1>
+
+    <header class="header" id="home">
+      <h1 class="header__logo h2-title">MyBiKE</h1>
+
+      <nav class="header__nav">
+
+        <div class="header__nav-buttons">
+
+          <div class="header__nav-phone-container">
+            <a class="header__nav-phone-number contact__link" href="tel:+1 234 5555-55-55">+1 234 5555-55-55
+            </a>
+            <div class="header__nav-button header__nav-phone">
+              <img class="header__nav-phone-icon" src="src/images/phone.svg"
+              alt="phone Icon"/>
+            </div>
+          </div>
+
+          <div class="header__nav-button">
+            <a href="#menu">
+              <img class="header__nav-menu-icon" src="src/images/menu.svg"
+            alt="menu Icon"/>
+            </a>
+          </div>
+
+        </div>
+      </nav>
+
+      <div class="header__motto">
+        <h2 class="header__motto-title">Take the Streets</h2>
+      </div>
+
+    </header>
+
+    <main class="main" id="about">
+
+      <section class="move-free">
+
+        <div class="move-free__container">
+          <h3 class="move-free__container-title">Move Free</h3>
+          <p class="move-free__container-text">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>
+
+      <section class="compare">
+        <h3 class="compare__title h3-title">Compare bikes</h3>
+
+        <div class="compare__bikes" id="compare">
+
+          <article class="compare__bike">
+            <picture class="compare__bike-photo">
+              <source media="(min-width: 1260px)" srcset="src/images/photos/bike1_desk.jpg">
+              <source media="(min-width: 744px)" srcset="src/images/photos/bike1_tab.jpg">
+              <img class="photo" src="src/images/photos/bike1_mobile.jpg"
+              alt="Bike Sporty 4"/>
+            </picture>
+            <h4 class="compare__bike-name h4-title">Sporty 4</h4>
+            <p class="compare__bike-text description-title">The iconic frame brought to a new performance height as a sporty, active ride.</p>
+            <p class="compare__bike-price h4-title">$ 2 590</p>
+          </article>
+
+          <article class="compare__bike">
+            <picture class="compare__bike-photo">
+              <source media="(min-width: 1260px)" srcset="src/images/photos/bike2_desk.jpg">
+              <source media="(min-width: 744px)" srcset="src/images/photos/bike2_tab.jpg">
+              <img class="photo" src="src/images/photos/bike2_mobile.jpg"
+              alt="Ride in town ST"/>
+            </picture>
+            <h4 class="compare__bike-name h4-title">Ride in town ST</h4>
+            <p class="compare__bike-text description-title">An open frame for an upright riding position as the most comfortable ride in town.</p>
+            <p class="compare__bike-price h4-title">$ 2 590</p>
+          </article>
+
+          <article class="compare__bike">
+            <picture class="compare__bike-photo">
+              <source media="(min-width: 1260px)" srcset="src/images/photos/bike3_desk.jpg">
+              <source media="(min-width: 744px)" srcset="src/images/photos/bike3_tab.jpg">
+              <img class="photo" src="src/images/photos/bike3_mobile.jpg"
+              alt="Agile ride 3"/>
+            </picture>
+            <h4 class="compare__bike-name h4-title">Agile ride 3</h4>
+            <p class="compare__bike-text description-title">The lightweight frame that has earned its street tread as a sleek, agile ride.</p>
+            <p class="compare__bike-price h4-title">$ 2 090</p>
+          </article>
+
+        </div>
+      </section>
+
+      <section class="details" id="details">
+
+        <h3 class="details__title h3-title">The details</h3>
+
+        <article class="details__detail">
+
+          <div class="details__detail-photos">
+            <picture>
+              <source media="(min-width: 1260px)" srcset="src/images/photos/unlock1_desk.jpg">
+              <source media="(min-width: 744px)" srcset="src/images/photos/unlock1_tab.jpg">
+              <img class="details__detail-photo photo" src="src/images/photos/unlock1_mobile.jpg"
+              alt="Auto Unlock-1"/>
+            </picture>
+            <picture>
+              <source media="(min-width: 1260px)" srcset="src/images/photos/unlock2_desk.jpg">
+              <source media="(min-width: 744px)" srcset="src/images/photos/unlock2_tab.jpg">
+              <img class="details__detail-photo photo" src="src/images/photos/unlock2_mobile.jpg"
+              alt="Auto Unlock-2"/>
+            </picture>
+          </div>
+
+          <h4 class="details__detail-title h4-title">Auto Unlock</h4>
+          <p class="details__detail-text description-title">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="details__detail">
+
+          <div class="details__detail-photos">
+            <picture>
+              <source media="(min-width: 1260px)" srcset="src/images/photos/light1_desk.jpg">
+              <source media="(min-width: 744px)" srcset="src/images/photos/light1_tab.jpg">
+              <img class="details__detail-photo photo" src="src/images/photos/light1_mobile.jpg"
+              alt="lights1"/>
+            </picture>
+            <picture>
+              <source media="(min-width: 1260px)" srcset="src/images/photos/light2_desk.jpg">
+              <source media="(min-width: 744px)" srcset="src/images/photos/light2_tab.jpg">
+              <img class="details__detail-photo photo" src="src/images/photos/light2_mobile.jpg"
+              alt="lights2"/>
+            </picture>
+          </div>
+
+          <h4 class="details__detail-title h4-title">Range & Integrated lights</h4>
+
+          <p class="details__detail-text description-title">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.</p>
+        </article>
+
+        <article class="details__detail">
+
+          <div class="details__detail-photos">
+            <picture>
+              <source media="(min-width: 1260px)" srcset="src/images/photos/breakes1_desk.jpg">
+              <source media="(min-width: 744px)"
+              srcset="src/images/photos/breakes1_tab.jpg">
+              <img class="details__detail-photo photo" src="src/images/photos/breakes1_mobile.jpg"
+              alt="breakes1"/>
+            </picture>
+            <picture>
+              <source media="(min-width: 1260px)" srcset="src/images/photos/breakes2_desk.jpg">
+              <source media="(min-width: 744px)" srcset="src/images/photos/breakes2_tab.jpg">
+              <img class="details__detail-photo photo" src="src/images/photos/breakes2_mobile.jpg"
+              alt="breakes2"/>
+            </picture>
+          </div>
+
+          <h4 class="details__detail-title h4-title">Hydraulic disc brakes & Lightweight</h4>
+
+          <p class="details__detail-text description-title">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.</p>
+        </article>
+
+        <div class="explore__container">
+          <button class="explore__container-button button" type="button">Explore</button>
+        </div>
+
+      </section>
+    </main>
+
+    <footer class="footer">
+
+      <h3 class="contact-us__title h3-title">Contact us</h3>
+
+      <div class="footer__content">
+        <section class="contact-us">
+          <form class="contact-us__form">
+            <input
+              class="contact-us__input"
+              type="text"
+              name="name"
+              placeholder="Name"
+              required/>
+            <input
+              class="contact-us__input"
+              type="email"
+              name="email"
+              placeholder="Email"
+              required/>
+            <textarea
+              class="contact-us__input contact-us__textarea"
+              placeholder="Message"
+              required></textarea>
+            <div class="container-sendButton">
+              <button class="contact-us__button button" type="submit">
+                Send
+              </button>
+            </div>
+          </form>
+        </section>
+        <section class="contact" id="contacts">
+          <div class="contact__item">
+            <h3 class="contact__label">Phone</h3>
+            <p class="contact__value">
+              <a class="contact__link" href="tel:+1 234 5555-55-55">+1 234 5555-55-55</a>
+            </p>
+          </div>
+          <div class="contact__item">
+            <h3 class="contact__label">Email</h3>
+            <p class="contact__value">
+              <a class="contact__link" href="hello@miami.com">hello@miami.com</a>
+            </p>
+          </div>
+          <div class="contact__item">
+            <h3 class="contact__label">Address</h3>
+            <p class="contact__value">
+              400 first ave.<br>
+              suite 700<br>
+              Minneapolis, MN 55401
+            </p>
+          </div>
+        </section>
+      </div>
+      <div class="footer__background"></div>
+    </footer>
+
+    <section class="menu" id="menu">
+      <header class="menu__header">
+        <h2 class="menu__header-title h2-title">MyBiKE</h2>
+        <a class="menu__header-close-button" type="button"
+        href="#home">
+          <img class="menu__header-close-button-icon" src="src/images/Icon-Close-black.svg"
+          alt="close Icon"/>
+        </a>
+      </header>
+
+      <main class="menu__main">
+        <nav class="menu__nav">
+          <ul class="menu__nav-links">
+            <li ><a   class="menu__nav-link" href="#home">Home</a></li>
+            <li><a class="menu__nav-link" href="#about">About Us</a></li>
+            <li><a class="menu__nav-link" href="#compare">Compare Bikes</a></li>
+            <li><a class="menu__nav-link" href="#details">Details</a></li>
+            <li><a class="menu__nav-link" href="#contacts">Contacts</a></li>
+          </ul>
+        </nav>
+      </main>
+
+      <footer class="menu__footer">
+        <address class="contact">
+          <a class="menu__footer-phone-link menu-link phone-number" href="tel:+48123123123">
+            +1 234 5555-55-55
+          </a>
+        </address>
+
+        <a class="menu__footer-cta-btn menu-link" href="/book-test-ride" >
+          Book a test ride
+        </a>
+      </footer>
+    </section>
   </body>
 </html>