<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<div class="container">
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="https://www.lacartedescolocs.fr/assets/fallbacks/profile_woman_medium_fallback-a7f0361efd57b6d193bef198dacdaaf2a0ac1aa17f23cd9613540c05f2c6bac6.png">
<div class="card-block">
<h4 class="card-title mt-3">Zahir patel</h4>
<div class="meta">
<h5>India, 22 ans</h5>
</div>
</div>
<div class="card-footer">
<div class="icon pull-right">
<a href="#"><i class="fa fa-envelope fa-fw fa-2x" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-ban fa-2x" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
html {
font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 14px;
}
h5 {
font-size: 1.28571429em;
font-weight: 700;
line-height: 1.2857em;
margin: 0;
color:#999999;
}
h4 {
color:#e83910;
}
.card {
font-size: 1em;
overflow: hidden;
padding: 0;
border: none;
border-radius: .28571429rem;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}
.card-block {
font-size: 1em;
position: relative;
margin: 0;
padding: 1em;
border: none;
border-top: 1px solid rgba(34, 36, 38, .1);
box-shadow: none;
}
.card-img-top {
display: block;
width: 100%;
height: auto;
}
.card-title {
font-size: 1.28571429em;
font-weight: 700;
line-height: 1.2857em;
}
.card-text {
clear: both;
margin-top: .5em;
color: rgba(0, 0, 0, .68);
}
.card-footer {
font-size: 1em;
position: static;
top: 0;
left: 0;
max-width: 100%;
color: rgba(0, 0, 0, .4);
border-top: 1px solid rgba(0, 0, 0, .05) !important;
background: #fff;
}
.card-inverse .btn {
border: 1px solid rgba(0, 0, 0, .05);
}
.profile {
position: absolute;
top: -12px;
display: inline-block;
overflow: hidden;
box-sizing: border-box;
width: 25px;
height: 25px;
margin: 0;
border: 1px solid #fff;
border-radius: 50%;
}
.profile-avatar {
display: block;
width: 100%;
height: auto;
border-radius: 50%;
}
.profile-inline {
position: relative;
top: 0;
display: inline-block;
}
.profile-inline ~ .card-title {
display: inline-block;
margin-left: 4px;
vertical-align: top;
}
.text-bold {
font-weight: 700;
}
.meta {
font-size: 1em;
color: rgba(0, 0, 0, .4);
}
.profile_budget{
padding-top:15px;
color:#757575;
}
.meta h5 {
text-decoration: none;
font-weight:normal;
}
.card-footer .icon{
padding:10px 10px;
}
.card-footer .icon a{
color:#ef6645;
}
