add header

mate-academy · Oct 16, 2024 · 3d4febe · 3d4febe
1 parent e76756d
commit 3d4febe
Show file tree

Hide file tree

Showing 10 changed files with 236 additions and 31 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,12 +18,11 @@
   "keywords": [],
   "author": "Mate Academy",
   "license": "GPL-3.0",
-  "dependencies": {},
   "devDependencies": {
     "@linthtml/linthtml": "^0.9.6",
     "@mate-academy/bemlint": "latest",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^1.8.6",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/stylelint-config": "latest",
     "@parcel/transformer-sass": "^2.12.0",
     "jest": "^29.7.0",

diff --git a/src/index.html b/src/index.html
@@ -1,19 +1,192 @@
 <!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>Title</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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    />
     <link
       rel="stylesheet"
       href="./styles/main.scss"
     />
   </head>
-  <body>
-    <h1>Hello Mate Academy</h1>
+  <body class="page__body">
+    <header class="header">
+      <section class="top-bar">
+        <a
+          href="#"
+          class="top-bar__logo"
+        >
+          <img
+            src="./images/top-bar/logo.svg"
+            alt="logo"
+            class="top-bar__logo-img"
+          />
+        </a>
+        <nav class="top-bar__nav nav">
+          <ul class="nav__list top-bar__list">
+            <li class="nav__item">
+              <a
+                href="#"
+                class="nav__link"
+              >
+                Products
+              </a>
+            </li>
+            <li class="nav__item">
+              <a
+                href="#"
+                class="nav__link"
+              >
+                About Us
+              </a>
+            </li>
+            <li class="nav__item">
+              <a
+                href="#"
+                class="nav__link"
+              >
+                Blog
+              </a>
+            </li>
+            <li class="nav__item">
+              <a
+                href="#"
+                class="nav__link nav__link--contact-us"
+              >
+                <img
+                  src="./images/top-bar/phone.svg"
+                  alt="phone"
+                  class="nav__img"
+                />
+                Contact us
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <a
+          href="#menu"
+          class="top-bar__menu"
+        >
+          <img
+            src="./images/top-bar/icon-menu.svg"
+            alt="menu"
+            class="top-bar__menu-img"
+          />
+        </a>
+      </section>
+      <div class="container">
+        <div class="header__main">
+          <p class="header__desc">
+            We bake your fantasies — croissants, cakes, cookies, and cupcakes.
+          </p>
+          <h1 class="header__title">Creative bakery</h1>
+          <img
+            src="./images/header/cookie.png"
+            alt="cookie"
+            class="header__img"
+          />
+          <a
+            href="#"
+            class="header__link"
+          >
+            <img
+              src="./images/header/icon-cookie.svg"
+              alt="icon of cookie"
+              class="header__link-img"
+            />
+            Learn more
+          </a>
+        </div>
+      </div>
+    </header>
+    <aside
+      class="page__menu menu"
+      id="menu"
+    >
+      <section class="top-bar menu__top-bar">
+        <a
+          href="#"
+          class="top-bar__logo"
+        >
+          <img
+            src="./images/top-bar/logo.svg"
+            alt="logo"
+            class="top-bar__logo-img"
+          />
+        </a>
+        <a
+          href="#"
+          class="top-bar__close"
+        >
+          <img
+            src="./images/top-bar/icon-close.svg"
+            alt="menu"
+            class="top-bar__close-img"
+          />
+        </a>
+      </section>
+      <nav class="menu__nav nav">
+        <ul class="nav__list menu__list">
+          <li class="nav__item">
+            <a
+              href="#"
+              class="nav__link"
+            >
+              Products
+            </a>
+          </li>
+          <li class="nav__item">
+            <a
+              href="#"
+              class="nav__link"
+            >
+              About Us
+            </a>
+          </li>
+          <li class="nav__item">
+            <a
+              href="#"
+              class="nav__link"
+            >
+              Blog
+            </a>
+          </li>
+          <li class="nav__item">
+            <a
+              href="#"
+              class="nav__link nav__link--contact-us"
+            >
+              <img
+                src="./images/top-bar/phone.svg"
+                alt="phone"
+                class="nav__img"
+              />
+              Contact us
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </aside>
+    <main class="page__main"></main>
+    <footer></footer>
     <script src="scripts/main.js"></script>
   </body>
 </html>
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
@@ -1,3 +1,2 @@
 @import 'utils/vars';
 @import 'utils/mixins';
-@import 'utils/extends';
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -1,7 +1,2 @@
-@import 'utils';
-@import 'fonts';
-@import 'typography';
-
-body {
-  background: $c-gray;
-}
+@import './utils';
+@import './blocks';
diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
@@ -4,3 +4,47 @@
     #{$_property}: $_toValue;
   }
 }
+
+@mixin action($_property, $_toValue) {
+  transition: #{$_property} 0.3s;
+  &:active, &:focus {
+    #{$_property}: $_toValue;
+  }
+}
+
+@mixin on-tablet() {
+  @media (min-width: $tablet-min-width) {
+    @content;
+  }
+}
+
+@mixin on-desktop() {
+  @media (min-width: $desktop-min-width) {
+    @content;
+  }
+}
+
+@mixin on-desktopxl() {
+  @media (min-width: $desktopxl-min-width) {
+    @content;
+  }
+}
+
+@mixin page-grid {
+  --columns: 2;
+  --column-size: 1fr;
+
+  display: grid;
+  column-gap: 16px;
+  grid-template-columns: repeat(var(--columns), var(--column-size));
+
+  @include on-tablet {
+    --columns: 8;
+
+    column-gap: 24px;
+  }
+
+  @include on-desktopxl {
+    --column-size: 128px;
+  }
+}
diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss
@@ -1 +1,8 @@
-$c-gray: #eee;
+$tablet-min-width: 640px;
+$desktop-min-width: 1024px;
+$desktopxl-min-width: 1280px;
+$main-bg-color: #FFEEFC;
+$main-color: #F9512E;
+$secondary-color: #1C1A26;
+$footer-title-color: #7F8096;
+$footer-color: #fff;