diff --git a/src/assets/img/leaf2.png b/src/assets/img/leaf2.png
index 5343d2a..d5c2fd8 100644
Binary files a/src/assets/img/leaf2.png and b/src/assets/img/leaf2.png differ
diff --git a/src/assets/img/leaf3.png b/src/assets/img/leaf3.png
index 125d4e9..ef28da8 100644
Binary files a/src/assets/img/leaf3.png and b/src/assets/img/leaf3.png differ
diff --git a/src/assets/img/leaf4.png b/src/assets/img/leaf4.png
new file mode 100644
index 0000000..8c4bda0
Binary files /dev/null and b/src/assets/img/leaf4.png differ
diff --git a/src/assets/img/leaf5.png b/src/assets/img/leaf5.png
deleted file mode 100644
index 6959978..0000000
Binary files a/src/assets/img/leaf5.png and /dev/null differ
diff --git a/src/assets/img/vue-mk-header.jpg b/src/assets/img/vue-mk-header.jpg
index 9e3646c..720de32 100644
Binary files a/src/assets/img/vue-mk-header.jpg and b/src/assets/img/vue-mk-header.jpg differ
diff --git a/src/assets/scss/material-kit/_example-pages.scss b/src/assets/scss/material-kit/_example-pages.scss
index 4af5798..416341f 100644
--- a/src/assets/scss/material-kit/_example-pages.scss
+++ b/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{
- .page-header{
- min-height: 100vh;
- height: auto;
- display: inherit;
-
- .container{
- padding-top: 20vh;
- }
+.landing-page {
+ .page-header {
+ &::before {
+ background: rgba(0,0,0, .5);
}
-
- .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;
diff --git a/src/assets/scss/material-kit/_headers.scss b/src/assets/scss/material-kit/_headers.scss
index ab8ab4d..4b7bc5e 100644
--- a/src/assets/scss/material-kit/_headers.scss
+++ b/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;
diff --git a/src/components/cards/LoginCard.vue b/src/components/cards/LoginCard.vue
index 99e98e1..ced23e4 100644
--- a/src/components/cards/LoginCard.vue
+++ b/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> -->
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 28a12a8..bfd8b49 100644
--- a/src/views/Index.vue
+++ b/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="leaf2" alt="" class="leaf2">
- <img :src="leaf1" alt="" class="leaf1">
+ <img :src="leaf4" alt="leaf4" class="leaf4" v-show="leafShow">
+ <img :src="leaf3" alt="leaf3" class="leaf3" v-show="leafShow">
+ <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 {
- top: -136px;
- left: 71px;
- width: 36%;
- transform: rotate(-49deg);
+.leaf4 {
+ right: 172px;
+ top: -122px;
+ width: 17%;
+ 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>