mate-academy · netzelnatalia · Oct 30, 2023 · Dec 7, 2023 · Dec 7, 2023 · Dec 10, 2023
diff --git a/src/images/category/1.png b/src/images/category/1.png
diff --git a/src/images/category/2.png b/src/images/category/2.png
diff --git a/src/images/category/3.png b/src/images/category/3.png
diff --git a/src/images/category/4.png b/src/images/category/4.png
diff --git a/src/images/category/5.png b/src/images/category/5.png
diff --git a/src/images/category/6.png b/src/images/category/6.png
diff --git a/src/images/cursor/cursor-black.png b/src/images/cursor/cursor-black.png
diff --git a/src/images/cursor/cursor-transparent.png b/src/images/cursor/cursor-transparent.png
diff --git a/src/images/favicon.png b/src/images/favicon.png
diff --git a/src/images/footer-img.png b/src/images/footer-img.png
diff --git a/src/images/header-bg-mobile.png b/src/images/header-bg-mobile.png
diff --git a/src/images/header-bg.png b/src/images/header-bg.png
diff --git a/src/images/icons/icon-burger-hover (1).svg b/src/images/icons/icon-burger-hover (1).svg
diff --git a/src/images/icons/icon-burger-hover.png b/src/images/icons/icon-burger-hover.png
diff --git a/src/images/icons/icon-burger-hover.svg b/src/images/icons/icon-burger-hover.svg
diff --git a/src/images/icons/icon-burger.svg b/src/images/icons/icon-burger.svg
diff --git a/src/images/icons/icon-close.png b/src/images/icons/icon-close.png
diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg
diff --git a/src/images/icons/phone.png b/src/images/icons/phone.png
diff --git a/src/images/icons/phone.svg b/src/images/icons/phone.svg
diff --git a/src/images/logo-black.png b/src/images/logo-black.png
diff --git a/src/images/logo-black.svg b/src/images/logo-black.svg
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/logo.svg b/src/images/logo.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/product/bike-1.png b/src/images/product/bike-1.png
diff --git a/src/images/product/bike-2.png b/src/images/product/bike-2.png
diff --git a/src/images/product/bike-3.png b/src/images/product/bike-3.png
diff --git a/src/index.html b/src/index.html
@@ -1,13 +1,262 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="page">
   <head>
     <meta charset="UTF-8">
     <meta 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@400;500;600;700&display=swap" rel="stylesheet">
+    <link
+      rel="icon"
+      type="image/png"
+      href="/images/favicon.png"
+    >
     <link rel="stylesheet" href="./styles/main.scss">
-    <script src="scripts/main.js" defer></script>
+
   </head>
