From 7d5a6b2cb2fb85f324dfd8acf001f5140048e34f Mon Sep 17 00:00:00 2001
From: OlenaIa <121794911+OlenaIa@users.noreply.github.com>
Date: Tue, 28 Feb 2023 15:07:52 +0200
Subject: [PATCH] Mobile & Tablet header
---
css/styles.css | 264 +++++++++++++++++++++++++-------
images/charm_menu-hamburger.svg | 10 ++
images/icons.svg | 5 +-
index.html | 75 +++++++++
js/mobile-menu.js | 28 ++++
5 files changed, 328 insertions(+), 54 deletions(-)
create mode 100644 images/charm_menu-hamburger.svg
create mode 100644 js/mobile-menu.js
diff --git a/css/styles.css b/css/styles.css
index dcc2deb..d0a2d2b 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -39,6 +39,7 @@
--border-modal-btn: rgba(0, 0, 0, 0.1);
--fill-customer-icon: #AFB1B8;
--fill-modal-icon: #2E2F42;
+ --stroke-mobile-menu-icon: #2E2F42;
--border-portfolio: #E7E9FC;
--text-overlay: #F4F4FD;
--main-text-font: 'Roboto', sans-serif;
@@ -47,42 +48,44 @@
--transition-duration: 250ms;
}
-/* body {
+body {
color: var(--primary-text-color);
background-color: var(--primary-background-color);
font-family: var(--main-text-font);
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.02em;
-} */
+}
/* Загальні налаштування контейнера */
.container {
- width: 100%;
- margin-left: auto;
- margin-right: auto;
padding-left: 16px;
padding-right: 16px;
outline: 2px solid tomato;
}
-@media screen and (min-width: 480px) {
+@media screen and (min-width: 428px) {
.container {
width: 428px;
+ margin-left: auto;
+ margin-right: auto;
}
}
-/* .container {
- width: 1158px;
- margin-left: auto;
- margin-right: auto;
- padding-left: 15px;
- padding-right: 15px;}*/
- /* outline: 2px solid tomato; */
-
-
+@media screen and (min-width: 768px) {
+ .container {
+ width: 768px;
+ }
+}
+@media screen and (min-width: 1200px) {
+ .container {
+ width: 1158px;
+ padding-left: 15px;
+ padding-right: 15px;
+ }
+}
/* Зкинути крапки */
.list {
@@ -112,14 +115,14 @@ img {
/* Загальні падінги у секцій */
-.section {
+/* .section {
padding-top: 120px;
padding-bottom: 120px;
-}
+} */
/* Заголовки */
-.ttl {
+/* .ttl {
color: var(--title-text-color);
text-transform: capitalize;
}
@@ -156,71 +159,206 @@ img {
font-size: 36px;
line-height: 1.11;
-}
+} */
/* Логотип */
+
+
+
+/* .ftr-logo {
+ display: inline-block;
+ margin-bottom: 16px;
+ line-height: 1.17;
+ color: var(--logo-footer-second-part);
+} */
+
+/* ============== HEADER =============== */
+
+.header-page {
+ padding-top: 24px;
+ padding-bottom: 23px;
+ border-bottom: 1px solid var(--footer-text-color);
+ box-shadow: 0px 2px 1px rgba(46, 47, 66, 0.08), 0px 1px 1px rgba(46, 47, 66, 0.16), 0px 1px 6px rgba(46, 47, 66, 0.08);}
+
+.header-cntnr {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.header-nav a {
+ color: var(--title-text-color);
+ text-decoration: none;
+}
+
.logo {
font-family: var(--logo-text-font);
font-size: 18px;
+ line-height: 1.17;
letter-spacing: 0.03em;
text-decoration: none;
- text-transform:uppercase;
+ text-transform: uppercase;
}
.accent {
color: var(--accent-color);
}
-.header-logo {
- margin-right: 76px;
- line-height: 1.33;
+@media screen and (max-width: 767px) {
+.header-menu,
+address {
+ display: none;
}
-.ftr-logo {
- display: inline-block;
- margin-bottom: 16px;
- line-height: 1.17;
- color: var(--logo-footer-second-part);
+.mobile-menu-btn {
+ padding: 0;
+ border: none;
+ line-height: 0;
+ background-color: transparent;
+}
+
+.mbl-menu-icon {
+ stroke: var(--stroke-mobile-menu-icon);
+}
+
+.mobile-menu {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 100;
+ width: 100%;
+ height: 100%;
+ background-color: var(--primary-background-color);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+
+ transition: transform var(--transition-duration), opacity var(--transition-duration) cubic-bezier(var(--cubic));
}
-/* ========= Хедер ========= */
+.mobile-menu.is-open {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+ transform: translateX(0);
+}
-/* .header-cntnr {
+.mobile-menu-container {
+ position: relative;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 80px 24px 40px 24px;
+ max-width: 396px;
+ max-height: 796px;
+}
+
+.mobile-close-btn {
+ position: absolute;
+ top: 24px;
+ right: 8px;
display: flex;
- justify-content: space-between;
+ justify-content: center;
align-items: center;
+ width: 24px;
+ height: 24px;
+ padding: 0;
+ background-color: var(--modal-btn-background-color);
+ border: 1px solid var(--border-modal-btn);
+ border-radius: 50%;
}
-.header-page {
- border-bottom: 1px solid var(--footer-text-color);
- box-shadow: 0px 2px 1px rgba(46, 47, 66, 0.08), 0px 1px 1px rgba(46, 47, 66, 0.16), 0px 1px 6px rgba(46, 47, 66, 0.08);
-} */
+.mobile-menu-list {
+ margin-bottom: 284px;
+}
+
+.mobile-menu a {
+ text-decoration: none;
+}
-/* Навігація сайту */
+.mobile-menu-item:not(:last-child) {
+ margin-bottom: 40px;
+}
-/* .header-nav a {
+.mobile-navigation {
+ font-weight: 700;
+ font-size: 36px;
+ line-height: 1.11;
+ text-transform: capitalize;
color: var(--title-text-color);
- text-decoration: none;
+}
+
+.mobile-navigation-contacts {
+ color: var(--activ-hover-color);
+}
+
+.mobile-addrss-list {
+ margin-bottom: 48px;
+}
+
+.mobile-addrss-item:first-child {
+ margin-bottom: 40px;
+}
+
+.mobile-tel {
+ font-weight: 700;
+ font-size: 36px;
+ line-height: 1.11;
+ color: var(--accent-color);
+}
+
+.mobile-email {
+ font-weight: 500;
+ font-size: 20px;
+ line-height: 1.2;
+ color: var(--primary-text-color);
+}
+
+.net-list {
+ display: flex;
+}
+
+.mobile-net-list {
+ gap: 56px;
+}
+
+.net-link {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+}
+
+.mobile-net-link {
+ background-color: var(--accent-color);
+}
+}
+
+/* +++++++++++++++++ Tablet +++++++++++ */
+
+@media screen and (min-width: 768px) {
+ .mobile-menu-btn,
+ .mobile-menu {
+ display: none;
+ }
}
.header-nav,
-.header-menu,
-.addrss {
+.header-menu {
display: flex;
}
-.menu-item {
- position: relative;
+.header-logo {
+ margin-right: 123px;
}
.navigation {
font-weight: 500;
- font-size: 16px;
transition: color var(--transition-duration) cubic-bezier(var(--cubic));
}
-.menu-item:not(:last-child),
-.addrss-item:not(:last-child) {
+.menu-item:not(:last-child) {
margin-right: 40px;
}
@@ -230,6 +368,10 @@ img {
color: var(--activ-hover-color);
}
+.menu-item {
+ position: relative;
+}
+
.navigation.current::after {
position: absolute;
bottom: -1px;
@@ -240,16 +382,24 @@ img {
height: 4px;
background-color: var(--activ-hover-color);
border-radius: 2px;
-} */
+}
-/* Адреса */
+.addrss-item:not(:last-child) {
+ margin-bottom: 6px;
+}
-/* .addrss a {
+.addrss a {
color: var(--primary-text-color);
font-style: normal;
text-decoration: none;
}
+.addrss-item {
+ font-size: 12px;
+ line-height: 1.17;
+ letter-spacing: 0.04em;
+}
+
.tel,
.email {
transition: color var(--transition-duration) cubic-bezier(var(--cubic));
@@ -262,11 +412,19 @@ img {
color: var(--activ-hover-color);
}
-.header-cntnr a {
- display: block;
- padding-top: 24px;
- padding-bottom: 23px;
-} */
+
+/*
+.addrss {
+ display: flex;
+}
+
+.addrss-item:not(:last-child) {
+ margin-right: 40px;
+}
+
+
+
+ */
/* ================ Герой ====================== */
diff --git a/images/charm_menu-hamburger.svg b/images/charm_menu-hamburger.svg
new file mode 100644
index 0000000..18e521a
--- /dev/null
+++ b/images/charm_menu-hamburger.svg
@@ -0,0 +1,10 @@
+
diff --git a/images/icons.svg b/images/icons.svg
index 8a70659..76fb777 100644
--- a/images/icons.svg
+++ b/images/icons.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/index.html b/index.html
index b6b4ab7..14761f2 100644
--- a/index.html
+++ b/index.html
@@ -39,6 +39,11 @@
+
+
+
@@ -545,6 +619,7 @@ Customers
-->
+