Responsive Data Cards (Bootstrap 4)
<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 ---------->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css' />
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="tile">
<div class="wrapper">
<div class="header">Event Title</div>
<div class="banner-img">
<img src="http://via.placeholder.com/640x360" alt="Image 1">
</div>
<div class="dates">
<div class="start">
<strong>STARTS</strong> 12:30 JAN 2015
<span></span>
</div>
<div class="ends">
<strong>ENDS</strong> 14:30 JAN 2015
</div>
</div>
<div class="stats">
<div>
<strong>INVITED</strong> 3098
</div>
<div>
<strong>JOINED</strong> 562
</div>
<div>
<strong>DECLINED</strong> 182
</div>
</div>
<div class="stats">
<div>
<strong>INVITED</strong> 3098
</div>
<div>
<strong>JOINED</strong> 562
</div>
<div>
<strong>DECLINED</strong> 182
</div>
</div>
<div class="stats">
<div>
<strong>INVITED</strong> 3098
</div>
<div>
<strong>JOINED</strong> 562
</div>
<div>
<strong>DECLINED</strong> 182
</div>
</div>
<div class="footer">
<a href="#" class="Cbtn Cbtn-primary">View</a>
<a href="#" class="Cbtn Cbtn-danger">Delete</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="tile">
<div class="wrapper">
<div class="header">Event Title</div>
<div class="banner-img">
<img src="http://via.placeholder.com/640x360" alt="Image 1">
</div>
<div class="dates">
<div class="start">
<strong>STARTS</strong> 12:30 JAN 2015
<span></span>
</div>
<div class="ends">
<strong>ENDS</strong> 14:30 JAN 2015
</div>
</div>
<div class="stats">
<div>
<strong>INVITED</strong> 3098
</div>
<div>
<strong>JOINED</strong> 562
</div>
<div>
<strong>DECLINED</strong> 182
</div>
</div>
<div class="stats">
<div>
<strong>INVITED</strong> 3098
</div>
<div>
<strong>JOINED</strong> 562
</div>
<div>
<strong>DECLINED</strong> 182
</div>
</div>
<div class="stats">
<div>
<strong>INVITED</strong> 3098
</div>
<div>
<strong>JOINED</strong> 562
</div>
<div>
<strong>DECLINED</strong> 182
</div>
</div>
<div class="footer">
<a href="#" class="Cbtn Cbtn-primary">View</a>
<a href="#" class="Cbtn Cbtn-danger">Delete</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="tile">
<div class="wrapper">
<div class="header">Event Title</div>
<div class="banner-img">
<img src="http://via.placeholder.com/640x360" alt="Image 1">
</div>
<div class="dates">
<div class="start">
<strong>STARTS</strong> 12:30 JAN 2015
<span></span>
</div>
<div class="ends">
<strong>ENDS</strong> 14:30 JAN 2015
</div>
</div>
<div class="stats">
<div>
<strong>INVITED</strong> 3098
</div>
<div>
<strong>JOINED</strong> 562
</div>
<div>
<strong>DECLINED</strong> 182
</div>
</div>
<div class="stats">
<div>
<strong>INVITED</strong> 3098
</div>
<div>
<strong>JOINED</strong> 562
</div>
<div>
<strong>DECLINED</strong> 182
</div>
</div>
<div class="stats">
<div>
<strong>INVITED</strong> 3098
</div>
<div>
<strong>JOINED</strong> 562
</div>
<div>
<strong>DECLINED</strong> 182
</div>
</div>
<div class="footer">
<a href="#" class="Cbtn Cbtn-primary">View</a>
<a href="#" class="Cbtn Cbtn-danger">Delete</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="tile">
<div class="wrapper">
<div class="header">Event Title</div>
<div class="banner-img">
<img src="http://via.placeholder.com/640x360" alt="Image 1">
</div>
<div class="dates">
<div class="start">
<strong>STARTS</strong> 12:30 JAN 2015
<span></span>
</div>
<div class="ends">
<strong>ENDS</strong> 14:30 JAN 2015
</div>
</div>
<div class="stats">
<div>
<strong>INVITED</strong> 3098
</div>
<div>
<strong>JOINED</strong> 562
</div>
<div>
<strong>DECLINED</strong> 182
</div>
</div>
<div class="stats">
<div>
<strong>INVITED</strong> 3098
</div>
<div>
<strong>JOINED</strong> 562
</div>
<div>
<strong>DECLINED</strong> 182
</div>
</div>
<div class="stats">
<div>
<strong>INVITED</strong> 3098
</div>
<div>
<strong>JOINED</strong> 562
</div>
<div>
<strong>DECLINED</strong> 182
</div>
</div>
<div class="footer">
<a href="#" class="Cbtn Cbtn-primary">View</a>
<a href="#" class="Cbtn Cbtn-danger">Delete</a>
</div>
</div>
</div>
</div>
</div>
</div>
/* Reset & General
---------------------------------------------------------------------- */
* { margin: 0px; padding: 0px; }
body {
background: #ecf1f5;
font:14px "Open Sans", sans-serif;
text-align:center;
}
.tile{
width: 100%;
background:#fff;
border-radius:5px;
box-shadow:0px 2px 3px -1px rgba(151, 171, 187, 0.7);
float:left;
transform-style: preserve-3d;
margin: 10px 5px;
}
.header{
border-bottom:1px solid #ebeff2;
padding:19px 0;
text-align:center;
color:#59687f;
font-size:600;
font-size:19px;
position:relative;
}
.banner-img {
padding: 5px 5px 0;
}
.banner-img img {
width: 100%;
border-radius: 5px;
}
.dates{
border:1px solid #ebeff2;
border-radius:5px;
padding:20px 0px;
margin:10px 20px;
font-size:16px;
color:#5aadef;
font-weight:600;
overflow:auto;
}
.dates div{
float:left;
width:50%;
text-align:center;
position:relative;
}
.dates strong,
.stats strong{
display:block;
color:#adb8c2;
font-size:11px;
font-weight:700;
}
.dates span{
width:1px;
height:40px;
position:absolute;
right:0;
top:0;
background:#ebeff2;
}
.stats{
border-top:1px solid #ebeff2;
background:#f7f8fa;
overflow:auto;
padding:15px 0;
font-size:16px;
color:#59687f;
font-weight:600;
border-radius: 0 0 5px 5px;
}
.stats div{
border-right:1px solid #ebeff2;
width: 33.33333%;
float:left;
text-align:center
}
.stats div:nth-of-type(3){border:none;}
div.footer {
text-align: right;
position: relative;
margin: 20px 5px;
}
div.footer a.Cbtn{
padding: 10px 25px;
background-color: #DADADA;
color: #666;
margin: 10px 2px;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border-radius: 3px;
}
div.footer a.Cbtn-primary{
background-color: #5AADF2;
color: #FFF;
}
div.footer a.Cbtn-primary:hover{
background-color: #7dbef5;
}
div.footer a.Cbtn-danger{
background-color: #fc5a5a;
color: #FFF;
}
div.footer a.Cbtn-danger:hover{
background-color: #fd7676;
}
,The author is fzs1994
(No Ratings Yet)
Loading...
