56 lines
1.2 KiB
CSS
56 lines
1.2 KiB
CSS
|
*{
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.hero{
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
background: #f3f7fe;
|
||
|
|
padding: 10px 3%;
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
.hero h1{
|
||
|
|
font-size: 75px;
|
||
|
|
position: relative;
|
||
|
|
z-index: 2;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
-moz-text-fill-color: transparent;
|
||
|
|
-webkit-text-stroke: 2px #111;
|
||
|
|
-moz-text-stroke: 2px #111;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: .3s ;
|
||
|
|
}
|
||
|
|
@media(max-width:767px){
|
||
|
|
.hero h1{
|
||
|
|
font-size: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.hero h1:hover{
|
||
|
|
-webkit-text-fill-color: #111;
|
||
|
|
-moz-text-fill-color: #111;
|
||
|
|
transform: translateY(-10px);
|
||
|
|
}
|
||
|
|
.img-box{
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 100%;
|
||
|
|
width: 65%;
|
||
|
|
background: url(images/background.png);
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
transition:background-image 1s ;
|
||
|
|
}
|
||
|
|
.hero h1:nth-child(1):hover ~ .img-box{
|
||
|
|
background-image: url(images/Candy.png);
|
||
|
|
}
|
||
|
|
.hero h1:nth-child(2):hover ~ .img-box{
|
||
|
|
background-image: url(images/Cherry.png);
|
||
|
|
}
|
||
|
|
.hero h1:nth-child(3):hover ~ .img-box{
|
||
|
|
background-image: url(images/Melon.png);
|
||
|
|
}
|