<div class="banner-adds">
<div class="col-md-5 padd col-sm-12 col-xs-12">
<div class="banner-left">
<div class="banner-single-one">
<a href="#">
<img alt="" src="img/bnnaer-adds/banner-1.jpg">
</a>
<div class="banner-content">
<h4>New Arrival</h4>
<h2>BAG’S</h2>
</div>
</div>
<div class="banner-single-two">
<a href="#">
<img alt="" src="img/bnnaer-adds/banner-2.jpg">
</a>
<div class="banner-content-two">
<h4>Trending 2023</h4>
<h2>WOMEN’S</h2>
<h3>COLLECTION</h3>
<a class="cntnt-btn" href="#">VIEW MORE</a>
</div>
</div>
</div>
</div>
<div class="col-md-7 col-sm-12 hidden-xs">
<div class="banner-right">
<div class="banner-single-two">
<a href="#">
<img alt="" src="img/bnnaer-adds/banner-3.jpg">
</a>
<div class="banner-content-two">
<h4>Styles For Men 2023</h4>
<h2>WINTER FASHION </h2>
<a class="cntnt-btn" href="#">VIEW MORE</a>
</div>
</div>
<div class="banner-single-one">
<a href="#">
<img alt="" src="img/bnnaer-adds/banner-4.jpg">
</a>
<div class="banner-content">
<h4>Stylish Shoe’s</h4>
<h2>FOR MEN</h2>
<h3>35% OFF</h3>
</div>
</div>
</div>
</div>
</div>
/*-------------- 6. Banner Adds ------------*/
.banner-single-one {
margin-bottom: 15px;
}
.banner-single-one:last-child {
margin: 0;
}
.banner-single-one > a{
display: block;
overflow: hidden;
position: relative;
}
.banner-content {
left: 66%;
position: absolute;
top: 92px;
}
.banner-content > h4, .banner-content-two > h4 {
color: #282828;
font-family: brush script std;
font-size: 26px;
margin: 0;
}
.banner-content h2, .banner-content-two > h2 {
font-family: montserrat;
font-size: 32px;
font-weight: 600;
margin: 0;
}
.banner-single-two a{
display: block;
overflow: hidden;
position: relative;
}
.banner-content-two {
position: absolute;
right: 30px;
text-align: center;
top: 56%;
}
.banner-content-two > h3 {
font-family: montserrat;
font-size: 32px;
font-weight: 600;
margin: 0 0 15px;
}
a.cntnt-btn {
background: #292929 none repeat scroll 0 0;
color: #fff;
font-family: open sans;
font-weight: 600;
left: 25%;
padding: 8px;
width: 55%;
}
a.cntnt-btn:hover{background:#FF4081;}
.banner-right .banner-single-one img {
margin-bottom: 0px;
}
.banner-adds .col-md-5.padd {
padding: 0 15px;
padding-right: 0;
}
.banner-right .banner-single-two {
margin-bottom: 15px;
}
.banner-right .banner-content-two {
position: absolute;
right: 50%;
text-align: center;
top: 194px;
}
.banner-right .banner-content-two > h2 {
margin: 0 0 12px;
}
.banner-right a.cntnt-btn {
width: 45%;
}
.banner-right .banner-single-one .banner-content {
left: 68%;
position: absolute;
top: 77%;
}
.banner-right .banner-single-one .banner-content > h3 {
font-family: montserrat;
font-size: 32px;
font-weight: 600;
}
.banner-single-two {
overflow: hidden;
}
.banner-single-two img {
transform: scale(1);
transition: all 0.4s ease 0s;
}
.banner-single-two img:hover {
transform: scale(1.1);
}
.banner-single-one img {
transform: scale(1);
transition: all 0.4s ease 0s;
}
.banner-single-one img:hover {
transform: scale(1.1);
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor psum dolor sit ame