Skip to content

Commit 59b819e

Browse files
shoaibansari5398shoaibansari5398
committed
Meals section complete
1 parent 165af13 commit 59b819e

File tree

2 files changed

+303
-1
lines changed

2 files changed

+303
-1
lines changed

‎starter/07-Omnifood-Desktop/index.html

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,16 @@
1010
href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"
1111
rel="stylesheet"
1212
/>
13+
14+
<script
15+
type="module"
16+
src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.esm.js"
17+
></script>
18+
<script
19+
nomodule=""
20+
src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.js"
21+
></script>
22+
1323
<link rel="stylesheet" href="style.css" />
1424
<title>Omnifood</title>
1525
</head>
@@ -173,6 +183,126 @@ <h3 class="heading-tertiary">Receive meals at convenient time</h3>
173183
</div>
174184
</div>
175185
</section>
186+
187+
<section class="section-meals">
188+
<div class="container center-text">
189+
<span class="subheading">Meals</span>
190+
<h2 class="heading-secondary">
191+
Omnifood AI chooses from 5,000+ recipes
192+
</h2>
193+
</div>
194+
195+
<div class="container grid grid--3-cols margin-bottom-md">
196+
<div class="meal">
197+
<img
198+
src="./content/img/meals/meal-1.jpg"
199+
class="meal-img"
200+
alt="Japanese Gyozas"
201+
/>
202+
<div class="meal-content">
203+
<div class="meal-tags">
204+
<span class="tag tag--vegetarian">Vegetarian</span>
205+
</div>
206+
<p class="meal-title">Japanese Gyozas</p>
207+
<ul class="meal-attributes">
208+
<li class="meal-attribute">
209+
<ion-icon class="meal-icon" name="flame-outline"></ion-icon>
210+
<span><strong>650</strong> calories</span>
211+
</li>
212+
<li class="meal-attribute">
213+
<ion-icon
214+
class="meal-icon"
215+
name="restaurant-outline"
216+
></ion-icon>
217+
<span>NutriScore &reg; <strong>74</strong></span>
218+
</li>
219+
<li class="meal-attribute">
220+
<ion-icon class="meal-icon" name="star-outline"></ion-icon>
221+
<span><strong>4.9</strong> rating (537)</span>
222+
</li>
223+
</ul>
224+
</div>
225+
</div>
226+
227+
<div class="meal">
228+
<img
229+
src="./content/img/meals/meal-2.jpg"
230+
class="meal-img"
231+
alt="Avocado Salad"
232+
/>
233+
<div class="meal-content">
234+
<div class="meal-tags">
235+
<span class="tag tag--vegan">Vegan</span>
236+
<span class="tag tag--paleo">Paleo</span>
237+
</div>
238+
<p class="meal-title">Avocado Salad</p>
239+
<ul class="meal-attributes">
240+
<li class="meal-attribute">
241+
<ion-icon class="meal-icon" name="flame-outline"></ion-icon>
242+
<span><strong>400</strong> calories</span>
243+
</li>
244+
<li class="meal-attribute">
245+
<ion-icon
246+
class="meal-icon"
247+
name="restaurant-outline"
248+
></ion-icon>
249+
<span>NutriScore &reg; <strong>92</strong></span>
250+
</li>
251+
<li class="meal-attribute">
252+
<ion-icon class="meal-icon" name="star-outline"></ion-icon>
253+
<span><strong>4.8</strong> rating (441)</span>
254+
</li>
255+
</ul>
256+
</div>
257+
</div>
258+
259+
<div class="diets">
260+
<h3 class="heading-tertiary">Works with any diet:</h3>
261+
<ul class="list">
262+
<li class="list-item">
263+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
264+
<span>Vegetarian</span>
265+
</li>
266+
<li class="list-item">
267+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
268+
<span>Vegan</span>
269+
</li>
270+
<li class="list-item">
271+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
272+
<span>Pescatarian</span>
273+
</li>
274+
<li class="list-item">
275+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
276+
<span>Gluten-free</span>
277+
</li>
278+
<li class="list-item">
279+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
280+
<span>Lactose-free</span>
281+
</li>
282+
<li class="list-item">
283+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
284+
<span>Keto</span>
285+
</li>
286+
<li class="list-item">
287+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
288+
<span>Paleo</span>
289+
</li>
290+
<li class="list-item">
291+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
292+
<span>Low FODMAP</span>
293+
</li>
294+
<li class="list-item">
295+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
296+
<span>Kid-friendly</span>
297+
</li>
298+
</ul>
299+
</div>
300+
</div>
301+
302+
<div class="container all-recipes">
303+
<a href="#" class="link">See all recipes &rarr;</a>
304+
</div>
305+
</section>
176306
</main>
177307
</body>
178308
</html>

