<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 profileCard">
<div class="profileCard1">
<div class="pImg">
<span class="fa fa-css3 fa-4x"></span>
</div>
<div class="pDes">
<h1 class="text-center">Material Card</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!</p>
<a class="btn btn-info btn-md">Read More</a>
</div>
</div>
</div> <!--End-->
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 profileCard">
<div class="profileCard2">
<div class="pImg">
<img src="http://i.imgur.com/QiRVrQo.jpg" alt="Rizwan Akram" title="Rizwan Akram" class="img-circle">
</div>
<div class="pDes">
<div class="user-heading">
<h3>Rizwan Akram</h3>
<span class="help-block">Wazirabad, Punjab, Pakistan</span>
</div>
<ul class="pTabs">
<li class="active">
<a data-toggle="tab" href="#a1">
<span class="fa fa-user"></span>
</a>
</li>
<li>
<a data-toggle="tab" href="#a2">
<span class="fa fa-cog"></span>
</a>
</li>
<li>
<a data-toggle="tab" href="#a3">
<span class="fa fa-envelope"></span>
</a>
</li>
<li>
<a data-toggle="tab" href="#a4">
<span class="fa fa-calendar"></span>
</a>
</li>
<li>
<a data-toggle="tab" href="#a5">
<span class="fa fa-phone"></span>
</a>
</li>
</ul>
<div class="pTabs-body">
<div class="tab-content">
<div id="a1" class="tab-pane active">
<h4>Account Information</h4>
</div>
<div id="a2" class="tab-pane">
<h4>Settings</h4>
</div>
<div id="a3" class="tab-pane">
<h4>Send Message</h4>
</div>
<div id="a4" class="tab-pane">
<h4>Events</h4>
</div>
<div id="a5" class="tab-pane">
<h4>Contact</h4>
</div>
</div>
</div>
</div>
</div>
</div> <!--End-->
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 profileCard">
<section>
<div class="profileCard3">
<div class="authorInfo box">
<div class="media">
<div class="media-left media-middle">
<div class="authorImg loader">
<a href="#">
<img src="http://i.imgur.com/QiRVrQo.jpg" alt="Author" class="img-responsive block-center img-circle" no="28" style="display: block;">
</a>
</div>
</div>
<div class="media-body">
<h3 class="media-heading">Rizwan Akram</h3>
<p><i class="fa fa-map-marker"></i> Wazirabad, Gujranwala, Punjab, Pakistan</p>
<p><i class="fa fa-clock-o"></i> 2 years 6 months ago</p>
</div>
</div>
</div>
<div class="authorBio box">
<ul>
<li>
<span class="title">Author Rating:</span>
<span>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</span>
<p>
5 average based on 185 ratings.
<span>(<a href="#" class="">less information</a>)</span>
</p>
</li>
<li>
<span class="title">Author Sales:</span> <span class="salesCount">24,500</span>
</li>
<li>
<a href="profile.php" class="userProfile">More posts by Rizwan Akram <span>(User Profile)</span></a>
</li>
</ul>
<div class="authorSocial">
<a href="https://www.facebook.com/profile.php?id=100004280946748" target="_blank" class="">
<i class="fa fa-facebook"></i>
</a>
<a href="https://twitter.com/mrizwan_akram" target="_blank" class="">
<i class="fa fa-twitter"></i>
</a>
<a href="https://plus.google.com/104290179713903736300/posts">
<i class="fa fa-google-plus"></i>
</a>
<a href="https://pk.linkedin.com/in/iamrizwanakram">
<i class="fa fa-linkedin"></i>
</a>
<a href="https://www.pinterest.com/iamrizwanakram/">
<i class="fa fa-pinterest"></i>
</a>
</div>
<p class="follow">
<a href="" class="btn btn-follow btn-sm active">Followed</a>
</p>
</div>
</section>
</div> <!--End-->
</div>
</div>
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
body {
padding-top: 50px;
background-color: #EBECF2;
}
ul, ol {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.btn {
border-radius: 2px;
box-shadow: none !important;
}
.profileCard {
margin-bottom: 25px;
}
/*PROFILE CARD 1*/
.profileCard1 {
width: 100%;
border-radius: 2px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
padding: 15px;
margin-top: 60px;
float: left;
background-color: #FFF;
}
.profileCard1 .pImg {
background-color: #EC4141;
border-radius: 50%;
display: table;
height: 100px;
margin: 0 auto;
width: 100px;
margin-top: -60px;
}
.profileCard1 .pImg span {
color: #fff;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.profileCard1 .pDes > p {
color: #717171;
font-size: 16px;
padding-top: 10px;
text-align: justify;
}
.profileCard1 .pDes > a {
background-color: #03a9f4;
border-radius: 2px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
color: #fff;
transition: all 0.5s ease 0s;
}
.profileCard1 .pDes > a:hover {
background-color: #0288d1;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
color: #fff;
transition: all 0.5s ease 0s;
}
/*PROFILE CARD 2*/
.profileCard2 {
width: 100%;
border-radius: 2px;
padding: 15px;
margin-top: 60px;
float: left;
background-color: #FFF;
}
.profileCard2 .pImg {
margin: 0 auto;
margin-top: -60px;
display: table;
}
.profileCard2 .pImg img {
width: 100px;
height: 100px;
}
.profileCard2 .pDes .user-heading {
width: 100%;
text-align: center;
margin: 10px 0 0;
}
.profileCard2 .pDes .pTabs li {
float: left;
width: 20%;
}
.profileCard2 .pDes .pTabs li a {
padding: 15px;
font-size: 1.5em;
display: block;
border: 1px solid #FFFFFF;
text-align: center;
background-color: #FBFBFB;
color: #802B94;
}
.profileCard2 .pDes .pTabs li.active a {
background-color: #802B94;
color: #FFF;
}
.profileCard2 .pDes .pTabs-body {
float: left;
padding: 15px;
width: 100%;
background-color: #FBFBFB;
border: 1px solid #FFF;
color: #802B94;
}
/*PROFILE CARD 3*/
.profileCard3 .box {
padding: 15px;
}
.profileCard3 .authorInfo {
background-color: #666;
border-radius: 2px 2px 0 0;
position: relative;
}
.profileCard3 .authorInfo:hover {
background-color: #333;
}
.profileCard3 .authorImg {
width: 70px;
height: 70px;
border-radius: 50px;
}
.profileCard3 .authorInfo h3 {
color: #FFF;
margin-top: 3px;
letter-spacing: 1px;
font-weight: 400;
}
.profileCard3 .authorInfo p {
color: #EBECF2;
margin-bottom: 0;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.profileCard3 .media-left {
padding-right: 20px;
}
.profileCard3 .authorInfo .media-left a {
width: 70px;
height: 70px;
display: block;
}
.profileCard3 .authorInfo:before {
content: '';
position: absolute;
width: 0;
height: 0;
left: -14px;
top: 35px;
background: transparent;
border-bottom: 16px solid transparent;
border-top: 16px solid transparent;
border-right: 14px solid #666;
font-size: 0;
line-height: 0;
}
.authorInfo:hover:before {
border-right: 14px solid #333;
}
.profileCard3 .authorBio {
background-color: #FFF;
border-radius: 0 0 2px 2px;
overflow: auto;
}
.profileCard3 .authorBio ul li {
margin-bottom: 12px;
}
.profileCard3 .authorBio ul li .title {
font-weight: bold;
color: #444;
font-size: 15px;
cursor: default;
margin-right: 5px;
}
.profileCard3 .authorBio ul li .salesCount {
font-size: 16px;
color: #666;
}
.profileCard3 .authorBio ul li p {
font-size: 11px;
color: #515151;
font-weight: 400;
margin: 2px 0 0;
line-height: 15px;
}
.profileCard3 .authorBio ul li .userProfile {
display: block;
font-size: 13px;
}
.profileCard3 .authorBio ul li .userProfile>span {
color: #666;
}
.profileCard3 .authorBio .authorSocial a {
width: 30px;
height: 30px;
float: left;
color: #FFF;
margin-right: 5px;
padding-left: 2px;
line-height: 28px;
background-color: #EBECF2;
border: 1px solid #EBECF2;
text-align: center;
border-radius: 50px;
}
.profileCard3 .authorBio .authorSocial a:hover {
background-color: #D8DAE4;
border: 1px solid #D8DAE4;
}
.profileCard3 .authorBio .follow {
color: #CBCBCB;
margin-bottom: 0;
float: right;
top: 0;
position: relative;
}
.btn-follow {
color: #A5A5A5;
background-color: #FBFBFB;
border: 1px solid #C5C5C5;
}
.btn-follow:hover, .btn-follow.active {
color: #FFF;
background-color: #0093FC;
border: 1px solid #0093FC;
}
.fa-star,
.fa-star-o {
font-size: 16px;
margin-right: 0px !important;
color: #FFD100;
}
.fa-star.empty {
color: #E1E8ED !important;
}
