profile cards with social links

This bootstrap snippet called "profile cards with social links" 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,cards,social

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">
<!-- Begin page content -->
<div class="container bootstrap snippet">
<div class="row">
	<div class="col-md-4">
		<div class="g-hover-card">
		<img src="https://lorempixel.com/400/200/sports/1/" alt="">
		<div class="user-avatar">
		   <img src="https://bootdey.com/img/Content/user_6.jpg" alt="">
		</div>
		<div class="info">
		   <div class="title">
			  <a href="https://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="https://lorempixel.com/400/200/abstract/1/" alt="">
		<div class="user-avatar">
		   <img src="https://bootdey.com/img/Content/user_1.jpg" alt="">
		</div>
		<div class="info">
		   <div class="title">
			  <a href="https://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="https://lorempixel.com/400/200/abstract/6/" alt="">
		<div class="user-avatar">
		   <img src="https://bootdey.com/img/Content/user_3.jpg" alt="">
		</div>
		<div class="info">
		   <div class="title">
			  <a href="https://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>

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

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 21st 2015, 20:19

Views: 4.8K

Rated 5/5 based on 1 reviews