working on header vue

src/assets/scss/material-kit/_example-pages.scss

@@ -13,20 +13,25 @@
         text-align: center;
 
         h1{
-            font-size: 4.2rem;
+            font-size: 6rem;
             font-weight: 600;
             display: inline-block;
             position: relative;
             line-height: 1.15em;
+            text-shadow: 0px 15px 102.86px rgba(0, 0, 0, 0.7), 0px 15px 40.02px rgba(0, 0, 0, 0.21);
         }
         h3{
-            font-size: 1.313rem;
-            max-width: 500px;
+          font-size: 2.23rem;
           margin: 10px auto 0;
-            line-height: 1.4em;
+          line-height: 0;
+          font-weight: 400;
+          text-shadow: 0px 15px 102.86px rgba(0, 0, 0, 0.7), 0px 15px 40.02px rgba(0, 0, 0, 0.21);
         }
     }
 
+    // 0px 15px 102.86px 36.14px rgba(0, 0, 0, 0.46);
+    // box-shadow: 0px 15px 40px 5.98px rgba(0, 0, 0, 0.21);
+
     h4.description{
         font-size: 1.5em;
     }
@@ -179,4 +184,14 @@
     }
   }
 
+  .page-header {
+    height: 100%;
+    min-height: -webkit-fill-available;
+
+    > .container {
+      padding-top: 100px;
+      padding-bottom: 150px;
+    }
+  }
+
 }

src/assets/scss/material-kit/_headers.scss

@@ -52,7 +52,7 @@
     }
 
     &::before{
-    background: rgba(0,0,0,.5);
+    background: rgba(0,0,0,.2);
     }
 
     .md-layout{

src/assets/scss/material-kit/_inputs.scss

@@ -280,3 +280,7 @@
     border-radius: 4px;
   }
 }
+
+textarea {
+  resize: none;
+}

src/assets/scss/material-kit/_responsive.scss

@@ -324,7 +324,7 @@
         opacity: 0;
         top: 0;
         left: auto;
-        right: 260px;
+        right: 230px;
         content: "";
         z-index: 9999;
         overflow-x: hidden;

src/layout/MainNavbar.vue

@@ -163,9 +163,25 @@ export default {
     }
   },
   methods: {
+    bodyClick() {
+      let bodyClick = document.getElementById("bodyClick");
+
+      if (bodyClick === null) {
+        let body = document.querySelector("body");
+        let elem = document.createElement("div");
+        elem.setAttribute("id", "bodyClick");
+        body.appendChild(elem);
+
+        let bodyClick = document.getElementById("bodyClick");
+        bodyClick.addEventListener("click", this.toggleNavbarMobile);
+      } else {
+        bodyClick.remove();
+      }
+    },
     toggleNavbarMobile() {
       this.NavbarStore.showNavbar = !this.NavbarStore.showNavbar;
-      this.toggledClass = this.NavbarStore.showNavbar;
+      this.toggledClass = !this.toggledClass;
+      this.bodyClick();
     },
     handleScroll() {
       let scrollValue =

src/views/Index.vue

@@ -1,13 +1,19 @@
 <template>
   <div class="wrapper">
-    <parallax class="page-header header-filter clear-filter purple-filter" :style="headerStyle">
+    <parallax class="page-header header-filter" :style="headerStyle">
       <div class="md-layout">
         <div class="md-layout-item">
+          <div class="image-wrapper">
+            <!-- <img :src="leaf5" alt="" class="leaf5"> -->
+            <img :src="leaf2" alt="" class="leaf2">
+            <img :src="leaf1" alt="" class="leaf1">
             <div class="brand">
-            <h1>Vue Material Kit.</h1>
-            <h3>Badass VueJs Kit based on Material Design.</h3>
+              <h1>Vue Material Kit</h1>
+              <h3>A Badass Vue.js UI Kit made with Material Design.</h3>
             </div>
           </div>
+
+        </div>
       </div>
     </parallax>
     <div class="main main-raised">
@@ -56,7 +62,7 @@
       <div class="section">
         <div class="container text-center">
           <div class="md-layout">
-              <div class="md-layout-item md-size-66 ml-auto mr-auto text-center">
+              <div class="md-layout-item md-size-66 md-xsmall-size-100 ml-auto mr-auto text-center">
                   <h2>Completed with examples</h2>
                   <h4>The kit comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go. More importantly, looking at them will give you a picture of what you can built with this powerful kit.</h4>
               </div>
@@ -200,7 +206,19 @@ export default {
   props: {
     image: {
       type: String,
-      default: require("@/assets/img/bg2.jpg")
+      default: require("@/assets/img/vue-mk-header.jpg")
+    },
+    leaf5: {
+      type: String,
+      default: require("@/assets/img/leaf5.png")
+    },
+    leaf2: {
+      type: String,
+      default: require("@/assets/img/leaf2.png")
+    },
+    leaf1: {
+      type: String,
+      default: require("@/assets/img/leaf1.png")
     },
     signup: {
       type: String,
@@ -248,4 +266,33 @@ export default {
     display: flex;
   }
 }
+
+.leaf1,
+.leaf5,
+.leaf2 {
+  position: absolute;
+  z-index: 9;
+}
+
+.leaf5 {
+  top: -136px;
+  left: 71px;
+  width: 36%;
+  transform: rotate(-49deg);
+}
+
+.leaf2 {
+  width: 25%;
+  left: 170px;
+  top: -28px;
+  transform: rotate(90deg);
+}
+
+.leaf1 {
+  transform: rotate(0deg);
+  right: auto;
+  top: 25px;
+  width: 15%;
+  left: -11px;
+}
 </style>

src/views/Landing.vue

@@ -16,7 +16,7 @@
       <div class="section">
         <div class="container">
           <div class="md-layout">
-            <div class="md-layout-item md-size-66 mx-auto text-center">
+            <div class="md-layout-item md-size-66 md-xsmall-size-100 mx-auto text-center">
               <h2 class="title text-center">Let's talk product</h2>
               <h5 class="description">This is the paragraph where you can write more details about your product. Keep you user engaged by providing meaningful information. Remember that by this time, the user is curious, otherwise he wouldn't scroll to get here. Add a button if you want the user to see more.</h5>
             </div>
@@ -150,7 +150,7 @@
       <div class="section section-contacts">
         <div class="container">
           <div class="md-layout">
-            <div class="md-layout-item md-size-66 mx-auto">
+            <div class="md-layout-item md-size-66 md-xsmall-size-100 mx-auto">
               <h2 class="text-center title">Work with us</h2>
               <h4 class="text-center description">Divide details about your product or agency work into parts. Write a few lines about each one and contact us about any further collaboration. We will responde get back to you in a couple of hours.</h4>
               <form class="contact-form">

src/views/components/SmallNavigationSection.vue

@@ -63,7 +63,7 @@
           <md-toolbar class="md-info">
           <div class="md-toolbar-row">
             <div class="md-toolbar-section-start">
-              <h3 class="md-title">icons</h3>
+              <h3 class="md-title">Icons</h3>
 
             </div>
             <div class="md-toolbar-section-end">