Bootstrap Snippet card shop using HTML CSS

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 ---------->
<ul class="cards">
  <li class="card">
    <div class="card__inner">
      <h2>Defender <small>Series</small></h2>
      <div class="card__buttons">
        <a href="#">Explore</a>
        <a href="#">Shop</a>
      </div>
    </div>
    <h3 class="card__tagline">Rugged multi-layer protection</h3>
    <ul class="card__icons">
      <li><i class="fa fa-coffee">Coffee</i></li>
      <li><i class="fa fa-bolt">Bolt</i></li>
      <li><i class="fa fa-bomb">Bomb</i></li>
      <li><i class="fa fa-cutlery">Cutlery</i></li>
      <li><i class="fa fa-bolt">Bolt</i></li>
    </ul>
    <p>$39.95 - $49.95</p>
  </li>
  <li class="card">
    <div class="card__inner">
      <h2>Commuter <small>Series</small></h2>
      <div class="card__buttons">
        <a href="#">Explore</a>
        <a href="#">Shop</a>
      </div>
    </div>
    <h3 class="card__tagline">Rugged multi-layer protection</h3>
    <ul class="card__icons">
      <li><i class="fa fa-coffee">Coffee</i></li>
      <li><i class="fa fa-bolt">Bolt</i></li>
      <li><i class="fa fa-coffee">Coffee</i></li>
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
* {
  box-sizing: border-box;
}
body {
  background: whiteSmoke;
  padding: 5%;
}
.cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
  padding: 0;
  text-align: center;
}
@media (max-width: 550px) {
  .cards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.card {
  position: relative;
  width: 31.33333%;
  margin: 1%;
  background: whiteSmoke;
  box-shadow: 1px 1px 5px #999;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"card shop"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"card shop" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"card shop"
Bootstrap 3.0.0 Snippet by evarevirus