Merge pull request #12 from ElizabethBil/page-header

Add Mobile Menu
ElizabethBil · Oct 2, 2023 · 64bff8f · 64bff8f
2 parents 26f7ce4 + 1e7e5e2
commit 64bff8f
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 0 deletions.
diff --git a/src/css/header.css b/src/css/header.css
@@ -63,6 +63,90 @@
   border: none;
   margin-left: 4px;
 }
+/* Mobile Menu */
+.header-mobile-menu {
+  position: fixed;
+  z-index: 9999999;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: #ecd979;
+  background-image: url(/img/moblie-menu/mobile-menu.png);
+  background-repeat: no-repeat;
+  background-size: 274px;
+  background-position: center bottom;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+}
+.header-content-container {
+  width: 274px;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+}
+.header-mobile-list {
+  display: flex;
+  gap: 32px;
+}
+.header-menu-first-item {
+  width: 162px;
+  height: 40px;
+}
+.header-menu-second-item {
+  width: 40px;
+  height: 40px;
+}
+.header-mobile-address {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
+}
+.header-mobile-address-link {
+  line-height: 1.17;
+  text-transform: uppercase;
+  font-style: normal;
+  letter-spacing: 0.04em;
+  color: #1c2225;
+  font-size: 12px;
+  padding: 12px 20px;
+  border-radius: 15px;
+  border: 1px solid rgba(28, 34, 37, 0.1);
+}
+.header-mobile-button {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+.header-mobile-icon {
+  stroke: #1c2225;
+}
+.header-mobile-nav-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 20px;
+  margin-top: 190px;
+  margin-left: auto;
+  margin-bottom: auto;
+}
+.header-mobile-nav-link {
+  color: #1c2225;
+  font-size: 14px;
+  line-height: 1.29;
+  text-transform: uppercase;
+}
 /* Tablet Styles */
 @media screen and (max-width: 1279px) {
   .header-nav-list {
@@ -88,6 +172,39 @@
   .header-button-icon {
     height: 44px;
   }
+  /* Mobile Menu */
+  .header-mobile-menu {
+    background-image: url(/img/moblie-menu/tablet-menu.png);
+    background-size: 380px;
+  }
+  .header-content-container {
+    width: 380px;
+    padding: 20px 32px;
+  }
+  .header-mobile-list {
+    gap: 70px;
+  }
+  .header-menu-first-item {
+    width: 197px;
+    height: 48px;
+  }
+  .header-menu-second-item {
+    width: 48px;
+    height: 48px;
+  }
+  .header-mobile-address-link {
+    font-size: 14px;
+    line-height: 1.43;
+    padding: 14px 28px;
+  }
+  .header-mobile-icon {
+    width: 44px;
+    height: 44px;
+  }
+  .header-mobile-nav-list {
+    gap: 25px;
+    margin-top: 224px;
+  }
 }
 /* Laptop Styles */
 @media screen and (min-width: 1280px) {

diff --git a/src/img/moblie-menu/mobile-menu.png b/src/img/moblie-menu/mobile-menu.png
diff --git a/src/img/moblie-menu/tablet-menu.png b/src/img/moblie-menu/tablet-menu.png
diff --git a/src/partials/header.html b/src/partials/header.html
@@ -1,3 +1,4 @@
+<!-- Page Header -->
 <header class="page-header">
   <div class="header-container">
     <nav class="header-navigation">
@@ -56,3 +57,38 @@
     </button>
   </div>
 </header>
+<!-- Mobile Menu -->
+<div class="header-mobile-menu">
+  <div class="header-content-container">
+    <ul class="header-mobile-list">
+      <li class="header-menu-first-item">
+        <address class="header-mobile-address">
+          <a href="tel:+380684439426" class="header-mobile-address-link"
+            >+380 (68) 443-94-26
+          </a>
+        </address>
+      </li>
+      <li class="header-menu-second-item">
+        <button class="header-mobile-button">
+          <svg class="header-mobile-icon" width="36" height="36">
+            <use href="./img/icons.svg#icon-close"></use>
+          </svg>
+        </button>
+      </li>
+    </ul>
+    <ul class="header-mobile-nav-list">
+      <li class="header-nav-list-item">
+        <a href="#" class="header-mobile-nav-link">about us</a>
+      </li>
+      <li class="header-nav-list-item">
+        <a href="#" class="header-mobile-nav-link">our collection</a>
+      </li>
+      <li class="header-nav-list-item">
+        <a href="#" class="header-mobile-nav-link">customer order</a>
+      </li>
+      <li class="header-nav-list-item">
+        <a href="#" class="header-mobile-nav-link">testimonials</a>
+      </li>
+    </ul>
+  </div>
+</div>