generated from JosVerhaar/website-starter-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
235 lines (214 loc) · 11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chef site</title>
<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=Abril+Fatface&family=Lato:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/scss/main.scss">
</head>
<body>
<header class="primary-header | margin-block-start-24">
<img class="logo | mx-auto" src="assets/logo.svg" alt="Chef John Wellington" />
<nav class="primary-navigation | margin-block-start-24">
<ul class="flex-group mx-auto">
<li><a href="#about">About</a></li>
<li><a href="#meals">Meals</a></li>
<li><a href="#testimonials">Testimonials</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero | clr-neutral-100 text-center">
<div class="container">
<h1 class="fs-900 ff-accent margin-block-end-48">Homecooked meals delivered straight to your door</h1>
<div class="flex-group mx-auto">
<button class="button" data-type="accent">Place order</button>
<a href="#about" class="button" data-type="outline">More info</a>
</div>
</div>
</section>
<section class="section" id="about">
<div class="container">
<div class="even-columns">
<div>
<picture>
<source srcset="assets/about.avif" type="image/avif">
<source srcset="assets/about.webp" type="image/webp">
<img class="shift-up box-shadow-1" src="assets/about.jpg" alt="several plates of food seen from
above on a white table, some with figs and basil and others with grapefruit and sliced bananas
with a brown sauce on top">
</picture>
</div>
<div class="flow">
<header class="section-header">
<h2 class="fs-800 ff-accent clr-primary-500">Amazing food without the hassle</h2>
<p class="fs-600 uppercase">We do all the work, so all you have to do is sit back and enjoy</p>
</header>
<p class="lead">It's ready to go</p>
<p>Whether it's for a romantic evening with your significant other or if you're hosting a
large party and need food for a big group, we're here to help!</p>
<p>We can cater to whatever your needs are, and ensure that our delicious food is delivered
at the perfect moment, fresh, hot, and ready to eat exactly when you need it to be there.</p>
</div>
</div>
</div>
</section>
<section class="section | bg-neutral-200 text-center">
<div class="container">
<header class="section-header" data-decoration="true">
<h2 class="fs-800 ff-accent clr-primary-500">We make great food</h2>
<p class="fs-600 uppercase">Cooking is our passion, with quality and freshness being of the utmost importance</p>
</header>
<div class="grid-auto-fit">
<div>
<h3 class="fs-500 fw-bold clr-neutral-900">Fresh ingredients</h3>
<p>We take food seriously, and the first thing to making great food is using fresh ingredients.
if the ingredients don't meet our standard, we don't use them.
</p>
</div>
<div>
<h3 class="fs-500 fw-bold clr-neutral-900">Professional chef</h3>
<p>Chef Wellington is a professionaly trained chef who's worked in top kitchens around the world.</p>
</div>
<div>
<h3 class="fs-500 fw-bold clr-neutral-900">Ready for you</h3>
<p>Stop using services where you have to re-heat your food. We get it to your door ready to eat,
without sacrificing any quality at all.
</p>
</div>
<div>
<h3 class="fs-500 fw-bold clr-neutral-900">Made with love</h3>
<p>Food is our passion, and we infuse that love and passion into every single plate that we
make and deliver straight to your home.
</p>
</div>
</div>
</div>
</section>
<section class="meals section | bg-neutral-900 clr-neutral-100 text-center" id="meals">
<div class="container" data-type="wide">
<header class="section-header" data-decoration="true">
<h2 class="fs-800 ff-accent">Some of our meals</h2>
<p class="fs-600 uppercase">Here are a few of our delicious, home-cooked meals that are sure to please your taste buds.</p>
</header>
<div class="even-columns">
<!-- column 1 -->
<div>
<figure class="interactive-figure">
<picture>
<source srcset="assets/meal-01.avif" type="image/avif">
<source srcset="assets/meal-01.webp" type="image/webp">
<img src="assets/meal-01.jpg" loading="lazy"
alt="A nicely presented plate with a cooked peice of salmon on top of a bed of vegetables, with more vegetables on top of it">
</picture>
<figcaption class="padding-32">
<h3 class="fs-500 fw-bold uppercase">Pan-seared salmon and veges</h3>
<p>A pen-seared salmon filet served on top of a gigant bed of delicious vegetables.</p>
</figcaption>
</figure>
</div>
<!-- column 2 -->
<div>
<figure class="interactive-figure">
<picture>
<source srcset="assets/meal-02.avif" type="image/avif">
<source srcset="assets/meal-02.webp" type="image/webp">
<img src="assets/meal-02.jpg" loading="lazy"
alt="Several steak tacos on a table, along with several limes">
</picture>
<figcaption class="padding-32">
<h3 class="fs-500 fw-bold uppercase">Pan-seared salmon and veges</h3>
<p>A pen-seared salmon filet served on top of a gigant bed of delicious vegetables.</p>
</figcaption>
</figure>
</div>
<!-- column 3 -->
<div>
<figure class="interactive-figure">
<picture>
<source srcset="assets/meal-03.avif" type="image/avif">
<source srcset="assets/meal-03.webp" type="image/webp">
<img src="assets/meal-03.jpg" loading="lazy" alt="Clams being tossed in a pan">
</picture>
<figcaption class="padding-32">
<h3 class="fs-500 fw-bold uppercase">Pan-seared salmon and veges</h3>
<p>A pen-seared salmon filet served on top of a gigant bed of delicious vegetables.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section class="testimonials section | text-center" id="testimonials">
<div class="container" data-type="wide">
<header class="section-header">
<h2 class="fs-800 ff-accent clr-primary-500">What our clients are saying about us</h2>
</header>
<div class="even-columns">
<div class="card | box-shadow-1" data-type="testimonial">
<picture>
<source srcset="assets/testimonial-01.avif" type="image/avif">
<source srcset="assets/testimonial-01.webp" type="image/webp">
<img src="assets/testimonial-01.jpg" alt="A man standing outside, smiling">
</picture>
<div class="card__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas egestas dignissim. Quisque
pretium nisi a rhoncus posuere. Ut posuere mauris nisl, sed consequat orci ultrices ac. Fusce et elit et
nisl eleifend hendrerit. Nulla ac aliquam mauris. Aenean quam lacus, auctor eu lacus.</p>
</div>
<div class="testimonial__footer | padding-16 bg-neutral-200">
<p class="fs-500 clr-primary-500">John Deer</p>
<p>Manager at FoodCo.</p>
</div>
</div>
<div class="card | box-shadow-1" data-type="testimonial">
<picture>
<source srcset="assets/testimonial-02.avif" type="image/avif">
<source srcset="assets/testimonial-02.webp" type="image/webp">
<img src="assets/testimonial-02.jpg" alt="A female standing with her mobile in her hand, smiling">
</picture>
<div class="card__body">
<p>I'm so happy that I found John Wellington! The food is on par with some of the best restaurants
I've ever eaten at, but from the comfort of my own home. Every single time I order, it's mouthwateringly delicious.</p>
</div>
<div class="testimonial__footer | padding-16 bg-neutral-200">
<p class="fs-500 clr-primary-500">Marie Condo</p>
<p>Foodie</p>
</div>
</div>
<div class="card | box-shadow-1" data-type="testimonial">
<picture>
<source srcset="assets/testimonial-03.avif" type="image/avif">
<source srcset="assets/testimonial-03.webp" type="image/webp">
<img src="assets/testimonial-03.jpg" alt="A female eating a sandwich.">
</picture>
<div class="card__body">
<p>From simple meals to some of the most extravagant things I've ever eaten. John and his team always deliver. Every
time I order something new, I just can't wait fot it to be delivered and I know how mouth-wateringly delicious it's
going to be. If you like good food, you have to give it a try!</p>
</div>
<div class="testimonial__footer | padding-16 bg-neutral-200">
<p class="fs-500 clr-primary-500">Sam Reinhert</p>
<p>Good food enthusiast</p>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="primary-footer section | bg-neutral-900 clr-neutral-100 text-center flow">
<div class="container | flow">
<p class="fw-bold">Homecooked mealsdelivered straight to your door</p>
<p>©2022 Persronal Chef Services</p>
<p>555 Boulevard Anywhere, Montreal, Quebec, J1S 1S9 | 123-555-1234</p>
</div>
</footer>
<script type="module" src="/main.js"></script>
</body>
</html>
<!-- npm run dev -> start up the dev-environment -->
<!-- npm run build -> build the site to a dist folder -->