-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgallery.html
181 lines (181 loc) · 10.9 KB
/
gallery.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@1,300&family=Oswald&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/favicon/site.webmanifest">
<title>Pasta & Vino | Italian wine & pasta bar in Dublin</title>
</head>
<body>
<div class="navbar-wrapper sticky-top">
<!--In this div I have added a top banner just for styling reasons-->
<div id="top-banner" class="container-fluid bg-color">
<div class="container">
<p></p>
</div>
</div>
<!--In this header I have added a logo and a collapsable navbar with the usual links -->
<header class="header-style">
<nav class="navbar navbar-expand-md navbar-light">
<a class="navbar-logo" href="index.html"><img src="assets//images/final_logo.png" height="150" width="150" alt="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0 text-uppercase">
<li class="nav-item">
<a class="nav-link" href="index.html">Home<span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="menu.html">Menu<span class="sr-only">Menu</span></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about_us.html">About Us</a>
</li>
</ul>
</div>
</nav>
</header>
</div>
<!--In this div I added a catchy title that operates also as a link to the menu-->
<div class="d-flex justify-content-center text-uppercase">
<a class="nav-link-top" href="menu.html">
<h2><i class="fas fa-wine-glass-alt fa-fw"></i>Let Us Spoil You</h2>
</a>
</div>
<!--In this div I have added a collage for the gallery-->
<div class="container-fluid">
<div class="container-gallery">
<div class="image-gallery">
<h5>Pasta&Vino</h5>
<img class="img-gallery" src="assets/images/images_gallery/des-recits-NaKwyyh849o-unsplash.jpg" alt="">
</div>
<div class="image-gallery">
<h5>Pasta&Vino</h5>
<img class="img-gallery" src="assets/images/images_gallery/eilis-garvey-2Y4bYo1Mn-0-unsplash.jpg" alt="">
</div>
<div class="image-gallery">
<h5>Pasta&Vino</h5>
<img class="img-gallery" src="assets/images/images_gallery/jay-wennington-N_Y88TWmGwA-unsplash.jpg" alt="">
</div>
<div class="image-gallery">
<h5>Pasta&Vino</h5>
<img class="img-gallery" src="assets/images/images_gallery/louis-hansel-shotsoflouis-N8ahIwpygHE-unsplash.jpg" alt="">
</div>
<div class="image-gallery">
<h5>Pasta&Vino</h5>
<img class="img-gallery" src="assets/images/images_gallery/maddi-bazzocco-ikJVpxUK4ZA-unsplash.jpg" alt="">
</div>
<div class="image-gallery">
<h5>Pasta&Vino</h5>
<img class="img-gallery" src="assets/images/images_gallery/pablo-merchan-montes-Orz90t6o0e4-unsplash.jpg" alt="">
</div>
<div class="image-gallery">
<h5>Pasta&Vino</h5>
<img class="img-gallery" src="assets/images/images_gallery/patrick-tomasso-GXXYkSwndP4-unsplash.jpg" alt="">
</div>
<div class="image-gallery">
<h5>Pasta&Vino</h5>
<img class="img-gallery" src="assets/images/images_gallery/redcharlie-t-7KEq9M0b0-unsplash.jpg" alt="">
</div>
<div class="image-gallery">
<h5>Pasta&Vino</h5>
<img class="img-gallery" src="assets/images/images_gallery/thomas-bormans-0QZQn5yhAjA-unsplash.jpg" alt="">
</div>
<div class="image-gallery">
<h5>Pasta&Vino</h5>
<img class="img-gallery" src="assets/images/images_gallery/ana-itonishvili-TTPhgVuGFQ4-unsplash.jpg" alt="">
</div>
<div class="image-gallery">
<h5>Pasta&Vino</h5>
<img class="img-gallery" src="assets/images/images_gallery/elevate-UoPNA8I-_p0-unsplash.jpg" alt="">
</div>
<div class="image-gallery">
<h5>Pasta&Vino</h5>
<img class="img-gallery" src="assets/images/images_gallery/kelsey-chance-tAH2cA_BL5g-unsplash.jpg" alt="">
</div>
</div>
</div>
<!--In this div I have embedded a video using Youtube and Bootstrap aspect ratio-->
<div class="container" id="masterpiece">
<div class="d-flex justify-content-center text-uppercase">
<h4><i class="fas fa-utensils masterpiece"></i>Preparing a masterpiece</h4>
</div>
</div>
<div class="container" id="embedded-video">
<div class="embed-responsive embed-responsive-21by9 embedded-video">
<iframe id="iframe-video" width="560" height="315" src="https://www.youtube.com/embed/zot5JbBBaJk?start=16"
title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!--In this div I have embedded a map using Google Maps and Bootstrap aspect ratio-->
<div class="container" id="reach-us">
<div class="d-flex justify-content-center text-uppercase">
<h4><i class="fas fa-map-signs reach-us"></i>How to reach us</h4>
</div>
</div>
<div class="container" id="embedded-map">
<div class="embed-responsive embed-responsive-21by9 embedded-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2382.546762691075!2d-6.238835484281375!3d53.33346808337706!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48670ec07cb0cfe1%3A0xfad806f697be521f!2s63%20Northumberland%20Rd%2C%20Ballsbridge%2C%20Dublin%204%2C%20D04%20VA89!5e0!3m2!1sen!2sie!4v1617015845957!5m2!1sen!2sie"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
<!--Footer area-->
<footer>
<div class="container footer-style bg-color footer-style">
<!--In this div I have added the contacts-->
<div class="row justify-content-center restaurant-footer-contacts bg-color">
<div class="col-4 col-md-3">
<p class="footer-text"><i class="fas fa-map-marker-alt"></i>Pasta & Vino, Dublin: Market D04VA89</p>
</div>
<div class="col-4 col-md-3 btn-align">
<p class="footer-text"><i class="fas fa-phone"></i>phone: +353 (1) 789 5443
<a id="phone-link" aria-label="phone link" class="footer-text" href="tel:+353(1)7895443"></a>
</p>
<div class="container">
<div class="row justify-content-center">
<p class="footer-text"><i class="far fa-envelope"></i>email:
<a id="email-link" class="footer-text" href="mailto:[email protected]">[email protected]</a>
</p>
</div>
</div>
</div>
<div class="col-4 col-md-3">
<p class="footer-text"><i class="far fa-calendar-alt"></i>Tuesday-Sunday: 12pm-9.30pm</p>
</div>
</div>
<!--In this div I have added a button that takes you back to the top to facilitate - especially mobile- navigation-->
<div class="container">
<div class="row top-nav-button justify-content-center">
<div class="btn-align">
<a href="#" class="btn">Back to the top<i class="far fa-caret-square-up"></i></a>
</div>
</div>
</div>
<!--In this section I have added links to social media pages-->
<div class="container">
<div class="row justify-content-center">
<div class="col-2 col-md-1 new-link-footer"><a href="https://www.facebook.com/" aria-label="facebook link" target="_blank"><i class="fab fa-facebook"></i></a></div>
<div class="col-2 col-md-1 new-link-footer"><a href="https://twitter.com/?lang=en" aria-label="twitter link" target="_blank"><i class="fab fa-twitter-square"></i></a></div>
<div class="col-2 col-md-1 new-link-footer"><a href="https://www.instagram.com/" aria-label="instagram link" target="_blank"><i class="fab fa-instagram-square"></i></a></div>
<div class="col-2 col-md-1 new-link-footer"><a href="https://www.youtube.com/" aria-label="youtube link" target="_blank"><i class="fab fa-youtube"></i></a></div>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>