<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>
<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 id="quicknav">
<ul>
<li><a href="#red" class="btn btn-danger">Red</a></li>
<li><a href="#green" class="btn btn-success">Green</a></li>
<li><a href="#lightblue" class="btn btn-info">Light Blue</a></li>
<li><a href="#yellow" class="btn btn-warning">Yellow</a></li>
<li><a href="#blue" class="btn btn-primary">Blue</a></li>
</ul>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default coupon">
<div class="panel-heading" id="head">
<div class="panel-title" id="title">
<img src="http://i.imgur.com/IOL5F9T.png">
<span class="hidden-xs">Automatic Transmission Service</span>
<span class="visible-xs">Automatic Transmission Service</span>
</div>
</div>
<div class="panel-body">
