-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
212 lines (212 loc) · 12.9 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
<!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 active" 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" 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 added a bootstrap carousel with pictures -->
<div class="carousel-wrapper container-fluid">
<div class="row">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/images_home/chris-hardy-s3-oQpJ0t08-unsplash.jpg" class="d-block w-100" alt="bar and drinks">
<div class="carousel-caption d-none d-md-block">
<h5>Our Bar</h5>
<p></p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/images_home/louis-hansel-shotsoflouis-R6_o_PPAS94-unsplash.jpg" class="d-block w-100" alt="chef cooking">
<div class="carousel-caption d-none d-md-block">
<h5>Our Passion</h5>
<p></p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/images_home/adrian-raudaschl-7TdooHfsAAs-unsplash.jpg" class="d-block w-100" alt="Food Preparation">
<div class="carousel-caption d-none d-md-block">
<h5>Details matter</h5>
<p></p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!--In this div I added 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>Top Menu</h2>
</a>
</div>
<!--In this div I added three cards with the three main features of the restaurant (the last one has a link to a wine list)-->
<div class="cards-wrapper container">
<div class="card-group">
<div class="card">
<img src="assets/images/images_home/vika-aleksandrova-n56ZKeW9bVM-unsplash.jpg" class="card-img-top" alt="Pasta pesto">
<div class="card-body">
<h5 class="card-title home-card-style">Our Classics</h5>
<p class="card-text home-card-style">Select one of our classics or ask our staff for the daily specials</p>
</div>
</div>
<div class="card">
<img src="assets/images/images_home/david-b-townsend-ppN7TyeaQK0-unsplash.jpg" class="card-img-top" alt="Appetizers">
<div class="card-body">
<h5 class="card-title home-card-style">Appetizers</h5>
<p class="card-text home-card-style">Explore our range of appetizers and ask our staff about our specials</p>
</div>
</div>
<div class="card">
<img src="assets/images/images_home/javier-balseiro-jDU4yYk5Kgs-unsplash.jpg" class="card-img-top" alt="Wine Bottles">
<div class="card-body">
<h5 class="card-title home-card-style">Wines</h5>
<p class="card-text home-card-style">Ask our sommelier about our wine list and new special imported Prosecco</p>
<a class="link-winelist" href="assets/pdf/wine_list.pdf" target="_blank">Click here to download our complete wine list<i class="fas fa-wine-glass-alt fa-fw"></i></a>
</div>
</div>
</div>
</div>
<!--In this div I added a title as an intro to the next part-->
<div class="d-flex justify-content-center text-uppercase">
<h2 class="title-bottom-home">What they say about us</h2>
</div>
<!--In this div I added the feedback and i have used a bootstrap media list-->
<div class="container">
<div class="list-unstyled-feedback container">
<ul class="list-unstyled">
<li class="media">
<img src="assets/images/images_home/jeffrey-keenan-pUhxoSapPFA-unsplash.jpg" height="64" width="64" class="mr-3 img-thumbnail" alt="Man's face">
<div class="media-body">
<h6 class="mt-0 mb-1">Mike -The Fork</h6>
<p>"Excellent eating experience and service. From walking in the door and being greeted by employee,seated and drink order taken, was maybe five minutes".</p>
</div>
</li>
<li class="media my-4">
<img src="assets/images/images_home/aaker-MnUPJSf_040-unsplash.jpg" height="64" width="64" class="mr-3 img-thumbnail" alt="Woman's face">
<div class="media-body">
<h6 class="mt-0 mb-1">A Culinary Traveller</h6>
<p>"It’s on my to do list every time we go to Dublin. I have never been disappointed and the service was fast and polite". </p>
</div>
</li>
<li class="media">
<img src="assets/images/images_home/roman-kraft-_Zua2hyvTBk-unsplash.jpg" height="64" width="64" class="mr-3 img-thumbnail" alt="man reading a magazine">
<div class="media-body">
<h6 class="mt-0 mb-1">The Dublin Food Gazette</h6>
<p>"It was truly love at first fork. Great choice of wines finally selected by the on site sommelier and tasty rare cheeses".</p>
</div>
</li>
</ul>
</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>