burger-menu & changes

mate-academy · Jul 18, 2024 · d08b2f2 · d08b2f2
1 parent a18188f
commit d08b2f2
Show file tree

Hide file tree

Showing 12 changed files with 236 additions and 71 deletions.
diff --git a/src/images/icons/menu-close.svg b/src/images/icons/menu-close.svg
diff --git a/src/index.html b/src/index.html
@@ -59,26 +59,20 @@
           >
             <img
               src="images/logo/logo.svg"
-              alt="logo"
+              alt="Logo"
             />
           </a>
         </div>
 
-        <input
-          type="checkbox"
-          id="menu-toggle"
-          class="top-bar__menu-toggle-checkbox"
-        />
-        <label
-          for="menu-toggle"
-          class="top-bar__menu-toggle"
-          aria-label="Toggle menu"
+        <a
+          href="#menu"
+          class="top-bar__icon-menu"
         >
           <img
-            src="images/icons/menu.svg"
-            alt="Menu icon"
+            src="./images/icons/menu.svg"
+            alt="Icon Menu"
           />
-        </label>
+        </a>
 
         <nav class="top-bar__nav">
           <ul class="nav-list">
@@ -167,6 +161,82 @@ <h2 class="header-main__description-title">Strategic Agency</h2>
       </div>
     </header>
 
+    <aside
+      class="page__menu"
+      id="menu"
+    >
+      <div class="menu">
+        <div class="menu__top">
+          <a
+            href="#header"
+            class="menu__top-logo-link"
+          >
+            <img
+              src="images/logo/logo.svg"
+              alt="logo"
+              class="menu__top-logo"
+            />
+          </a>
+          <a
+            href="#header"
+            class="menu__top-menu-close"
+          >
+            <svg>
+              <svg
+                width="22"
+                height="22"
+                viewBox="0 0 22 22"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M20.5921 3.55623C21.1854 2.96292 21.1854 2.00097 20.5921 1.40766C19.9987 0.814348 19.0368 0.814348 18.4435 1.40766L10.9997 8.85147L3.55586 1.40766C2.96255 0.814347 2.0006 0.814348 1.40729 1.40766C0.813982 2.00097 0.813982 2.96292 1.40729 3.55623L8.8511 11L1.40729 18.4439C0.813981 19.0372 0.813982 19.9991 1.40729 20.5924C2.0006 21.1857 2.96255 21.1857 3.55586 20.5924L10.9997 13.1486L18.4435 20.5924C19.0368 21.1857 19.9987 21.1857 20.5921 20.5924C21.1854 19.9991 21.1854 19.0372 20.5921 18.4438L13.1482 11L20.5921 3.55623Z"
+                  fill="white"
+                />
+              </svg>
+            </svg>
+          </a>
+        </div>
+        <div class="menu__bottom">
+          <nav class="top-bar__burger">
+            <ul class="burger-list">
+              <li class="burger-list-item">
+                <a
+                  href="#about-us"
+                  class="burger-list-item-link"
+                >
+                  About us
+                </a>
+              </li>
+              <li class="burger-list-item">
+                <a
+                  href="#services"
+                  class="burger-list-item-link"
+                >
+                  Services
+                </a>
+              </li>
+              <li class="burger-list-item">
+                <a
+                  href="#testimonials"
+                  class="burger-list-item-link"
+                >
+                  Testimonials
+                </a>
+              </li>
+              <li class="burger-list-item">
+                <a
+                  href="#contact-us"
+                  class="burger-list-item-link"
+                >
+                  Contact us
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </aside>
+
     <main class="main">
       <!-- #region intro -->
       <div class="grid-block">
@@ -502,7 +572,7 @@ <h2 class="apply__title">Vision, Passion, Results</h2>
     <footer class="footer">
       <div class="footer__main">
         <div class="message">
-          <h3 class="message__title">Send us a message</h3>
+          <h3 class="footer__main-title">Send us a message</h3>
           <form
             class="message-form"
             onsubmit="this.reset(); return false;"
@@ -540,21 +610,21 @@ <h3 class="message__title">Send us a message</h3>
           class="contacts"
           id="contact-us"
         >
-          <h3 class="contacts__title">Contact us</h3>
+          <h3 class="footer__main-title">Contact us</h3>
           <p class="contacts__section-title">Call us</p>
           <a
             class="contacts__link"
             href="tel:+654 321 987"
           >
-            654 321 987
+            <p class="contacts__link-text">654 321 987</p>
           </a>
           <p class="contacts__section-title">Visit us</p>
           <a
             class="contacts__link"
             href="https://www.google.com.ua/maps/@48.9401535,38.4985813,18z?hl=en&entry=ttu"
             target="_blank"
           >
-            2905 West Drive, Buffalo Grove
+            <p class="contacts__link-text">2905 West Drive, Buffalo Grove</p>
           </a>
           <p class="contacts__section-title">Our socials</p>
           <div class="contacts__socials">

