"our skills"
Bootstrap 3.0.0 Snippet by muhamed122

<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 ----------> <section class="our-skills"> <div class="container"> <h2 class="text-center h1">Our Skills</h2> <div class="row"> <!-- Start Progress Skills --> <div class="col-md-5"> <div class="skills-progress"> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> Html5 / Css3 </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%"> PHP / MySQL </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> Javascript / jQuery </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width:95%"> Wordpress </div> </div> </div> </div> <!-- End Progress Skills --> <!-- Start Team Info --> <div class="col-md-6 col-md-offset-1"> <div class="skills-info"> <h3>About The Team</h3> <p class="lead">We Are Specialised Desiging And Programming Team Passionate About Web Design And Creatin Digital Ideas We Will Transfer Your Idea To A Digital Dream And Make Your Wish Come True</p> <button type="button" class="btn btn-primary">Talk With A Professional</button> </div> </div> <!-- End Team Info --> </div> </div> </section>
.col-md-5 { width: 41.66666667%; } .our-skills .progress-bar { line-height: 36px; font-size: 15px; font-weight: bold; text-align: left; text-indent: 10px; } .progress-bar-success { background-color: #5cb85c; } .our-skills .progress-bar { line-height: 36px; font-size: 15px; font-weight: bold; text-align: left; text-indent: 10px; } .progress-bar-danger { background-color: #d9534f; } .our-skills .progress-bar { line-height: 36px; font-size: 15px; font-weight: bold; text-align: left; text-indent: 10px; } .progress-bar-warning { background-color: #f0ad4e; } .our-skills .progress-bar { line-height: 36px; font-size: 15px; font-weight: bold; text-align: left; text-indent: 10px; } .progress-bar-info { background-color: #5bc0de; } .our-skills .progress { height: 36px; }

Related: See More


Questions / Comments: