"Company about Feature"
Bootstrap 3.3.0 Snippet by Divscodebd

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 ----------> <html> <head> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <div class="container"> <h1 style="color:red; text-align:center;margin-top:40px; font-size:50px; font-weight:bold;">Hossain Shahid</h1> <div class="order-process-step2"> <div class="container frontend"> <div class="clearfix"></div> <div class="block process-block2"> <div class="row text-center"> <ol class="process2"> <li class="col-md-3 col-sm-6 col-xs-6"><i class="fa fa-cloud-upload" aria-hidden="true"></i> <h4>About Our Company</h4> </li> <li class="col-md-3 col-sm-6 col-xs-6"> <i class="fa fa-money"></i> <h4>Our Company Product</h4> </li> <li class="col-md-3 col-sm-6 col-xs-6"> <i class="fa fa-sellsy"></i> <h4>Visit My Company Website</h4> </li> <li class="col-md-3 col-sm-6 col-xs-6"> <i class="fa fa-thumbs-o-up"></i> <h4>Be Happy</h4> </li> </ol> </div> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div> </div> </div> </body> </html>
.order-process-step2 { padding: 50px 0px; } .process-block2 { display: block; color: #7e8890; overflow: hidden; } .process-block2 h5 { text-align: center; margin-top: -10px; font-style: italic; margin-bottom: 20px; } ol.process2 { margin-top: 20px; margin-left: 32px; padding: 0; list-style-type: none; counter-reset: li-counter; } ol.process2 > li { position: relative; text-align: center; padding: 15px; border-radius: 5px; } ol.process2 > li > p { font-style: italic; } ol.process2 > li:before { position: absolute; left: -18px; top: -18px; font-size: 22px; display: inline-block; line-height: 36px; width: 36px; text-align: center; border-radius: 35px; color: #fff; font-weight: 700; background-color: red; box-shadow: 0 0 0 1px #fff; content: counter(li-counter); counter-increment: li-counter; } ol.process2 li:nth-child(even) { border-top: 1px dashed #7e8890; } ol.process2 li:nth-child(odd) { border: 1px dashed #7e8890; border-top: 0; } ol.process2 i { display: block; margin: 0 auto; margin-bottom: 10px; line-height: 100px; font-size: 4em; color: red; border-radius: 50%; } ol.process2 h4{ font-size: 15px; font-weight: 600; text-transform: uppercase; color: #0c0200; } /*icon-hover-animation*/ @-webkit-keyframes pulse-shrink { to { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes pulse-shrink { to { -webkit-transform: scale(0.8); transform: scale(0.8); } } ol.process2 li:hover i, ol.process2 li:focus i, ol.process2 li:active i { -webkit-animation-name: pulse-shrink; animation-name: pulse-shrink; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } .wc-backward{ font-size: 14px!important; color: #fff!important; background: #e95959!important; }

Related: See More

Vue Argon Design System
Feature Panels with Collapse
Company Footer
Product or company header

Questions / Comments: