<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">
<!-- Card Projects -->
<div class="col-md-4">
<div class="card">
<div class="card-image">
<span class="card-icons">
<ul class="nav nav-pills">
<li class="presentation"><a href="#"><span class="glyphicon glyphicon-credit-card"></span></a></li>
</ul>
</span>
<img class="img-responsive" src="https://maps.googleapis.com/maps/api/staticmap?size=555x180&markers=color:blue|3102-Vandiver-Dr,Columbia,MO|509-Stadium-Blvd,-65201,St.-Louis,MO">
<span class="card-title">Columbia</span>
</div>
<div class="card-content">
<div class="row" style="text-align: center">
<div class="col-xs-4">
<time>
<i class="fa fa-calendar"></i> 10/14/2015
</time>
</div>
<div class="col-xs-4">
<i class="fa fa-cube"></i> 13777
</div>
<div class="col-xs-4">
<i class="fa fa-recycle"></i> 171864
</div>
</div>
<hr style="margin: 10px 0"/>
</div>
<div class="card-action">
<i class="fa fa-map-marker"></i> Columbia, MO
<span class="pull-right label label-warning">DORMANT</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-image">
<span class="card-icons">
<ul class="nav nav-pills">
<li class="presentation"><a href="#"><span class="glyphicon glyphicon-cloud"></span></a></li>
<li class="presentation"><a href="#"><span class="glyphicon glyphicon-credit-card"></span></a></li>
</ul>
</span>
<img class="img-responsive" src="https://maps.googleapis.com/maps/api/staticmap?size=555x180&markers=color:blue|3102-Vandiver-Dr,Columbia,MO|509-Stadium-Blvd,-65201,St.-Louis,MO">
<span class="card-title">St. Louis</span>
</div>
<div class="card-content">
<p>Cards for display in portfolio style material design by Google, modified so that Google Maps would be displayed is a way that is still readable.</p>
</div>
<div class="card-action">
<i class="fa fa-map-marker"></i> St. Louis, MO
<span class="pull-right label label-success">$199</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-image">
<span class="card-icons">
<ul class="nav nav-pills">
<li class="presentation"><a href="#"><span class="glyphicon glyphicon-cloud"></span></a></li>
<li class="presentation"><a href="#"><span class="glyphicon glyphicon-credit-card"></span></a></li>
</ul>
</span>
<img class="img-responsive" src="https://maps.googleapis.com/maps/api/staticmap?size=555x180&markers=color:blue|3102-Vandiver-Dr,Columbia,MO|509-Stadium-Blvd,-65201,St.-Louis,MO">
<span class="card-title">Columbia</span>
</div>
<div class="card-content">
<p>Cards for display in portfolio style material design by Google, modified so that Google Maps would be displayed is a way that is still readable.</p>
</div>
<div class="card-action">
<i class="fa fa-map-marker"></i> Columbia, MO
<span class="pull-right label label-danger">INACTIVE</span>
</div>
</div>
</div>
</div>
</div>
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css");
.card {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.card {
margin-top: 10px;
box-sizing: border-box;
border-radius: 2px;
background-clip: padding-box;
}
.card span.card-title {
color: #fff;
font-size: 24px;
font-weight: 300;
text-transform: uppercase;
}
.card .card-image {
position: relative;
overflow: hidden;
}
.card .card-image img {
border-radius: 2px 2px 0 0;
background-clip: padding-box;
position: relative;
z-index: -1;
}
.card .card-image span.card-title {
position: absolute;
bottom: 0;
left: 0;
padding: 16px;
}
.card .card-image span.card-icons {
position: absolute;
right: 0;
padding: 16px;
}
.card .card-image {
box-shadow: inset 0 -140px 100px -100px rgba(0,0,0,1);
}
.card .card-content {
padding: 16px;
border-radius: 0 0 2px 2px;
background-clip: padding-box;
box-sizing: border-box;
}
.card .card-content p {
margin: 0;
color: inherit;
}
.card .card-content span.card-title {
line-height: 48px;
}
.card .card-action {
border-top: 1px solid rgba(160, 160, 160, 0.2);
padding: 16px;
}
.card .card-action a {
color: #ffab40;
margin-right: 16px;
transition: color 0.3s ease;
text-transform: uppercase;
}
.card .card-action a:hover {
color: #ffd8a6;
text-decoration: none;
}
.card .card-image span.card-icons ul {
background: rgba(255,255,255,0.7);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 2px;
}
.card .card-image span.card-icons .nav>li>a span {
transition: 0.2s transform;
}
.card .card-image span.card-icons .nav>li>a:hover span, .card .card-image span.card-icons .nav>li>a:focus span {
transform: translate(0, -4px);
}
.card .card-image span.card-icons .nav>li>a:hover, .card .card-image span.card-icons .nav>li>a:focus {
background-color: transparent;
}
.card .card-action .label {
padding: 10px;
margin: -5px;
}