diff --git a/src/styles/blocks/apply.scss b/src/styles/blocks/apply.scss
@@ -68,6 +68,8 @@
 
     color: $c-white;
 
+    transition: background-color 0.3s ease;
+
     @include on-tablet {
       margin-bottom: 128px;
     }

diff --git a/src/styles/blocks/burger.scss b/src/styles/blocks/burger.scss
@@ -0,0 +1,25 @@
+.burger-list {
+  list-style-type: none;
+  color: $c-gray;
+
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+
+  &-item {
+    margin: 20px 0;
+
+    @include hover(scale, 1.02);
+
+    &-link {
+      font-family: Poppins, sans-serif;
+      text-transform: uppercase;
+      text-decoration: none;
+      letter-spacing: 3px;
+      color: $c-gray;
+      font-size: 13px;
+      font-weight: 700;
+    }
+  }
+}
diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss
@@ -1,18 +1,6 @@
 .contacts {
   margin-bottom: 80px;
 
-  &__title {
-    color: $c-white;
-
-    font-family: Poppins, sans-serif;
-    font-size: 32px;
-    font-weight: 600;
-    line-height: 41.6px;
-    text-align: left;
-
-    margin: 0 0 48px;
-  }
-
   &__section-title {
     margin-top: 40px;
 
@@ -30,13 +18,23 @@
 
   &__link {
     text-decoration: none;
-    color: $c-white;
 
-    font-family: 'Open Sans', sans-serif;
-    font-size: 24px;
-    font-weight: 600;
-    line-height: 36px;
-    text-align: left;
+    &-text {
+      transition: fill 0.3s;
+      color: $c-white;
+
+      font-family: 'Open Sans', sans-serif;
+      font-size: 24px;
+      font-weight: 600;
+      line-height: 36px;
+      text-align: left;
+
+      @include hover(scale, 1.02);
+
+      &:hover {
+        color: $c-blue;
+      }
+    }
   }
 
   &__socials {

diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss
@@ -14,6 +14,17 @@
     @include on-desktop-m {
       gap: 226px;
     }
+
+    &-title {
+      color: $c-white;
+
+      font-size: 32px;
+      font-weight: 600;
+      line-height: 41.6px;
+      text-align: left;
+
+      margin: 0 0 48px;
+    }
   }
 
   @include on-mobile {

diff --git a/src/styles/blocks/header-main.scss b/src/styles/blocks/header-main.scss
@@ -43,6 +43,8 @@
       text-align: center;
       color: $c-gray;
 
+      transition: background-color 0.3s ease;
+
       &:hover {
         background-color: $c-dark-blue;
       }
@@ -183,8 +185,10 @@
 
     &__slider {
       &-photo {
-        width: 502px;
+        width: 100%;
         height: 670px;
+
+        border-radius: 30px 0 30px 30px;
       }
 
       &-content {

diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss
@@ -0,0 +1,52 @@
+.menu {
+  box-sizing: border-box;
+  height: 100vh;
+  background-color: $main-page-color;
+  font-weight: 600;
+  text-transform: uppercase;
+
+  overflow: auto;
+
+  @include on-mobile {
+    padding: 20px;
+  }
+
+  @include on-tablet {
+    padding: 21px 41px;
+  }
+
+  @include on-desktop-s {
+    padding: 48px 54px;
+  }
+
+  @include on-desktop-m {
+    padding: 48px 227px;
+  }
+
+  @include on-desktop-l {
+    padding: 48px 707px;
+  }
+
+  &__top {
+    margin-bottom: 24px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &-menu-close {
+      @include hover(scale, 1.1);
+
+      width: 20px;
+      height: 20px;
+    }
+
+    &-logo {
+      @include hover(scale, 1.1);
+    }
+  }
+
+  &__nav {
+    margin-bottom: 40px;
+  }
+}
diff --git a/src/styles/blocks/message.scss b/src/styles/blocks/message.scss
@@ -19,17 +19,6 @@
     margin-bottom: 100px;
   }
 
-  &__title {
-    color: $c-white;
-
-    font-size: 32px;
-    font-weight: 600;
-    line-height: 41.6px;
-    text-align: left;
-
-    margin: 0 0 48px;
-  }
-
   &-form {
     &-input {
       background-color: transparent;
@@ -80,6 +69,8 @@
     }
 
     &__button {
+      transition: background-color 0.3s ease;
+
       &:hover {
         background-color: $c-dark-blue;
       }

diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
@@ -9,6 +9,25 @@ html {
   width: 100%;
   overflow-x: hidden;
 
+  &__menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(-100%);
+    transition: all 0.3s;
+
+    &:target {
+      transform: translateX(0);
+      opacity: 1;
+      z-index: 100;
+      pointer-events: all;
+    }
+  }
+
   &__header {
     background-color: $main-page-color;
     border-radius: 0 0 30px 30px;