"features"
Bootstrap 3.3.0 Snippet by SANTANU CHOWDHURY

<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"> <div class="row"> <div class="col-md-12"> <h2 class="title">Features 1</h2> </div> <div class="col-md-4"> <div class="media features"> <div class="media-left"> <div class="circle"> <img src="http://datacenteranalysis.com/front/img/icons/datapacks.png"> </div> </div> <div class="media-body"> <h3>Dental Surgery</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> </div> </div> </div> <div class="col-md-4"> <div class="media features"> <div class="media-left"> <div class="circle"> <img src="http://datacenteranalysis.com/front/img/icons/datapacks.png"> </div> </div> <div class="media-body"> <h3>Dental Surgery</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> </div> </div> </div> <div class="col-md-4"> <div class="media features"> <div class="media-left"> <div class="circle"> <img src="http://datacenteranalysis.com/front/img/icons/datapacks.png"> </div> </div> <div class="media-body"> <h3>Dental Surgery</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> </div> </div> </div> <div class="col-md-12"> <h2 class="title">Features 2</h2> </div> <div class="col-md-3"> <div class="package text-center"> <div class="circle"> <img src="http://datacenteranalysis.com/front/img/icons/datapacks.png"> </div> <h3>Datapacks</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> </div> </div> <div class="col-md-3"> <div class="package text-center"> <div class="circle"> <img src="http://datacenteranalysis.com/front/img/icons/datapacks.png"> </div> <h3>Investment Trackers</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> </div> </div> <div class="col-md-3"> <div class="package text-center"> <div class="circle"> <img src="http://datacenteranalysis.com/front/img/icons/datapacks.png"> </div> <h3>Syndicated Reports</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> </div> </div> <div class="col-md-3"> <div class="package text-center"> <div class="circle"> <img src="http://datacenteranalysis.com/front/img/icons/datapacks.png"> </div> <h3>All Reports</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="circle3"> <div class="content text-center"> <img src="https://via.placeholder.com/360x360" class="mb-15"> <p>Round-the-clock know-how to spurt your growth</p> </div> </div> </div> <div class="col-md-3"> <div class="circle3"> <div class="content text-center"> <img src="https://via.placeholder.com/360x360" class="mb-15"> <p>Round-the-clock know-how to spurt your growth</p> </div> </div> </div> <div class="col-md-3"> <div class="circle3"> <div class="content text-center"> <img src="https://via.placeholder.com/360x360" class="mb-15"> <p>Round-the-clock know-how to spurt your growth</p> </div> </div> </div> <div class="col-md-3"> <div class="circle3"> <div class="content text-center"> <img src="https://via.placeholder.com/360x360" class="mb-15"> <p>Round-the-clock know-how to spurt your growth</p> </div> </div> </div> </div> </div>
/* Features 1 */ .features { margin-top: 20px !important; margin-bottom: 20px !important; } .features .circle { width: 70px; height: 70px; padding: 10px; border-radius: 50%; background-color: #149cb6; position: relative; margin: 0 auto; margin-bottom: 20px; margin-right: 8px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .features .circle img { position: absolute; color: #fff; width: 45px !important; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .features h3 { margin: 0px; font-size: 22px; margin-bottom: 8px; } .features p { font-size: 14px; line-height: 1.5; } .features:hover .circle { background-color: #0c3989; } .features:hover h3 { color: #0c3989; } .features:hover { cursor: pointer; } /* Features 2 */ .package{ margin-bottom: 30px; } .package .circle{ width: 80px; height: 80px; padding: 10px; border-radius: 50%; background-color: #f1592a; position: relative; margin: 0 auto; margin-bottom: 20px; } .package .circle img{ position: absolute; color: #fff; width: 45px !important; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .package h3{ margin-bottom: 10px; color: #0f75bd; font-size: 20px; } /* ---------------------------------- Features 3 ---------------------------------- */ .circle3 { width: 200px; height: 200px; max-width: 200px; max-height: 200px; position: relative; overflow: hidden; background-color: #e6efd0; border-radius: 50%; margin: 0 auto; margin-top: 30px; } .circle3 .content { position: absolute; width: 80%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -40%); transform: translate(-50%, -40%); text-align: center; } .circle3 .content img { width: 50px; height: 50px; margin-bottom: 15px; } .circle3 .content p { color: #525252; font-weight: 500; line-height: 1.3; }

Related: See More


Questions / Comments: