mate-academy · AndrzejFront · Oct 22, 2025 · Oct 24, 2025 · Oct 24, 2025 · Oct 24, 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/README.md b/README.md
@@ -1,15 +1,3 @@
 # Miami landing page
-
-In this task, you will learn how to implement a landing page. To do that:
-
-- choose a landing page design from the list below;
-  - [BOSE landing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6703-88&t=L7eKz5YKLN0m5WxR-0)
-  - [MET landing](https://www.figma.com/file/lSR1m42L9YwzQwzzxKwHpw/THE-MET)
-  - [MYBIKE landing](https://www.figma.com/file/NZQAIydtHo5QkINyGLHNcq/BIKE-New-Version?node-id=0%3A1)
-  - [B&O](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6817-212&t=ZTV6Gl8NzaWkJ4FK-0)
-  - [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/) 
-- 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;
+ DEMO LINK
+ https://andrzejfront.github.io/layout_miami/
diff --git a/index.html b/index.html
@@ -6,17 +6,191 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Miami</title>
+    <title>MyBiKE</title>
+    <link rel="icon" type="image/x-icon"
+    href="/src/images/photos/favicon.jpg">
+    <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:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <link
       rel="stylesheet"
       href="src/styles/main.scss"
     />
-    <script
-      src="src/scripts/main.js"
-      defer
-    ></script>
+
   </head>
+  <script src="src/main.js"
+      defer></script>
+
+  <script>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');
+  }
+});
+  </script>
+
   <body>
