<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="default.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="image">
<img src="http://loremflickr.com/320/150?random=4" />
</div>
<div class="card-inner">
<div class="header">
<h2>Title</h2>
<h3>Sub-Head</h3>
</div>
<div class="content">
<p>Content area</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="image">
<img src="http://loremflickr.com/320/150?random=5" />
</div>
<div class="card-inner">
<div class="header">
<h2>Title</h2>
<h3>Sub-Head</h3>
</div>
<div class="content">
<p>Content area</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="image">
<img src="http://loremflickr.com/320/150?random=6" />
</div>
<div class="card-inner">
<div class="header">
<h2>Title</h2>
<h3>Sub-Head</h3>
</div>
<div class="content">
<p>Content area</p>
</div>
</div>
</div>
</div><div class="col-sm-4">
<div class="card">
<div class="image">
<img src="http://loremflickr.com/320/150?random=2" />
</div>
<div class="card-inner">
<div class="header">
<h2>Title</h2>
<h3>Sub-Head</h3>
</div>
<div class="content">
<p>Content area</p>
</div>
</div>
</div>
</div><div class="col-sm-4">
<div class="card">
<div class="image">
<img src="http://loremflickr.com/320/150?random=3" />
</div>
<div class="card-inner">
<div class="header">
<h2>Title</h2>
<h3>Sub-Head</h3>
</div>
<div class="content">
<p>Content area</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="image">
<img src="http://loremflickr.com/320/150" />
</div>
<div class="card-inner">
<div class="header">
<h2>Title</h2>
<h3>Sub-Head</h3>
</div>
<div class="content">
<p>Content area</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="default.js"></script>
</body>
</html>
body {
background: #eeeded;
}
.card {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.2s ease-in-out;
box-sizing: border-box;
margin-top:10px;
margin-bottom:10px;
background-color:#FFF;
}
.card:hover {
box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.card > .card-inner {
padding:10px;
}
.card .header h2, h3 {
margin-bottom: 0px;
margin-top:0px;
}
.card .header {
margin-bottom:5px;
}
.card img{
width:100%;
}