header done

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

@@ -25,13 +25,10 @@
           margin: 10px auto 0;
           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);
+          text-shadow: 0px 15px 102.86px rgba(0, 0, 0, 0.9), 0px 15px 40.02px rgba(0, 0, 0, 0.51);
         }
     }
 
-    // 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;
     }
@@ -43,6 +40,10 @@
     .page-header{
         height: 380px;
         background-position: center center;
+
+        &::before {
+          background: rgba(0,0,0, .5);
+        }
     }
     .profile{
         text-align: center;
@@ -130,44 +131,12 @@
     }
 }
 
-.signup-page{
+.landing-page {
-    .page-header{
+  .page-header {
-        min-height: 100vh;
+    &::before {
-        height: auto;
+      background: rgba(0,0,0, .5);
-        display: inherit;
-
-        .container{
-            padding-top: 20vh;
-        }
     }
-
+  }
-    .card-signup{
-        border-radius: $border-radius-base * 2;
-        @include shadow-16dp();
-        margin-bottom: 100px;
-        padding: 40px 0px;
-    }
-    .info-horizontal{
-        padding: 0px 0px 20px;
-    }
-    .social{
-        .btn{
-            margin: 5px;
-        }
-        h4{
-            margin-top: 20px;
-        }
-    }
-    .footer{
-        .container{
-            padding: 0;
-        }
-        .copyright,
-        a{
-            color: #FFFFFF;
-        }
-    }
-
 }
 
 .login-page {
@@ -188,6 +157,10 @@
     height: 100%;
     min-height: -webkit-fill-available;
 
+    &::before {
+      background: rgba(0,0,0, .5);
+    }
+
     > .container {
       padding-top: 100px;
       padding-bottom: 150px;

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

@@ -51,10 +51,6 @@
         content: "";
     }
 
-    &::before{
-    background: rgba(0,0,0,.2);
-    }
-
     .md-layout{
         z-index: 2;
         position: relative;

src/components/cards/LoginCard.vue

@@ -48,56 +48,3 @@ export default {
 
 <style lang="css">
 </style>
-
-<!-- <div class="card card-login card-hidden">
-  <div class="card-header card-header-rose text-center">
-    <h4 class="card-title">Log in</h4>
-    <div class="social-line">
-      <a href="#pablo" class="btn btn-just-icon btn-link btn-white">
-        <i class="fa fa-facebook-square"></i>
-      </a>
-      <a href="#pablo" class="btn btn-just-icon btn-link btn-white">
-        <i class="fa fa-twitter"></i>
-      </a>
-      <a href="#pablo" class="btn btn-just-icon btn-link btn-white">
-        <i class="fa fa-google-plus"></i>
-      </a>
-    </div>
-  </div>
-  <div class="card-body ">
-    <p class="card-description text-center">Or Be Classical</p>
-    <span class="bmd-form-group">
-      <div class="input-group">
-        <div class="input-group-prepend">
-          <span class="input-group-text">
-            <i class="material-icons">face</i>
-          </span>
-        </div>
-        <input type="text" class="form-control" placeholder="First Name...">
-      </div>
-    </span>
-    <span class="bmd-form-group">
-      <div class="input-group">
-        <div class="input-group-prepend">
-          <span class="input-group-text">
-            <i class="material-icons">email</i>
-          </span>
-        </div>
-        <input type="email" class="form-control" placeholder="Email...">
-      </div>
-    </span>
-    <span class="bmd-form-group">
-      <div class="input-group">
-        <div class="input-group-prepend">
-          <span class="input-group-text">
-            <i class="material-icons">lock_outline</i>
-          </span>
-        </div>
-        <input type="password" class="form-control" placeholder="Password...">
-      </div>
-    </span>
-  </div>
-  <div class="card-footer justify-content-center">
-    <a href="#pablo" class="btn btn-rose btn-link btn-lg">Lets Go</a>
-  </div>
-</div> -->

src/views/Index.vue

@@ -4,9 +4,10 @@
       <div class="md-layout">
         <div class="md-layout-item">
           <div class="image-wrapper">
-            <!-- <img :src="leaf5" alt="" class="leaf5"> -->
+            <img :src="leaf4" alt="leaf4" class="leaf4" v-show="leafShow">
-            <img :src="leaf2" alt="" class="leaf2">
+            <img :src="leaf3" alt="leaf3" class="leaf3" v-show="leafShow">
-            <img :src="leaf1" alt="" class="leaf1">
+            <img :src="leaf2" alt="leaf2" class="leaf2" v-show="leafShow">
+            <img :src="leaf1" alt="leaf1" class="leaf1" v-show="leafShow">
             <div class="brand">
               <h1>Vue Material Kit</h1>
               <h3>A Badass Vue.js UI Kit made with Material Design.</h3>
@@ -208,9 +209,13 @@ export default {
       type: String,
       default: require("@/assets/img/vue-mk-header.jpg")
     },
-    leaf5: {
+    leaf4: {
       type: String,
-      default: require("@/assets/img/leaf5.png")
+      default: require("@/assets/img/leaf4.png")
+    },
+    leaf3: {
+      type: String,
+      default: require("@/assets/img/leaf3.png")
     },
     leaf2: {
       type: String,
@@ -237,9 +242,19 @@ export default {
     return {
       firstname: null,
       email: null,
-      password: null
+      password: null,
+      leafShow: false
     };
   },
+  methods: {
+    leafActive() {
+      if (window.innerWidth < 768) {
+        this.leafShow = false;
+      } else {
+        this.leafShow = true;
+      }
+    }
+  },
   computed: {
     headerStyle() {
       return {
@@ -251,6 +266,13 @@ export default {
         backgroundImage: `url(${this.signup})`
       };
     }
+  },
+  mounted() {
+    this.leafActive();
+    window.addEventListener("resize", this.leafActive);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.leafActive);
   }
 };
 </script>
@@ -268,17 +290,27 @@ export default {
 }
 
 .leaf1,
-.leaf5,
+.leaf3,
+.leaf4,
 .leaf2 {
   position: absolute;
   z-index: 9;
 }
 
-.leaf5 {
+.leaf4 {
-  top: -136px;
+  right: 172px;
-  left: 71px;
+  top: -122px;
-  width: 36%;
+  width: 17%;
-  transform: rotate(-49deg);
+  width: 32%;
+  transform: rotate(-83deg);
+}
+
+.leaf3 {
+  top: 21px;
+  right: -69px;
+  left: auto;
+  width: 24%;
+  transform: rotate(-13deg);
 }
 
 .leaf2 {
@@ -295,4 +327,24 @@ export default {
   width: 15%;
   left: -11px;
 }
+
+@media all and (max-width: 768px) {
+  .index-page .image-wrapper /deep/ .brand {
+    h1 {
+      font-size: 4.3rem;
+    }
+
+    h3 {
+      max-width: 500px;
+      line-height: normal;
+      font-size: 1.7rem;
+    }
+  }
+}
+
+@media all and (max-width: 450px) {
+  .index-page .image-wrapper /deep/ .brand {
+    max-width: 300px;
+  }
+}
 </style>