"working as (clean CSS)"
Bootstrap 3.3.0 Snippet by imatheusmoreira

Post to Facebook Tweet this

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="container-fluid" id="content">
<div class="container">
<h2>Must connect "animate css"</h2>
<hr>
<div class="line animated mov" style="animation-delay: 1s"></div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 circle">
<div class="margin animated flipInX"><img src="http://mnsone.esy.es/smp.pp.ua/images/survey.png" alt="step 1"></div>
<h4 class="animated fadeInUp hov">Monitoramento</h4>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 circle">
<div class="margin animated flipInX" style="animation-delay: .2s"><img src="http://mnsone.esy.es/smp.pp.ua/images/search.png" alt="step 2"></div>
<h4 class="animated fadeInUp hov">Аналізуємо і консультуємо</h4>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 circle">
<div class="margin animated flipInX" style="animation-delay: .4s"><img src="http://mnsone.esy.es/smp.pp.ua/images/idea.png" alt="step 3"></div>
<h4 class="animated fadeInUp hov">Визначаємо напрямки робіт</h4>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 circle">
<div class="margin animated flipInX" style="animation-delay: .6s"><img src="http://mnsone.esy.es/smp.pp.ua/images/finger.png" alt="step 4"></div>
<h4 class="animated fadeInUp hov">Якісно виконуємо</h4>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 circle">
<div class="margin animated flipInX" style="animation-delay: .8s"><img src="http://mnsone.esy.es/smp.pp.ua/images/ratings.png" alt="step 5"></div>
<h4 class="animated fadeInUp hov">Надаємо вичерпні звіти</h4>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 circle">
<div class="margin animated flipInX" style="animation-delay: 1s"><img src="http://mnsone.esy.es/smp.pp.ua/images/hands.png" alt="step 6"></div>
<h4 class="animated fadeInUp hov">Допомагаємо і надалі</h4>
</div>
</div>
</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
/*fonts*/
@import url(https://fonts.googleapis.com/css?family=Comfortaa:400,700,300&subset=latin,cyrillic);
h1, h2, h3, h4, h5, h6 {
color: #455A64;
font-family: 'Comfortaa', cursive;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
#content {
height: 500px;
background: rgba(127, 140, 141,0.2);
background: radial-gradient(ellipse farthest-side at 30px 20px, #fff, #000));
padding: 50px;
text-align: center;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.line {
width: 1000px;
height: 10px;
background: rgba(0,0,0,0.1);
position: absolute;
margin: 95px;
box-shadow: 0 0 7px rgba(0,0,0,0.3);
}
.circle {
text-align: center;
padding: 15px;
}
.margin {
height: 167px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard Pro
BS4 clean & simple invoice template
BS4 Simple & Clean Pricing table
Simple & Clean 404 Error Page style

Questions / Comments: