Bootstrap snippet: profile cards with social links

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,cards,social



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Begin page content --> <div class="container bootstrap snippet"> <div class="row"> <div class="col-md-4"> <div class="g-hover-card"> <img src="http://lorempixel.com/400/200/sports/1/" alt=""> <div class="user-avatar"> <img src="http://bootdey.com/img/Content/user_6.jpg" alt=""> </div> <div class="info"> <div class="title"> <a href="http://bootdey.com/profile/Dey-Dey">bootdey.com/profile/Dey-Dey</a> </div> <div class="description">Dey-Dey</div> </div> <div class="bottom"> <a href="https://twitter.com/bootdey" class="btn btn-info btn-xs"> <i class="fa fa-twitter"></i> Twitter </a> <a href="https://facebook.com/bootdey" class="btn btn-primary btn-xs"> <i class="fa fa-facebook"></i> Facebook </a> <a href="https://plus.google.com/+Bootdey-bootstrap/posts" class="btn btn-danger btn-xs"> <i class="fa fa-google-plus"></i> Google + </a> </div> </div> </div> <div class="col-md-4"> <div class="g-hover-card"> <img src="http://lorempixel.com/400/200/abstract/1/" alt=""> <div class="user-avatar"> <img src="http://bootdey.com/img/Content/user_1.jpg" alt=""> </div> <div class="info"> <div class="title"> <a href="http://bootdey.com/">bootdey.com</a> </div> <div class="description">Mark</div> </div> <div class="bottom"> <a href="https://twitter.com/bootdey" class="btn btn-info btn-xs"> <i class="fa fa-twitter"></i> Twitter </a> <a href="https://facebook.com/bootdey" class="btn btn-primary btn-xs"> <i class="fa fa-facebook"></i> Facebook </a> <a href="https://plus.google.com/+Bootdey-bootstrap/posts" class="btn btn-danger btn-xs"> <i class="fa fa-google-plus"></i> Google + </a> </div> </div> </div> <div class="col-md-4"> <div class="g-hover-card"> <img src="http://lorempixel.com/400/200/abstract/6/" alt=""> <div class="user-avatar"> <img src="http://bootdey.com/img/Content/user_3.jpg" alt=""> </div> <div class="info"> <div class="title"> <a href="http://bootdey.com/">bootdey.com</a> </div> <div class="description">Mario</div> </div> <div class="bottom"> <a href="https://twitter.com/bootdey" class="btn btn-info btn-xs"> <i class="fa fa-twitter"></i> Twitter </a> <a href="https://facebook.com/bootdey" class="btn btn-primary btn-xs"> <i class="fa fa-facebook"></i> Facebook </a> <a href="https://plus.google.com/+Bootdey-bootstrap/posts" class="btn btn-danger btn-xs"> <i class="fa fa-google-plus"></i> Google + </a> </div> </div> </div> </div> </div>
body{ background: #ddd; margin-top:20px; } .g-hover-card { position: relative; text-align: center; background-color: #fff; } .g-hover-card img { width: 280px; height: 135px; } .g-hover-card .user-avatar { position: relative; top: -40px; margin-bottom: -40px; } .g-hover-card .user-avatar img { width: 80px; height: 80px; max-width: 80px; max-height: 80px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .g-hover-card .info { padding: 4px 8px 10px; } .g-hover-card .info.title { margin-bottom: 4px; font-size: 24px; line-height: 1; color: #262626; vertical-align: middle; } .g-hover-card .info.descriptions { overflow: hidden; font-size: 12px; line-height: 20px; color: #737373; text-overflow: ellipsis; } .g-hover-card .bottom { padding: 0 20px; margin-bottom: 17px; } .g-hover-card{ width: 280px; padding-top: 0; overflow: hidden; }
Dey-Dey

profile cards with social links

Dey-Dey
  Jul 27th 2015, 08:33
3.4K Views