-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproducts.html
244 lines (226 loc) · 11.6 KB
/
products.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mortar & Pestle | Your Dedicated Beauty Care Partner</title>
<script src="https://kit.fontawesome.com/539a3afe41.js" crossorigin="anonymous"></script>
<link href="/src/css/build-tailwind.css" type="text/css" rel="stylesheet">
</head>
<!-- Max width: max-w-6xl -->
<body>
<main id="main">
<!-- NAVBAR -->
<nav class="sticky top-0 z-10 flex items-center bg-gray-100 bg-opacity-90 h-14">
<div class="container flex items-center justify-between max-w-6xl px-6 py-0 m-auto">
<!-- MOBILE -->
<span class="justify-end text-2xl sm:hidden">
<i class="fas fa-bars"></i>
</span>
<!-- END MOBILE -->
<div class="flex items-center">
<span class="m-2 text-2xl text-yellow-500 sm:text-3xl">
<i class="fas fa-mortar-pestle"></i>
</span>
<p class="text-3xl font-semibold w-max sm:text-4xl">Mortar & Pestle</p>
</div>
<div id="bag-btn" class="relative cursor-pointer">
<span class="text-2xl">
<i class="fas fa-shopping-bag"></i>
</span>
<div id="bag-total" class="absolute bg-yellow-500 -top-2 -right-3 py-0 px-1.5 rounded-md text-white">0</div>
</div>
</div>
</nav>
<!-- BANNER/HERO -->
<header class="items-center justify-center hidden bg-center bg-no-repeat bg-cover sm:flex h-96 sm:h-screen"
style="background-image: url(/src/assets/images/products/products-banner.jpg)">
<div class="inline-block p-8 text-center bg-gray-200 bg-opacity-70">
<h1 class="mb-8 text-3xl font-bold tracking-widest uppercase sm:mb-12 sm:text-5xl">Latest Collection</h1>
<a href="#shop"><button
class="px-4 py-4 text-base tracking-widest uppercase bg-yellow-600 border-2 border-yellow-600 outline-none cursor-pointer sm:px-12 hover:bg-transparent active:bg-transparent">shop
now</button></a>
</div>
</header>
<!-- PRODUCTS -->
<section class="max-w-6xl px-0 pt-8 m-auto sm:pt-16">
<div class="text-4xl tracking-widest text-center uppercase sm:mb-4">
<h2 id="shop" class="mb-8 text-4xl tracking-widest text-center uppercase sm:mb-20">new arrivals</h2>
<div id="products"
class="grid w-screen max-w-6xl m-0 xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 auto-rows-auto gap-x-6 gap-y-8">
<!-- THIS IS WHERE PRODUCTS CONTENT GOES FROM JS FILE -->
</div>
</div>
</section>
<!-- BASKET/BAG/SHOPPING CART -->
<div id="basket-container"
class="container fixed top-0 right-0 z-30 invisible h-full mt-0 mr-0 transition duration-300 ease-in md:w-4/12">
<div id="basket"
class="container fixed top-0 right-0 z-40 h-full max-w-md p-6 mt-0 mr-0 overflow-scroll tracking-widest text-center uppercase transition duration-300 ease-in transform translate-x-full bg-gray-100 lg:w-4/12 md:w-4/12">
<span id="close-bag" class="fixed top-0 left-0 mt-2 ml-6 text-2xl cursor-pointer">
<i class="fas fa-times"></i>
</span>
<span class="text-3xl ">
<i class="fas fa-shopping-basket"></i>
</span>
<h2 class="font-bold tracking-widest">My Basket</h2>
<div class="bag-content">
<div class="basket-item">
<!-- THIS IS WHERE SHOPPING BAG CONTENT GOES FROM JS FILE -->
</div>
<hr>
</div>
<div class="mt-8 tracking-widest text-center">
<hr>
<h3 class="my-4 uppercase">estimated total: $
<span id="total-costs" class="text-bold">14.00</span>
</h3>
<!-- <div id="paypal-btn">
ADD PAYPAL BUTTONS HERE, IF NEEDED BUT REMOVE CHECKOUT BTN BELOW
</div> -->
<button id="checkout-bag" route="/checkout"
class="px-3 py-2 font-bold tracking-widest uppercase transition duration-300 ease-in bg-gray-100 border-2 border-yellow-500 outline-none cursor-pointer hover:bg-yellow-500 hover:text-white bg-opacity-80">checkout
basket</button>
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="flex flex-col items-center py-8 bg-gray-100 z-60 lg:px-4 bg-opacity-70">
<div class="container flex-col hidden max-w-6xl text-yellow-400 lg:flex lg:items-center lg:flex-row lg:m-auto">
<a href="#" class="flex mb-4 ml-8 lg:w-2/12 md:flex-row lg:ml-4">
<i class="pr-2 text-2xl fas fa-store-alt lg:text-xl"></i>
<span class="flex flex-col text-xs">
<span class="text-lg font-bold text-black lg:text-xs">Find a Store</span>
<span class="text-black lg:text-xs">Shop at This Mall</span>
</span>
</a>
<a href="#" class="flex flex-row mb-4 lg:w-2/12">
<i class="pr-2 text-3xl sm:text-2xl far fa-comment-dots"></i>
<span class="flex flex-col text-xs">
<span class="text-lg font-bold text-black sm:text-base lg:text-xs">Customer Live Chat</span>
<span class="text-black">Available</span>
</span>
</a>
<a href="#" class="flex flex-row pr-3 mb-4 sm:w-2/12 sm:mb-0 lg:mb-4">
<i class="pr-3 text-3xl lg:pr-2 lg:text-2xl fas fa-phone-square-alt"></i>
<span class="flex flex-col text-xs">
<span class="text-lg font-bold text-black sm:text-base lg:text-xs">1.877.123.4567</span>
<span class="text-black">TTY: 1.888.888.1234</span>
</span>
</a>
<a href="#" class="flex flex-row mb-4 sm:w-2/12 lg:mb-4">
<i class="pr-2 text-3xl lg:text-2xl fas fa-mobile-alt"></i>
<span class="flex flex-col text-xs">
<span class="font-bold text-black">Download the App</span>
<span class="text-black">Text “APP” to 12345</span>
</span>
</a>
</div>
<div class="container hidden max-w-6xl m-auto lg:block">
<hr class="my-8">
</div>
<div class="flex flex-col justify-between w-full max-w-6xl px-8 m-auto lg:flex-row lg:px-0">
<div class="flex justify-between py-4 sm:px-3 lg:w-3/12 lg:py-0 lg:block">
<p class="text-lg font-bold uppercase lg:text-base lg:mb-2">About Us</p>
<span class="lg:hidden">
<i class="text-lg text-yellow-500 cursor-pointer far fa-plus-square"></i>
</span>
<div class="hidden lg:contents">
<ul class="text-sm list-none">
<li class="cursor-pointer hover:underline">About Mortar & Pestle</li>
<li class="cursor-pointer hover:underline">Careers</li>
<li class="cursor-pointer hover:underline">Affiliates</li>
<li class="cursor-pointer hover:underline">Diversity & Inclusion</li>
<li class="cursor-pointer hover:underline">Events</li>
<li class="cursor-pointer hover:underline">Supply Transparency</li>
</ul>
</div>
</div>
<div class="flex justify-between py-4 sm:px-3 lg:w-3/12 lg:py-0 lg:block">
<p class="text-lg font-bold uppercase lg:text-base lg:mb-2">Guest Services</p>
<span class="lg:hidden">
<i class="text-lg text-yellow-500 cursor-pointer far fa-plus-square"></i>
</span>
<div class="hidden lg:contents">
<ul class="text-sm list-none">
<li class="cursor-pointer hover:underline">Guest Services Center</li>
<li class="cursor-pointer hover:underline">Order Status</li>
<li class="cursor-pointer hover:underline">Shipping Policy & Rate</li>
<li class="cursor-pointer hover:underline">Returns</li>
<li class="cursor-pointer hover:underline">Online Ordering</li>
<li class="cursor-pointer hover:underline">Contact Us</li>
<li class="cursor-pointer hover:underline">Billing</li>
<li class="cursor-pointer hover:underline">In Store Pick Up</li>
<li class="cursor-pointer hover:underline">Gift Cards</li>
<li class="cursor-pointer hover:underline">Privacy Rights</li>
<li class="cursor-pointer hover:underline">Accessibility</li>
</ul>
</div>
</div>
<div class="flex justify-between py-4 sm:px-3 lg:w-3/12 lg:py-0 lg:block">
<p class="text-lg font-bold uppercase lg:text-base">My Rewards</p>
<span>
<i class="text-lg text-yellow-500 cursor-pointer far fa-plus-square lg:hidden"></i>
</span>
<div class="hidden lg:contents">
<ul class="text-sm list-none">
<li class="cursor-pointer hover:underline">My Rewards Program</li>
<li class="cursor-pointer hover:underline">Purchase History</li>
<li class="cursor-pointer hover:underline">Account Settings</li>
<li class="cursor-pointer hover:underline">Beauty Offers</li>
<li class="cursor-pointer hover:underline">Bonuses</li>
<li class="cursor-pointer hover:underline">My Favorites</li>
<li class="cursor-pointer hover:underline">Book a Reservation</li>
</ul>
</div>
</div>
<div class="flex justify-between py-4 sm:px-3 lg:w-3/12 lg:py-0 lg:block">
<p class="text-lg font-bold uppercase lg:text-base">Our Formulas</p>
<span>
<i class="text-lg text-yellow-500 cursor-pointer far fa-plus-square lg:hidden"></i>
</span>
<div class="hidden lg:contents">
<ul class="text-sm list-none">
<li class="cursor-pointer hover:underline">No Parabens</li>
<li class="cursor-pointer hover:underline">No Phthalates</li>
<li class="cursor-pointer hover:underline">No Triclosan</li>
<li class="cursor-pointer hover:underline">No Sulfate</li>
</ul>
</div>
</div>
<div class="container max-w-6xl m-auto lg:hidden">
<hr class="my-4 sm:my-8">
</div>
<div class="sm:px-3">
<h1 class="my-4 text-4xl font-bold text-yellow-500 uppercase lg:text-5xl lg:mb-28">Bringing back the
basics
</h1>
<div>
<label for="email" class="mb-1 text-sm uppercase m-0.5 block">Sign up for our emails</label>
<div class="flex items-start flex-1">
<input type="text" name="email" required placeholder="Enter your email address"
class="text-sm bg-transparent border-2 border-yellow-500 rounded-tl rounded-bl ml-0.5 p-4 container max-w-md">
<input id="submit" type="submit" value="Submit"
class="text-sm bg-yellow-500 border-2 border-yellow-500 rounded-tr rounded-br cursor-pointer hover:text-white outline-none mr-0.5 p-4 max-w-xs">
</div>
</div>
</div>
</div>
<div class="container max-w-6xl m-auto">
<hr class="my-8">
</div>
<div class="container max-w-6xl px-8 m-auto">
<p class="text-xs sm:text-sm">© 2021 Mortar & Pestle, Inc. All rights reserved.</p>
</div>
</div>
</footer>
</main>
<script src="https://cdn.jsdelivr.net/npm/contentful@5.0.1/dist/contentful.browser.min.js"></script>
<script src="/src/pages/products/index.js">
const contentful = ('require');
require('dotenv').config();
</script>
<script src="route.js"></script>
</body>
</html>