<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="row">
<div class="col-md-4">
<div class="widget-container">
<div class="widget">
<div class="profile-card">
<div class="card-header">
<div class="header-avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="andy">
</div>
<div class="header-name">
UMER Farooq
</div>
</div>
<div class="card-body bg-warning">
<div class="body-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. Praesent mattis commodo augue.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. Praesent mattis commodo augue.
</div>
</div>
<div class="card-footer">
<div class="footer-social">
<div class="row">
<div class="col-xs-3">
<a href="">
<i class="fa fa-facebook"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-dribbble"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-instagram"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="widget-container">
<div class="widget">
<div class="profile-card">
<div class="card-header">
<div class="header-avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="claudio">
</div>
<div class="header-name">
HAMZA Ali
</div>
</div>
<div class="card-body bg-primary">
<div class="body-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. Praesent mattis commodo augue.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. Praesent mattis commodo augue. </div>
</div>
<div class="card-footer">
<div class="footer-social">
<div class="row">
<div class="col-xs-3">
<a href="">
<i class="fa fa-facebook"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-dribbble"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-instagram"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="widget-container">
<div class="widget">
<div class="profile-card">
<div class="card-header">
<div class="header-avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="anna">
</div>
<div class="header-name">
USMAN Ali
</div>
</div>
<div class="card-body bg-info">
<div class="body-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. Praesent mattis commodo augue.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. Praesent mattis commodo augue.</div>
</div>
<div class="card-footer">
<div class="footer-social">
<div class="row">
<div class="col-xs-3">
<a href="">
<i class="fa fa-facebook"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-dribbble"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-instagram"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body{
margin-top:20px;
background:#eee;
}
.widget-container {
-webkit-border-radius: 2px;
-webkit-background-clip: padding-box;
-moz-border-radius: 2px;
-moz-background-clip: padding;
border-radius: 2px;
background-clip: padding-box;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
margin-bottom: 30px
}
.widget-container .widget {
margin-bottom: 0
}
.widget-container>.row {
margin-right: 0 !important;
margin-left: 0 !important
}
.widget-container>.row>[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important
}
.widget {
-webkit-border-radius: 2px;
-webkit-background-clip: padding-box;
-moz-border-radius: 2px;
-moz-background-clip: padding;
border-radius: 2px;
background-clip: padding-box;
background-color: #fff;
font-weight: 300;
margin-bottom: 30px;
position: relative;
vertical-align: middle
}
.widget .row {
font-size: 0;
margin-left: 0;
margin-right: 0
}
.widget .row:before {
display: none
}
.widget .row .col {
font-size: 11px
}
.widget .row .col:first-child {
-webkit-border-radius: 2px 0 0 2px;
-webkit-background-clip: padding-box;
-moz-border-radius: 2px 0 0 2px;
-moz-background-clip: padding;
border-radius: 2px 0 0 2px;
background-clip: padding-box
}
.widget .row .col:last-child {
-webkit-border-radius: 0 2px 2px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 2px 2px 0;
-moz-background-clip: padding;
border-radius: 0 2px 2px 0;
background-clip: padding-box
}
.widget .col {
display: inline-block;
vertical-align: top
}
.widget [class*=col-] {
font-size: 11px;
margin: 0;
padding: 0
}
.widget .widget-stat {
position: absolute
}
.widget .widget-stat.top {
top: 7px
}
.widget .widget-stat.right {
right: 10px
}
.widget .widget-stat.left {
left: 10px
}
.widget .widget-stat.bottom {
bottom: 7px
}
.widget .widget-stat strong,
.widget .widget-stat span,
.widget .widget-stat i,
.widget .widget-stat div {
vertical-align: top
}
.widget .progress {
margin-bottom: 0
}
.profile-card .card-header .header-avatar {
text-align: center
}
.profile-card .card-header .header-avatar img {
margin: 25px 0 15px;
width: 128px;
height: 128px
}
.profile-card .card-header .header-name {
font-size: 20px;
font-weight: 400;
text-align: center
}
.profile-card .card-body {
-webkit-transform: skew(0deg, -10deg);
-moz-transform: skew(0deg, -10deg);
-o-transform: skew(0deg, -10deg);
-ms-transform: skew(0deg, -10deg);
transform: skew(0deg, -10deg);
margin-top: 30px;
min-height: 100px;
padding: 50px 20px
}
.profile-card .card-body .body-description {
-webkit-transform: skew(0deg, 10deg);
-moz-transform: skew(0deg, 10deg);
-o-transform: skew(0deg, 10deg);
-ms-transform: skew(0deg, 10deg);
transform: skew(0deg, 10deg);
color: #fff;
font-size: 13px
}
.profile-card .card-footer {
margin-top: 50px;
padding: 10px 0 20px
}
.profile-card .card-footer .footer-social {
text-align: center
}
.profile-card .card-footer .footer-social .row {
margin: 0
}
.profile-card .card-footer .footer-social i {
color: #292929;
font-size: 20px
}
.bg-primary {
background-color: #29c7ca !important;
color: #fff !important
}
.bg-success {
background-color: #1dbc9c !important;
color: #fff !important
}
.bg-info {
background-color: #34b5dc !important;
color: #fff !important
}
.bg-warning {
background-color: #ffc107 !important;
color: #fff !important
}
.bg-danger {
background-color: #cd4237 !important;
color: #fff !important
}
.bg-inverse {
background-color: #fefefe !important;
color: #292929 !important
}
.bg-white {
background-color: #fff !important;
color: #292929 !important
}
.bg-transparent {
background-color: transparent !important
}
.bg-body {
background-color: #f1f3f2 !important
}
.bg-highlight {
background-color: #ff8
}
.bg-default-darker {
background-color: #212121
}