‎starter/07-Omnifood-Desktop/style.css

Lines changed: 173 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -335,4 +335,176 @@ body {
335335
height: 3.2rem;
336336
filter: brightness(0);
337337
opacity: 60%;
338-
}
338+
}
339+
340+
/* ********************* */
341+
/* Meals */
342+
/* ********************* */
343+
344+
.section-how {
345+
padding: 9.6rem 0;
346+
}
347+
348+
.step-number {
349+
font-size: 8.6rem;
350+
font-weight: 600;
351+
color: #ddd;
352+
margin-bottom: 1.2rem;
353+
}
354+
355+
.step-description {
356+
font-size: 1.8rem;
357+
line-height: 1.8;
358+
}
359+
360+
.step-img-box {
361+
position: relative;
362+
363+
display: flex;
364+
align-items: center;
365+
justify-content: center;
366+
}
367+
368+
.step-img-box::before,
369+
.step-img-box::after {
370+
content: "";
371+
display: block;
372+
border-radius: 50%;
373+
position: absolute;
374+
top: 50%;
375+
left: 50%;
376+
transform: translate(-50%, -50%);
377+
}
378+
379+
.step-img-box::before {
380+
width: 60%;
381+
/* height: 60%; */
382+
383+
/* 60% of parent's width */
384+
padding-bottom: 60%;
385+
386+
background-color: #fdf2e9;
387+
z-index: -2;
388+
}
389+
390+
.step-img-box::after {
391+
width: 45%;
392+
padding-bottom: 45%;
393+
background-color: #fae5d3;
394+
z-index: -1;
395+
}
396+
397+
.step-img {
398+
width: 35%;
399+
/* z-index: 10; */
400+
}
401+
402+
/**************************/
403+
/* MEALS SECTION */
404+
/**************************/
405+
406+
.section-meals {
407+
padding: 9.6rem 0;
408+
}
409+
410+
.meal {
411+
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
412+
border-radius: 11px;
413+
overflow: hidden;
414+
transition: all 0.4s;
415+
}
416+
417+
.meal:hover {
418+
transform: translateY(-1.2rem);
419+
box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06);
420+
}
421+
422+
.meal-content {
423+
padding: 3.2rem 4.8rem 4.8rem 4.8rem;
424+
}
425+
426+
.meal-tags {
427+
margin-bottom: 1.2rem;
428+
display: flex;
429+
gap: 0.4rem;
430+
}
431+
432+
.tag {
433+
display: inline-block;
434+
padding: 0.4rem 0.8rem;
435+
font-size: 1.2rem;
436+
text-transform: uppercase;
437+
color: #333;
438+
border-radius: 100px;
439+
font-weight: 600;
440+
}
441+
442+
.tag--vegetarian {
443+
background-color: #51cf66;
444+
}
445+
.tag--vegan {
446+
background-color: #94d82d;
447+
}
448+
.tag--paleo {
449+
background-color: #ffd43b;
450+
}
451+
452+
.meal-title {
453+
font-size: 2.4rem;
454+
color: #333;
455+
font-weight: 600;
456+
margin-bottom: 3.2rem;
457+
}
458+
459+
.meal-attributes {
460+
list-style: none;
461+
display: flex;
462+
flex-direction: column;
463+
gap: 2rem;
464+
}
465+
466+
.meal-attribute {
467+
font-size: 1.8rem;
468+
display: flex;
469+
align-items: center;
470+
gap: 1.6rem;
471+
}
472+
473+
.meal-icon {
474+
height: 2.4rem;
475+
width: 2.4rem;
476+
color: #e67e22;
477+
}
478+
479+
.meal-img {
480+
width: 100%;
481+
}
482+
483+
.all-recipes {
484+
text-align: center;
485+
font-size: 1.8rem;
486+
}
487+
488+
.list{
489+
list-style: none;
490+
display:flex ;
491+
flex-direction: column;
492+
gap: 1.6rem;
493+
}
494+
495+
.list-item{
496+
font-size: 1.8rem;
497+
display: flex;
498+
align-items: center;
499+
gap: 1.6rem;
500+
501+
}
502+
503+
.list-icon{
504+
width: 3rem;
505+
height: 3rem;
506+
color: #e67e22;
507+
}
508+
509+
510+

0 commit comments

Comments
 (0)