-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·383 lines (341 loc) · 23.9 KB
/
Copy pathindex.html
File metadata and controls
executable file
·383 lines (341 loc) · 23.9 KB
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
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- SEO Meta Tags -->
<meta name="description" content="Chaice cream is the world's masala chai flavored ice cream. Taste the spirit of India in a scoop of ice cream for the first time ever!">
<meta name="author" content="Samraaj Singh Bath">
<!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
<meta property="og:site_name" content="" /> <!-- website name -->
<meta property="og:site" content="" /> <!-- website link -->
<meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
<meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
<meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
<meta property="og:url" content="" /> <!-- where do you want your post to link to -->
<meta property="og:type" content="article" />
<!-- Website Title -->
<title>Chaice Cream</title>
<!-- Styles -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap&subset=latin-ext" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fontawesome-all.css" rel="stylesheet">
<link href="css/swiper.css" rel="stylesheet">
<link href="css/magnific-popup.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/custom-styles.css" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="images/IG Chaice Cream .png">
</head>
<body data-spy="scroll" data-target=".fixed-top">
<!-- Preloader -->
<div class="spinner-wrapper">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<!-- end of preloader -->
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">
<div class="container">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Tivo</a> -->
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html"><img src="images/chaice cream logo.svg" alt="alternative"></a>
<!-- Mobile Menu Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-awesome fas fa-bars"></span>
<span class="navbar-toggler-awesome fas fa-times"></span>
</button>
<!-- end of mobile menu toggle button -->
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link page-scroll" href="#header">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#details">ABOUT</a>
</li>
</ul>
<span class="nav-item">
<a class="btn-outline-sm" href="" data-toggle="modal" data-target="#modalLoginForm">Order Now!</a>
</span>
</div>
</div> <!-- end of container -->
</nav> <!-- end of navbar -->
<!-- end of navigation -->
<!-- Header -->
<header id="header" class="header">
<div class="header-content">
<div class="container">
<div class="row">
<div class="col-lg-6 col-xl-5">
<div class="text-container">
<h1>The flavors of India infused into Ice Cream</h1>
<p class="p-large">Artisan <i>Cha</i> (also known as <i>Chai</i>) flavored ice cream. Delivered with <i class="fas fa-heart"></i> in Seattle.</p>
<a class="btn-solid-lg submit-btn page-scroll" href="" data-toggle="modal" data-target="#modalLoginForm">I want!</a>
</div> <!-- end of text-container -->
</div> <!-- end of col -->
<div class="col-lg-6 col-xl-7">
<div class="image-container">
<div class="img-wrapper">
<img class="img-fluid" src="images/Ice Cream transparent crop.png" alt="alternative">
</div> <!-- end of img-wrapper -->
</div> <!-- end of image-container -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of header-content -->
</header> <!-- end of header -->
<div style="background: #F97EB4;">
<svg class="header-frame" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 310" style="transform: scale3d(-1, -1, -1);"><defs><style>.cls-1{fill:white;}</style></defs><title>header-frame</title><path class="cls-1" d="M0,283.054c22.75,12.98,53.1,15.2,70.635,14.808,92.115-2.077,238.3-79.9,354.895-79.938,59.97-.019,106.17,18.059,141.58,34,47.778,21.511,47.778,21.511,90,38.938,28.418,11.731,85.344,26.169,152.992,17.971,68.127-8.255,115.933-34.963,166.492-67.393,37.467-24.032,148.6-112.008,171.753-127.963,27.951-19.26,87.771-81.155,180.71-89.341,72.016-6.343,105.479,12.388,157.434,35.467,69.73,30.976,168.93,92.28,256.514,89.405,100.992-3.315,140.276-41.7,177-64.9V0.24H0V283.054Z"/></svg>
</div>
<!-- end of header -->
<!-- Details -->
<div id="details" class="basic-1">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="text-container">
<h2>Your New Favorite Way to Enjoy a Cup of Cha</h2>
<p>A refreshing bowl of Chaice Cream is the perfect accompaniment to a summer day. The traditional flavors of Masala Cha pair beautifully with the rich, creamy decadence of ice cream, transforming the classic into a sweet treat. Order your pint for pick up or delivery today! Available in two flavors: </p>
<ul class="list-unstyled li-space-lg">
<li class="media">
<i class="fas fa-square"></i>
<div class="media-body"><strong>Original Masala Chaice cream - $4.99</strong></div>
</li>
<li class="media">
<i class="fas fa-square"></i>
<div class="media-body"><strong>Biscoff Crumble - $4.99 (coming soon!)</strong></div>
</li>
</ul>
<a class="btn-solid-reg page-scroll" href="" data-toggle="modal" data-target="#modalLoginForm">I NEED IT!</a>
</div> <!-- end of text-container -->
</div> <!-- end of col -->
<div class="col-lg-6">
<div class="image-container">
<img class="img-fluid" src="images/cardamom.jpeg" alt="alternative">
</div> <!-- end of image-container -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of basic-1 -->
<!-- end of details -->
<!-- Testimonials -->
<div class="slider-2">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Text Slider -->
<div class="slider-container">
<div class="swiper-container text-slider">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="text-wrapper">
<div class="testimonial-text">The ice cream had a perfect balance of authentic Indian chai flavors and sweetness. Would 100% recommend to any chai or ice cream lover!</div>
<div class="testimonial-author">@Keshav J</div>
</div> <!-- end of text-wrapper -->
</div> <!-- end of swiper-slide -->
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="text-wrapper">
<div class="testimonial-text">The Chaicecream was exactly what I didn’t know I needed. It’s the perfect amount of sweet but also literally could replace my daily cup of chai. I would highly recommend for someone that loves Indian sweets and wants to try something new!</div>
<div class="testimonial-author">@Tasha M</div>
</div> <!-- end of text-wrapper -->
</div> <!-- end of swiper-slide -->
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="text-wrapper">
<div class="testimonial-text">It's light and refreshing, but not too creamy or sweet. Like masala chai, but perfect for hot summer days.</div>
<div class="testimonial-author">@Ashim J</div>
</div> <!-- end of text-wrapper -->
</div> <!-- end of swiper-slide -->
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="text-wrapper">
<div class="testimonial-text">This Chaice cream was delicious!! It tastes rich, creamy, and has the best lingering taste of cardamom, which I loved! I’m planning on having this a lot more this summer, can’t wait!</div>
<div class="testimonial-author">@Karen G</div>
</div> <!-- end of text-wrapper -->
</div> <!-- end of swiper-slide -->
<!-- end of slide -->
</div> <!-- end of swiper-wrapper -->
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- end of add arrows -->
</div> <!-- end of swiper-container -->
</div> <!-- end of slider-container -->
<!-- end of text slider -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of slider-2 -->
<!-- end of testimonials -->
<!-- Footer -->
<svg class="footer-frame" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 79"><defs><style>.cls-2{fill:#F97EB4;}</style></defs><title>footer-frame</title><path class="cls-2" d="M0,72.427C143,12.138,255.5,4.577,328.644,7.943c147.721,6.8,183.881,60.242,320.83,53.737,143-6.793,167.826-68.128,293-60.9,109.095,6.3,115.68,54.364,225.251,57.319,113.58,3.064,138.8-47.711,251.189-41.8,104.012,5.474,109.713,50.4,197.369,46.572,89.549-3.91,124.375-52.563,227.622-50.155A338.646,338.646,0,0,1,1920,23.467V79.75H0V72.427Z" transform="translate(0 -0.188)"/></svg>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="footer-col middle">
<h4>How to order</h4>
<ul class="list-unstyled li-space-lg p-small">
<li class="media">
<i class="fas fa-square"></i>
<div class="media-body">Fill out our order request form with your email and location.</div>
</li>
<li class="media">
<i class="fas fa-square"></i>
<div class="media-body">Our team will follow up with you for your order details and delivery information.</div>
</li>
</ul>
</div>
</div> <!-- end of col -->
<div class="col-md-4">
<div class="footer-col last">
<h4>Find us online!</h4>
<ul class="list-unstyled li-space-lg p-small">
<li class="media">
<i class="fas fa-instagram"></i>
<div class="media-body"><a class="white" href="https://www.instagram.com/chaice.cream/">@chaice.cream</a></div>
</li>
<li class="media">
<i class="fas fa-envelope"></i>
<div class="media-body"><a class="white" href="mailto:thechaicecream@gmail.com">thechaicecream@gmail.com</a> </div>
</li>
<li class="media">
<i class="fas fa-globe"></i>
<div class="media-body"><a class="white" href="www.thechaicecream.com">thechaicecream.com</a> </div>
</li>
</ul>
</div>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of footer -->
<!-- end of footer -->
<!-- modal -->
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<form id="orderForm" name="orderForm">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Order your Chaice Cream</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="form-body">
<div class="sold-out-body hidden">
<p>We are officially SOLD OUT!</p>
<p>Our first release of Chaice Cream sold out in just two days! Thank you so much for your support <i class="fas fa-heart"></i></p>
<p>Don't worry - we will be dropping limited batches of Chaice Cream every few weeks! Orders will be processed on a first-come-first-serve basis.</p>
<p>Join our waitlist for exclusive access to a scoop during our next drop!</p>
</div>
<!-- <div class="md-form mb-5">
<i class="fas fa-gift prefix grey-text"></i> <label data-error="wrong" data-success="right" for="carepackage">Do you want to order a Rakhri care package?</label>
<input class="form-control validate" type="checkbox" name="carepackage" value="yes" id="carepackage" onclick="rakhriClick();">
</div> -->
<!-- <div class="md-form mb-4">
<i class="fas fa-gift prefix grey-text"></i> <label data-error="wrong" data-success="right" for="carepackage">Do you want to order a Rakhri care package?</label>
<div class="form-check">
<input class="form-check-input carepackage-option" type="radio" name="carepackage" id="carepackage-yes" value="yes">
<label class="form-check-label" for="yes">
Yes, I'd love to order a care package!
</label>
</div>
<div class="form-check">
<input class="form-check-input carepackage-option" type="radio" name="carepackage" id="carepackage-no" value="no" checked>
<label class="form-check-label" for="no">
No, I want a regular order
</label>
</div>
</div> -->
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i> <label data-error="wrong" data-success="right" for="name">Your name</label>
<input type="text" id="name" name="name" class="form-control validate" required>
</div>
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i> <label data-error="wrong" data-success="right" for="email">Email</label>
<input type="email" id="email" name="email" class="form-control validate" required>
</div>
<div class="more-info">
<div class="md-form mb-4">
<i class="fas fa-hashtag prefix grey-text"></i> <label data-error="wrong" data-success="right" for="pints">How many pints of Chaice cream would you like?</label>
<input type="number" id="pints" name="pints" class="form-control validate" value="1" min="1" required>
</div>
<div class="md-form mb-4">
<i class="fas fa-car prefix grey-text"></i> <label data-error="wrong" data-success="right" for="defaultForm-pickup">Pick up or Delivery?</label>
<div class="form-check">
<input class="form-check-input delivery-option" type="radio" name="fullfillment" id="pickup" value="pickup" checked>
<label class="form-check-label pickuplabel" for="pickup">
Pick up in Redmond, Washington ($4.99 total)
</label>
</div>
<div class="form-check">
<input class="form-check-input delivery-option" type="radio" name="fullfillment" id="delivery" value="delivery">
<label class="form-check-label deliverylabel" for="delivery">
Fresh home delivery ($9.99 total)
</label>
</div>
</div>
</div>
<div class="location-select hidden">
<div class="md-form mb-4">
<i class="fas fa-city prefix grey-text"></i> <label data-error="wrong" data-success="right" for="address">Address? Stay within 30 miles of Redmond</label>
<input type="text" id="address" name="address" class="form-control validate" placeholder="Address line 1">
<input type="text" id="address2" name="address2" class="form-control validate" placeholder="Address line 2">
<input type="text" id="city" name="city" class="form-control validate" placeholder="City">
</div>
</div><!-- End location select -->
<div class="rakhri-note hidden">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i> <label data-error="wrong" data-success="right" for="recipient">Who is this care package for?</label>
<input type="text" id="recipient" name="recipient" class="form-control validate">
</div>
<div class="md-form mb-4">
<i class="fas fa-pen prefix grey-text"></i> <label data-error="wrong" data-success="right" for="rakhrinote">Personal Rakhri Note</label>
<textarea class="form-control" id="rakhrinote" maxlength="300" name="rakhrinote" rows="3"></textarea>
</div>
</div>
</div><!-- End form body -->
<div class="thank-you-body hidden">
<!-- <p>Thank you for joining the waitlist <i class="fas fa-heart"></i></p>
<p>To hear about new flavors, new locations, and other exciting updates, follow us on Instagram: <a href="https://www.instagram.com/TheChaiceCream/">@TheChaiceCream</a></p>
<p>If you have any questions, please contact <a href="mailto:thechaicecream@gmail.com">thechaicecream@gmail.com</a> or (206) 659-7040</p> -->
<p>Thank you for ordering from us <i class="fas fa-heart"></i></p>
<p>Your order is now pending - we will prepare your fresh pint once you pay through venmo or confirm an alternative payment method.</p>
<p>We have sent you an email with your order details, total, and payment info. If you didn't receive an email, please reach out to <a href="mailto:thechaicecream@gmail.com">thechaicecream@gmail.com</a> or (206) 659-7040</p>
<p>Confirm your order now by sending <a id="venmo-link" href="https://venmo.com/Samraaj-Bath" target="_blank">$5.99 to @Samraaj-Bath on venmo</a>. If you'd like to pay another way, respond to our email!</p>
<p>Thanks again for ordering and supporting our small business :). Please reach out if you have any other questions!</p>
</div>
</div><!-- End modal body-->
<div class="modal-footer d-flex justify-content-center">
<button type="submit" id="submit-form" class="btn btn-primary checkoutbtn">$4.99 total - Check out</button>
</div>
</div> <!-- End of modal content -->
</form>
</div>
</div>
<!-- end of modal -->
<!-- Scripts -->
<script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="js/popper.min.js"></script> <!-- Popper tooltip library for Bootstrap -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
<script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
<script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
<script src="js/validator.min.js"></script> <!-- Validator.js - Bootstrap plugin that validates forms -->
<script src="js/jquery.serialize-object.min.js"></script> <!-- JQuery plugin that serializes objects -->
<script src="js/scripts.js"></script> <!-- Custom scripts -->
<script src="js/formcontrol.js"></script> <!-- Form control script -->
</body>
</html>