Skip to content

Commit 3693504

Browse files
zangeronimozangeronimo
committed
feat: building the Meal Section
1 parent 37d8cc6 commit 3693504

File tree

3 files changed

+267
-0
lines changed

3 files changed

+267
-0
lines changed

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ Paragraph default: 1.6
3434
3535
--- 04 BORDER-RADIUS
3636
Default 9px
37+
Medium 11px
3738
3839
--- 05 WHITESPACE
3940
@@ -162,6 +163,34 @@ body {
162163
box-shadow: inset 0 0 0 3px #fff;
163164
}
164165

166+
.link:link,
167+
.link:visited {
168+
display: inline-block;
169+
color: #e67e22;
170+
text-decoration: none;
171+
border-bottom: 1px solid currentColor;
172+
padding-bottom: 2px;
173+
transition: all 0.3s;
174+
}
175+
176+
.link:hover,
177+
.link:active {
178+
color: #cf711f;
179+
border-bottom: 1px solid transparent;
180+
}
181+
165182
.margin-right-sm {
166183
margin-right: 1.6rem !important;
167184
}
185+
186+
.margin-bottom-md {
187+
margin-bottom: 4.8rem !important;
188+
}
189+
190+
.center-text {
191+
text-align: center;
192+
}
193+
194+
strong {
195+
font-weight: 500;
196+
}

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,3 +209,110 @@
209209
.step-img {
210210
width: 35%;
211211
}
212+
213+
/*************************************/
214+
/* MEALS SECTION */
215+
/*************************************/
216+
217+
.section-meals {
218+
padding: 9.6rem 0;
219+
}
220+
221+
.meal {
222+
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
223+
border-radius: 11px;
224+
overflow: hidden;
225+
transition: all 0.4s;
226+
}
227+
228+
.meal:hover {
229+
box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06);
230+
transform: translateY(-1.2rem);
231+
}
232+
233+
.meal-tags {
234+
margin-bottom: 1.2rem;
235+
display: flex;
236+
gap: 0.4rem;
237+
}
238+
239+
.tag {
240+
display: inline-block;
241+
padding: 0.4rem 0.8rem;
242+
font-size: 1.2rem;
243+
color: #333;
244+
text-transform: uppercase;
245+
border-radius: 100px;
246+
font-weight: 600;
247+
}
248+
249+
.tag--vegetarian {
250+
background-color: #51cf66;
251+
}
252+
253+
.tag--vegan {
254+
background-color: #94d82d;
255+
}
256+
257+
.tag--paleo {
258+
background-color: #ffd43b;
259+
}
260+
261+
.meal-title {
262+
font-size: 2.4rem;
263+
color: #333;
264+
font-weight: 600;
265+
margin-bottom: 3.2rem;
266+
}
267+
268+
.meal-content {
269+
padding: 3.2rem 4.8rem 4.8rem 4.8rem;
270+
}
271+
272+
.meal-attributes {
273+
list-style: none;
274+
display: flex;
275+
flex-direction: column;
276+
gap: 2rem;
277+
}
278+
279+
.meal-attribute {
280+
font-size: 1.8rem;
281+
282+
display: flex;
283+
align-items: center;
284+
gap: 1.6rem;
285+
}
286+
287+
.meal-icon {
288+
font-size: 2.4rem;
289+
color: #e67e22;
290+
}
291+
292+
.meal-img {
293+
width: 100%;
294+
}
295+
296+
.all-recipes {
297+
text-align: center;
298+
font-size: 1.8rem;
299+
}
300+
301+
.list {
302+
list-style: none;
303+
display: flex;
304+
flex-direction: column;
305+
gap: 1.6rem;
306+
}
307+
308+
.list-item {
309+
font-size: 1.8rem;
310+
display: flex;
311+
align-items: center;
312+
gap: 1.6rem;
313+
}
314+
315+
.list-icon {
316+
font-size: 3rem;
317+
color: #e67e22;
318+
}

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

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,137 @@ <h3 class="heading-tertiary">Receive meals at convenient time</h3>
193193
</div>
194194
</div>
195195
</section>
196+
197+
<section class="section-meals">
198+
<div class="container center-text">
199+
<span class="subheading">Meals</span>
200+
<h2 class="heading-secondary">
201+
Omnifood AI chooses from 5,000+ recipes
202+
</h2>
203+
</div>
204+
205+
<div class="container grid grid--3-cols margin-bottom-md">
206+
<div class="meal">
207+
<img
208+
src="img/meals/meal-1.jpg"
209+
alt="Japonese Gyozas"
210+
class="meal-img"
211+
/>
212+
<div class="meal-content">
213+
<div class="meal-tags">
214+
<span class="tag tag--vegetarian">Vegetarian</span>
215+
</div>
216+
<p class="meal-title">Japonese Gyozas</p>
217+
218+
<ul class="meal-attributes">
219+
<li class="meal-attribute">
220+
<ion-icon class="meal-icon" name="flame-outline"></ion-icon>
221+
<span><strong>650</strong> calories</span>span>
222+
</li>
223+
<li class="meal-attribute">
224+
<ion-icon
225+
class="meal-icon"
226+
name="restaurant-outline"
227+
></ion-icon>
228+
<span>NutriScore &reg; <strong>74</strong></span>
229+
</li>
230+
<li class="meal-attribute">
231+
<ion-icon class="meal-icon" name="star-outline"></ion-icon>
232+
<span><strong>4.9</strong> rating (537)</span>
233+
</li>
234+
</ul>
235+
</div>
236+
</div>
237+
238+
<div class="meal">
239+
<img
240+
src="img/meals/meal-2.jpg"
241+
alt="Avocado Salad"
242+
class="meal-img"
243+
/>
244+
<div class="meal-content">
245+
<div class="meal-tags">
246+
<span class="tag tag--vegan">Vegan</span>
247+
<span class="tag tag--paleo">Paleo</span>
248+
</div>
249+
<p class="meal-title">Avocado Salad</p>
250+
251+
<ul class="meal-attributes">
252+
<li class="meal-attribute">
253+
<ion-icon class="meal-icon" name="flame-outline"></ion-icon>
254+
<span><strong>400</strong> calories</span>span>
255+
</li>
256+
<li class="meal-attribute">
257+
<ion-icon
258+
class="meal-icon"
259+
name="restaurant-outline"
260+
></ion-icon>
261+
<span>NutriScore &reg; <strong>92</strong></span>
262+
</li>
263+
<li class="meal-attribute">
264+
<ion-icon class="meal-icon" name="star-outline"></ion-icon>
265+
<span><strong>4.8</strong> rating (441)</span>
266+
</li>
267+
</ul>
268+
</div>
269+
</div>
270+
271+
<div class="diets">
272+
<h3 class="heading-tertiary">Works with any diet:</h3>
273+
<ul class="list">
274+
<li class="list-item">
275+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
276+
<span>Vegetarian</span>
277+
</li>
278+
<li class="list-item">
279+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
280+
<span>Pescatarian</span>
281+
</li>
282+
<li class="list-item">
283+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
284+
<span>Vegan</span>
285+
</li>
286+
<li class="list-item">
287+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
288+
<span>Gluten-free</span>
289+
</li>
290+
<li class="list-item">
291+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
292+
<span>Lactose-free</span>
293+
</li>
294+
<li class="list-item">
295+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
296+
<span>Keto</span>
297+
</li>
298+
<li class="list-item">
299+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
300+
<span>Paleo</span>
301+
</li>
302+
<li class="list-item">
303+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
304+
<span>Low FODMAP</span>
305+
</li>
306+
<li class="list-item">
307+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
308+
<span>Kid-friendly</span>
309+
</li>
310+
</ul>
311+
</div>
312+
</div>
313+
314+
<div class="container all-recipes">
315+
<a href="#" class="link">See all recipes &rarr;</a>
316+
</div>
317+
</section>
196318
</main>
319+
320+
<script
321+
type="module"
322+
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
323+
></script>
324+
<script
325+
nomodule
326+
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
327+
></script>
197328
</body>
198329
</html>

0 commit comments

Comments
 (0)