"services"
Bootstrap 3.0.0 Snippet by evarevirus

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
<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 ---------->
<div class="box">
<div class="box__circle box__circle--blue"></div>
<div class="box__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 512 512"><path fill="#fff" d="M272 191.997l47.999 47.999-47.999 47.999-47.999-47.999zM208.007 256l48.001 48.001-175.998 175.998-48.001-48.001zM256 32h32v64h-32zM385.131 149.497l-22.627-22.627 45.254-45.254 22.627 22.627zM113.606 104.234l22.627-22.627 45.254 45.254-22.627 22.627zM362.505 353.126l22.627-22.627 45.254 45.254-22.627 22.627zM416 224h64v32h-64z"/></svg>
</div>
<h1 class="box__headline">Headline</h1>
<p class="box__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quas expedita saepe dignissimos nesciunt, nihil dolores, quis ea esse voluptas.</p>
</div>
<div class="box">
<div class="box__circle box__circle--violet"></div>
<div class="box__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 512 512"><path fill="#fff" d="M272 191.997l47.999 47.999-47.999 47.999-47.999-47.999zM208.007 256l48.001 48.001-175.998 175.998-48.001-48.001zM256 32h32v64h-32zM385.131 149.497l-22.627-22.627 45.254-45.254 22.627 22.627zM113.606 104.234l22.627-22.627 45.254 45.254-22.627 22.627zM362.505 353.126l22.627-22.627 45.254 45.254-22.627 22.627zM416 224h64v32h-64z"/></svg>
</div>
<h1 class="box__headline">Headline</h1>
<p class="box__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quas expedita saepe dignissimos nesciunt, nihil dolores, quis ea esse voluptas.</p>
</div>
<div class="box">
<div class="box__circle box__circle--purple"></div>
<div class="box__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 512 512"><path fill="#fff" d="M272 191.997l47.999 47.999-47.999 47.999-47.999-47.999zM208.007 256l48.001 48.001-175.998 175.998-48.001-48.001zM256 32h32v64h-32zM385.131 149.497l-22.627-22.627 45.254-45.254 22.627 22.627zM113.606 104.234l22.627-22.627 45.254 45.254-22.627 22.627zM362.505 353.126l22.627-22.627 45.254 45.254-22.627 22.627zM416 224h64v32h-64z"/></svg>
</div>
<h1 class="box__headline">Headline</h1>
<p class="box__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quas expedita saepe dignissimos nesciunt, nihil dolores, quis ea esse voluptas.</p>
</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
@import url("https://fonts.googleapis.com/css?family=Roboto");
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 100vh;
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.box {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
position: relative;
margin: 0 1em;
padding: 150px 3em 3em;
width: 300px;
overflow: hidden;
box-shadow: 0 2px 4px transparent;
-webkit-transition: box-shadow ease 1s;
transition: box-shadow ease 1s;
}
.box:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
.box__circle, .box__icon {
position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit React
BOOTSTRAP 4 OUR SERVICES
Bootstrap 4 Our services
Services Tabs

Questions / Comments: