This repository has been archived by the owner on Jan 22, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
775 lines (702 loc) · 41.4 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
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
<!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">
<title>Lion Inn</title>
<!-- Favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon" sizes="16x16">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="./style.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
</head>
<body class="montserrat" data-spy="scroll" data-target="#navbar-main">
<!-- Background image at top of page -->
<div class="home-bg-image"></div>
<div class="container">
<!-- Home section / landing page -->
<div id="home" class="home p-0 d-flex flex-column" style="color: #FFF;">
<!-- Header - logo and nav -->
<nav id="navbar-main" class="header navbar navbar-expand-xl mb-5 pt-3 row fixed-top">
<!-- Logo -->
<a class="navbar-brand mr-0 p-0 pl-3 pl-xl-0 col-6 col-xl-1 offset-xl-2" href="#home">
<img src="images/logo.png" width="75px" height="75px" alt="The Lion Inn Logo">
</a>
<!-- Hamburger for smaller screens -->
<div class="hamburger-container col-6 text-right p-0 d-xl-none">
<button class="navbar-toggler" id="hamburger" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars" style="font-size:40pt; color:#FFF;"></i>
</button>
</div>
<div class="collapse navbar-collapse col-xl-6 p-0" id="navbarSupportedContent">
<ul class="navbar-nav row justify-content-center">
<li class="nav-item mr-xl-5 collapse-purple">
<a class="nav-link disabled pl-5 pt-xl-2 pl-xl-2 d-flex flex-column" href="#about-us">
<span class="my-auto">About Us</span>
</a>
</li>
<li class="nav-item mr-xl-5 collapse-white">
<a class="nav-link enabled pl-5 pt-xl-2 pl-xl-2 d-flex flex-column" href="#food">
<span class="my-auto">Food</span>
</a>
</li>
<li class="nav-item mr-xl-5 collapse-purple">
<a class="nav-link disabled pl-5 pt-xl-2 pl-xl-2 d-flex flex-column" href="#accommodation">
<span class="my-auto">Accommodation</span>
</a>
</li>
<li class="nav-item mr-xl-5 collapse-white">
<a class="nav-link enabled pl-5 pt-xl-2 pl-xl-2 d-flex flex-column" href="#events">
<span class="my-auto">Events</span>
</a>
</li>
<li class="nav-item mr-xl-5 collapse-purple">
<a class="nav-link disabled pl-5 pt-xl-2 pl-xl-2 d-flex flex-column" href="#gallery">
<span class="my-auto">Gallery</span>
</a>
</li>
<li class="nav-item collapse-hide">
<a class="nav-link enabled" href="#footer">Contact Us</a>
</li>
<!-- Footer just for mobile hamburger -->
<div class="footer mobile-footer py-2">
<div class="row contact text-center">
<div class="col-4 order-xl-1 col-xl-1 offset-xl-2">
<i class="fas fa-phone mt-2"></i>
<p class="mb-0 mt-1">01600 860322</p>
</div>
<div class="col-4 order-xl-2 col-xl-1">
<i class="fas fa-envelope mt-2"></i>
<p class="mb-0 mt-1">[email protected]</p>
</div>
<div class="col-4 order-xl-3 col-xl-1">
<i class="fas fa-map-marker-alt mt-2"></i>
<p class="mb-0 mt-1">Get Directions</p>
</div>
<div class="col-12 order-first order-xl-4 col-xl-2 algeria">
<h3>THE LION INN</h3>
</div>
<div class="col-4 order-xl-5 col-xl-1">
<a href="#">
<i class="fab fa-google mt-2"></i>
</a>
<p class="mb-0 mt-1">Google</p>
</div>
<div class="col-4 order-xl-6 col-xl-1">
<a href="https://www.tripadvisor.co.uk/Restaurant_Review-g552009-d732964-Reviews-Lion_Inn-Monmouth_Monmouthshire_South_Wales_Wales.html">
<i class="fab fa-tripadvisor mt-2"></i>
</a>
<p class="mb-0 mt-1">TripAdvisor</p>
</div>
<div class="col-4 order-xl-7 col-xl-1">
<a href="https://www.facebook.com/TheLionInnTrellech/">
<i class="fab fa-facebook mt-2"></i>
</a>
<p class="mb-0 mt-1">Facebook</p>
</div>
</div>
<div class="copyright text-center mt-3 px-2">
<p class="mb-0">Copyright © 2004 - 2018 All Content of this site is property of The Lion Inn and must not be reproduced without permission. Every effort is made to ensure the details contained on this site are correct. However, we cannot accept responsibility for errors and omissions.</p>
</div>
</div> <!-- End Footer -->
</ul>
</div>
<!-- Empty column-1 to center nav elements -->
<div class="col-lg-1"></div>
</nav>
<div class="my-auto">
<div class="center row">
<div class="col-xl-12 text-center mt-5 mb-3">
<h1 class="great-vibes m-0 mr-3 main-heading">Welcome</h1>
<h4 class="m-0 to">to</h4>
<h1 class="algeria m-0 main-heading w-100">THE LION INN</h1>
</div>
</div>
<div class="buttons row">
<div class="col-3 col-sm-2 offset-sm-2 col-md-2 offset-md-2 col-lg-2 offset-lg-3 col-xl-1 offset-xl-4 p-0 pr-lg-2 px-xl-0 text-right">
<button type="button" class="btn btn-transparent btn-lg p-0 py-sm-2 px-3 m-xl-0">
<a href="#food">
<i class="fas fa-utensils btn-icon"></i>
</a>
</button>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 col-xl-2 offset-xl-0 p-0 text-center">
<button type="button" class="btn btn-lg py-1 px-2 btn-phone">
<span class="phone-no">01600 860322</span>
</button>
</div>
<div class="col-3 col-sm-4 col-md-2 col-lg-2 col-xl-1 p-0 pl-lg-2 px-xl-0 text-md-left">
<button type="button" class="btn btn-transparent btn-lg p-0 py-sm-2 px-3 m-xl-0">
<a href="#accommodation">
<i class="fas fa-bed btn-icon"></i>
</a>
</button>
</div>
</div>
</div>
<div class="arrow row mt-auto mb-4">
<div class="col-12 text-center">
<a href="#food">
<i class="fas fa-arrow-circle-down btn-icon"></i>
</a>
</div>
</div>
</div>
</div> <!-- Container -->
<!-- About Us -->
<div class="container">
<div id="about-us" class="about-us mt-5">
<div class="row">
<!-- Text -->
<div id="left-content" class="col-lg-6 col-xl-5 offset-xl-1 text-center pt-4 bg-white">
<div class="title">
<h1 class="great-vibes section-heading">About Us</h1>
</div>
<div class="pt-3 px-4">
<p>
Situated in Monmouthshire, in the heart of the picturesque Wye Valley, South Wales.
The Lion Inn is a well established and extremely popular public house.
</p>
<p>
Built in the late 16th Century, actually completed in 1580, The Lion Inn was originally a coaching inn, brew house and pig farm.
Many of the original features of the brewing cellar still remain, as do a number of outhouses that were used as pig sty's.
</p>
<p>
The Lion Inn is the only traditional inn in the ancient village of Trellech. It consists
of two rooms, both with open fires and exposed wooden beams. One room is used as a traditional
village bar, the other as a restaurant area.
</p>
<p>
The pub stocks a fine range of real ales and ciders, as well as the traditional range of keg Lager,
Bitters, Ciders, Guiness and Spirits including a large range of whiskies, Gins and Rums.
</p>
<p>
The whole emphasis of the pub is towards the traditional - Traditional Beers, Real Ciders, Quality
Home Made Food and a Friendly atmosphere.
</p>
</div>
</div>
<!-- Image -->
<div id="right-content" class="col-lg-6 col-xl-5 p-4 bg-white text-center text-lg-left">
<img src="images/pub_original.jpg" alt="Image of The Lion Inn" class="mt-lg-5 ml-xl-4 mt-xl-0 about-us-image" />
</div>
</div>
</div>
</div>
<!-- Background image for FOOD section -->
<div class="food-bg-image"></div>
<div class="container">
<div id="food" class="food my-5">
<div class="title text-center col-12">
<h1 class="great-vibes section-heading">Food</h1>
</div>
<div class="menu row">
<div class="left col-lg-6 offset-lg-1 text-center">
<h2 class="great-vibes minor-heading">Menu</h2>
<div class="mt-3 desc">
<p>
The menus range from traditional pub grub, through to the exotic and unheard of; with children and vegetarians being catered for. Sourcing the majority of the produce within 10 miles of the pub. For example, the meats come from the local communities of Shirenewton, Raglan & Trellech. A "standard" menu is provided within the pub along with a number of "specials" menus.
</p>
<p>
The specials boards change regularly and often feature dishes that offer new eating experiences for more adventurous diners. Regular favourites include Beef Stroganoff, Chicken in a creamy Tarragon sauce, Kangaroo steak, Ostrich with a creamy garlic sauce, Pork steak with a cider sauce and Duck.
</p>
<p>
Special menu’s are created for Easter Sunday and Mother’s Day. Takeaway pizza’s are also available.
</p>
</div>
<a class="btn btn-sm mt-3" href="menu.html">
<span class="px-1">View Menu</span>
</a>
</div>
<div class="right col-lg-3 offset-lg-1" style="overflow: hidden; position: relative; width: 100%;">
<img src="images/menu.png" alt="Image of Menu" style="background:green; height: 100%; width: auto; position: absolute; right: 0; top: 0; object-fit: cover;"/>
</div>
</div>
<div class="book-table row mt-5">
<div class="times col-lg-4 text-center py-4">
<h2 class="great-vibes minor-heading">Times</h2>
<i class="far fa-clock"></i>
<div class="opening-times">
<h4 class="mt-3">Opening Times</h4>
<hr class="bg-light mx-auto mt-0"/>
<p>
Monday - Wednesday <br/>
12:00 - 23:00 <br/>
Thursday - Saturday <br/>
12:00 - 00:00 <br/>
Sunday <br/>
12:00 - 22:00
</p>
</div>
<div class="dining-times">
<h4 class="mt-3">Dining Times</h4>
<hr class="bg-light mx-auto mt-0"/>
<p>
Monday - Saturday <br/>
12:00 - 21:30 <br/>
Sunday <br/>
12:00 - 18:00
</p>
</div>
</div>
<div class="reservation col-lg-8 text-center pt-4 bg-white">
<h2 class="great-vibes minor-heading">Reservation</h2>
<i class="fas fa-book-open"></i>
<h4 class="mt-3">Please call us on the number below.</h4>
<p class="mt-5">
Please mention any special dietary requirements </br>
(vegetarian, gluten free, peanut allergy).
</p>
<p>
Please also mention if you are bringing a dog.
</p>
<div class="icons mt-4">
<img class="mx-2" src="images/pet-friendly.png" alt="Image of Pet Friendly Icon" />
<img class="mx-2" src="images/vegetarian.png" alt="Image of Vegetarian Icon" />
<img class="mx-2" src="images/gluten-free.png" alt="Image of Gluten Free Icon" />
</div>
<div class="book-now mt-4 mb-lg-0 mb-3">
<h4 class="great-vibes mb-0">Book Now</h4>
<button type="button" class="btn btn-lg mt-4 py-1 px-3">
<span>01600 860322</span>
</button>
</div>
</div>
</div>
</div>
</div> <!-- Container -->
<div class="container">
<div id="accommodation" class="accommodation">
<div class="title text-center">
<h1 class="great-vibes section-heading">Accommodation</h1>
</div>
<div class="cottage row">
<div class="col-12 col-lg-6 text-center">
<h2 class="great-vibes minor-heading">Cottage</h2>
<div class="px-md-5">
<p>The Lion Inn Cottage was originally an Elizabethan stone pig cot.</p>
<p>
The cottage has been tastefully decorated in a traditional country style and can sleep a family of four.
The open plan room is enhanced by skylights and contains a double bed and double sofa bed.
</p>
<p>
The luxurious marble tiled bathroom contains a spacious shower unit.
The fully equipped compact kitchen has been made to measure and boasts a traditional Belfast sink, double hob,
microwave and refigerator. Central heating (supplied by new slim-line storage heaters) and a carpeted floor
ensure the cottage is cosy all year around.
</p>
<p>
To the front of the cottage a walled patio ensures privacy
and is a sun trap during warmer weather. A welcome pack is available and packed lunches can be provided at a
small cost, if requested.
</p>
</div>
</div>
<div class="col-12 col-lg-6 p-4">
<img src="images/stock-accomm.jpg" alt="Image of Bed" class="cottage-img">
</div>
</div>
<div class="cards text-center mt-4 row">
<div class="col-xl-4 mb-3 mb-xl-0">
<div class="card h-100">
<div class="great-vibes card-header">B&B</div>
<div class="card-body px-5">
<p class="card-text">
Low Season £70 per night. <br/>
High Season £80 per night. <br/>
Prices assume 2 people sharing.
</p>
<p class="card-text">
All year £58 per night 1 person.
</p>
<p class="card-text">
Well behaved dogs welcome £2.50 per dog per day.
</p>
</div>
</div>
</div>
<div class="col-xl-4 mb-3 mb-xl-0">
<div class="card h-100">
<div class="great-vibes card-header">Self-Catering</div>
<div class="card-body px-5">
<p class="card-text">
Low Season £50 per night. <br/>
High Season £60 per night. <br/>
</p>
<p class="card-text">
Self Catering Tariff we provide bedding only, you <br/>
provide towels, food, etc. <br/>
Packed lunches can be provided. <br/>
£9.00 each includes sandwiches, soft drink, fruit, chocolate & crisps. <br/>
Towels can be hired at £5.00 each.
</p>
</div>
</div>
</div>
<div class="col-xl-4 mb-3 mb-xl-0">
<div class="card h-100">
<div class="great-vibes card-header">Season Dates</div>
<div class="card-body px-5">
<p class="card-text">
High Season <br/>
May - September <br/>
Decemeber 22nd - January 5th inclusive
</p>
<p class="card-text">
Low Season <br/>
October - April
</p>
</div>
</div>
</div>
</div>
<div class="phone-number text-center mt-5">
<div class="book-now mt-4 mb-lg-0 mb-3">
<h4 class="great-vibes mb-0">Book Now</h4>
<button type="button" class="btn btn-lg mt-4 py-1 px-3">
<span>01600 860322</span>
</button>
</div>
</div>
</div>
</div>
<!-- Container fluid used just so that I can have full width background -->
<div class="container-fluid bg-light pb-4">
<div class="container">
<div id="events" class="events mt-5 pt-5">
<div class="title text-center">
<h1 class="great-vibes section-heading">Events</h1>
</div>
<!-- NOTE - use toggleable tabs for regular events section -->
<div class="regular">
<h2 class="montserrat row event-sub-heading mb-0">Regular Events</h2>
<hr class="row mt-2"/>
<!-- Day Titles -->
<div class="row week-days week-days-titles">
<div class="col-1 p-0">Monday</div>
<div class="col-1 p-0">Tuesday</div>
<div class="col-1 p-0">Wednesday</div>
<div class="col-1 p-0">Thursday</div>
<div class="col-1 p-0">Friday</div>
<div class="col-1 p-0">Saturday</div>
<div class="col-1 p-0">Sunday</div>
</div>
<!-- Clickable Tabs -->
<ul class="nav nav-tabs row week-days text-center" id="myTab" role="tablist">
<li class="nav-item col-1 p-0">
<a class="nav-link active p-0 d-flex flex-column" id="monday-tab" data-toggle="tab" href="#monday" role="tab" aria-controls="monday" aria-selected="true">
<i class="fas fa-microphone-alt m-auto"></i>
</a>
</li>
<li class="nav-item col-1 p-0">
<a class="nav-link p-0 d-flex flex-column" id="tuesday-tab" data-toggle="tab" href="#tuesday" role="tab" aria-controls="tuesday" aria-selected="false">
<img class="m-auto" src="images/cards.png" alt="Image of Card Deck" />
</a>
</li>
<li class="nav-item col-1 p-0">
<a class="nav-link p-0 d-flex flex-column" id="wednesday-tab" data-toggle="tab" href="#wednesday" role="tab" aria-controls="wednesday" aria-selected="false">
<i class="fas fa-question-circle m-auto"></i>
</a>
</li>
<li class="nav-item col-1 p-0">
<a class="nav-link p-0 d-flex flex-column" id="thursday-tab" data-toggle="tab" href="#thursday" role="tab" aria-controls="thursday" aria-selected="false">
<img class="m-auto" src="images/darts.png" alt="Image of Dart Board" />
</a>
</li>
<li class="nav-item col-1 p-0">
<a class="nav-link p-0 d-flex flex-column" id="friday-tab" data-toggle="tab" href="#friday" role="tab" aria-controls="friday" aria-selected="false">
<i class="fas fa-fish m-auto"></i>
</a>
</li>
<li class="nav-item col-1 p-0">
<a class="nav-link p-0 d-flex flex-column" id="saturday-tab" data-toggle="tab" href="#saturday" role="tab" aria-controls="saturday" aria-selected="false">
<i class="fas fa-minus m-auto"></i>
</a>
</li>
<li class="nav-item col-1 p-0">
<a class="nav-link p-0 d-flex flex-column" id="sunday-tab" data-toggle="tab" href="#sunday" role="tab" aria-controls="sunday" aria-selected="false">
<i class="fas fa-music m-auto"></i>
</a>
</li>
</ul>
<!-- Event information -->
<div class="tab-content row week-days" id="myTabContent" style="background-color: #FFF;">
<div class="col-1"></div> <!-- Empty div to help format page - align event info -->
<div class="tab-pane fade show active my-4" id="monday" role="tabpanel" aria-labelledby="monday-tab">
<h3>Open Mic Night</h3>
<p class="mt-3 mb-2">
Come along the 1st & 3rd Monday night every month.
</p>
<p>
If you play an instrument or sing, or just enjoy entertaining come along fun begins at 8.30pm.
</p>
</div>
<div class="tab-pane fade my-4" id="tuesday" role="tabpanel" aria-labelledby="tuesday-tab">
<h3>Cribb</h3>
<p class="mt-3 mb-2">
The Lion Inn participates in the local cribb league during the winter.
</p>
<p>
During the summer an in-house friendly ladder league is run - all are welcome.
</p>
</div>
<div class="tab-pane fade my-4" id="wednesday" role="tabpanel" aria-labelledby="wednesday-tab">
<h3>Quiz</h3>
<p class="mt-3 mb-2">
The Lion Inn participates in the local quiz league during the winter.
</p>
<p>
During the summer on the 1st & 3rd Wednesday The Lion Inn hosts a friendly quiz night - all are welcome.
</p>
</div>
<div class="tab-pane fade my-4" id="thursday" role="tabpanel" aria-labelledby="thursday-tab">
<h3>Darts</h3>
<p class="mt-3 mb-2">
The Lion Inn participates in the local darts league during the winter.
</p>
<p>
During the summer the darts team practice all are welcome to join in and take on the team members.
</p>
</div>
<div class="tab-pane fade my-4" id="friday" role="tabpanel" aria-labelledby="friday-tab">
<h3>Fish on Friday</h3>
<p class="mt-3 mb-2">
Come along every Friday.
</p>
<p>
A choice of plaice or cod for £7.50. Served with chips and peas (garden / mushy). 6:30 - 8:30pm.
</p>
</div>
<div class="tab-pane fade my-4" id="saturday" role="tabpanel" aria-labelledby="saturday-tab">
<h3>No Regular Events</h3>
<p class="mt-3 mb-2">
No regular events happen on a Saturday.
</p>
<p>
Food is served as normal, until 9:30pm. The pub closes at midnight.
</p>
</div>
<div class="tab-pane fade my-4" id="sunday" role="tabpanel" aria-labelledby="sunday-tab">
<h3>Twilight Jazz</h3>
<p class="mt-3 mb-2">
Come along on the 2nd Sunday of every month.
</p>
<p>
If you enjoy jazz, this is the night for you. Come and join us. Fun begins at 5pm.
</p>
</div>
</div>
</div>
<div class="upcoming mt-5 mb-0 pb-0">
<h2 class="row montserrat event-sub-heading mb-0">Upcoming Events</h2>
<hr class="row mt-2"/>
<!-- MAY 25 Event -->
<div class="row mt-3">
<div class="date col-2 col-lg-1">
<p class="month mb-0">MAY</p>
<hr class="text-left bg-light my-0"/>
<p class="day mt-0">25</p>
</div>
<div class="image col-10 col-lg-5">
<img src="images/pub2.png" alt="Stock image of a pub" class="event-image" />
</div>
<div class="info col-8 offset-2 col-lg-4 offset-lg-0">
<h2 class="event-title mb-0 mt-1 mt-lg-0">Bank Holiday Saturday</h2>
<hr class="text-left bg-light my-1 my-lg-2"/>
<p class="my-1 mt-lg-0">
Fun begins at 8:30pm.
</p>
<hr class="text-left bg-light my-1 my-lg-2"/>
<p>
Live music with Hickory Stick Boys.
</p>
</div>
<div class="more col-5 offset-2 offset-lg-0 col-md-2 col-lg-2 d-flex flex-column">
<a href="#" class="mt-auto ml-lg-auto"><!-- More Info... --></a>
</div>
</div>
<hr />
<!-- JUNE 14 15 16 Event -->
<div class="row mt-3">
<div class="date col-2 col-lg-1">
<p class="month mb-0">JUN</p>
<hr class="text-left bg-light my-0"/>
<p class="day mt-0">14 <br/> 15 <br/> 16</p>
</div>
<div class="image col-10 col-lg-5">
<img src="images/beer-fest-hd.png" alt="Image of the Beer Festival" class="event-image" />
</div>
<div class="info col-8 offset-2 col-lg-4 offset-lg-0">
<h2 class="event-title mb-0 mt-1 mt-lg-0">19th Annual Summer Beer & Music Festival</h2>
<hr class="text-left bg-light my-1 my-lg-2"/>
<p>
Wall to wall music, great real ales and camping available.
More details of bands closer to the event.
Camping available for festival weekend £5 per night £10 for whole weekend. <br/>
<strong>Friday</strong> <br/>
9:00pm - Z3 Top <br/>
<strong>Saturday</strong> <br/>
2:00pm - Pip, Maddie & Izzy <br/>
2:30pm - Graham Ward <br/>
3:00pm - Shooting the Crow <br/>
6:00pm - BBC Acoustic Band <br/>
9:00pm - Jarzino <br/>
<strong>Sunday</strong> <br/>
Open Mic from 1pm running all day, 20 min slots. <br/>
Call Debbie on 01600 860322 to book a slot.
</p>
</div>
<div class="more col-5 offset-2 offset-lg-0 col-md-2 col-lg-2 d-flex flex-column">
<a href="#" class="mt-auto ml-lg-auto"><!-- More Info... --></a>
</div>
</div>
<hr />
<!-- JUN 29 Event -->
<div class="row mt-3">
<div class="date col-2 col-lg-1">
<p class="month mb-0">JUN</p>
<hr class="text-left bg-light my-0"/>
<p class="day mt-0">29</p>
</div>
<div class="image col-10 col-lg-5">
<a href="https://www.freepik.com/free-photos-vectors/background">
<img src="images/80s.png" alt="Image of the Easter Quiz Board" class="event-image" />
</a>
<a href="https://www.freepik.com/free-photos-vectors/background" style="font-size: 7pt;">Image by freepik - www.freepik.com</a>
</div>
<div class="info col-8 offset-2 col-lg-4 offset-lg-0">
<h2 class="event-title mb-0 mt-1 mt-lg-0">Retro 80's Dinner</h2>
<hr class="text-left bg-light my-1 my-lg-2"/>
<p>
Dust off the shoulder pads and big hair, we are hosting a fancy dress dinner with a fun 80's quiz and much more - PUT IT IN YOUR FILOFAX!
</p>
</div>
<div class="more col-5 offset-2 offset-lg-0 col-md-2 col-lg-2 d-flex flex-column">
<a href="#" class="mt-auto ml-lg-auto"><!-- More Info... --></a>
</div>
</div>
<hr />
<!-- JUL 27 Event -->
<div class="row mt-3">
<div class="date col-2 col-lg-1">
<p class="month mb-0">JUL</p>
<hr class="text-left bg-light my-0"/>
<p class="day mt-0">27</p>
</div>
<div class="image col-10 col-lg-5">
<img src="images/portcheese.png" alt="Image of Port & Cheese" class="event-image" />
</div>
<div class="info col-8 offset-2 col-lg-4 offset-lg-0">
<h2 class="event-title mb-0 mt-1 mt-lg-0">Port & Cheese Night</h2>
<hr class="text-left bg-light my-1 my-lg-2"/>
<p>
We shall start with a white port and work our way through to a vintage, tasting <br/>
the different between all the different types of port all washed down with some wonderful Welsh cheeses. <br/>
<strong>£25 per ticket.</strong>
</p>
</div>
<div class="more col-5 offset-2 offset-lg-0 col-md-2 col-lg-2 d-flex flex-column">
<a href="#" class="mt-auto ml-lg-auto"><!-- More Info... --></a>
</div>
</div>
<hr />
<!-- AUG 9 10 11 Event -->
<div class="row mt-3">
<div class="date col-2 col-lg-1">
<p class="month mb-0">AUG</p>
<hr class="text-left bg-light my-0"/>
<p class="day mt-0">9 <br/> 10 <br/> 11</p>
</div>
<div class="image col-10 col-lg-5">
<img src="images/cider_fest.png" alt="Image of the Cider Festival" class="event-image" />
</div>
<div class="info col-8 offset-2 col-lg-4 offset-lg-0">
<h2 class="event-title mb-0 mt-1 mt-lg-0">11th Annual Cider Perry & Music Festival</h2>
<hr class="text-left bg-light my-1 my-lg-2"/>
<p>
Wall to wall music, great real ciders and camping available. <br/>
More details of bands closer to the event.
</p>
</div>
<div class="more col-5 offset-2 offset-lg-0 col-md-2 col-lg-2 d-flex flex-column">
<a href="#" class="mt-auto ml-lg-auto"><!-- More Info... --></a>
</div>
</div>
<hr />
</div>
</div>
</div> <!-- Container -->
</div> <!-- Container Fluid -->
<div class="container-fluid footer-bg">
<div class="container">
<!-- <div id="gallery" class="gallery">
</div> -->
<div id="footer" class="footer py-2">
<div class="row contact text-center">
<div class="col-4 order-lg-1 col-lg-1 offset-lg-2">
<i class="fas fa-phone mt-2"></i>
<p class="mb-0 mt-1">01600 860322</p>
</div>
<div class="col-4 order-lg-2 col-lg-1">
<i class="fas fa-envelope mt-2"></i>
<p class="mb-0 mt-1 overflow">[email protected]</p>
</div>
<div class="col-4 order-lg-3 col-lg-1">
<i class="fas fa-map-marker-alt mt-2"></i>
<a href="https://maps.google.com/?q=51.7460885,-2.7240651&t=m" target="_blank">
<p class="mb-0 mt-1">Get Directions</p>
</a>
</div>
<div class="col-12 order-first order-lg-4 col-lg-2 algeria d-flex flex-column">
<h2 class="my-auto">THE LION INN</h2>
</div>
<div class="col-4 order-lg-5 col-lg-1">
<a href="#">
<i class="fab fa-google mt-2"></i>
</a>
<p class="mb-0 mt-1">Google</p>
</div>
<div class="col-4 order-lg-6 col-lg-1">
<a href="https://www.tripadvisor.co.uk/Restaurant_Review-g552009-d732964-Reviews-Lion_Inn-Monmouth_Monmouthshire_South_Wales_Wales.html">
<i class="fab fa-tripadvisor mt-2"></i>
</a>
<p class="mb-0 mt-1">TripAdvisor</p>
</div>
<div class="col-4 order-lg-7 col-lg-1">
<a href="https://www.facebook.com/TheLionInnTrellech/">
<i class="fab fa-facebook mt-2"></i>
</a>
<p class="mb-0 mt-1">Facebook</p>
</div>
</div>
<div class="copyright text-center mt-3">
<p class="mb-0">Copyright © 2004 - 2018 All Content of this site is property of The Lion Inn and must not be reproduced without permission. Every effort is made to ensure the details contained on this site are correct. However, we cannot accept responsibility for errors and omissions.</p>
</div>
<div class="feedback row mt-3">
<div class="col-4 offset-8 col-md-3 offset-md-9">
<a href="https://www.surveymonkey.co.uk/r/YWJWPG8" target="_blank">
<button type="button" href="" class="btn btn-sm btn-feedback py-1 px-2">
<i class="fas fa-comment"></i>
Feedback
</button>
</a>
</div>
</div>
</div>
</div> <!-- Container -->
</div> <!-- Container Fluid -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Custom JS -->
<script src="script.js"></script>
</body>
</html>