Skip to content

Instantly share code, notes, and snippets.

@hugowan

hugowan/tpl.html

Last active July 13, 2017 06:16
Show Gist options
  • Save hugowan/57743dc84514ea3e6ff3177d349a4fe2 to your computer and use it in GitHub Desktop.
Save hugowan/57743dc84514ea3e6ff3177d349a4fe2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tpl.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
.container {position: absolute; top:0; left: 0; z-index: 1000; wid}
.nav-link {padding: .5em 0;}
.white {background: #fff;}
.separate-space-top {margin-top: 20px;}
.separate-space-bottom {margin-bottom: 20px;}
.custom-logo img {height: 120px;}
a.top-icon {font-size: 0; display: inline-block; color: #2abcc7; white-space: nowrap;}
a.top-icon i {float: left; font-size: 18px;}
a.top-icon i.fa-heart-o {margin-top: 1px;}
a.top-icon div {display: inline-block;}
a.top-icon span {float: left; font-size: 14px; padding-left: 7px;}
.nav {background: #f5f5f5; border-bottom: 1px solid #ddd; font-size: 20px;}
.nav li {color: #36403f; margin-left: 10px; height: 50px; line-height: 50px;}
.nav li:first-child:before {content: '|'; color: #2abcc7; padding-right: 10px;}
.nav li:after {content: '|'; color: #2abcc7; padding-left: 10px;}
.nav a {color: #36403f; text-decoration: none;}
.nav label {margin: 0; padding: 0; cursor: pointer;}
.item-intro {background: #f5f5f5;}
.item-intro .item-detail {margin: 20px;}
.item-image-gallery {margin: 20px;}
.item-image-gallery .item-image-full {width: 480px; height: 480px; overflow: hidden;}
.item-image-gallery .item-image-full a {display: inline-block;}
.item-image-gallery .item-image-nav ul {margin: 0; padding: 0; list-style: none;}
.item-image-gallery .item-image-nav ul li {float: left; padding: 10px 10px 0 0;}
.item-image-gallery .item-image-nav img {height: 60px;}
@media (max-width: 990px) {
.item-image-gallery .item-image-full {width: 330px; height: 330px;}
}
.tabs {background: #36403f; position: relative; min-height: 50px; clear: both;}
.tabs .tab {float: left;}
.tabs .tab label {cursor: pointer; text-transform: uppercase; font-size: 20px; line-height: 30px; height: 50px; background: #36403f; color: #FFF; padding: 10px 30px; margin: 0; position: relative;}
.tabs .tab [type=radio] {display: none;}
.tabs .tab .content {background: #fff; position: absolute; top: 50px; left: 0; right: 0; bottom: 0; padding: 20px; opacity: 0;}
[type=radio]:checked ~ label {background: #2abcc7; z-index: 2;}
[type=radio]:checked ~ label ~ .content {z-index: 1; opacity: 1;}
</style>
</head>
<body>
<div class="container">
<div class="row white">
<div class="col-md-6">
<div class="custom-logo">
<img src="$customLogoUri">
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-end align-items-end">
<div class="p-4">
<a href="$urlFeedback" class="top-icon" target="_blank">
<div><i class="fa fa-comment-o"></i></div>
<div><span>Feedback</span></div>
</a>
</div>
<div class="p-4">
<a href="$urlSubscribe" class="top-icon" target="_blank">
<div><i class="fa fa-heart-o"></i></div>
<div><span>Add As Favourite Seller</span></div>
</a>
</div>
</div>
</div>
</div>
<div class="row separate-space-bottom">
<div class="col-md-12">
<ul class="nav nav-pills flex-column flex-sm-row justify-content-center">
<li>
<a class="flex-sm-fill text-sm-center" href="$urlAboutUs">About Us</a>
</li>
<li>
<a class="flex-sm-fill text-sm-center" href="$urlContactUs">Contact Us</a>
</li>
<li>
<a class="flex-sm-fill text-sm-center" href="#payment">Payment</a>
</li>
<li>
<a class="flex-sm-fill text-sm-center" href="#shipping">Shipping</a>
</li>
<li>
<a class="flex-sm-fill text-sm-center" href="#terms">Terms</a>
</li>
</ul>
</div>
</div>
<div class="row separate-space-bottom">
<div class="col-md-4">
<img src="http://ebayaction.co.uk/0s/simpleTemplate/Banners/Free Fast Shipping.png" class="img-fluid">
</div>
<div class="col-md-4">
<img src="http://ebayaction.co.uk/0s/simpleTemplate/Banners/Quality Guaranteed.png" class="img-fluid">
</div>
<div class="col-md-4">
<img src="http://ebayaction.co.uk/0s/simpleTemplate/Banners/Shipped from local.png" class="img-fluid">
</div>
</div>
<div class="row separate-space-bottom">
<div class="col-md-12">
<div>
<img src="$customBannerUri" class="img-fluid">
</div>
</div>
</div>
<div class="item-intro separate-space-bottom">
<div class="row">
<div class="col-md-6">$itemImageGallery</div>
<div class="col-md-6">
<div class="item-detail">
<div class="item-name"><h3>$title</h3></div>
</div>
</div>
</div>
</div><!-- /.item-intro -->
<div class="row separate-space-bottom">
<div class="col-md-12">
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Description</label>
<div class="content">$description</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Payment</label>
<div class="content" id="payment">$payment</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Shipping</label>
<div class="content" id="shipping">$shipping</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Terms</label>
<div class="content" id="terms">$terms</div>
</div>
</div><!-- /.tabs -->
</div>
</div>
</div><!-- /.container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment