mate-academy · michal-reszka · Oct 20, 2023 · Oct 22, 2023 · Oct 23, 2023 · Oct 23, 2023
diff --git a/README.md b/README.md
@@ -10,6 +10,6 @@ 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://michal-reszka.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/src/images/Cover_photo.jpg b/src/images/Cover_photo.jpg
diff --git a/src/images/Icon-Burger-menu.svg b/src/images/Icon-Burger-menu.svg
diff --git a/src/images/Icon-Close.jpg b/src/images/Icon-Close.jpg
diff --git a/src/images/Icon-Phone-call.jpg b/src/images/Icon-Phone-call.jpg
diff --git a/src/images/Icon-Phone-call.svg b/src/images/Icon-Phone-call.svg
diff --git a/src/images/Logo-menu.png b/src/images/Logo-menu.png
diff --git a/src/images/Logo.jpg b/src/images/Logo.jpg
diff --git a/src/images/MyBiKE.svg b/src/images/MyBiKE.svg
diff --git a/src/images/back-bike.jpg b/src/images/back-bike.jpg
diff --git a/src/images/close.svg b/src/images/close.svg
diff --git a/src/images/first-bike.jpg b/src/images/first-bike.jpg
diff --git a/src/images/footer.jpg b/src/images/footer.jpg
diff --git a/src/images/front-bike.jpg b/src/images/front-bike.jpg
diff --git a/src/images/hand-bike.jpg b/src/images/hand-bike.jpg
diff --git a/src/images/handlebar.jpg b/src/images/handlebar.jpg
diff --git a/src/images/kickstand.jpg b/src/images/kickstand.jpg
diff --git a/src/images/logo-menu.svg b/src/images/logo-menu.svg
diff --git a/src/images/menu-hover.svg b/src/images/menu-hover.svg
diff --git a/src/images/mobile-photo.png b/src/images/mobile-photo.png
diff --git a/src/images/phone-bike.jpg b/src/images/phone-bike.jpg
diff --git a/src/images/phone.jpg b/src/images/phone.jpg
diff --git a/src/images/phone.svg b/src/images/phone.svg
diff --git a/src/images/second-bike.jpg b/src/images/second-bike.jpg
diff --git a/src/images/third-bike.jpg b/src/images/third-bike.jpg
diff --git a/src/index.html b/src/index.html
@@ -3,11 +3,223 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Miami</title>
+    <title class="title__myBike">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@300;400;500;600;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="./styles/main.scss">
     <script src="scripts/main.js" defer></script>
   </head>
   <body>
-    <h1>Miami</h1>
+    <header class="header" id="home">
+      <nav class="navigation">
+        <div class="logo">
+          <a class="navigation__item" href="#">
+            <img class="navigation__logo"
+          src="images/MyBiKE.svg"
+          alt="logo">
+          </a>
+        </div>
+        <div class="items">
+          <a class="phone navigation__item href" href="tel:+1 234 555-55-55">
+            <span class="phone__label">+1 234 555-55-55</span>
+            <img class="navigation__phone"
+          src="images/Icon-Phone-call.svg" alt="iconPhone">
+          </a>
+          <div>
+            <a class="navigation__item" href="#menu">
+              <div class="navigation__menu"></div>
+            </a>
+          </div>
+        </div>
+      </nav>
+      <h1 class="title">Take the Streets</h1>
+    </header>
+
+    <div class="menu" id="menu">
+      <nav class="navigation">
+        <div class="logo">
+          <a class="navigation__item" href="#">
+            <img class="navigation__logo" src="images/logo-menu.svg"
+            alt="logo">
+          </a>
+        </div>
+        <div class="items__menu">
+          <a class="navigation__item--hidden" href="#">
+            <img class="navigation__logo"
+            src="images/Icon-Phone-call.svg" alt="logo">
+          </a>
+          <a class="navigation__item" href="#home">
+            <img class="navigation__close-icon"
+          src="images/close.svg" alt="close">
+          </a>
+        </div>
+      </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="#bikes" class="links__link">Compare bikes</a></li>
+          <li class="links__item"><a href="#the-details" class="links__link">Details</a></li>
+          <li class="links__item"><a href="#contact-us" class="links__link">Contacts</a></li>
+        </ul>
+      </nav>
+      <a href="tel:+12345555555">
+        <p class="menu__paragraph">+1 234 5555-55-55</p>
+      </a>
+      <p class="menu__paragraph">
+        <a href="#" class="menu__call-link">Book a test ride</a>
+      </p>
+    </div>
+
+    <main class="main" id="about-us">
+      <section class="head">
+        <h2 class="head__title--secondary">Move Free</h2>
+        <p class="head__title--paragraf">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>
+      </section>
+
+      <h2 class="title__title--bike" id="bikes">Compare bike</h2>
+
+      <section class="product">
+
+        <article class="bike">
+          <div class="bike_img">
+            <img class="bike_img" src="images/first-bike.jpg"
+            alt="sport-bike">
+          </div>
+          <h3 class="bike_title">Sporty 4</h3>
+          <p class="bike_paragraf-2">The iconic frame brought to a new
+            performance height as a sporty, active ride.
+          </p>
+          <h3 class="bike_title bike_title-amount">$ 2 590</h3>
+        </article>
+
+
+        <article class="bike">
+          <div class="bike_img">
+            <img class="bike_img" src="images/second-bike.jpg"
+            alt="sport-bike">
+          </div>
+          <h3 class="bike_title">Ride in town ST</h3>
+          <p class="bike_paragraf-2">An open frame for an upright riding position
+             as the most comfortable ride in town.
+          </p>
+          <h3 class="bike_title bike_title-amount">$ 2 590</h3>
+        </article>
+
+
+        <article class="bike">
+          <div class="bike_img">
+            <img class="bike_img" src="images/third-bike.jpg"
+            alt="sport-bike">
+          </div>
+          <h3 class="bike_title">Agile ride 3</h3>
+          <p class="bike_paragraf-2">The lightweight frame that has earned
+             its street tread as a sleek, agile ride.
+          </p>
+          <h3 class="bike_title bike_title-amount">$ 2 090</h3>
+        </article>
+      </section>
+
+      <h3 class="details_title" id="the-details">The Details</h3>
+
+      <section class="specifics">
+
+        <article class="details">
+          <div class="details_img">
+            <img class="details_picture" src="images/phone-bike.jpg"
+          alt="handlebar-phone">
+            <img class="details_picture" src="images/handlebar.jpg"
+           alt="handlebar-brakes">
+          </div>
+          <h3 class="details_heading">Auto Unlock</h3>
+          <p class="details_paragraf">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">
+          <div class="details_img">
+            <img class="img details_picture" src="images/back-bike.jpg"
+        alt="front">
+            <img class="img details_picture" src="images/front-bike.jpg"
+         alt="handlebar-brakes">
+          </div>
+          <h3 class="details_heading">Range & Integrated lights</h3>
+          <p class="details_paragraf">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">
+          <div class="details_img details_img--reversed">
+            <img class="img details_picture" src="images/hand-bike.jpg"
+        alt="zoom-hand">
+            <img class="img details_picture" src="images/kickstand.jpg"
+              alt="kickstand-zoom">
+          </div>
+          <h3 class="details_heading">Range & Integrated lights</h3>
+          <p class="details_paragraf">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="button">
+          <a href="#" class="details_button">Explore</a>
+        </div>
+      </section>
+
+
+      <h3 class="contact" id="contact-us">Contact us</h3>
+      <div class="contact__adress">
+        <section class="blank">
+          <form class="fields">
+            <div class="fields__item fields-item">
+              <label for="name" class="fields-item__label"></label>
+              <input class="fields-item__input" type="text"
+          id="name"
+          placeholder="Name" required>
+            </div>
+
+            <div class="fields__item fields-item">
+              <label for="email" class="fields-item__label"></label>
+              <input class="fields-item__input" type="email"
+          id="email"
+          placeholder="Email" required>
+            </div>
+
+            <div class="fields__item fields-item">
+              <label for="message" class="fields-item__label"></label>
+              <textarea class="fields-item__textarea" type="text"
+            id="message"
+            placeholder="Message" required></textarea>
+            </div>
+            <button class="fields-item__button">Send</button>
+          </form>
+        </section>
+
+        <section class="section">
+          <address class="addres">
+            <h4 class="address__label">Phone</h4>
+            <p class="address__content">
+              <a  class="address__content" href="tel:+12345555555">+1 234 5555-55-55</a>
+            </p>
+            <h4 class="address__label">Email</h4>
+            <p class="address__content">
+              <a  class="address__content" href="mailto:hello@miami.com">hello@miami.com</a>
+            </p>
+            <h4 class="address__label">Addres</h4>
+            <p class="address__content">
+              <a class="address__content" href="https://tiny.pl/clhgs"> first ave.<br>suite 700<br>Minneapolis, MN 55401</a>
+            </p>
+          </address>
+        </section>
+      </div>
+      <footer class="footer">
+      </footer>
+    </main>
   </body>
 </html>
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -1 +1,8 @@
 'use strict';
+
+const form = document.querySelector('.fields');
+
+form.addEventListener('submit', (event) => {
+  event.preventDefault();
+  event.target.reset();
+});
diff --git a/src/styles/blocks/address.scss b/src/styles/blocks/address.scss
@@ -0,0 +1,59 @@
+.address {
+  &__label {
+    color: var(--secondary-color);
+    padding-top: 24px;
+    font-family: var(--font-family);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%;
+  }
+
+  &__content {
+    color: var(--secondary-color);
+    font-family: var(--font-family);
+    font-size: 16px;
+    padding-top: 8px;
+    font-style: normal;
+    font-weight: var(--font-weight);
+    line-height: 140%;
+  }
+}
+
+.address__content:hover {
+  color: var(--hover-color);
+}
+
+a {
+  color: var(--secondary-color);
+  text-decoration: none;
+}
+
+.section {
+  padding: 0 20px 120px;
+  margin-top: 28px;
+}
+
+@media  screen and (min-width: 744px) {
+
+  a {
+    color: var(--secondary-color);
+    text-decoration: none;
+  }
+  .address__content:hover {
+    color: var(--hover-color);
+  }
+}
+
+@media screen and (min-width: 1220px) {
+  .address__content:hover {
+    color: var(--hover-color);
+  }
+  a {
+    color: var(--secondary-color);
+    text-decoration: none;
+  }
+  .section {
+    margin-top: 0;
+  }
+}