-    <h1>Miami</h1>
+    <header class="header" id="header">
+      <nav class="navigation header__navigation">
+        <a href="#header">
+          <img src="/src/images/icons/mybike-logo.svg" class="navigation__logo"
+        alt="logo">
+        </a>
+        <div class="navigation__burgers">
+          <a class="phone" href="tel:+1 234 555-55-55">
+            <span class="phone__hover">+1 234 555-55-55</span>
+            <img class="navigation__phone" src="/src/images/icons/Icon-Phone-call.svg" alt="call">
+          </a>
+          <a class="hover" href="#menu"><span class="hover__menu">Open menu</span></a>
+        </div>
+      </nav>
+      <h1 class="title header__title">Take the Streets</h1>
+    </header>
+
+    <div class="menu" id="menu">
+      <nav class="navigation">
+        <a href="#header">
+          <img src="/src/images/icons/Menu_logo-black.svg" class="navigation__logo"
+        alt="logo">
+        </a>
+        <a class="navigation__close"  href="#header">
+          <img src="/src/images/icons/Icon-Close.svg" class="navigation__close"
+          alt="close">
+        </a>
+      </nav>
+
+
+      <nav class="links">
+        <ul class="links__list">
+          <li class="links__item"><a href="#header" 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="#the-detail" class="links__link">Details</a></li>
+          <li class="links__item"><a href="#contact-us" class="links__link">Contacts</a></li>
+        </ul>
+      </nav>
+      <a class="menu__paragraph" href="tel:+1 234 555-55-55">+1 234 555-55-55</a>
+      <p class="menu__paragraph">
+        <a href="" class="menu__call">Book a test ride</a>
+      </p>
+    </div>
+
+    <main class="main" id="about-us">
+
+      <h2 class="title title--secondary">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__section1">
+        <h3 class="title title--section" id="compare-bikes">Compare bikes</h3>
+        <article class="article">
+          <div class="pictures">
+            <img src="/src/images/photos/pic-1.jpg" class="pictures__one"
+              alt="bike-1">
+          </div>
+          <p class="article__paragraph article__paragraph--bold">Sporty 4</p>
+          <p class="article__paragraph article__paragraph--normal">The iconic frame brought to a new performance height as a sporty, active ride.</p>
+          <p class="article__paragraph article__paragraph--price">$ 2 590</p>
+        </article>
+        <article class="article">
+          <div class="pictures">
+            <img src="/src/images/photos/pic-2.jpg" class="pictures__one"
+              alt="bike-2">
+          </div>
+          <p class="article__paragraph article__paragraph--bold">Ride in town ST</p>
+          <p class="article__paragraph article__paragraph--normal">An open frame for an upright riding position as the most comfortable ride in town.</p>
+          <p class="article__paragraph article__paragraph--price">$ 2 590</p>
+        </article>
+        <article class="article">
+          <div class="pictures">
+            <img src="/src/images/photos/pic-3.jpg" class="pictures__one"
+              alt="bike-3">
+          </div>
+          <p class="article__paragraph article__paragraph--bold">Agile ride 3</p>
+          <p class="article__paragraph article__paragraph--normal">The lightweight frame that has earned its street tread as a sleek, agile ride.</p>
+          <p class="article__paragraph article__paragraph--price">$ 2 090</p>
+        </article>
+
+      </section>
+
+      <section class="section main__section2" id="the-detail">
+        <h3 class="title title--section">The details</h3>
+        <article class="article article__details">
+          <div class="pictures">
+            <img  src="/src/images/photos/pic-4.jpg" class="pictures__two--big"
+            alt="gallery-1">
+            <img src="/src/images/photos/pic-5.jpg" class="pictures__two--small"
+            alt="gallery-2">
+          </div>
+          <p class="article__paragraph article__paragraph--bold">Auto Unlock</p>
+          <p class="article__paragraph article__paragraph--normal">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>
+          <div class="pictures">
+            <img src="/src/images/photos/pic-6.jpg" class="pictures__two--big"
+            alt="gallery-3">
+            <img src="/src/images/photos/pic-7.jpg" class="pictures__two--small"
+            alt="gallery-4">
+          </div>
+          <p class="article__paragraph article__paragraph--bold">Range & Integrated lights</p>
+          <p class="article__paragraph article__paragraph--normal">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>
+          <div class="pictures">
+            <img src="/src/images/photos/pic-8.jpg" class="pictures__two--small"
+            alt="gallery-5">
+            <img src="/src/images/photos/pic-9.jpg" class="pictures__two--big"
+            alt="gallery-6">
+          </div>
+          <p class="article__paragraph article__paragraph--bold">Hydraulic disc brakes & Lightweight</p>
+          <p class="article__paragraph article__paragraph--normal">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>
+        <a href="#" class="button">Explore</a>
+      </section>
+
+      <section class="section main__section3" id="contact-us">
+        <h3 class="title title--contact">Contact us</h3>
+        <div class="main__pack">
+          <form class="form">
+            <div class="form__item">
+              <label for="name" class="form__label">Name</label>
+              <input id="name" class="form__input"
+              name="formName"
+              type="text"
+              placeholder="Name" required>
+            </div>
+            <div class="form__item">
+              <label for="Email" class="form__label">Email</label>
+              <input id="Email" class="form__input"
+              name="formEmail"
+              type="Email"
+              placeholder="Email" required>
+
+            </div>
+            <div class="form__item">
+              <label for="message" class="form__label">Message</label>
+              <textarea id="message" class="form__textarea"
+                placeholder="Message"
+                required></textarea>
+            </div>
+            <button class="button button--primary">Send</button>
+          </form>
+          <address class="main__content address">
+            <h4 class="address__label">Phone</h4>
+
+            <p class="address__label address__label--content"><a class="address__label address__label--content" href="tel:+1 234 555-55-55">+1 234 5555-55-55</a></p>
+
+            <h4 class="address__label">Email</h4>
+            <p class="address__label address__label--content"> <a class="address__label address__label--content" href="mailto::hello@miami.com">hello@miami.com</a></p>
+            <h4 class="address__label">Address</h4>
+            <p class="address__label address__label--content">
+              <a class="address__label address__label--content" href="https://maps.app.goo.gl/WmcCiGNQx3rXJuVQ9"
+              target="_blank"> first ave.<br>suite 700<br>Minneapolis, MN 55401</a>
+            </p>
+          </address>
+        </div>
+      </section>
+    </main>
+    <footer class="footer">
+      <img src="/src/images/photos/footer-desctop.jpg" class="footer__image"
+        alt="footer">
+    </footer>
   </body>
 </html>