mate-academy · zhudim · Nov 13, 2024
diff --git a/src/images/background-image.png b/src/images/background-image.png
diff --git a/src/images/icon/Icon-burger-menu.png b/src/images/icon/Icon-burger-menu.png
diff --git a/src/images/icon/icon-burger-menu-hover.png b/src/images/icon/icon-burger-menu-hover.png
diff --git a/src/images/icon/icon-close.png b/src/images/icon/icon-close.png
diff --git a/src/images/icon/icon-phone-call.png b/src/images/icon/icon-phone-call.png
diff --git a/src/images/icon/logo.png b/src/images/icon/logo.png
diff --git a/src/index.html b/src/index.html
@@ -1,22 +1,176 @@
 <!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>
+    <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:[email protected]&display=swap"
+      rel="stylesheet"
+    />
     <link
       rel="stylesheet"
-      href="./styles/main.scss"
+      href="styles/main.scss"
     />
     <script
       src="scripts/main.js"
       defer
     ></script>
   </head>
-  <body>
-    <h1>Landing Page</h1>
+
+  <body class="page_body">
+    <header class="header">
+      <div class="top-bar">
+        <a
+          href="#"
+          class="top-bar__logo"
+        >
+          <img
+            src="images/logo.png"
+            alt="nothing logo"
+          />
+        </a>
+
+        <div class="top-bar__icons">
+          <a
+            href="tel:+1 234 5555-55-55"
+            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"
+        >
+          <img
+            src="images/logo.png"
+            alt="nothing logo"
+          />
+        </a>
+        <div class="top-bar__icons">
+          <a
+            href="#"
+            class="icon icon--close"
+          ></a>
+        </div>
+      </div>
+
+      <div class="menu__content">
+        <nav class="nav menu__nav">
+          <ul class="nav__list">
+            <li class="nav__item">
+              <a
+                href="#products"
+                class="nav__link"
+              >
+                Poducts
+              </a>
+            </li>
+            <li class="nav__item">
+              <a
+                href="#store"
+                class="nav__link"
+              >
+                Store
+              </a>
+            </li>
+            <li class="nav__item">
+              <a
+                href="#login"
+                class="nav__link"
+              >
+                Login
+              </a>
+            </li>
+            <li class="nav__item">
+              <a
+                href="#about-us"
+                class="nav__link"
+              >
+                About us
+              </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="product"
+        id="products"
+      >
+        <h2>Poducts</h2>
+      </section>
+
+      <section
+        class="store"
+        id="store"
+      >
+        <h2>Store</h2>
+      </section>
+
+      <section
+        class="login"
+        id="login"
+      >
+        <h2>Login</h2>
+      </section>
+
+      <section
+        class="about-us"
+        id="about-us"
+      >
+        <h2>About us</h2>
+      </section>
+    </main>
+
+    <footer class="footer"></footer>
   </body>
 </html>
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -0,0 +1,23 @@
+.header {
+  box-sizing: border-box;
+  height: 100vh;
+  background-image: url(../images/background-image.png);
+  background-size: cover;
+  background-position: center;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.header__bottom {
+  padding: 0 20px 40px;
+}
+
+.header__title {
+  margin: 0;
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 36px;
+  text-align: left;
+}
diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss
@@ -0,0 +1,17 @@
+.icon {
+  display: block;
+  width: 24px;
+  height: 24px;
+}
+
+.icon--phone {
+  background-image: url(../images/icon/icon-phone-call.png);
+}
+
+.icon--menu {
+  background-image: url(../images/icon/Icon-burger-menu.png);
+}
+
+.icon--close {
+  background-image: url(../images/icon/icon-close.png);
+}
diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss
@@ -0,0 +1,45 @@
+.menu {
+  box-sizing: border-box;
+
+  height: 100vh;
+  background-color: #e5e6e8;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.menu__top {
+  margin-bottom: 56px;
+}
+
+.menu__content {
+  padding-inline: 20px;
+}
+
+.menu__phone-number {
+  display: block;
+  margin-left: 20px;
+  color: inherit;
+  font-size: 16px;
+  line-height: 22.4px;
+  letter-spacing: 2px;
+  text-decoration: none;
+  margin-bottom: 16px;
+}
+
+.menu__call-to-order {
+  display: block;
+  margin-left: 20px;
+  width: fit-content;
+  padding: 4px;
+  border-bottom: 1px solid #292929;
+
+  font-size: 16px;
+  line-height: 22.4px;
+  letter-spacing: 2px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.menu__nav {
+  margin-bottom: 48px;
+}
diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss
@@ -0,0 +1,16 @@
+.nav__link {
+  color: inherit;
+  text-decoration: none;
+  font-size: 22px;
+  line-height: 22px;
+  letter-spacing: 2px;
+}
+
+.nav__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
@@ -0,0 +1,27 @@
+.page {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 16px;
+  line-height: 140%;
+  color: #292929;
+
+  scroll-behavior: smooth;
+}
+
+.page__body {
+  margin: 0;
+}
+
+.page__menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  opacity: 0;
+  pointer-events: none;
+}
+
+.page__menu:target {
+  opacity: 1;
+  pointer-events: all;
+}
diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss
@@ -0,0 +1,15 @@
+.top-bar__logo {
+  display: flex;
+}
+
+.top-bar__icons {
+  display: flex;
+  gap: 24px;
+}
+
+.top-bar {
+  padding: 24px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -1,3 +1,6 @@
-body {
-  margin: 0;
-}
+@import './blocks/page';
+@import './blocks/header';
+@import './blocks/icon';
+@import './blocks/menu';
+@import './blocks/nav';
+@import './blocks/top-bar';