"service block"
Bootstrap 3.3.0 Snippet by sumi9xm

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="sumit kumar"> <title>Trial</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/font-awesome.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <script src="https://use.fontawesome.com/07b0ce5d10.js"></script> </head> <body> <section id="service"> <div class="container"> <div class="row row-1"> <div class="col-md-4 ser-col-4"> <div class="ser-col ser-1"> <div class="icon-col"> <i class="fa fa-snowflake-o" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> <span class="circle hidden-xs"> <i class="fa fa-circle-thin" aria-hidden="true"></i> </span> </div> </div> <div class="col-md-4 ser-col-4"> <div class="ser-col ser-2"> <div class="icon-col"> <i class="fa fa-cloud-download" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> <span class="circle hidden-xs"> <i class="fa fa-circle-thin" aria-hidden="true"></i> </span> </div> </div> <div class="col-md-4 ser-col-4-l"> <div class="ser-col ser-3"> <div class="icon-col"> <i class="fa fa-cogs" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> </div> </div> </div> <!--=====row 1============--> <!--====row 2============--> <div class="row row-2"> <div class="col-md-4 ser-col-4"> <div class="ser-col ser-4"> <div class="icon-col"> <i class="fa fa-star" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> <span class="circle hidden-xs"> <i class="fa fa-circle-thin" aria-hidden="true"></i> </span> </div> </div> <div class="col-md-4 ser-col-4"> <div class="ser-col ser-5"> <div class="icon-col"> <i class="fa fa-send" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> <span class="circle hidden-xs"> <i class="fa fa-circle-thin" aria-hidden="true"></i> </span> </div> </div> <div class="col-md-4 ser-col-4-l"> <div class="ser-col ser-6"> <div class="icon-col"> <i class="fa fa-rss" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> </div> </div> </div> <!--=======row 2============--> <!-- row 3============--> <div class="row row-3"> <div class="col-md-4 ser-col-4"> <div class="ser-col ser-7"> <div class="icon-col"> <i class="fa fa-lock" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> </div> </div> <div class="col-md-4 ser-col-4"> <div class="ser-col ser-8"> <div class="icon-col"> <i class="fa fa-gift" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> </div> </div> <div class="col-md-4 ser-col-4-l"> <div class="ser-col ser-9"> <div class="icon-col"> <i class="fa fa-plug" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> </div> </div> </div> <!--=======row 3============--> </div> </section> <script src="js/jquery-3.1.1.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
#service{background-color: ghostwhite;padding-top: 100px;padding-bottom: 100px;} .row-1 .ser-col-4{border-right:solid 1px #ccc;border-bottom: solid 1px #ccc;} .row-1 .ser-col-4-l{border-bottom: solid 1px #ccc;} .row-2 .ser-col-4{border-right:solid 1px #ccc;border-bottom: solid 1px #ccc;} .row-2 .ser-col-4-l{border-bottom: solid 1px #ccc;} .row-3 .ser-col-4{border-right:solid 1px #ccc;} @media (max-width:768px){ .ser-col-4-l{border-right:solid 1px #ccc;border-bottom: solid 1px #ccc;border-left:solid 1px #ccc;} .ser-col-4{border-left:solid 1px #ccc;border-bottom: solid 1px #ccc;} } .ser-col{width:100%;height:auto;text-align: center;padding:20px;position: relative;} .icon-col{width:80px;height:80px;border-radius: 50%;text-align: center;margin-left: auto;margin-right: auto;} .icon-col i{font-size: 35px;padding: 20px;} .circle { position: absolute; bottom: -11px; right: -24px; z-index: 99; } .circle i{color:#ccc;font-size: 18px;background-color:ghostwhite;} .btn { display: inline-block; padding: 6px 12px; margin-bottom: 10px; margin-top: 10px; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; color: red; background-image: none; border: 1px solid red; border-radius: 0px; } .ser-col h2{color:#777; margin-bottom: 20px;} .ser-col p{color:#3e3b3b; margin-bottom: 20px;} /*====== service 1 ====*/ .ser-1 .icon-col{border: solid 1px red;} .ser-1 .icon-col i{color:red;} .ser-1 .btn{color:red;border: 1px solid red;} /*====== service 2 ====*/ .ser-2 .icon-col {border: solid 1px green;} .ser-2 .icon-col i{color:green;} .ser-2 .btn{color:green;border: 1px solid green;} /*====== service 3 ====*/ .ser-3 .icon-col {border: solid 1px chocolate;} .ser-3 .icon-col i{color:chocolate;} .ser-3 .btn{color:chocolate;border: 1px solid chocolate;} /*====== service 4 ====*/ .ser-4 .icon-col {border: solid 1px blue;} .ser-4 .icon-col i{color:blue;} .ser-4 .btn{color:blue;border: 1px solid blue;} /*====== service 5 ====*/ .ser-5 .icon-col {border: solid 1px deepskyblue;} .ser-5 .icon-col i{color:deepskyblue;} .ser-5 .btn{color:deepskyblue;border: 1px solid deepskyblue;} /*====== service 6 ====*/ .ser-6 .icon-col {border: solid 1px mediumslateblue;} .ser-6 .icon-col i{color:mediumslateblue;} .ser-6 .btn{color:mediumslateblue;border: 1px solid mediumslateblue;} /*====== service 7 ====*/ .ser-7 .icon-col {border: solid 1px mediumseagreen;} .ser-7 .icon-col i{color:mediumseagreen;} .ser-7 .btn{color:mediumseagreen;border: 1px solid mediumseagreen;} /*====== service 8 ====*/ .ser-8 .icon-col {border: solid 1px salmon;} .ser-8 .icon-col i{color:salmon;} .ser-8 .btn{color:salmon;border: 1px solid salmon;} /*====== service 9 ====*/ .ser-9 .icon-col {border: solid 1px gold;} .ser-9 .icon-col i{color:gold;} .ser-9 .btn{color:gold;border: 1px solid gold;}

Related: See More

Argon Design System
Simple Comment Block

Questions / Comments: