<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 ---------->
<head>
<title>Bootstrap Coupons</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<div class="container">
<div class="row"><h1 class="text-center">CSS Coupons</h1>
<p class="text-center">Update: Made coupon titles appear correctly on mobile.</p>
</div>
<div class="row" id="red">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-danger coupon">
<div class="panel-heading" id="head">
<div class="panel-title" id="title">
<i class="fa fa-github fa-2x"></i>
<span class="hidden-xs">Pham Quoc Hiep</span>
<span class="visible-xs">Pham Quoc Hiep</span>
</div>
</div>
<div class="panel-body">
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style='overflow:hidden;height:300px;'>
<div id='gmap_canvas' style='height:300px;'>
</div>
<div>
<small><a href="http://embedgooglemaps.com"> embed google maps </a></small>
</div>
<div>
<small>
<a href="https://termsandcondiitionssample.com">terms and conditions generator</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:16,center:new google.maps.LatLng(10.772556300000002,106.69800162883598),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(10.772556300000002,106.69800162883598)});infowindow = new google.maps.InfoWindow({content:'<strong>Title</strong><br>chợ bến thành<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>
<img src="http://i.imgur.com/e07tg8R.png" class="coupon-img img-rounded">
<div class="col-md-12 well well-sm">
<div id="business-info">
<ul>
<li><span><i class="fa fa-phone"></i> (123) 456-789</span></li>
<li><span><i class="fa fa-map-marker"></i> 345 S Main Street Bootsnippville, UT</span></li>
</ul>
</div>
</div>
<div class="col-md-12">
<h4>Data</h6>
<ul class="items">
<li>Add up to 5 quarts of motor oil (per specification)</li>
<li>Complimentary multi-point inspection</li>
<li>Drain and refill trnasmission fluid</li>
<li>System inspection</li>
</ul>
</div>
<div class="col-md-12">
<a href="#">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTTJ6ncjVozro6dnYKBEF0AKEtRPqeTykwSyOe_4LkQcBL3oSvr" class="photo-image img-rounded">
</a>
</div>
<div class="col-md-12">
<h4>Personal info</h6>
<ul class="items">
<li>Add up to 5 quarts of motor oil (per specification)</li>
<li>Complimentary multi-point inspection</li>
<li>Drain and refill trnasmission fluid</li>
<li>System inspection</li>
</ul>
</div>
<div class="col-md-12">
<p class="disclosure">Using Genuine Oil Filter and
multigrade oil up to vehicle specification. Lube as
necessary. Ester Oil or Synthetic available at additional
cost. Excludes hazardous waste fee, tax and shop supplies,
where applicable. Offer not valid with previous charges or
with any other offers or specials. Customer must offer at
time of write-up. No cash value.</p>
</div>
<div class="panel-footer">
<div class="share">
<a href="#" class="btn btn-link"><i class="fa fa-lg fa-facebook"></i>Share on Facebook</a>
</div>
</div>
</div>
</div>
</div>
</div>
.coupon {
border: 3px dashed #bcbcbc;
border-radius: 10px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.coupon #head {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
min-height: 56px;
}
.coupon #footer {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#title .visible-xs {
font-size: 12px;
}
.coupon #title img {
font-size: 30px;
height: 30px;
margin-top: 5px;
}
@media screen and (max-width: 500px) {
.coupon #title img {
height: 15px;
}
}
.coupon #title span {
float: right;
margin-top: 5px;
font-weight: 700;
text-transform: uppercase;
}
.coupon-img {
width: 100%;
margin-bottom: 15px;
padding: 0;
}
.photo-image{
display: block;
margin: 0 auto;
}
.items {
margin: 15px 0;
}
.usd, .cents {
font-size: 20px;
}
.number {
font-size: 40px;
font-weight: 700;
}
sup {
top: -15px;
}
#business-info ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#business-info ul li {
display: inline;
text-align: center;
}
#business-info ul li span {
text-decoration: none;
padding: .2em 1em;
}
#business-info ul li span i {
padding-right: 5px;
}
.disclosure {
padding-top: 15px;
font-size: 11px;
color: #bcbcbc;
text-align: center;
}
.coupon-code {
color: #333333;
font-size: 11px;
}
.exp {
color: #f34235;
}
.share {
font-size: 14px;
text-align: center;
}
