-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (128 loc) · 5.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="ShoppingCart.js" type="module"></script>
<title>Home</title>
</head>
<body>
<header class="text-gray-700 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center justify-center">
<nav class="flex flex-wrap items-center text-base justify-center">
<a class="mr-5 border-b-2 border-blue-500 hover:text-gray-900" href="index.html">Home</a>
<a class="mr-5 hover:text-gray-900" href="store.html">Store</a>
<a class="mr-5 hover:text-gray-900" href="team.html">Team</a>
</nav>
</div>
</header>
<section class="text-gray-700 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap">
<div class="flex w-full mb-20 flex-wrap">
<h1 class="sm:text-3xl text-2xl font-medium title-font text-gray-900 lg:w-1/3 lg:mb-0 mb-4">Some Of Our Amazing Products</h1>
<p class="lg:pl-6 lg:w-2/3 mx-auto leading-relaxed text-base">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit tempore nisi dolores ipsum veritatis, rerum excepturi numquam vitae perferendis recusandae possimus deserunt quas aut perspiciatis, qui architecto fuga molestias! Dolorem veritatis quasi cum quod deserunt sit recusandae blanditiis debitis voluptatum.</p>
</div>
<div class="flex flex-wrap md:-m-2 -m-1">
<div class="flex flex-wrap w-1/2">
<div class="md:p-2 p-1 w-1/2">
<img alt="gallery" class="w-full object-cover h-full object-center block" src="https://dummyimage.com/500x300/F60/F60">
</div>
<div class="md:p-2 p-1 w-1/2">
<img alt="gallery" class="w-full object-cover h-full object-center block" src="https://dummyimage.com/500x300/FF0/FF0">
</div>
<div class="md:p-2 p-1 w-full">
<img alt="gallery" class="w-full h-full object-cover object-center block" src="https://dummyimage.com/600x360/60F/60F">
</div>
</div>
<div class="flex flex-wrap w-1/2">
<div class="md:p-2 p-1 w-full">
<img alt="gallery" class="w-full h-full object-cover object-center block" src="https://dummyimage.com/600x360/00F/00F">
</div>
<div class="md:p-2 p-1 w-1/2">
<img alt="gallery" class="w-full object-cover h-full object-center block" src="https://dummyimage.com/500x300/0F0/0F0">
</div>
<div class="md:p-2 p-1 w-1/2">
<img alt="gallery" class="w-full object-cover h-full object-center block" src="https://dummyimage.com/500x300/F00/F00">
</div>
</div>
</div>
</div>
</section>
<section>
<div data-cart="" class="mb-4 top-0 right-0 mr-4 mt-20 fixed invisible">
<div
style="max-height: calc(100vh - 6rem)"
class="bg-white text-gray-700 body-font shadow-lg border rounded-lg flex flex-col"
>
<div data-items-container="" class="overflow-y-auto px-4 pt-4">
<template id="cart_item">
<div class="mb-6" data-cart-id>
<div class="block relative h-24 rounded overflow-hidden">
<img
data-cart-img=""
alt="ecommerce"
class="object-cover object-center w-full h-full block rounded"
src="https://dummyimage.com/210x130/F00/F00"
/>
<button
data-remove-from-cart-button=""
class="absolute top-0 right-0 bg-black rounded-tr text-white w-6 h-6 text-lg flex justify-center items-center"
>
×
</button>
</div>
<div class="mt-2 flex justify-between">
<div class="flex items-center title-font">
<h2
data-cart-name=""
class="text-gray-900 text-lg font-medium"
>
Red
</h2>
<span
data-cart-qty=""
class="text-gray-600 text-sm font-bold ml-1"
>x2</span
>
</div>
<div data-cart-price="">$32.00</div>
</div>
</div>
</template>
</div>
<div class="flex justify-between items-end border-t p-4">
<span class="font-bold text-lg uppercase">Total</span>
<span data-total="" class="font-bold">$44.00</span>
</div>
</div>
</div>
</div>
<button
data-cart-button=""
class="fixed top-0 right-0 mr-4 mt-4 w-12 bg-blue-500 p-2 rounded-full text-white hover:bg-blue-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewbox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
></path>
</svg>
<div
data-qty=""
class="bg-red-500 rounded-full text-xs absolute w-6 h-6 flex justify-center items-center right-0 bottom-0 transform translate-x-2 translate-y-2"
>
2
</div>
</button>
</section>
</body>
</html>