users resume cards

This bootstrap snippet called "users resume cards" 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: users,resume,cards,profile

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row">
   <div class="col-md-4">
      <!-- START widget-->
      <div class="panel widget">
         <div class="half-float">
            <img src="http://themicon.co/theme/angle/v2.4/backend-jquery/app/img/bg3.jpg" alt="" class="img-responsive">
            <div class="half-float-bottom">
               <img src="https://bootdey.com/img/Content/user_1.jpg" alt="Image" class="img-thumbnail img-circle thumb128">
            </div>
         </div>
         <div class="panel-body text-center">
            <h3 class="m0">Clark Kentman</h3>
            <p class="text-muted">Lead director</p>
            <p>Proin metus justo, commodo in ultrices at, lobortis sit amet dui. Fusce dolor purus, adipiscing a tempus at, gravida vel purus.</p>
         </div>
         <div class="panel-body text-center bg-gray-dark">
            <div class="row row-table">
               <div class="col-xs-4">
                  <h3 class="m0">400</h3>
                  <p class="m0">Photos</p>
               </div>
               <div class="col-xs-4">
                  <h3 class="m0">2000</h3>
                  <p class="m0">Likes</p>
               </div>
               <div class="col-xs-4">
                  <h3 class="m0">500</h3>
                  <p class="m0">Following</p>
               </div>
            </div>
         </div>
      </div>
      <!-- END widget-->
   </div>
   <div class="col-md-4">
      <!-- START widget-->
      <div class="panel widget">
         <div class="half-float">
            <img src="http://themicon.co/theme/angle/v2.4/backend-jquery/app/img/bg3.jpg" alt="" class="img-responsive">
            <div class="half-float-bottom">
               <img src="https://bootdey.com/img/Content/user_2.jpg" alt="Image" class="img-thumbnail img-circle thumb128">
            </div>
         </div>
         <div class="panel-body text-center">
            <h3 class="m0">Maria Berriut</h3>
            <p class="text-muted">Lead director</p>
            <p>Proin metus justo, commodo in ultrices at, lobortis sit amet dui. Fusce dolor purus, adipiscing a tempus at, gravida vel purus.</p>
         </div>
         <div class="panel-body text-center bg-gray-dark">
            <div class="row row-table">
               <div class="col-xs-4">
                  <h3 class="m0">400</h3>
                  <p class="m0">Photos</p>
               </div>
               <div class="col-xs-4">
                  <h3 class="m0">2000</h3>
                  <p class="m0">Likes</p>
               </div>
               <div class="col-xs-4">
                  <h3 class="m0">500</h3>
                  <p class="m0">Following</p>
               </div>
            </div>
         </div>
      </div>
      <!-- END widget-->
   </div>
   <div class="col-md-4">
      <!-- START widget-->
      <div class="panel widget">
         <div class="half-float">
            <img src="http://themicon.co/theme/angle/v2.4/backend-jquery/app/img/bg3.jpg" alt="" class="img-responsive">
            <div class="half-float-bottom">
               <img src="https://bootdey.com/img/Content/user_1.jpg" alt="Image" class="img-thumbnail img-circle thumb128">
            </div>
         </div>
         <div class="panel-body text-center">
            <h3 class="m0">Mark planty</h3>
            <p class="text-muted">Lead director</p>
            <p>Proin metus justo, commodo in ultrices at, lobortis sit amet dui. Fusce dolor purus, adipiscing a tempus at, gravida vel purus.</p>
         </div>
         <div class="panel-body text-center bg-gray-dark">
            <div class="row row-table">
               <div class="col-xs-4">
                  <h3 class="m0">400</h3>
                  <p class="m0">Photos</p>
               </div>
               <div class="col-xs-4">
                  <h3 class="m0">2000</h3>
                  <p class="m0">Likes</p>
               </div>
               <div class="col-xs-4">
                  <h3 class="m0">500</h3>
                  <p class="m0">Following</p>
               </div>
            </div>
         </div>
      </div>
      <!-- END widget-->
   </div>
</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 {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 1.52857143;
  color: #515253;
  background-color: #f5f7fa;
  margin-top:20px;
}

.widget .panel, .widget.panel {
  overflow: hidden;
}

.widget {
  margin-bottom: 20px;
  border: 0;
}

.bg-gray-darker {
  background-color: #232735;
  color: #fff!important;
}

.half-float {
  position: relative;
  margin-bottom: 65px;
}

.half-float .half-float-bottom, .half-float .half-float-top {
  position: absolute;
  left: 50%;
  bottom: -60px;
  width: 120px;
  height: 120px;
  margin-left: -60px;
  z-index: 2;
}

.thumb128 {
  width: 128px!important;
  height: 128px!important;
}

.half-float+* {
  margin-top: -55px;
  padding-top: 65px;
}

.m0 {
  margin: 0!important;
}

.bg-gray-dark {
  background-color: #3a3f51;
  color: #fff!important;
}

.row-table {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
  margin: 0;
}

.row-table>[class*=col-] {
  display: table-cell;
  float: none;
  table-layout: fixed;
  vertical-align: middle;
}


                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 7th 2015, 13:01

Views: 3.7K

Rated 5/5 based on 1 reviews