Mobile Navbar

Menu 50%
roynaldoktaviano · Mar 3, 2021 · 46ebc03 · 46ebc03
1 parent e9c0021
commit 46ebc03
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 1 deletion.
diff --git a/app/scss/_header.scss b/app/scss/_header.scss
@@ -1,8 +1,38 @@
 .header {
+
+    .mobile-menu {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: $veryDarkViolet;
+        background-image: url(../../images/bg-pattern-mobile-nav.svg);
+        background-position: center bottom;
+        background-repeat: no-repeat;
+        background-size: contain;
+
+        .mobile-link {
+            position: relative;
+            top: 6.25rem;
+            text-align: center;
+
+            a{
+                display: block;
+                color: $veryLightGray;
+                font-weight: 700;
+                margin-bottom: 2.1875rem;
+                font-size: 1.125rem;
+                letter-spacing: 2px;
+            }
+        }
+    }
+
     nav {
         position: relative;
         padding-top: 0.9375rem;
         padding-bottom: 0.9375rem;
+        background-color: $veryLightGray;
     }
 
     &-hamburger {

diff --git a/dist/css/style.css b/dist/css/style.css
diff --git a/dist/css/style.css.map b/dist/css/style.css.map
diff --git a/index.html b/index.html
@@ -19,6 +19,13 @@
 <body>
   <!-- START : Header -->
   <header class="header">
+    <div class="mobile-menu">
+      <div class="mobile-link">
+        <a href="#">HOW WE WORK</a>
+        <a href="#">BLOG</a>
+        <a href="#">ACCOUNT</a>
+      </div>
+    </div>
     <nav class="flex flex-jc-sb flex-ai-c container container-px">
       <a href="#">
         <img src="./images/logo.svg" alt="">