mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 12:14:22 +08:00
header done
This commit is contained in:
Dragos
parent
245d4df900
commit
549d7e5c3c
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 78 KiB |
BIN
src/assets/img/leaf4.png
Normal file
BIN
src/assets/img/leaf4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
@ -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;
|
||||
|
||||
@ -51,10 +51,6 @@
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::before{
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.md-layout{
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
|
||||
@ -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> -->
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user