mate-academy · BeginerAI · Oct 23, 2024 · Oct 23, 2024 · Oct 23, 2024 · Oct 31, 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://BeginerAI.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/index.html b/src/index.html
@@ -1,22 +1,102 @@
+<!-- #region head -->
 <!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>Landing Page</title>
+    <title>Nothing(R)</title>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <link
-      rel="stylesheet"
-      href="./styles/main.scss"
+    rel="stylesheet"
+    href="./styles/main.scss"
     />
     <script
       src="scripts/main.js"
       defer
     ></script>
   </head>
-  <body>
-    <h1>Landing Page</h1>
+  <!-- #endregion head -->
+  <body class="page__body">
+    <header class="header">
+      <div class="top-bar">
+        <a href="#" class="top-bar__logo-link">
+          <img  src="images/Logo.png"
+           alt="Nothing Logo"
+           class="top-bar__logo">
+        </a>
+
+        <div class="top-bar__icons">
+          <a href="#" class="icon icon--phone"></a>
+          <a href="#menu" class="icon icon--menu"></a>
+        </div>
+      </div>
+
+      <div class="header__bottom">
+        <h1 class="header__title">
+          Bring joy back
+          <br>
+          to the everyday
+        </h1>
+      </div>
+    </header>
+
+    <aside class="menu page__menu"  id="menu">
+      <div class="top-bar menu__top">
+        <a href="#" class="top-bar__logo-link">
+          <img src="images/Logo.png"
+           alt="Nothing Logo"
+           class="top-bar__logo">
+        </a>
+
+        <a href="#" class="icon icon--close"></a>
+
+      </div>
+
+      <div class="menu__content">
+        <nav class="nav menu__nav">
+          <ul class="nav__list">
+            <li class="nav__item">
+              <a class="nav__link" href="#recommended">Products</a>
+            </li>
+            <li class="nav__item">
+              <a class="nav__link" href="#categories">Store</a>
+            </li>
+            <li class="nav__item">
+              <a class="nav__link" href="#how-to-by">Login</a>
+            </li>
+            <li class="nav__item">
+              <a class="nav__link" href="#contacts">Cart(0)</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+
+      <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>
+
+    </aside>
+
+    <main class="main">
+      <section class="recommended" id="recommended">
+        <h2>Recommended</h2>
+      </section>
+
+      <section class="categories" id="categories">
+        <h2>Browse Nothing products by category</h2>
+      </section>
+
+      <section class="how-to-by" id="how-to-by">
+        <h2>About us</h2>
+      </section>
+
+      <section class="contacts" id="contacts">
+        <h2>Contact us</h2>
+      </section>
+    </main>
+
+    <footer class="footer"></footer>
   </body>
 </html>
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -1,3 +1,6 @@
-body {
-  margin: 0;
-}
+@import "utils/mixins";
+@import "blocks/header";
+@import "blocks/icon";
+@import "blocks/menu";
+@import "blocks/nav";
+@import "blocks/top-bar";