-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
533 lines (513 loc) · 22.8 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
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bakery</title>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,600|Rufina' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/main.css">
<body>
<header class='mainHeader'>
<header class="hero">
<div class="wrapper">
<div class="headerTop">
<div class="headerLogo">
<img src="images/logo.png" alt="">
</div>
<div class="headerLogoText">
<img src="images/bakerycoffee.png" alt="">
</div>
<ul class="logoText">
<li>
<h4>Pastry</h4>
</li>
<li>
<h4>Cake</h4>
</li>
<li>
<h4>Coffee</h4>
</li>
</ul>
<div class="headerSeal">
<img src="images/circle.png" alt="" class="seal">
<div class="sealText">
<address>
<p>Lorem Street 9.</p>
<p>Berlin</p>
</address>
<div class="hours">
<ul>
<li>
<p>Weekdays 07:00-19:30</p>
</li>
<li>
<p>Weekends 09:00-21:30</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="headerBottom" id="products">
<div class="wrapper">
<ul>
<li>
<div class="headerBottomImg"><img src="images/dessert.svg" alt=""></div>
<h3>Dessert</h3>
<p>Delicious desserts: cupcackes, cakses, scones, and muffins.</p>
</li>
<li>
<div class="headerBottomImg"><img src="images/pastry.svg" alt=""></div>
<h3>Pastry</h3>
<p>Assorted selection of exquisite freshly baked pastries.</p>
</li>
<li>
<div class="headerBottomImg">
<img src="images/coffee.svg" alt=""></div>
<h3>Coffee</h3>
<p>We have the best selection of freshly ground coffee.</p>
</li>
</ul>
</div>
</header>
</header>
<main>
<section class="menu" id="menu">
<div class="wrapper">
<header class="menu">
<img src="images/menu.png" alt="">
<h2 class="menu">Menu</h2>
</header>
<main class="menu">
<div class="menuBorder">
<div class="menuList">
<h3>Desserts</h3>
<ul class="desserts">
<li>
<header class="menuItem">
<h4>Cupcakes</h4>
<h4>2.99$</h4>
</header>
<div class="menuDescription">
<p>Vanilla, Cocoa, German Chocolate, Lemon, Vegan, Pistashio, Gluten-Free
</div>
</li>
<li>
<header class="menuItem">
<h4>Cakes</h4>
<h4>3.99$</h4>
</header>
<div class="menuDescription">
<p>Vanilla, Cocoa, German Chocolate, Lemon, Flourless, Strawberry, Banana</p>
</div>
</li>
<li>
<header class="menuItem">
<h4>Scones</h4>
<h4>1.99$</h4>
</header>
<div class="menuDescription">
<p>Almond Blueberry Cranberry</p>
</div>
</li>
<li>
<header class="menuItem">
<h4>Muffins</h4>
<h4>2.99$</h4>
</header>
<div class="menuDescription">
<p>Blueberry, Carrot, Pumpkin, Lemon & Poppy, Vegan, Flourless, Gluten-Free</p>
</div>
</li>
<li>
<header class="menuItem">
<h4>Buns</h4>
<h4>1.99$</h4>
</header>
<div class="menuDescription">
<p>Cinnamon, CHocolate, Vegan, Gluten-Free</p>
</div>
</li>
</ul>
</div>
</div>
<div class="menuBorder">
<div class="menuList">
<h3>Pastry</h3>
<ul class="pastry">
<li>
<header class="menuItem">
<h4>Waffle/GA</h4>
<h4>2.99$</h4>
</header>
<div class="menuDescription">
<p>Stroopwaffle, Berry, Maple Syrup</p>
</div>
</li>
<li>
<header class="menuItem">
<h4>Macarons</h4>
<h4>3.99$</h4>
</header>
<div class="menuDescription">
<p>Coconut, Vanilla, Blueberry</p>
</div>
</li>
<li>
<header class="menuItem">
<h4>Croissants</h4>
<h4>1.99$</h4>
</header>
<div class="menuDescription">
<p>Butter, Vanilla, Chocolate, Almonds</p>
</div>
</li>
</ul>
<h3 class="coffee">Coffee</h3>
<ul class="coffee">
<li>
<header class="menuItem">
<h4>Espresso</h4>
<h4>2.99$</h4>
</header>
</li>
<li>
<header class="menuItem">
<h4>Latte</h4>
<h4>3.99$</h4>
</header>
</li>
<li>
<header class="menuItem">
<h4>Cappuccino</h4>
<h4>1.99$</h4>
</header>
</li>
</ul>
</div>
</div>
</main>
</div>
</section>
<section class="about" id="about">
<div class="wrapper">
<header class="bodyHeader">
<h2>About</h2>
</header>
<main class="about">
<p>Baker and coffee is a family owned bakery and coffee shop. We only the best organic ingredients for our products, accompanied by handpicked coffees.</p>
<p>Baker and coffee is a family owned bakery and coffee shop. We only the best organic ingredients for our products, accompanied by handpicked coffees.</p>
<img src="images/signature.png" class="signature" alt="signature">
</main>
</div>
</section>
<section class="imageSorting">
<section class="gallery clearfix">
<div class="wrapper">
<header class="bodyHeader">
<h2>Gallery</h2>
</header>
<main class="gallery">
<ul class="galleryMenu clearfix" id="controls">
<li><a class="filter" data-filter="all">
<h5>All Albums</h5></a></li>
<li><a class="filter" data-filter=".gBakery">
<h5>The Bakery</h5>
</a></li>
<li> <a class="filter" data-filter=".gPastry">
<h5>Pastry</h5></a>
</li>
<li> <a class="filter" data-filter=".gDesserts">
<h5>Desserts</h5> </a>
</li>
<li> <a class="filter" data-filter=".gCoffee">
<h5>Coffee</h5> </a>
</li>
</ul>
<ul class="galleryContainer" id="container">
<li><img src="images/placeholder1.jpg" alt="" class="mix gBakery"></li>
<li><img src="images/placeholder2.jpg" alt="" class="mix gPastry"></li>
<li><img src="images/placeholder3.jpg" alt="" class="mix gDesserts"></li>
<li><img src="images/placeholder3.jpg" alt="" class="mix gCoffee"></li>
<li><img src="images/placeholder1.jpg" alt="" class="mix gPastry"></li>
<li><img src="images/placeholder2.jpg" alt="" class="mix gCoffee"></li>
<li><img src="images/placeholder1.jpg" alt="" class="mix gPastry"></li>
<li><img src="images/placeholder2.jpg" alt="" class="mix gBakery"></li>
<li><img src="images/placeholder3.jpg" alt="" class="mix gDesserts"></li>
</ul>
</main>
</div>
</section>
<section class="blog">
<div class="wrapper">
<header class="bodyHeader">
<h2>Journal</h2>
</header>
<main class="blog">
<ul class="blogPosts">
<li class="photoBlog">
<img src="images/placeholder2.jpg" alt="baked goods">
<div class="overlayJournal">
<div>
<p class="date">9 December 2015</p>
<h5>This is a photo blog post </h5>
</div>
</div>
</li>
<li class="textBlog">
<p class="date">9 December 2015</p>
<h5>This is a text blog post</h5>
<p>We only use the best organic ingredients for our products, and freshly brewed handpicked coffees</p>
</li>
<li class="photoBlog">
<img src="images/placeholder2.jpg" alt="baked goods">
<div class="overlayJournal">
<div>
<p class="date">9 December 2015</p>
<h5>This is a photo blog post </h5>
</div>
</div>
</li>
<li class="textBlog">
<p class="date">9 December 2015</p>
<h5>This is a text blog post</h5>
<p>We only use the best organic ingredients for our products, and freshly brewed handpicked coffees</p>
</li>
<li class="photoBlog">
<img src="images/placeholder1.jpg" alt="baked goods">
<div class="overlayJournal">
<div>
<p class="date">9 December 2015</p>
<h5>This is a photo blog post </h5>
</div>
</div>
</li>
<li class="textBlog">
<p class="date">9 December 2015</p>
<h5>This is a text blog post</h5>
<p>We only use the best organic ingredients for our products, and freshly brewed handpicked coffees</p>
</li>
<li class="photoBlog">
<img src="images/placeholder3.jpg" alt="baked goods">
<div class="overlayJournal">
<div>
<p class="date">9 December 2015</p>
<h5>This is a photo blog post </h5>
</div>
</div>
</li>
<li class="textBlog">
<p class="date">9 December 2015</p>
<h5>This is a text blog post</h5>
<p>We only use the best organic ingredients for our products, and freshly brewed handpicked coffees</p>
</li>
<li class="photoBlog">
<img src="images/placeholder1.jpg" alt="baked goods">
<div class="overlayJournal">
<div>
<p class="date">9 December 2015</p>
<h5>This is a photo blog post </h5>
</div>
</div>
</li>
</ul>
<a href="#"><p class="button">View Journal</p></a>
</main>
</div>
</section>
</section>
<section class="forms">
<section class="reservations" id="reservations">
<div class="wrapper">
<header class="resosHeader">
<h2>Reservations</h2>
</header>
<main class="resos">
<div class="resoInfo">
<div class="resoInfoText">
<p>Easily book a table by using the online form. You will receive an email confirmation.</p>
<p>If you prefer a phone confirmation, please mention that in the Message field. Thank you.</p>
</div>
<div class="resoButton">
<a href="#" >
<div class="phoneIcon">
<svg version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M31.8,61.2c11.9,14.4,40.9,28.2,47.9,25.1s8.5-9.8,8.2-12.9c-0.3-3.1-16.2-12.6-20.2-14.4s-8.6,4-10.8,6.5 c-2.3,2.4-11.1-4.9-14.9-8.6c0,0-10-11.2-7.7-13.6s8-7.2,6-11.1S28.2,12.7,25,12.5c-3.1-0.2-9.7,1.6-12.5,8.7s10.6,34.2,25.5,45.5"/><!-- phone - Created by Simon Mettler from the Noun Project -->
</div>
<div class="callUs">
<h4>Phone Reservations</h4>
<h4 class="number">0999-999.999</h4>
</div>
</a>
</div>
</div>
<form class="resoForm">
<div class="date">
<input type="date" name="date">
<label for="date" class="date">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 60 75" enable-background="new 0 0 60 60" xml:space="preserve"><rect x="-420.0126648" y="-744.6329346" display="none" fill="#000000" width="832.911377" height="826.0680542"/><path d="M57.4482422,8.5341797H42.1152344V2.3769531c0-0.2763672-0.2236328-0.5-0.5-0.5s-0.5,0.2236328-0.5,0.5v6.1572266 H18.8847656V2.3769531c0-0.2763672-0.2236328-0.5-0.5-0.5s-0.5,0.2236328-0.5,0.5v6.1572266H2.5517578 c-0.8271484,0-1.5,0.6728516-1.5,1.5v46.5888672c0,0.8271484,0.6728516,1.5,1.5,1.5h54.8964844c0.8271484,0,1.5-0.6728516,1.5-1.5 V10.0341797C58.9482422,9.2070312,58.2753906,8.5341797,57.4482422,8.5341797z M17.3076172,24.7871094v7.5400391h-7.1279297 v-7.5400391H17.3076172z M25.4355469,24.7871094v7.5400391h-7.1279297v-7.5400391H25.4355469z M33.6640625,24.7871094v7.5400391 h-7.2285156v-7.5400391H33.6640625z M2.0517578,33.3271484h7.1279297v7.1279297H2.0517578V33.3271484z M10.1796875,33.3271484 h7.1279297v7.1279297h-7.1279297V33.3271484z M18.3076172,33.3271484h7.1279297v7.1279297h-7.1279297V33.3271484z M26.4355469,33.3271484h7.2285156v7.1279297h-7.2285156V33.3271484z M25.4355469,41.4550781v7.1279297h-7.1279297v-7.1279297 H25.4355469z M26.4355469,41.4550781h7.2285156v7.1279297h-7.2285156V41.4550781z M34.4648438,41.4550781h7.3271484v7.1279297 h-7.3271484V41.4550781z M34.4648438,40.4550781v-7.1279297h7.3271484v7.1279297H34.4648438z M42.5927734,33.3271484h7.3271484 v7.1279297h-7.3271484V33.3271484z M50.7207031,33.3271484h7.2275391v7.1279297h-7.2275391V33.3271484z M57.9482422,32.3271484 h-7.2275391v-7.5400391h7.2275391V32.3271484z M49.9199219,32.3271484h-7.3271484v-7.5400391h7.3271484V32.3271484z M41.7919922,32.3271484h-7.3271484v-7.5400391h7.3271484V32.3271484z M9.1796875,32.3271484H2.0517578v-7.5400391h7.1279297 V32.3271484z M2.0517578,41.4550781h7.1279297v7.1279297H2.0517578V41.4550781z M10.1796875,41.4550781h7.1279297v7.1279297 h-7.1279297V41.4550781z M17.3076172,49.5830078v7.5400391h-7.1279297v-7.5400391H17.3076172z M18.3076172,49.5830078h7.1279297 v7.5400391h-7.1279297V49.5830078z M26.4355469,49.5830078h7.2285156v7.5400391h-7.2285156V49.5830078z M34.4648438,49.5830078 h7.3271484v7.5400391h-7.3271484V49.5830078z M42.5927734,49.5830078h7.3271484v7.5400391h-7.3271484V49.5830078z M42.5927734,48.5830078v-7.1279297h7.3271484v7.1279297H42.5927734z M50.7207031,41.4550781h7.2275391v7.1279297h-7.2275391 V41.4550781z M2.5517578,9.5341797h15.3330078v2.8913574c-1.5908203,0.2432251-2.8164062,1.6079712-2.8164062,3.2658691 c0,1.8291016,1.4873047,3.3164062,3.3164062,3.3164062s3.3164062-1.4873047,3.3164062-3.3164062 c0-1.6578979-1.2255859-3.022644-2.8164062-3.2658691V9.5341797h22.2304688v2.9910278 c-1.5352783,0.2424316-2.7167969,1.5639648-2.7167969,3.1661987c0,1.7734375,1.4433594,3.2167969,3.2167969,3.2167969 s3.2167969-1.4433594,3.2167969-3.2167969c0-1.6022339-1.1815186-2.9237671-2.7167969-3.1661987V9.5341797h15.3330078 c0.2753906,0,0.5,0.2246094,0.5,0.5v13.7529297H2.0517578V10.0341797C2.0517578,9.7587891,2.2763672,9.5341797,2.5517578,9.5341797z M18.3847656,16.1914062c0.2763672,0,0.5-0.2236328,0.5-0.5v-2.2587891 c1.0371704,0.2296143,1.8164062,1.1535034,1.8164062,2.2587891c0,1.2773438-1.0390625,2.3164062-2.3164062,2.3164062 s-2.3164062-1.0390625-2.3164062-2.3164062c0-1.1052856,0.7792358-2.0291748,1.8164062-2.2587891v2.2587891 C17.8847656,15.9677734,18.1083984,16.1914062,18.3847656,16.1914062z M41.6152344,16.1914062c0.2763672,0,0.5-0.2236328,0.5-0.5 v-2.3625488c1.0927124,0.2311401,1.9160156,1.2020874,1.9160156,2.3625488c0,1.3320312-1.0839844,2.4160156-2.4160156,2.4160156 s-2.4160156-1.0839844-2.4160156-2.4160156c0-1.1604614,0.8233032-2.1314087,1.9160156-2.3625488v2.3625488 C41.1152344,15.9677734,41.3388672,16.1914062,41.6152344,16.1914062z M2.0517578,56.6230469v-7.0400391h7.1279297v7.5400391 H2.5517578C2.2763672,57.1230469,2.0517578,56.8984375,2.0517578,56.6230469z M57.4482422,57.1230469h-6.7275391v-7.5400391 h7.2275391v7.0400391C57.9482422,56.8984375,57.7236328,57.1230469,57.4482422,57.1230469z"/></svg><!-- Calendar - Created by Josh Sorosky from the Noun Project -->
</label>
</div>
<div class="time">
<input type="time" name="time" step="60">
<label for="time" class="time">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 32 40" enable-background="new 0 0 32 32" xml:space="preserve"><g><g><path fill="#000000" d="M16,31.3C7.6,31.3,0.8,24.4,0.8,16S7.6,0.8,16,0.8s15.3,6.8,15.3,15.3C31.3,24.4,24.4,31.3,16,31.3z M16,2.3C8.4,2.3,2.3,8.4,2.3,16S8.4,29.8,16,29.8S29.8,23.6,29.8,16S23.6,2.3,16,2.3z"/></g><g><rect x="15.3" y="3.1" fill="#000000" width="1.5" height="2.1"/></g><g><rect x="15.3" y="26.8" fill="#000000" width="1.5" height="2.1"/></g><g><rect x="26.8" y="15.3" fill="#000000" width="2.1" height="1.5"/></g><g><rect x="3.1" y="15.3" fill="#000000" width="2.1" height="1.5"/></g><g><polygon fill="#000000" points="20.8,21.9 15.3,16.3 15.3,7.2 16.8,7.2 16.8,15.7 21.9,20.8 "/></g></g></svg><!-- Clock - Created by Creative Stall from the Noun Project -->
</label>
</div>
<input type="number" name="people" placeholder="Nr. of persons">
<input type="text" name="name" class="name" placeholder="Name">
<input type="email" name="email" class="email" placeholder="Email">
<input type="tel" name="phone" class="phone" placeholder="Phone">
<textarea name="message" placeholder="Message"></textarea>
<input type="submit" value="Make Reservation">
</form>
</main>
</div>
</section>
<section class="contact clearfix" id="contact">
<div class="wrapper">
<header class="bodyHeader">
<h2>Contact</h2>
</header>
<main class="contact">
<div class="contactInfo">
<div class="contactInfoTop">
<ul>
<li>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M78.4,27c-0.2-0.9-0.5-1.8-0.8-2.7C73.5,13,62.7,5,50.1,5C37.4,5,26.7,13,22.5,24.3c-0.3,0.9-0.6,1.7-0.8,2.7 c-0.6,2.4-1.1,4.8-1.1,7.4c0,1.6,0.2,3.4,0.5,5.3c0.1,0.4,0.1,0.8,0.2,1.2C25,59.5,41.8,85.5,47.9,94.4c1.1,1.6,3.3,1.6,4.4,0 c6.1-9,22.8-35,26.5-53.6c0.1-0.4,0.2-0.8,0.2-1.2c0.3-1.9,0.5-3.7,0.5-5.3C79.5,31.8,79,29.4,78.4,27z M50.1,49.7 c-8.1,0-14.6-6.5-14.6-14.6c0-8.1,6.5-14.6,14.6-14.6c8.1,0,14.6,6.5,14.6,14.6C64.7,43.2,58.1,49.7,50.1,49.7z"></path></svg><!-- Map marker - Created by Cédric Villain from the Noun Project -->
</div>
<h6>Lorem Street 9, Berlin</h6>
</li>
<li>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M31.8,61.2c11.9,14.4,40.9,28.2,47.9,25.1s8.5-9.8,8.2-12.9c-0.3-3.1-16.2-12.6-20.2-14.4s-8.6,4-10.8,6.5 c-2.3,2.4-11.1-4.9-14.9-8.6c0,0-10-11.2-7.7-13.6s8-7.2,6-11.1S28.2,12.7,25,12.5c-3.1-0.2-9.7,1.6-12.5,8.7s10.6,34.2,25.5,45.5"/><!-- phone - Created by Simon Mettler from the Noun Project --></div>
<h6>0999-999.999</h6>
</li>
<li>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" viewBox="0 0 32 40" enable-background="new 0 0 32 32" xml:space="preserve"><g><path d="M32,6c0-1.105-0.895-2-2-2H2C0.895,4,0,4.895,0,6l16,13L32,6z"/><path d="M0,9v17c0,1.105,0.895,2,2,2h28c1.105,0,2-0.895,2-2V8.969L16,22L0,9z"/></g><svg><!-- envelope - Created by Zlatko Najdenovski from the Noun Project -->
</div>
<p>loremipsum@email.com</p>
</li>
</ul>
<ul class="socialMenu">
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-google-plus-square"></i></li>
<li><i class="fa fa-youtube-square"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-yelp"></i></li>
</ul>
</div>
<div class="contactInfoBottom">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d155419.12770345373!2d13.284710924355949!3d52.507667770836704!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a84e373f035901%3A0x42120465b5e3b70!2sBerlin%2C+Germany!5e0!3m2!1sen!2sus!4v1454624341101" width="600" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
<div class="mapOverlay"></div>
</div>
</div>
<form class="contactForm">
<input type="text" name="name" class="name" placeholder="Name">
<input type="email" name="email" class="email" placeholder="Email">
<input type="tel" name="phone" class="phone" placeholder="Phone">
<textarea name="message" placeholder="Message"></textarea>
<input type="submit" value="Make Reservation">
</form>
</main>
</div>
</section>
</section>
</main>
<footer>
<div class="wrapper">
<div class="footerSocial">
<div class="twitterFeed">
<h4>Latest Tweets</h4>
<a class="twitter-timeline" href="https://twitter.com/suzettemccanny" data-chrome="noborders noheader nofooter noscrollbar transparent noavatar" data-tweet-limit="1" data-widget-id="694753069049987072">Tweets by @suzettemccanny</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="footerSocialLinks">
<h4>Social Media</h4>
<ul class="socialMenu">
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-google-plus-square"></i></li>
<li><i class="fa fa-youtube-square"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-yelp"></i></li>
</ul>
</div>
</div>
<div class="footerMenu">
<h4>Custom Menu</h4>
<a class="hamburger" href="#"><i class="fa fa-bars"></i></a>
<ul>
<li><a href="#"><p>Home</p></a></li>
<li><a href="#products"><p>Products</p></a></li>
<li><a href="#menu"><p>Menu</p></a></li>
<li><a href="#about"><p>About</p></a></li>
<li><a href="#reservations"><p>Reservations</p></a></li>
<li><a href="#contact"><p>Contact</p></a></li>
</ul>
</div>
<div class="footerContact">
<div class="hours">
<h4>Open Hours</h4>
<ul>
<li>
<p>Weekdays 07:00-19:30</p>
</li>
<li>
<p>Weekends 09:00-21:30</p>
</li>
</ul>
</div>
<div class="footerJournalLinks">
<h4>Latest Journal Posts</h4>
<ul>
<li>
<a href="#">
<p>New delicious treats in our menu</p>
</a>
</li>
<li>
<a href="#">
<p>New locations opening soon</p>
</a>
</li>
<li>
<a href="#">
<p>Baker & Coffee turns G</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<script src="main.js"></script>
<script>
$(function(){
$('.hamburger').on('click', function(){
//check to see if out event is firing
console.log('hello!');
$('.footerMenu ul').slideToggle();
});
$('#container').mixItUp({
animation: {
animateResizeContainer: false
},
controls: {
activeClass: 'active'
}
});
$('.mapOverlay').on('click', function(){
$(this).removeClass('mapOverlay');
});
});
</script>
</body>
</html>