Bootstrap html snippet. Skills card widget

HTML code

Clean, semantic HTML that powers this Bootstrap 3.3.6 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

<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="http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-47.91378&amp;zoom=11&amp;size=400x250&amp;sensor=false" data-src="http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-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="https://bootdey.com/img/Content/avatar/avatar5.png" 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>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 3.3.6 to keep the design, spacing, and responsiveness consistent.

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;
}