Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update base.html #2

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update base.html #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
308 changes: 249 additions & 59 deletions base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,256 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<title>{% block title%} {% endblock %}</title>
<style>
{% block css %} {% endblock %}
</style>
</head>
<body>
<link rel="stylesheet" href="css/style.css">
</head>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/shop">My Awesome Cart</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<body>
<header class="text-gray-500 bg-gray-900 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-white mb-4 md:mb-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">tailblocks</span>
</a>
<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
<a class="mr-5 hover:text-white">First Link</a>
<a class="mr-5 hover:text-white">Second Link</a>
<a class="mr-5 hover:text-white">Third Link</a>
<a class="mr-5 hover:text-white">Fourth Link</a>
</nav>
<button class="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">Button
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</header>

<section class="text-gray-500 bg-gray-900 body-font overflow-hidden">
<div class="container px-5 py-24 mx-auto">
<div class="lg:w-4/5 mx-auto flex flex-wrap">
<img alt="ecommerce" class="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded"
src="https://dummyimage.com/400x400">
<div class="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
<h2 class="text-sm title-font text-gray-600 tracking-widest">BRAND NAME</h2>
<h1 class="text-white text-3xl title-font font-medium mb-1">The Catcher in the Rye</h1>
<div class="flex mb-4">
<span class="flex items-center">
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" class="w-4 h-4 text-indigo-500"
viewBox="0 0 24 24">
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z">
</path>
</svg>
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" class="w-4 h-4 text-indigo-500"
viewBox="0 0 24 24">
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z">
</path>
</svg>
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" class="w-4 h-4 text-indigo-500"
viewBox="0 0 24 24">
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z">
</path>
</svg>
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" class="w-4 h-4 text-indigo-500"
viewBox="0 0 24 24">
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z">
</path>
</svg>
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-4 h-4 text-indigo-500" viewBox="0 0 24 24">
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z">
</path>
</svg>
<span class="text-gray-500 ml-3">4 Reviews</span>
</span>
<span class="flex ml-3 pl-3 py-2 border-l-2 border-gray-800 text-gray-600">
<a>
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-2">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-5 h-5" viewBox="0 0 24 24">
<path
d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
</path>
</svg>
</a>
<a class="ml-2">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-5 h-5" viewBox="0 0 24 24">
<path
d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z">
</path>
</svg>
</a>
</span>
</div>
<p class="leading-relaxed">Fam locavore kickstarter distillery. Mixtape chillwave tumeric sriracha
taximy chia microdosing tilde DIY. XOXO fam $indigojuiceramps cornhole raw denim forage
brooklyn. Everyday carry +1 seitan poutine tumeric. Gastropub blue bottle austin listicle
pour-over, neutra jean shorts keytar banjo tattooed umami cardigan.</p>
<div class="flex mt-6 items-center pb-5 border-b-2 border-gray-800 mb-5">
<div class="flex">
<span class="mr-3">Color</span>
<button class="border-2 border-gray-800 rounded-full w-6 h-6 focus:outline-none"></button>
<button
class="border-2 border-gray-800 ml-1 bg-gray-700 rounded-full w-6 h-6 focus:outline-none"></button>
<button
class="border-2 border-gray-800 ml-1 bg-indigo-500 rounded-full w-6 h-6 focus:outline-none"></button>
</div>
<div class="flex ml-6 items-center">
<span class="mr-3">Size</span>
<div class="relative">
<select
class="rounded border border-gray-700 bg-gray-800 appearance-none py-2 focus:outline-none focus:border-indigo-500 text-white pl-3 pr-10">
<option>SM</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<span
class="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="flex">
<span class="title-font font-medium text-2xl text-white">$58.00</span>
<button
class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
<button
class="rounded-full w-10 h-10 bg-gray-800 p-0 border-0 inline-flex items-center justify-center text-gray-600 ml-4">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-5 h-5" viewBox="0 0 24 24">
<path
d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z">
</path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
<section class="text-gray-500 bg-gray-900 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block"
src="https://dummyimage.com/420x260">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-white title-font text-lg font-medium">The Catalyzer</h2>
<p class="mt-1">$16.00</p>
</div>
</div>

<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block"
src="https://dummyimage.com/421x261">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-white title-font text-lg font-medium">Shooting Stars</h2>
<p class="mt-1">$21.15</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block"
src="https://dummyimage.com/422x262">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-white title-font text-lg font-medium">Neptune</h2>
<p class="mt-1">$12.00</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block"
src="https://dummyimage.com/423x263">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-white title-font text-lg font-medium">The 400 Blows</h2>
<p class="mt-1">$18.40</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block"
src="https://dummyimage.com/424x264">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-white title-font text-lg font-medium">The Catalyzer</h2>
<p class="mt-1">$16.00</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block"
src="https://dummyimage.com/425x265">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-white title-font text-lg font-medium">Shooting Stars</h2>
<p class="mt-1">$21.15</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block"
src="https://dummyimage.com/427x267">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-white title-font text-lg font-medium">Neptune</h2>
<p class="mt-1">$12.00</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block"
src="https://dummyimage.com/428x268">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-white title-font text-lg font-medium">The 400 Blows</h2>
<p class="mt-1">$18.40</p>
</div>
</div>
</div>
</div>
</section>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/shop">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/about">About Us</a>
</li>
</body>

<li class="nav-item">
<a class="nav-link" href="/shop/tracker">Tracker</a>
</li>

<li class="nav-item">
<a class="nav-link" href="/shop/contact">Contact Us</a>
</li>


</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<button type="button" class="btn btn-secondary mx-2" id="popcart" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">


Cart(<span id="cart">0</span>)
</button>
</div>
</nav>
{% block body %} {% endblock %}

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
{% block js %} {% endblock %}
</body>
</html>