dia landing page

mate-academy · Nov 26, 2024 · 1c0ebda · 1c0ebda
1 parent c184e65
commit 1c0ebda
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 1 deletion.
diff --git a/src/images/footer-svg/close-icon.svg b/src/images/footer-svg/close-icon.svg
diff --git a/src/index.html b/src/index.html
@@ -158,6 +158,69 @@ <h2 class="slide__text-title">Intro</h2>
         </div>
       </div>
     </header>
+    <aside
+      class="menu-aside menu-aside__positi"
+      id="menu"
+    >
+      <div class="container">
+        <div class="menu-aside__top">
+          <a
+            href="#"
+            class="menu-aside__logo-link"
+          >
+            <img
+              class="menu__logo"
+              src="./images/logo/dia-logo.svg"
+              alt="dia logo"
+            />
+          </a>
+
+          <a
+            href="#"
+            class="icon icon--close"
+          ></a>
+        </div>
+
+        <div class="menu__bottom">
+          <nav class="nav menu__nav">
+            <ul class="nav__list">
+              <li class="nav__item">
+                <a
+                  class="nav__link menu__link"
+                  href="#about-us"
+                >
+                  About us
+                </a>
+              </li>
+              <li class="nav__item">
+                <a
+                  class="nav__link menu__link"
+                  href="#services"
+                >
+                  Services
+                </a>
+              </li>
+              <li class="nav__item">
+                <a
+                  class="nav__link menu__link"
+                  href="#testimonials"
+                >
+                  Testimonials
+                </a>
+              </li>
+              <li class="nav__item">
+                <a
+                  class="nav__link menu__link"
+                  href="#contact-us"
+                >
+                  Contact Us
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </aside>
     <main>
       <section
         class="about-us"

diff --git a/src/styles/blocks/_burger-menu.scss b/src/styles/blocks/_burger-menu.scss
@@ -0,0 +1,30 @@
+.menu-aside {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  transition: all 0.3s;
+  opacity: 1;
+  transform: translateX(100%);
+  pointer-events: none;
+
+  &:target {
+    opacity: 1;
+    transform: translateX(0);
+    pointer-events: all;
+  }
+
+  &__positi {
+    background-color: $dark-backgraund;
+    box-sizing: border-box;
+    height: 100vh;
+  }
+
+  &__top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 20px;
+  }
+}
diff --git a/src/styles/blocks/_icons.scss b/src/styles/blocks/_icons.scss
@@ -15,3 +15,10 @@
     display: none;
   }
 }
+
+.icon--close {
+  background-image: url('/src/images/footer-svg/close-icon.svg');
+  display: block;
+  width: 24px;
+  height: 24px;
+}
diff --git a/src/styles/blocks/_menu-aside.scss b/src/styles/blocks/_menu-aside.scss
@@ -0,0 +1,13 @@
+.nav {
+  &__list {
+    padding-top: 20px;
+  }
+
+  &__item {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/src/styles/blocks/_service.scss b/src/styles/blocks/_service.scss
@@ -34,6 +34,10 @@
       flex-flow: row wrap;
     }
 
+    @media (min-width: 922px) {
+      grid-column: 3 / -1;
+    }
+
     @include on-small-desktop {
       grid-column: 6 / -1;
     }

diff --git a/src/styles/blocks/_what-people-say.scss b/src/styles/blocks/_what-people-say.scss
@@ -16,8 +16,13 @@
   }
 
   &__cards {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
     @include on-small-desktop {
-      display: flex;
+      flex-direction: row;
       gap: 20px;
     }
 

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -16,12 +16,20 @@
 @import './blocks/form';
 @import './blocks/contact-us';
 @import './blocks/footer-menu';
+@import './blocks/burger-menu';
+@import './blocks/menu-aside';
 
 body {
   background: $c-gray;
   margin: 0;
   color: $main-color;
   font-family: Poppins, sans-serif;
+
+  overflow-y: auto;
+
+  &:has(.menu-aside:target) {
+    overflow: hidden;
+  }
 }
 
 html {