<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>floral frame . slick slider</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="slider">
<h1>Find your perfect make-up palette with designer scents</h1>
<h2><a href="#">Hover me</a></h2>
<img src="https://lstore.graphics/beauty/img/569f2facfc5a0ce422206282/569480/upload-bc1bd370-0103-11e8-a655-a337246b61ea.png" alt="">
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/Tigich/floral-frame-slick-slider-OQeMXE */
html,body{
height:100%;
padding:0;
margin:0;
}
body{
background:#ffecd7;
display:flex;
justify-content:center;
align-items:center;
}
.container{
width:900px;
height:300px;
position:relative;
}
.container h1{
font-family:Open Sans;
font-weight:100;
width:50%;
padding:85px 50px 0px 50px;
margin-bottom:0;
margin-top:0;
}
.container h2{
padding:0px 50px 0px 50px;
font-family:Open Sans;
font-weight:100;
margin-top:10px;
}
.container a{
text-decoration:none;
color:#ea5b70;
font-size:20px;
border-bottom:2px solid #ea5b70;
}
.slider {
background: #fff;
height: 100%;
width: 100%;
border-radius: 4px;
box-shadow: 0px 5px 5px 3px rgba(66, 44, 21, 0.15);
}
.slider:before{
/* content:""; */
position:absolute;
bottom:-50px;
left:0;
width:219px;
height:152px;
background:url(https://1.downloader.disk.yandex.ru/preview/4709b8501cd243bd06f98883e2f398c48fde31eac18fac75149f2ddf8331177c/inf/yY7kvc2Ch4QqPak7WpHDh-k9YsUao55oy3NWur3bGhCTpHepZ6FNhEGOKL9aul_kmsT9H8OPq8WDuRsx-KQ4-Q%3D%3D?uid=115787282&filename=222222.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&tknv=v2&size=1280x666)
}
.slider.hover:after{
left:-60px;
bottom:-90px;
}
.slider img{
position:absolute;
right:-170px;
top:-60px;
}
.slider:after{
content:"";
position:absolute;
bottom:-80px;
left:-50px;
width:342px;
height:346px;
background:url(https://1.downloader.disk.yandex.ru/preview/23435bf39e778455a538525fcdcf320a4e9125d9dd650147bd04695229d266ac/inf/yY7kvc2Ch4QqPak7WpHDh2qTOfCvtMtkobRDEUam-q1dkZBNC-UFdb2dgezCgup0VbrCa52NwL3xFfn1Dm_hgw%3D%3D?uid=115787282&filename=1.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&tknv=v2&size=1280x666);
z-index:-1;
transition:.2s;
}
/*Downloaded from https://www.codeseek.co/Tigich/floral-frame-slick-slider-OQeMXE */
$(".container a").hover(function(){
$(".slider").toggleClass("hover");
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
jQuery
v3.3.1
