Bootstrap Snippet Round dynamic banners using HTML CSS Javascript

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.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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="content_wrap">
 
  <!-- BEGIN LIST -->
  <ul class="box">
  <!-- BEGIN LIST ELEMENT -->
    <li>
      <div class="circle">
        <div class="front front-popular">
          <div class="title color-1-font glyphicon glyphicon-star"></div>
          <div class="price color-1-font"><span class="total">LEARN</span></div>
          <div class="description">Meet people online</div>
        </div><!-- end div .front -->
        <div class="popular color-1-font glyphicon glyphicon-star"></div>
        <div class="back color-1-bg info">
          <div class="title">Learn</div>
          <div class="description">
            <p>description</p>
            <a href="#" class="btn btn-danger">Read more..</a>
          </div><!-- end div .description -->
        </div><!-- end div .back color-1-bg info -->
      </div><!-- end div .circle -->
    </li>
  <!-- END LIST ELEMENT -->
  <!-- BEGIN LIST ELEMENT -->
    <li>
      <div class="circle">
        <div class="front front-popular">
          <div class="title color-2-font glyphicon glyphicon-user"></div>
          <div class="price color-2-font"><span class="total">CODE</span></div>
          <div class="description">Collaborate online</div>
        </div><!-- end div .front -->
        <div class="popular color-2-font glyphicon glyphicon-user"></div>
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
/* =====[ GOOGLE FONT "LATO" ]============================================================================== */
@import url(http://fonts.googleapis.com/css?family=Lato:400,100,900);
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/* =====[ BODY ]============================================================================== */
body {
background:#e7edde;
}
h1 {
font-family:Lato, sans-serif;
font-weight:100;
font-size:50px;
text-transform:uppercase;
text-align:center;
color:#444;
padding:30px;
}
.content_wrap {
width:100%;
margin:0 auto;
padding:0;
}
/* =====[ COLORS ]============================================================================== */
.color-1-bg {
background:#6baba1!important;
}
.color-1-font,.color1-price {
color:#6baba1!important;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
//Add optional jQuery  so animation works on click for mobile devices
$(".box").click(function(){
   $(this).box().toggleClass("circle");
});
     
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Round dynamic banners"
Bootstrap 3.0.3 Snippet by tochman

Related: See More

Questions / Comments:

"Round dynamic banners" Bootstrap 3.0.3 Snippet by tochman

Related: See More

Questions / Comments:

"Round dynamic banners"
Bootstrap 3.0.3 Snippet by tochman