mate-academy · SerhiyPaziyc · Oct 27, 2024 · Oct 27, 2024
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ Follow the videos in this and next lessons to implement the page block by block
 - Start writing styles in the `main.scss` file. It is be explained in the `Sass` lesson
 - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar;
 - When done check yourself using the [CHECKLIST](./checklist.md) when finished;
-- Deploy and create a Pull Request with a [DEMO LINK](https://<your_account>.github.io/layout_landing-page/)
+- Deploy and create a Pull Request with a [DEMO LINK](https://SerhiyPaziyc.github.io/layout_landing-page/)
 
 # Tips & Hints
 - Check `background-image: url()` to be relative to the `main.scss`. So should start with `../images`.

diff --git a/src/images/Image.jpg b/src/images/Image.jpg
diff --git a/src/images/Logo.png b/src/images/Logo.png
diff --git a/src/images/Recommended/ear(2).png b/src/images/Recommended/ear(2).png
diff --git a/src/images/Recommended/ear(stiks).png b/src/images/Recommended/ear(stiks).png
diff --git a/src/images/Recommended/phone(1).png b/src/images/Recommended/phone(1).png
diff --git a/src/images/button/Icon-Burger-menu-hover.png b/src/images/button/Icon-Burger-menu-hover.png
diff --git a/src/images/button/Icon-Burger-menu.png b/src/images/button/Icon-Burger-menu.png
diff --git a/src/images/button/Icon-Close.png b/src/images/button/Icon-Close.png
diff --git a/src/images/button/Icon-Phone-call.png b/src/images/button/Icon-Phone-call.png
diff --git a/src/images/category/accessories-1.png b/src/images/category/accessories-1.png
diff --git a/src/images/category/accessories-2.png b/src/images/category/accessories-2.png
diff --git a/src/images/category/all-product-1.png b/src/images/category/all-product-1.png
diff --git a/src/images/category/all-product-2.png b/src/images/category/all-product-2.png
diff --git a/src/images/category/audio-1.png b/src/images/category/audio-1.png
diff --git a/src/images/category/audio-2.png b/src/images/category/audio-2.png
diff --git a/src/images/fone-2.png b/src/images/fone-2.png
diff --git a/src/index.html b/src/index.html
@@ -1,5 +1,6 @@
+<!-- #region head -->
 <!doctype html>
-<html lang="en">
+<html lang="en" class="page">
   <head>
     <meta charset="UTF-8" />
     <meta
@@ -9,14 +10,297 @@
     <title>Landing Page</title>
     <link
       rel="stylesheet"
-      href="./styles/main.scss"
+      href="./styles/style.scss"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Space+Mono&display=swap" rel="stylesheet">
     <script
       src="scripts/main.js"
       defer
     ></script>
   </head>
-  <body>
-    <h1>Landing Page</h1>
+  <!-- #endregion -->
+  <body class="page__body">
+    <header class="header">
+      <div class="container">
+        <div class="header__content">
+          <div class="top-bar">
+            <a href="#" class="top-bar__logo">
+              <img src="./images/Logo.png" alt="Nothing logo">
+            </a>
+            <div class="top-bar__icons">
+              <div class="icon__animation">
+                <span class="icon__animation--phone-number">+1 234 555-55-55</span>
+                <a href="tel:+1 234 5555-55-55" class="icon icon__animation--phone"></a>
+              </div>
+              <a href="#menu" class="icon icon--menu"></a>
+            </div>
+          </div>
+          <div class="header__bottom">
+            <div class="header_waves"></div>
+            <h1 class="header_title">Bring joy back<br>to the everyday</h1>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <aside class="page__menu menu" id="menu">
+      <div class="container">
+        <div class="top-bar menu__top">
+          <a href="#" class="top-bar__logo"><img src="/src/images/Logo.png" alt="Nothing 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="#products">Products</a>
+              </li>
+              <li class="nav__item">
+                <a class="nav__link" href="#store">Store</a>
+              </li>
+              <li class="nav__item">
+                <a class="nav__link" href="#login">Login</a>
+              </li>
+              <li class="nav__item">
+                <a class="nav__link" href="#cart">Cart(0)</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">Call to order</a>
+        </div>
+      </div>
+    </aside>
+
+    <main class="main">
+      <div class="container">
+        <div class="main__content">
+          <section class="recommended">
+            <h2 class="section-title" id="products">Recommended</h2>
+            <div class="recommended__products">
+              <article class="product recommended__product">
+                <img
+                  src="/src/images/Recommended/phone(1).png"
+                  alt="phone-nothing"
+                  class="product__photo"
+                >
+                <h3 class="product__title">Phone (1)</h3>
+                <p class="product__category">Through the Glyph Interface, a perfected OS and exceptional dual camera. All startlingly fast.</p>
+                <p class="product__price">$ 499.00</p>
+              </article>
+              <article class="product recommended__product">
+                <img
+                  src="/src/images/Recommended/ear(2).png"
+                  alt="phone-nothing"
+                  class="product__photo"
+                >
+                <h3 class="product__title">Ear (2)</h3>
+                <p class="product__category">Perfecting the path from artist to ear. So that music sounds just as it was intended.</p>
+                <p class="product__price">$ 149.00</p>
+              </article>
+              <article class="product recommended__product">
+                <img
+                  src="/src/images/Recommended/ear(stiks).png"
+                  alt="phone-nothing"
+                  class="product__photo"
+                >
+                <h3 class="product__title">Ear (stick)</h3>
+                <p class="product__category">Tech you can’t feel. Leaving just space for sound to come to life. Powered by custom sound technology.</p>
+                <p class="product__price">$ 119.00</p>
+              </article>
+            </div>
+          </section>
+          <section class="categories">
+            <h2 class="section-title" id="store">Browse Nothing products by category</h2>
+
+            <div class="categories__wrapper">
+              <article class="category">
+                <div class="category__photos">
+                  <a class="category__link category__link--wide">
+                    <img
+                      src="/src/images/category/all-product-1.png"
+                      alt="All products"
+                      class="category__photo"
+                    >
+                  </a>
+                  <a class="category__link category__link--square">
+                    <img
+                      src="/src/images/category/all-product-2.png"
+                      alt="All products"
+                      class="category__photo"
+                    >
+                  </a>
+                </div>
+
+                <h3 class="category__title">All products</h3>
+              </article>
+
+              <article class="category">
+                <div class="category__photos">
+                  <a class="category__link category__link--square">
+                    <img
+                      src="/src/images/category/audio-1.png"
+                      alt="Audio"
+                      class="category__photo"
+                    >
+                  </a>
+                  <a class="category__link category__link--wide">
+                    <img
+                      src="/src/images/category/audio-2.png"
+                      alt="Audio"
+                      class="category__photo"
+                    >
+                  </a>
+                </div>
+
+                <h3 class="category__title">Audio</h3>
+              </article>
+
+              <article class="category">
+                <div class="category__photos">
+                  <a class="category__link category__link--wide">
+                    <img
+                      src="/src/images/category/accessories-1.png"
+                      alt="Accessories"
+                      class="category__photo"
+                    >
+                  </a>
+                  <a class="category__link category__link--square">
+                    <img
+                      src="/src/images/category/accessories-2.png"
+                      alt="Accessories"
+                      class="category__photo"
+                    >
+                  </a>
+                </div>
+
+                <h3 class="category__title">Accessories</h3>
+              </article>
+
+              <a class="button-link">
+                <span class="button-text">View all</span>
+              </a>
+
+            </div>
+          </section>
+
+          <div class="main__photo-texture">
+            <div class="photo-texture"></div>
+          </div>
+
+          <section class="about-us" id="about-us">
+
+            <h2 class="
+            about-us__title
+            section-title
+            section-title--align--left
+            ">
+              About us
+            </h2>
+
+            <div class="about-us__content">
+              <div class="about-us__description">
+                <p>We’re a London-based tech
+                  company on a mission to
+                  remove barriers between
+                  people and technology
+                </p>
+                <p>To do this, we’re crafting
+                  intuitive, flawlessly
+                  connected products that
+                  improve our lives without
+                  getting in the way.
+                  No confusing tech-speak. No
+                  silly product names. Just
+                  artistry, passion and trust.
+                  And products we’re proud to
+                  share with our friends and
+                  family. Simple.
+                </p>
+                <p>Because beautiful tech
+                  shouldn’t be complicated.
+                </p>
+              </div>
+            </div>
+          </section>
+          <section
+            class="contact_container"
+            id="contact"
+          >
+            <h2 class="section-title">Contact us</h2>
+
+            <div class="contact__content">
+              <form
+                onsubmit="this.reset(); return false;"
+                action="#"
+                class="form contact__form"
+              >
+                <input
+                  type="text"
+                  class="form__input form__input--name"
+                  name="name"
+                  placeholder="Name"
+                  required
+                />
+                <input
+                  type="email"
+                  class="form__input form__input--email"
+                  name="email"
+                  placeholder="Email"
+                  required
+                />
+                <textarea
+                  name="message"
+                  id="message"
+                  placeholder="Message"
+                  class="form__input form__input--message"
+                ></textarea>
+                <a class="button-link">
+                  <span class="button-text button-text--send">send</span>
+                </a>
+              </form>
+
+              <div class="contact__adress">
+                <div class="contact__info">
+                  <p class="contact__label">Phone</p>
+                  <a
+                    class="contact__link"
+                    href="tel:123455555555"
+                  >
+                    +1 234 5555-55-55
+                  </a>
+                </div>
+
+                <div class="contact__info">
+                  <p class="contact__label">Email</p>
+                  <a
+                    class="contact__link"
+                    href="mailto:hello@baGng&olufsen.com"
+                  >
+                    [email protected]
+                  </a>
+                </div>
+
+                <div class="contact__info">
+                  <p class="contact__label">Address</p>
+                  <a
+                    class="contact__link"
+                    href="https://maps.app.goo.gl/cjtqAGM9snh4gEUa6"
+                  >
+                  400 first ave.<br>suite 700<br>Minneapolis, MN 55401
+                  </a>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </main>
+
+    <footer class="footer"></footer>
   </body>
 </html>
diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss
@@ -0,0 +1,42 @@
+.about-us {
+  &__fon-photo {
+    position: relative;
+    background-image: url(/src/images/fone-2.png);
+    background-size: cover;
+    background-position: center;
+    height: 460px;
+    width: 100%;
+  }
+
+  @include page-grid;
+
+  &__title {
+    grid-column: 1 / -1;
+
+    @include on-tablet {
+      grid-column: 1 / 4;
+    }
+
+    @include on-desktop {
+      grid-column: 1 / 7;
+    }
+  }
+
+  &__content {
+    grid-column: 1 / -1;
+
+    @include on-tablet {
+      grid-column: 4 / 7;
+    }
+
+    @include on-desktop {
+      grid-column: 7 / 13;
+    }
+  }
+
+  &__description {
+    font-family: "Space Mono", serif;
+    margin: 0;
+    line-height: 22.4px;
+  }
+}