Skills card widget

This bootstrap snippet called "Skills card widget" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: profile,user

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

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

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

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

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 5th 2016, 15:52

Views: 347