<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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>Coupon</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">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default coupon">
<div class="panel-heading" id="head">
<div class="panel-title" id="title">
<img src="https://lh3.googleusercontent.com/7iBTsJp86e-VLN0j2FUNgig8syi41PhVv9wxFN23BK2aCgpC2S7BImojvPpNNN6arZRgIH13BgjapMEzo7lP7fgO_WFaFoFgI39b=w1366-h637-rw"/>
<img src="https://lh3.googleusercontent.com/V6cwPW3TaRVggO0Q5jR0lNj11X7RZrf4VqtL3coJ0nSvE_p_XCY85mfJNN0eJL_IhmtnTnDbKWVHDPM9UIAc4wy3ArVXgFgxaAQH=w1366-h637-rw"/>
<span class="hidden-xs">Trip Me Technologies Pvt Ltd</span>
<span class="visible-xs">Trip Me Technologies Pvt Ltd</span>
</div>
</div>
<div class="panel-body">
<img src="http://streamafrica.com/wp-content/uploads/2016/01/hotels-4.jpg" 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-9">
<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-3">
<div class="offer">
<span class="INR"><sup>₹</sup></span>
<span class="number">200</span>
<span class="cents"><sup>00</sup></span>
</div>
</div>
<div class="col-md-12">
<ul class="items">
<p class="text-info">Booking Terms & Conditions</p>
<li>You must present a photo ID at the time of check in. Hotel may ask for credit card or cash deposit for the extra services at the time of check in</li>
<li>All extra charges should be collected directly from clients prior to departure such as parking, phone calls, room service, city tax, etc.</li>
<li>We don't accept any responsibility for additional expenses due to the changes or delays in air, road, rail, sea or indeed of any other causes, all such expenses will have to be borne by passengers.</li>
<li>In case of wrong residency & nationality selected by user at the time of booking; the supplement charges may be applicable and need to be paid to the hotel by guest on check in/ check out.</li>
<li>Any special request for bed type, early check in, late check out, smoking rooms, etc are not guaranteed as subject to availability at the time of check in.</li>
<li>Early check out will attract full cancellation charges unless otherwise specified.</li>
</ul>
</div>
<div class="col-md-12">
<ul class="items">
<p class="text-info">Cancellation policy</p>
<li>Double 1 or 2 beds EXECUTIVE#^#No cancellation charge, If cancelled between 27-Oct-2017 00:00:00 and 27-Oct-2017 23:59:59.</li>
<li>INR 31.00 will be charged, If cancelled between 28-Oct-2017 00:00:00 and 31-Oct-2017 23:59:59.</li>
<li>100.00% of total amount will be charged, If cancelled between 01-Nov-2017 00:00:00 and 02-Nov-2017 23:59:59.</li>
<li>That's All</li>
</ul>
</div>
<div class="col-md-12">
<p class="text-info">Remarks</p>
<p class="disclosure">
Please note that while your booking had been confirmed and is guaranteed, the rooming list with your name may not be adjusted in the hotel's reservation system until closer to arrival. </p>
</div>
</div>
<div class="panel-footer">
<div class="exp">ChekIn: Sep 30, 2017</div>
<div class="coupon-code">
No of Days: 3
<span class="print">
<a href="#" class="btn btn-link"><i class="fa fa-file-pdf-o" aria-hidden="true"></i> Save PDF</a>
</span>
</div>
<div class="exp">ChekOut: Oct 1, 2017</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;
}
.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;
}
.print {
font-size: 14px;
float: right;
}
/*------------------dont copy these lines----------------------*/
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.row {
margin: 30px 0;
}
#quicknav ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#quicknav ul li {
display: inline;
}
#quicknav ul li a {
text-decoration: none;
padding: .2em 1em;
}
.btn-danger,
.btn-success,
.btn-info,
.btn-warning,
.btn-primary {
width: 105px;
}
.btn-default {
margin-bottom: 40px;
}
/*-------------------------------------------------------------*/
