Bootstrap snippet: Skills card widget

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: profile,user

<div class="col-xs-12 col-md-6 col-lg-4"> <div class="widget panel"> <div class="thumbnail"> <div class="media"> <div class="indicator"> <span class="spinner"></span> </div> <img data-toggle="unveil" src=",-47.91378&amp;zoom=11&amp;size=400x250&amp;sensor=false" data-src=",-47.91378&amp;zoom=11&amp;size=400x250&amp;sensor=false" alt="Cover" width="100%" class="unveiled"> </div> </div> <div class="panel-body" style="margin-top:-55px;z-index:2;"> <ul class="list-unstyled"> <li class="text-center"> <img class="img-circle img-bordered" src="" alt="" width="75px" height="75px"> <br> <h5 class="semibold mb0">Orli Waller</h5> <p class="nm text-muted">Front-end Developer</p> </li> </ul> </div> <a href="javascript:void(0);" class="panel-ribbon panel-ribbon-primary"> <i class="ico-info"></i> </a> <table class="table"> <thead></thead> <tbody> <tr> <td width="50%">Web development</td> <td> <div class="progress progress-xs nm"> <div class="progress-bar" style="width: 60%"></div> </div> </td> </tr> <tr> <td width="50%">Server patching</td> <td> <div class="progress progress-xs nm"> <div class="progress-bar progress-bar-warning" style="width: 40%"></div> </div> </td> </tr> <tr> <td width="50%">Mobile framework</td> <td> <div class="progress progress-xs nm"> <div class="progress-bar progress-bar-success" style="width: 90%"></div> </div> </td> </tr> </tbody> </table> </div> <!--/ END Widget Panel --> </div>
body{ margin-top:20px; background:#ddd; } .widget .panel, .widget.panel { border-bottom-width: 1px; border-bottom-color: #cfd9db; overflow: hidden; } .widget { margin-bottom: 20px; } .panel { position: relative; border-width: 1px; border-color: #cfd9db; border-radius: 3px; -webkit-box-shadow: 0 .0625rem .0625rem rgba(0,0,0,.05); box-shadow: 0 .0625rem .0625rem rgba(0,0,0,.05); } .text-muted { color: #a2a2a2!important; } .nm { margin: 0!important; } .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { vertical-align: middle; border-color: #e6ebed; padding: 10px; }

Skills card widget

  Mar 5th, 15:52