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





















ADDRESS: 28 Green Tower, Street Name New York City, USA
Telephone: +88017 222 333
Email: contact@shopieee.com
account
newsletter
Subscribe by our newsletter and get update protidin.
2016 ® All Rights Reserved - 网页模板 Responsive Theme
