<!-- Single Banner Style 1 --> <div class="sin-banner banner-style-1 col-sm-4 col-xs-12"> <a class="banner-wrap" href="#"> <img alt="" src="../img/banner/banner-1.jpg"> <div class="banner-bref banner-bref-1 text-center"> <h1>watches<br>collection</h1> </div> </a> </div> <!-- Single Banner Style 2 --> <div class="sin-banner banner-style-2 col-sm-8 col-xs-12"> <div class="banner-wrap"> <img alt="" src="../img/banner/banner-2.jpg"> <div class="banner-bref banner-bref-2 text-left"> <h1>60% off for<br>men Collection</h1> <a class="button color white-hover animated fadeOutDown" href="#">view more</a> </div> </div> </div> <!-- Single Banner Style 2 --> <div class="sin-banner banner-style-2 col-sm-8 col-xs-12"> <div class="banner-wrap"> <img alt="" src="../img/banner/banner-3.jpg"> <div class="banner-bref banner-bref-2 text-right"> <h1>30% off for<br>Glasses Collection</h1> <a class="button color white-hover animated fadeOutDown" href="#">view more</a> </div> </div> </div> <!-- Single Banner Style 1 --> <div class="sin-banner banner-style-1 col-sm-4 col-xs-12"> <a class="banner-wrap" href="#"> <img alt="" src="../img/banner/banner-4.jpg"> <div class="banner-bref banner-bref-1 text-center"> <h1>Latest<br>backpack</h1> </div> </a> </div>
/* Single Banner */ .sin-banner { margin-top: 30px; } .banner-wrap { display: block; position: relative; } .banner-wrap::before { background: #000 none repeat scroll 0 0; bottom: 0; content: ""; left: 0; opacity: 0.4; position: absolute; right: 0; top: 0; } .banner-wrap img { width: 100%; } /* Banner Bref */ .banner-bref { height: 80px; left: 0; margin-top: -40px; padding: 0 30px; position: absolute; right: 0; top: 50%; } .banner-bref h1 { color: #fff; font-size: 36px; font-weight: 600; letter-spacing: 5px; margin: 0 0 0 -2px; text-transform: uppercase; } .banner-bref.text-left h1 { margin-left: -2px; } .banner-bref.text-right h1 { margin-right: -7px; } .banner-bref a { animation-duration: 0.6s; margin-top: 24px; font-weight: 600; letter-spacing: 2px; } .banner-wrap:hover .banner-bref a { animation-name: fadeInUp; } .banner-bref a:hover {} .banner-bref-1{} .banner-bref-2 {} /* Banner Style 1, 2 Hover Effect */ .banner-style-1 .banner-wrap::before { transform: rotateX(70deg); } .banner-style-2 .banner-wrap::before { transform: rotateX(90deg); } .sin-banner:hover .banner-wrap::before { transform: rotateX(0); }
<!-- Single Promo --> <div class="sin-promo col-lg-3 col-sm-6 col-xs-12 fix"> <div class="promo-wrap"> <img alt="" src="../img/banner/promo-1.jpg"> <div class="promo-bref text-right"> <h1>Latest<br>backpack</h1> <a class="button color white-hover animated fadeOutDown" href="#">view more</a> </div> </div> </div> <!-- Single Promo --> <div class="sin-promo col-lg-3 col-sm-6 col-xs-12 float-right fix"> <div class="promo-wrap"> <img alt="" src="../img/banner/promo-3.jpg"> <div class="promo-bref text-left"> <h1>Latest<br>sunglass</h1> <a class="button color white-hover animated fadeOutDown" href="#">view more</a> </div> </div> </div> <!-- Single Promo --> <div class="sin-promo col-lg-6 col-xs-12 fix"> <a class="promo-wrap" href="#"> <img alt="" src="../img/banner/promo-2.jpg"> <div class="promo-bref promo-bref-2 promo-bref-right text-center"> <h1>Sale upto 40%<br>New style zeiran</h1> <div data-countdown="2017/01/01" class="promo-countdown fix"><span class="cdown day"><span class="time-count">144</span> <p>Days</p></span> <span class="cdown hour"><span class="time-count">13</span> <p>Hours</p></span> <span class="cdown minutes"><span class="time-count">08</span> <p>Minute</p></span> <span class="cdown second"><span class="time-count">44</span> <p>Second</p></span></div> </div> </a> </div>
/* Single Promo */ .sin-promo { padding: 0; } .promo-wrap { display: block; height: 100%; position: relative; } .promo-wrap::before { background: #000 none repeat scroll 0 0; bottom: 0; content: ""; left: 0; opacity: 0.4; position: absolute; right: 0; top: 0; transform: rotateX(90deg); } .sin-promo:hover .promo-wrap::before { transform: rotateX(0); } .promo-wrap img { width: 100%; } /* Promo Bref */ .promo-bref { display: block; height: 100%; left: 0; padding: 0 35px; position: absolute; right: 0; top: 0; } .promo-bref-2 { padding-right: 60px; } .promo-bref.promo-bref-right { left: auto; } .promo-bref.text-right { padding-left: 0; } .promo-bref.text-left { padding-right: 0; } .promo-bref h1 { color: #fff; font-size: 36px; font-weight: 600; letter-spacing: 5px; margin-bottom: 20px; margin-top: 155px; text-transform: uppercase; } .promo-bref-2 h1, .sin-promo:hover .promo-bref h1 { margin-top: 120px; } .promo-bref.text-left h1 { margin-left: -3px; } .promo-bref.text-right h1 { margin-right: -5px; } .promo-bref .button { animation-duration: 0.6s; font-weight: 600; letter-spacing: 2px; } .sin-promo:hover .button { animation-name: fadeInUp; } /* Promo Countdown */ .promo-countdown {} .promo-countdown .cdown { display: block; float: left; margin-right: 50px; } .promo-countdown .cdown:last-child { margin-right: 0; } .promo-countdown .cdown .time-count { border: 1px solid #fff; border-radius: 50px; color: #606060; display: block; font-size: 18px; height: 66px; line-height: 66px; position: relative; width: 66px; z-index: 1; } .promo-countdown .cdown .time-count::before { position: absolute; content: ""; left: 5px; top: 5px; right: 5px; bottom: 5px; background: #fff; border-radius: 50%; z-index: -1; } .promo-countdown .cdown p { color: #606060; line-height: 14px; text-transform: uppercase; margin-top: 17px; } .sin-promo:hover .promo-countdown .cdown p { color: #fff; }