Bootstrap Snippet blog using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="promos-bann">
<!--Single Promo-->
<div class="sin-promo col-lg-3 col-sm-6 col-xs-12 fix">
    <div class="promo-wrap">
        <img src="https://devitems.com/html/xoss-preview/xoss/img/banner/promo-1.jpg" alt="">
        <div class="promo-bref text-right">
            <h1>Latest<br>backpack</h1>
            <a target="_blank" href="#" class="button color white-hover animated fadeOutDown">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 src="https://devitems.com/html/xoss-preview/xoss/img/banner/promo-3.jpg" alt="">
        <div class="promo-bref text-left">
            <h1>Latest<br>sunglass</h1>
            <a href="#" class="button color white-hover animated fadeOutDown">view more</a>
        </div>
    </div>
</div>
<!--Single Promo-->
<div class="sin-promo col-lg-6 col-xs-12 fix">
    <a href="#" class="promo-wrap">
        <img src="https://devitems.com/html/xoss-preview/xoss/img/banner/promo-2.jpg" alt="">
        <div class="promo-bref promo-bref-2 promo-bref-right text-center">
            <h1>Sale upto 40%<br>New style zeiran</h1>
        </div>
    </a>
</div>
</section>
<section class="after-banner">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.promos-bann{
  margin-bottom:90px!important;
}
.after-banner{
  margin:35px 0px!important; 
}
/* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"blog"
Bootstrap 3.0.0 Snippet by Nemra1

Related: See More

Questions / Comments:

"blog" Bootstrap 3.0.0 Snippet by Nemra1

Related: See More

Questions / Comments:

"blog"
Bootstrap 3.0.0 Snippet by Nemra1