<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="container"> <div class="row"> <div class="col-sm-12"> <div class="page-heading text-center"> <h1>Our Skills</h1> <p>Lorem ipsum is simply dummy text of the printing and typesetting industry. <br/>Lorem Ipsum has been the industry's standard dummy text ever since.</p> </div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="skill-block"> <div class="sk-border"> <h2>98%</h2> </div> <div class="sk-text"> <h4>HTML/CSS</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae odio id sapien tempus.</p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="skill-block"> <div class="sk-border"> <h2>80%</h2> </div> <div class="sk-text"> <h4>Php</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae odio id sapien tempus.</p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="skill-block"> <div class="sk-border"> <h2>95%</h2> </div> <div class="sk-text"> <h4>Wordpress</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae odio id sapien tempus.</p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="skill-block"> <div class="sk-border"> <h2>92%</h2> </div> <div class="sk-text"> <h4>Online Marketing</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae odio id sapien tempus.</p> </div> </div> </div> </div> </div> </div> </div>

/*========================================== Our Skills Style ========================================= */ .page-heading{ position: relative; margin-bottom: 20px; } .page-heading h1 { font-size: 24px; margin-bottom: 5px; } .page-heading p { font-size: 14px; color: #777; } .skill-block { overflow: hidden; padding: 5px 15px 15px; text-align: center; box-shadow:1px 2px 6px 2px rgba(0, 0, 0, 0.1); margin: 15px auto; } .sk-border h2 { color: #777; display: inline-block; font-size: 48px; font-weight: 900; height: 200px; width: 180px; } .sk-border{ text-align: center; line-height: 100px; position:relative; z-index:0; margin: 70px auto; } .sk-border, .sk-border:before, .sk-border:after{ border-style: solid; border-color: #ff6633; border-width: 7px; border-top: none; border-bottom: none; height: 105px; width: 183px; } .sk-border:after, .sk-border:before{ content: ""; position: absolute; top:0; left: -7px; z-index: -1; } .sk-border:before{ -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); } .sk-border:after{ -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } .sk-text h4 { font-size: 18px; text-transform: uppercase; margin-bottom: 10px; }