Skip to content

Instantly share code, notes, and snippets.

@Veilkrand

Veilkrand/shop.html

Last active April 23, 2023 08:17
Show Gist options
  • Save Veilkrand/5e1846fa493a2ec51573ea2726ab9329 to your computer and use it in GitHub Desktop.
Save Veilkrand/5e1846fa493a2ec51573ea2726ab9329 to your computer and use it in GitHub Desktop.
Download ZIP
Front store template for the Django+Stripe tutorial in Medium
Raw
shop.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">
<meta name="description" content="Django+Stripe Tutorial">
<meta name="author" content="Alberto NG based on Bootstrap example templates">
<title>My Shop - Frontstore</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/pricing/">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.container {
max-width: 960px;
}
.pricing-header {
max-width: 700px;
}
.card-deck .card {
min-width: 220px;
}
</style>
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">My Shop</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-4">Things</h1>
<p class="lead">Here you have the finest selection of digital things and stuff money can buy and technology can build. We sincerely recommend you to buy the Platinum thing option because is the most expensive one.</p>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Regular</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$5 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>1 monkey included</li>
<li>0.5 tons of bananas</li>
<li>No support provided</li>
<li>Restricted access to fun</li>
</ul>
<button id="buy_regular_button" type="button" class="buy-button btn btn-lg btn-block btn-outline-primary" value="product_regular">Buy Regular!</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Pro</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>20 monkeys included</li>
<li>10 tons of bananas</li>
<li>Priority alien support</li>
<li>Full Fun access</li>
</ul>
<button id="buy_pro_button" type="button" class="buy-button btn btn-lg btn-block btn-outline-primary" value="product_pro">Buy Pro!</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Platinum</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>30 monkeys included</li>
<li>20 tons of bananas</li>
<li>Our support team is yours</li>
<li>Black hole access and more!</li>
</ul>
<button id="buy_platinum_button" type="button" class="buy-button btn btn-lg btn-block btn-outline-primary" value="product_platinum">Buy Platinum!</button>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<small class="d-block mb-3 text-muted">&copy; Alberto NG 2017-2020</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment