Item: floral frame . slick slider
Rating: 3.4
Author: &#x417;&#x410;&#x423;&#x20BD;

8 Downloads
285 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!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");
});

Comments

More from ЗАУ₽

floral frame . slick slider

In this example below you will see how to do a floral frame . slick slider with some HTML / CSS and Javascript

Technologies

Comments

More from ЗАУ₽

A Pen by ЗАУ₽

Responsive Flex Grid Layout

A Pen by ЗАУ₽

A Pen by ЗАУ₽

You Might Also Like

TIC TAC TOE

Challenge 117 - Testimonial Page

[flex] 08-2

Vocab Cat

A Pen by Chris Hartmann

ReactJS Playground

Par ou Impar

Text Editor (with 3 synced panes… markdown, html, visual)