<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 ---------->
<div class="container">
<div class="iconcontainer">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="iconbox">
<div class="iconbox-icon">
<span class="glyphicon glyphicon-book"></span>
</div>
<div class="featureinfo">
<h4 class="text-center">Title</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!
</p>
<a class="btn btn-default btn-sm" href="#" role="button">View Page »</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="iconbox">
<div class="iconbox-icon">
<span class="glyphicon glyphicon-tasks"></span>
</div>
<div class="featureinfo">
<h4 class="text-center">Title</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!
</p>
<a class="btn btn-default btn-sm" href="#" role="button">View Page »</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="iconbox">
<div class="iconbox-icon">
<span class="glyphicon glyphicon-comment"></span>
</div>
<div class="featureinfo">
<h4 class="text-center">Title</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!
</p>
<a class="btn btn-default btn-sm" href="#" role="button">View Page »</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="iconbox">
<div class="iconbox-icon">
<span class="glyphicon glyphicon-user"></span>
</div>
<div class="featureinfo">
<h4 class="text-center">Title</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!
</p>
<a class="btn btn-default btn-sm" href=""about.php#bottom"" role="button">View Page »</a>
</div>
</div>
</div>
</div>
</div>
</div>
body {
background-color: #ebebeb;
}
.iconcontainer {
margin-top: 20px;
margin-bottom: 20px;
}
.iconbox {
background: #ffffff;
background-color: #ffffff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.16), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
padding: 20px 25px;
text-align: right;
display: block;
margin-top: 60px;
margin-bottom: 15px;
}
.iconbox-icon {
background-color: #008EED;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
margin: 0 auto;
width: 100px;
height: 100px;
margin-top: -70px;
}
.iconbox-icon span {
color: #fff;
font-size: 42px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 29px;
text-align: center;
vertical-align: middle;
}
.featureinfo h4 {
font-size: 26px;
letter-spacing: 1px;
text-transform: uppercase;
}
.featureinfo > p {
color: #000000;
font-size: 16px;
padding-top: 4px;
text-align: left;
}
.btn-default {
text-shadow: 0px 1px 0px #FFF;
background-image: linear-gradient(to bottom, #FFF 0px, #E0E0E0 100%);
background-repeat: repeat-x;
border-color: #CCC;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.15) inset, 0px 1px 1px rgba(0, 0, 0, 0.075);
}
.btn-default:hover,
.btn-default:focus {
background-color: #e0e0e0;
background-position: 0 -15px
}