-  <body>
-    <h1>Miami</h1>
+  <body class="page__body">
+    <header class="header">
+      <div class="container">
+        <div class="header__content">
+          <div class="top-bar">
+            <a
+              class="top-bar__logo--link"
+              href="/"
+            >
+              <img
+                class="top-bar__logo"
+                src="images/logo.png"
+                alt="MyBike logo"
+              >
+            </a>
+            <div class="top-bar__icons">
+              <a href="tel:+1 234 555-55-55" class="icon icon--phone">
+                <div class="icon__tooltip"> +1 234 555-55-55 </div>
+              </a>
+              <a href="#menu" class="icon icon--menu"></a>
+            </div>
+          </div>
+          <div class="header__bottom">
+            <h1 class="header__title">Take the Streets</h1>
+          </div>
+        </div>
+      </div>
+    </header>
+    <aside class="page__menu menu" id="menu">
+      <div class="container">
+        <div class="top-bar menu__top">
+          <a class="top-bar__logo--link" href="/">
+            <img
+              class="top-bar__logo"
+              src="./images/logo-black.png"
+              alt="MyBike logo"
+            >
+          </a>
+          <a href="#" class="icon icon--close"></a>
+        </div>
+        <div class="menu__bottom">
+          <nav class="nav menu__nav">
+            <ul class="nav__list">
+              <li class="nav__item">
+                <a class="nav__link" href="#">Home</a>
+              </li>
+              <li class="nav__item">
+                <a class="nav__link" href="#about-us">About Us</a>
+              </li>
+              <li class="nav__item">
+                <a class="nav__link" href="#compare-bikes">Compare Bikes</a>
+              </li>
+              <li class="nav__item">
+                <a class="nav__link" href="#details">Details</a>
+              </li>
+              <li class="nav__item">
+                <a class="nav__link" href="#contacts">Contacts</a>
+              </li>
+            </ul>
+          </nav>
+          <a href="tel:+1 234 5555-55-55" class="menu__phone-number">+1 234 5555-55-55</a>
+          <a href="tel:+1 234 5555-55-55" class="menu__call-to-order">Book a test ride</a>
+        </div>
+      </div>
+    </aside>
+    <main class="main">
+      <div class="container">
+        <div class="main__content">
+          <section class="move-free">
+            <h2 class="
+              move-free__title
+              section-title
+              section-title--align--left
+              "> Move Free </h2>
+            <div class="move-free__content">
+              <p class="move-free__descripiton">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-bikes">
+            <h2 class="section-title">Compare bikes</h2>
+            <div class="recommended__products">
+              <article class="product recommended__product">
+                <img
+                  src="./images/product/bike-1.png"
+                  alt="Sporty 4"
+                  class="product__photo"
+                >
+                <h3 class="product__title">Sporty 4</h3>
+                <p class="product__category">The iconic frame brought to a new performance height as a sporty, active ride.</p>
+                <p class="product__price">$ 2 590</p>
+              </article>
+              <article class="product recommended__product">
+                <img
+                  src="./images/product/bike-2.png"
+                  alt="Ride in town ST<"
+                  class="product__photo"
+                >
+                <h3 class="product__title">Ride in town ST</h3>
+                <p class="product__category">An open frame for an upright riding position as the most comfortable ride in town.</p>
+                <p class="product__price">$ 2 590</p>
+              </article>
+              <article class="product recommended__product">
+                <img
+                  src="./images/product/bike-3.png"
+                  alt="Agile ride 3"
+                  class="product__photo"
+                >
+                <h3 class="product__title">Agile ride 3</h3>
+                <p class="product__category">The lightweight frame that has earned its street tread as a sleek, agile ride.</p>
+                <p class="product__price">$ 2 090</p>
+              </article>
+            </div>
+          </section>
+          <section class="categories" id="categories">
+            <h2 class="section-title">The details</h2>
+            <div class="categories__wrapper">
+              <article class="category">
+                <div class="category__photos">
+                  <a href="#" class="category__link category__link--wide">
+                    <img
+                      class="category__photo"
+                      src="./images/category/1.png"
+                      alt="bicycle steering wheel with auto lock"
+                    >
+                  </a>
+                  <a href="#" class="category__link category__link--square">
+                    <img
+                      class="category__photo"
+                      src="./images/category/2.png"
+                      alt="bicycle steering wheel with auto lock"
+                    >
+                  </a>
+                </div>
+                <h3 class="category__title">Auto Unlock</h3>
+                <p class="category__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="category">
+                <div class="category__photos">
+                  <a href="#" class="category__link category__link--wide">
+                    <img
+                      class="category__photo"
+                      src="./images/category/3.png"
+                      alt="bike frame and battery"
+                    >
+                  </a>
+                  <a href="#" class="category__link category__link--square">
+                    <img
+                      class="category__photo"
+                      src="./images/category/4.png"
+                      alt="bike frame and battery"
+                    >
+                  </a>
+                </div>
+                <h3 class="category__title">Range & Integrated lights</h3>
+                <p class="category__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.</p>
+              </article>
+              <article class="category">
+                <div class="category__photos">
+                  <a href="#" class="category__link category__link--square"
+                  >
+                    <img
+                      class="category__photo"
+                      src="./images/category/5.png"
+                      alt="brakes and lights"
+                    >
+                  </a>
+                  <a href="#" class="category__link category__link--wide">
+                    <img
+                      class="category__photo"
+                      src="./images/category/6.png"
+                      alt="brakes and lights"
+                    >
+                  </a>
+                </div>
+                <h3 class="category__title">Hydraulic disc brakes & Lightweight</h3>
+                <p class="category__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.</p>
+              </article>
+              <article>
+                <a
+                  href="#"
+                  class="button"
+                >Explore</a>
+              </article>
+            </div>
+          </section>
+          <section class="contact-us">
+            <h2 class="section-title">Contact us</h2>
+            <div class="grid-container">
+              <article class="contact-us__block">
+                <form class="contact-us__form" onsubmit="return false;">
+                  <input
+                    class="contact-us__form-field"
+                    type="text"
+                    id="name"
+                    name="name"
+                    placeholder="Name"
+                    required
+                  >
+                  <input
+                    class="contact-us__form-field"
+                    type="email"
+                    id="email"
+                    name="email"
+                    placeholder="Email"
+                    required
+                  >
+                  <textarea
+                    class="contact-us__form-field contact-us__form-field--message"
+                    id="message"
+                    name="message"
+                    rows="8"
+                    cols="1"
+                    placeholder="Message"
+                    required
+                  ></textarea>
+                  <button class="button button--resize" type="submit">Send</button>
+                </form>
+              </article>
+              <article class="contact-us__info">
+                <div class="contact-us__info-section">
+                  <p class="contact-us__info-title">Phone</p>
+                  <a class="contact-us__info-link" href="tel:+1 234 5555-55-55">+1 234 5555-55-55</a>
+                </div>
+                <div class="contact-us__info-section">
+                  <p class="contact-us__info-title">Email</p>
+                  <a class="contact-us__info-link" href="email:[email protected]">[email protected]</a>
+                </div>
+                <div class="contact-us__info-section">
+                  <p class="contact-us__info-title">Address</p>
+                  <a
+                    class="contact-us__info-link"
+                    href="https://maps.app.goo.gl/Gcf3YWitahS1itrF8"
+                    target="_blank"
+                  >400 first ave.<br> suite 700<br> Minneapolis, MN 55401</a>
+                </div>
+              </article>
+            </div>
+          </section>
+        </div>
+        </section>
+      </div>
+    </main>
+    <footer class="footer"></footer>
   </body>
 </html>
diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss
@@ -0,0 +1,45 @@
+.button {
+  display: block;
+  margin: 0 auto;
+  box-sizing: border-box;
+  width: 100%;
+  height: 56px;
+  background-color: #fff;
+  border-radius: 40px;
+  padding: 14px;
+  color: $menu-color;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 27px;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+
+  transition: transform $effectDuration;
+
+  @include onTablet {
+    width: 392px;
+  }
+
+  @include onDesktop {
+    width: 324px;
+  }
+
+  &:hover {
+    box-shadow: 1px 4px 16px rgba(232, 232, 240, 0.4);
+    @include hoverCursor("/images/cursor/cursor-transparent.png");
+  }
+
+  &:active {
+    box-shadow: 1px 4px 16px rgba(232, 232, 240, 0.64);
+  }
+}
+
+.button--resize {
+  margin-bottom: 48px;
+
+  @include onTablet {
+    width: 100%;
+    margin-bottom: 0;
+  }
+}