header (#1)

* установка зависимостей * header
htmlacademy · Oct 16, 2024 · de5d674 · de5d674
1 parent 8468281
commit de5d674
Show file tree

Hide file tree

Showing 75 changed files with 3,076 additions and 3,384 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,11 +46,11 @@
   "devDependencies": {
     "@htmlacademy/editorconfig-cli": "3.0.0",
     "@linthtml/linthtml": "0.9.6",
-    "browser-sync": "3.0.2",
+    "browser-sync": "^3.0.3",
     "browserslist-to-esbuild": "2.1.1",
     "eslint": "8.57.0",
     "eslint-config-htmlacademy": "10.0.1",
-    "gulp": "4.0.2",
+    "gulp": "^5.0.0",
     "gulp-esbuild": "0.12.0",
     "gulp-html-bemlinter": "4.0.0",
     "gulp-htmlmin": "5.0.1",
@@ -60,8 +60,8 @@
     "gulp-sharp-responsive": "0.4.1",
     "gulp-stacksvg": "4.0.0",
     "gulp-svgmin": "4.1.0",
-    "htmlacademy-backstopjs": "6.6.1",
     "html-validate": "^8.5.0",
+    "htmlacademy-backstopjs": "6.6.1",
     "linthtml-config-htmlacademy": "1.0.25",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.38",

diff --git a/source/fonts/montserrat/Montserrat-Bold.woff b/source/fonts/montserrat/Montserrat-Bold.woff
diff --git a/source/fonts/montserrat/Montserrat-Bold.woff2 b/source/fonts/montserrat/Montserrat-Bold.woff2
diff --git a/source/fonts/montserrat/Montserrat-Medium.woff b/source/fonts/montserrat/Montserrat-Medium.woff
diff --git a/source/fonts/montserrat/Montserrat-Medium.woff2 b/source/fonts/montserrat/Montserrat-Medium.woff2
diff --git a/source/fonts/montserrat/Montserrat-Regular.woff b/source/fonts/montserrat/Montserrat-Regular.woff
diff --git a/source/fonts/montserrat/Montserrat-Regular.woff2 b/source/fonts/montserrat/Montserrat-Regular.woff2
diff --git a/source/icons/address-icon.svg b/source/icons/address-icon.svg
diff --git a/source/icons/close-button.svg b/source/icons/close-button.svg
diff --git a/source/icons/eco-icon.svg b/source/icons/eco-icon.svg
diff --git a/source/icons/energy-icon.svg b/source/icons/energy-icon.svg
diff --git a/source/icons/html-academy-logo.svg b/source/icons/html-academy-logo.svg
diff --git a/source/icons/menu-button.svg b/source/icons/menu-button.svg
diff --git a/source/icons/ok-icon.svg b/source/icons/ok-icon.svg
diff --git a/source/icons/phone-icon.svg b/source/icons/phone-icon.svg
diff --git a/source/icons/pinterest-icon.svg b/source/icons/pinterest-icon.svg
diff --git a/source/icons/size-icon.svg b/source/icons/size-icon.svg
diff --git a/source/icons/speed-icon.svg b/source/icons/speed-icon.svg
diff --git a/source/icons/union-button-icon.svg b/source/icons/union-button-icon.svg
diff --git a/source/icons/union-icon.svg b/source/icons/union-icon.svg
diff --git a/source/icons/user-icon.svg b/source/icons/user-icon.svg
diff --git a/source/icons/vk-icon.svg b/source/icons/vk-icon.svg
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/logo-desktop.svg b/source/images/logo-desktop.svg
diff --git a/source/images/logo-mobile.svg b/source/images/logo-mobile.svg
diff --git a/source/images/logo-tablet.svg b/source/images/logo-tablet.svg
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/index.html b/source/index.html
@@ -1,17 +1,80 @@
 <!DOCTYPE html>
 <html class="page" lang="ru">
-  <head>
-    <meta charset="UTF-8">
-    <title>Название проекта</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link rel="preload" href="#" type="font/woff2" as="font">
-    <link rel="stylesheet" href="styles/styles.css">
-    <script src="scripts/index.js" defer></script>
-  </head>
-  <body class="page__body">
-    <header class="header">Шапка</header>
-    <main>
-      <h1>Страница для старта</h1>
-    </main>
-  </body>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Drink2Go Фадеева Виктория</title>
+  <meta name="author" content="Фадеева Виктория">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <link rel="preload" href="#" type="font/woff2" as="font">
+  <link rel="stylesheet" href="styles/styles.css">
+  <link rel="preload" href="styles/styles.css" as="style">
+  <script src="scripts/index.js" defer></script>
+</head>
+
+<body class="page__body">
+  <header class="main-header" data-test="header">
+    <div class="main-header__container">
+      <a class="main-header__logo" href="index.html">
+        <picture>
+          <source media="(min-width: 1440px)" width="170" height="36" type="image/svg+xml"
+            srcset="images/logo-desktop.svg">
+          <source media="(min-width: 768px)" width="82" height="36" type="image/svg+xml"
+            srcset="images/logo-tablet.svg">
+          <img class="main-header__logo-image" src="images/logo-mobile.svg" width="32" height="36"
+            alt="Логотип Проекта Drink2Go">
+        </picture>
+        <span class="main-header__logo-text">Интернет-магазин кофейных напитков</span>
+      </a>
+      <nav class="main-header__nav main-nav main-nav--closed main-nav--nojs">
+        <button class="main-nav__toggle" type="button">
+          <span class="visually-hidden">Открыть меню</span>
+        </button>
+        <ul class="main-nav__list site-list">
+          <li class="site-list__item">
+            <a class="site-list__link site-list__link--active" href="index.html">
+              главная
+            </a>
+          </li>
+          <li class="site-list__item">
+            <a class="site-list__link" href="#">
+              каталог
+            </a>
+          </li>
+          <li class="site-list__item">
+            <a class="site-list__link" href="#">
+              доставка
+            </a>
+          </li>
+          <li class="site-list__item">
+            <a class="site-list__link" href="#">
+              о нас
+            </a>
+          </li>
+        </ul>
+        <div class="main-nav__user-list user-list">
+          <a class="user-list__icon user-list__icon--login" href="#">
+            <span class="user-list__text">войти</span>
+          </a>
+          <a class="user-list__icon user-list__icon--union" href="#">
+            <span class="user-list__text">корзина</span>
+          </a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  <main>
+    <section data-test="hero">
+    </section>
+    <section data-test="features">
+    </section>
+    <section data-test="catalog">
+    </section>
+    <section data-test="map">
+    </section>
+  </main>
+  <footer data-test="footer">
+  </footer>
+</body>
+
 </html>
diff --git a/source/scripts/index.js b/source/scripts/index.js
@@ -1 +1,9 @@
 /* в этот файл добавляет скрипты*/
+const navMain = document.querySelector('.main-nav');
+const navToggle = document.querySelector('.main-nav__toggle');
+
+navMain.classList.remove('main-nav--nojs');
+
+navToggle.onclick = function () {
+  navMain.classList.toggle('main-nav--opened');
+};
diff --git a/source/styles/blocks/header.scss b/source/styles/blocks/header.scss
diff --git a/source/styles/blocks/main-header.scss b/source/styles/blocks/main-header.scss
@@ -0,0 +1,74 @@
+.main-header__container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 12px 20px;
+  width: 320px;
+  margin: 0 auto;
+
+
+  @media (min-width: $tablet-width) {
+    width: 768px;
+    padding: 0 20px;
+  }
+
+  @media (min-width: $desktop-width) {
+    width: 1440px;
+    padding: 0 40px;
+  }
+}
+
+.main-header__logo {
+  text-decoration: none;
+  display: block;
+  width: 32px;
+  height: 36px;
+  margin-right: 88px;
+
+  @media (min-width: $tablet-width) {
+    width: 82px;
+    margin-right: 67px;
+  }
+
+  @media (min-width: $desktop-width) {
+    width: auto;
+    display: flex;
+    margin-right: 162px;
+  }
+
+  &:hover,
+  &:focus-visible {
+    opacity: 0.8;
+  }
+
+  &:active {
+    opacity: 0.6;
+  }
+}
+
+.main-header__logo-text {
+  display: none;
+
+  @media (min-width: $desktop-width) {
+    display: block;
+    width: 126px;
+    font-family: $primary-font;
+    font-size: 12px;
+    line-height: 16px;
+    color: $basic-black;
+    margin-left: 20px;
+  }
+}
+
+.main-header__logo-image {
+  width: 32px;
+  height: 36px;
+
+  @media (min-width: $tablet-width) {
+    width: 82px;
+  }
+
+  @media (min-width: $desktop-width) {
+    width: 170px;
+  }
+};