-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
299 lines (299 loc) · 13.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
<!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" />
<meta
name="description"
content="Welcome to our fusion restaurant in the heart of London, England. We have both lunch and a'la carte and welcome guests for new tastes and amazing atmosphere."
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles/index-style.css" />
<link rel="stylesheet" href="styles/index-media-queries.css" />
<link rel="stylesheet" href="https://www.unpkg.com/[email protected]/dist/sal.css" />
<title>Johnie's | Home</title>
<link rel="icon" type="image/x-icon" href="img/logo-middle.png" />
</head>
<body>
<!--##### HEADER SECTION #######-->
<header class="header">
<nav class="nav-main" data-sal="slide-down" data-sal-delay="300" data-sal-duration="500" data-sal-easing="ease">
<ul class="nav-list">
<li class="current-link"><p class="p-link">Home</p></li>
<li><a href="lunch.html" class="nav-link">Lunch</a></li>
<li><a href="carte.html" class="nav-link">A'la carte</a></li>
<li><a href="find-us.html" class="nav-link">Find us</a></li>
<li>
<a href="book-a-table.html" class="nav-link cta-btn"
>Book a Table</a
>
</li>
</ul>
</nav>
<div class="logo-container" data-sal="fade" data-sal-delay="500" data-sal-duration="500" data-sal-easing="ease">
<img
src="img/Logo.png"
class="hero-logo"
alt="Logo Johnie's Restaurant"
/>
</div>
<!--######### SOCIAL ICONS #########-->
<div class="social-icon-container">
<div class="social-icons">
<a href="https://www.facebook.com/ntiskolan/" target="_blank"
><ion-icon name="logo-facebook" class="social-icon"></ion-icon
></a>
<a href="https://www.instagram.com/ntiskolan/" target="_blank"
><ion-icon name="logo-instagram" class="social-icon"></ion-icon
></a>
<a href="https://twitter.com/ntigymnasiet" target="_blank"
><ion-icon name="logo-twitter" class="social-icon"></ion-icon
></a>
</div>
</div>
</header>
<main>
<!--######## ABOUT US SECTION #########-->
<div class="section">
<div class="container">
<article class="about-us-box" data-sal="slide-up" data-sal-duration="500" data-sal-easing="ease">
<h2 class="about-us-header">Our history</h2>
<p class="about-us-text">
Welcome to Johnie's, where contemporary flavors meet traditional
culinary techniques to create a truly unique dining experience.
Our menu features an eclectic mix of international cuisine,
blending elements from different cultures to create dishes that
are both familiar and unexpected. Our chef takes pride in using
only the freshest and highest-quality ingredients, sourced from
local and sustainable producers whenever possible. Whether you're
in the mood for sushi with a twist, tacos with a bold twist, or a
hearty bowl of fusion-style ramen, our menu has something for
everyone. Each dish is a work of art, plated beautifully and
bursting with flavor. Our stylish and contemporary dining room is
the perfect setting for an intimate date night, a business lunch,
or a night out with friends. At Johnie's, we believe that dining
should be an adventure. So come on in, grab a seat, and get ready
to embark on a flavor journey like no other.
</p>
<p class="welcome">Welcome,</p>
<p class="sign">Johnie</p>
</article>
</div>
</div>
<section class="menu-section">
<div class="img-box" data-sal="fade" data-sal-duration="500" data-sal-easing="ease">
<img
src="img/support-img.webp"
alt="Dark picture of inside of restaurant"
/>
</div>
<div class="menu-box" data-sal="slide-left" data-sal-delay="500" data-sal-duration="500" data-sal-easing="ease">
<h2 class="menu-title">Our menus</h2>
<a href="lunch.html" class="button menu-name">Lunch Menu</a>
<a href="carte.html" class="button menu-name">A'la carte Menu</a>
<a href="book-a-table.html" class="button cta-book">Book a table</a>
</div>
</section>
<!--###### TESTIMONIAL SECTION #######-->
<section class="testimonial-section">
<div class="testimonial-container">
<div class="testimonials-box">
<h2 class="header-customers">Our customers says:</h2>
<div class="testimonials">
<div class="testimonial" data-sal="slide-up" data-sal-delay="500" data-sal-duration="500" data-sal-easing="ease-out">
<blockquote class="testimonial-text">
Johnie's Restaurant is the perfect place to experience the
best of modern fusion cuisine. The dishes are creative,
flavorful, and beautifully presented. The service is also
excellent, and the atmosphere is cozy and inviting.
</blockquote>
<p class="testimonial-name">- Sarah L.</p>
</div>
<div class="testimonial" data-sal="slide-up" data-sal-delay="750" data-sal-duration="500" data-sal-easing="ease-out">
<blockquote class="testimonial-text">
I was blown away by the food at Johnie's Restaurant. The chefs
have an amazing ability to combine different flavors and
ingredients to create dishes that are both delicious and
unique. The ambiance of the restaurant is also very pleasant
and makes for a great dining experience.
</blockquote>
<p class="testimonial-name">- Michael S.</p>
</div>
<div class="testimonial" data-sal="slide-up" data-sal-delay="1000" data-sal-duration="500" data-sal-easing="ease-out">
<blockquote class="testimonial-text">
Johnie's Restaurant is a must-visit for anyone who loves food.
The fusion cuisine here is truly exceptional, with flavors and
textures that are out of this world. The service is also
top-notch, with friendly and attentive staff who go out of
their way to make sure you have a great experience.
</blockquote>
<p class="testimonial-name">- Melissa T.</p>
</div>
<div class="testimonial" data-sal="slide-up" data-sal-delay="1250" data-sal-duration="500" data-sal-easing="ease-out">
<blockquote class="testimonial-text">
Johnie's Restaurant is hands down one of the best restaurants
I've ever been to. The fusion cuisine here is inventive and
delicious, and the quality of the ingredients is obvious in
every dish. The service is also amazing, with staff who are
knowledgeable and passionate about the food they serve.
</blockquote>
<p class="testimonial-name">- David C.</p>
</div>
</div>
</div>
<!--#### GALLERY SECTION ######-->
<aside class="gallery-box">
<figure class="gallery-item" data-sal="zoom-in" data-sal-delay="150" data-sal-duration="500" data-sal-easing="ease">
<img
src="img/gallery/gallery-1.webp"
alt="Picture of a food - Ramen"
class="gallery-img"
/>
</figure>
<figure class="gallery-item" data-sal="zoom-in" data-sal-delay="300" data-sal-duration="500" data-sal-easing="ease">
<img
src="img/gallery/gallery-2.webp"
alt="Picture of a food - Beef"
class="gallery-img"
/>
</figure>
<figure class="gallery-item" data-sal="zoom-in" data-sal-delay="450" data-sal-duration="500" data-sal-easing="ease">
<img
src="img/gallery/gallery-3.webp"
alt="Picture of a food - Sallad"
class="gallery-img"
/>
</figure>
<figure class="gallery-item" data-sal="zoom-in" data-sal-delay="600" data-sal-duration="500" data-sal-easing="ease">
<img
src="img/gallery/gallery-4.webp"
alt="Picture of a food - Breakfast"
class="gallery-img"
/>
</figure>
<figure class="gallery-item" data-sal="zoom-in" data-sal-delay="750" data-sal-duration="500" data-sal-easing="ease">
<img
src="img/gallery/gallery-5.webp"
alt="Picture of a black woman cooking food"
class="gallery-img"
/>
</figure>
<figure class="gallery-item" data-sal="zoom-in" data-sal-delay="900" data-sal-duration="500" data-sal-easing="ease">
<img
src="img/gallery/gallery-6.webp"
alt="Picture of a food - 2 stews"
class="gallery-img"
/>
</figure>
<figure class="gallery-item" data-sal="zoom-in" data-sal-delay="1050" data-sal-duration="500" data-sal-easing="ease">
<img
src="img/gallery/gallery-7.webp"
alt="Picture of a food - Egg sandwich"
class="gallery-img"
/>
</figure>
<figure class="gallery-item" data-sal="zoom-in" data-sal-delay="1200" data-sal-duration="500" data-sal-easing="ease">
<img
src="img/gallery/gallery-8.webp"
alt="Picture of a food - Jar"
class="gallery-img"
/>
</figure>
<figure class="gallery-item" data-sal="zoom-in" data-sal-delay="1350" data-sal-duration="500" data-sal-easing="ease">
<img
src="img/gallery/gallery-9.webp"
alt="Picture of a food - Extreme high hamburger"
class="gallery-img"
/>
</figure>
</aside>
</div>
</section>
<!--######## FOOTER SECTION ########-->
<footer class="footer-section">
<div class="footer-container">
<div class="social-box">
<div class="logo-box">
<img src="img/logo_crop_dark.png" alt="Logo" class="logo-img" />
</div>
<div class="social-icons-box">
<div class="footer-social-icons">
<a href="https://www.facebook.com/ntiskolan/" target="_blank"
><ion-icon
name="logo-facebook"
class="footer-social-icon"
></ion-icon
></a>
<a href="https://www.instagram.com/ntiskolan/" target="_blank"
><ion-icon
name="logo-instagram"
class="footer-social-icon"
></ion-icon
></a>
<a href="https://twitter.com/ntigymnasiet" target="_blank"
><ion-icon
name="logo-twitter"
class="footer-social-icon"
></ion-icon
></a>
</div>
</div>
</div>
<div class="second-box">
<div class="footer-box">
<h3 class="footer-header">Opening hours:</h3>
<p class="footer-text">Monday - Thursday : 2 PM - 8 PM</p>
<p class="footer-text">Friday - Sunday : 2 PM - 10 PM</p>
</div>
<div class="footer-box">
<h3 class="footer-header">Our menus:</h3>
<p class="footer-text">
<a href="lunch.html" class="footer-link">Lunch Menu</a>
</p>
<p class="footer-text">
<a href="carte.html" class="footer-link">A'la Carte Menu</a>
</p>
</div>
</div>
<div class="find-us-box">
<h3 class="footer-header">Find us:</h3>
<p class="footer-text">
9407 Queens Road <br />
London <br />
E61 0QN
</p>
<a href="find-us.html" class="button-find-us">Find us</a>
</div>
<p class="copyright">Copyright by Izabela Marcinkowska 2023</p>
</div>
<a href="#" class="scroll-to-top">
<ion-icon name="arrow-up"></ion-icon>
</a>
</footer>
</main>
<script
type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
></script>
<script src="https://www.unpkg.com/[email protected]/dist/sal.js"></script>
<script src="js/main.js"></script>
</body>
</html>