-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
368 lines (335 loc) · 12.6 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Derby City Drip Coffee Company</title>
<link rel="stylesheet" href="src/styles.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/css/fork-awesome.min.css"
integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY="
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script
src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
</head>
<body>
<!-- Navigation Section -->
<header>
<section class="row container nav-container">
<button class="nav-toggle" aria-label="open navigation">
<span class="hamburger"></span>
</button>
<a href="#" class="container">
<img
src="images/derbycitydrip-logo.svg"
alt="derby city drip"
class="logo"
/>
</a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link">Home</a>
</li>
<li class="nav__item">
<a href="#dcd-location" class="nav__link">Location</a>
</li>
<li class="nav__item">
<a href="#menu" class="nav__link">Menu</a>
</li>
<li class="nav__item">
<a href="#contact" class="nav__link">Contact</a>
</li>
</ul>
</nav>
</section>
</header>
<!-- Navigation Section End -->
<main>
<!-- Hero Section -->
<section class="pistachio-cream">
<div class="container hero-container">
<div class="hero-txt">
<h1 class="quantico uppercase fs-205 fw-700 left duqqa-brown">
Experience the best cup in town
</h1>
<p class="mb-2em">
Single origin mazagran, half and half robust pumpkin spice aged
con panna. Sugar shop ut a single shot steamed half and half.
</p>
<a href="#menu" class="btn mb-2em">View Menu</a>
</div>
<img
src="images/coffee-mug-saucer-hero.png"
alt="coffee in a mug with saucer"
class="hero-img"
/>
</div>
</section>
<!-- Hero Section Ends -->
<!-- Finely Roasted Coffee Section -->
<section class="roastedcoffee-background">
<div class="roasted__container">
<h2 class="quantico uppercase white-smoke fs-2rem">
Our Finely Roasted Coffees
</h2>
<p class="white-smoke">
Flavour sit brewed irish qui roast americano mocha single shot
affogato. Aged, steamed roast white saucer aroma decaffeinated.
Caramelization skinny brewed, foam extra eu latte cream grounds to
go plunger pot.
</p>
</div>
</section>
<!-- Finely Roasted Coffee Section End -->
<!-- Location Map Section -->
<section class="location__container">
<div class="container location__grid">
<div id="location">
<h2
id="dcd-location"
class="quantico uppercase left fs-106 white-smoke"
>
Location
</h2>
<p class="location__line-height">1234 W. Main St.</p>
<p class="location__line-height">Louisville, KY 40213</p>
</div>
<div id="phone">
<h2 class="quantico uppercase left fs-106 white-smoke">Contact</h2>
<p class="location__line-height">P: 502-555-5555</p>
<p class="location__line-height">E: [email protected]</p>
</div>
<div id="map">
<div id="mapLouisville"></div>
<script src="src/map.js"></script>
</div>
<div id="hours">
<h2 class="quantico uppercase left fs-106 white-smoke">Hours</h2>
<p>
These are our current hours, unforeseen circumstances may cause
these to change.
</p>
<br />
<table class="table__hours uppercase txt__line-height">
<tbody>
<tr>
<td>Sun:</td>
<td>Closed</td>
</tr>
<tr>
<td>Mon:</td>
<td>6am - 10pm</td>
</tr>
<tr>
<td>Tue:</td>
<td>6am - 10pm</td>
</tr>
<tr>
<td>Wed:</td>
<td>6am - 10pm</td>
</tr>
<tr>
<td>Thu:</td>
<td>6am - 10pm</td>
</tr>
<tr>
<td>Fri:</td>
<td>6am - 12pm</td>
</tr>
<tr>
<td>Sat:</td>
<td>6am - 12pm</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Location Map Section End -->
<!-- Coffee Menu Section -->
<section class="container">
<article class="item__container">
<h2 id="menu" class="hornblende-green quantico uppercase fs-2rem">
Coffees
</h2>
<p class="container__finely-txt">
Flavour sit brewed ui roast americano mocha single shot affogato.
Aged, steamed roast white saucer aroma decaffeinated. Caramelization
skinny brewed, foam extra eu latte cream grounds go plunger pot.
</p>
</article>
<article id="coffeeItems" class="coffee-grid"></article>
</section>
<!-- Coffee Menu Section End -->
<!-- Non-Coffee Menu Section -->
<section class="container">
<article class="item__container">
<h2 class="hornblende-green quantico uppercase fs-2rem">
Non-Coffee
</h2>
<p class="container__finely-txt">
Flavour sit brewed ui roast americano mocha single shot affogato.
Aged, steamed roast white saucer aroma decaffeinated. Caramelization
skinny brewed, foam extra eu latte cream grounds go plunger pot.
</p>
</article>
<article id="nonCoffeeItems" class="noncoffee-grid"></article>
</section>
<!-- Non-Coffee Menu Section End -->
<!-- Tea Menu Section -->
<section class="container">
<article class="item__container">
<h2 class="hornblende-green quantico uppercase fs-2rem">Tea</h2>
<p class="container__finely-txt">
Flavour sit brewed ui roast americano mocha single shot affogato.
Aged, steamed roast white saucer aroma decaffeinated. Caramelization
skinny brewed, foam extra eu latte cream grounds go plunger pot.
</p>
</article>
<article id="teaItems" class="tea-grid"></article>
</section>
<!-- Tea Menu Section End -->
<section class="container">
<article class="item__container">
<h2 class="hornblende-green quantico uppercase fs-2rem">
Pastries / Snacks
</h2>
<p class="container__finely-txt">
Flavour sit brewed ui roast americano mocha single shot affogato.
Aged, steamed roast white saucer aroma decaffeinated. Caramelization
skinny brewed, foam extra eu latte cream grounds go plunger pot.
</p>
</article>
<article id="pastryItems" class="pastry-grid mb-3em"></article>
</section>
<!-- Derby City Drip Signup Section -->
<section class="signup__container">
<div class="container">
<h2 id="contact" class="quantico fw-700 white-smoke uppercase center">
Join the DCD Coffee Club!
</h2>
<p class="container__finely-txt white-smoke center">
Steamed roast white saucer aroma decaffeinated. Carmelization skinny
brewed, foam extra eu latte cream grounds go to plunger pot.
</p>
</div>
<div class="sign-up signup__mobile--width">
<form method="post" action="/formdcd" id="dcdform" class="emailform">
<div id="first-name">
<label for="name"> First Name: </label>
<input
type="text"
name="name"
id="name"
placeholder="First Name"
required
/>
</div>
<div id="email-address">
<label for="email"> Email Address: </label>
<input
type="email"
name="email"
id="email"
placeholder="Email Address"
required
/>
</div>
<button
type="submit"
class="signup__button quantico fw-700"
id="button"
>
I want free coffee!<span class="spinner"></span>
</button>
</form>
</div>
</section>
<!-- Derby City Drip Signup Section End -->
</main>
<!-- Sitemap Section -->
<footer>
<section class="sitemap__container">
<div class="container sitemap__grid">
<div class="sitemap-location">
<h4 class="quantico white uppercase fs-103">Location</h4>
<p class="sitemap__line-height white-smoke">1234 W. Main St.</p>
<p class="sitemap__line-height white-smoke">Louisville, KY 40213</p>
<br />
<p class="sitemap__line-height white-smoke">P: 502-555-5555</p>
<p class="sitemap__line-height white-smoke">
</p>
</div>
<div class="sitemap">
<h4 class="quantico white-smoke uppercase fs-103">Sitemap</h4>
<p class="sitemap__line-height white-smoke">
<a href="#" class="white-smoke">Home</a>
</p>
<p class="sitemap__line-height white">
<a href="#" class="white-smoke">Location</a>
</p>
<p class="sitemap__line-height white">
<a href="#" class="white-smoke">Menu</a>
</p>
<p class="sitemap__line-height white">
<a href="#" class="white-smoke">Contact</a>
</p>
</div>
<div class="social">
<h4 class="quantico white-smoke uppercase fs-103">Socials</h4>
<p>
Please join us for all the latest announcements via our socials
</p>
<div class="">
<a class="icon" href="#"
><i class="fa fa-facebook" aria-hidden="true"></i
></a>
<a class="icon" href="#"
><i class="fa fa-twitter" aria-hidden="true"></i
></a>
<a class="icon" href="#"
><i class="fa fa-instagram" aria-hidden="true"></i
></a>
</div>
</div>
</div>
</section>
<!-- Sitemap Section End -->
<!-- Copyright Section -->
<section class="footer__container">
<div class="container__footer">
<div class="footer__grid">
<div class="copyright-txt fs-1rem white-smoke">
<p>© Copyright 2021 Derby City Drip, LLC</p>
<p>
<a href="#" class="white-smoke">Privacy Policy</a>
</p>
</div>
</div>
</div>
</section>
</footer>
<!-- Copyright Section End -->
<script src="src/menu.js"></script>
<script src="src/navigation.js"></script>
<script src="src/formtest.js"></script>
</body>
</html>