Skip to content

Commit 5bca439

Browse files
quechauquechau
committed
Add meals section.
1 parent 13bb215 commit 5bca439

File tree

3 files changed

+269
-1
lines changed

3 files changed

+269
-1
lines changed

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

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ Paragraph default: 1.6
3939
--- 06 BORDER-RADIUS
4040
4141
Default: 9px
42+
Medium: 11px
4243
4344
--- 07 WHITESPACE
4445
SPACING SYSTEM (px)
@@ -148,7 +149,8 @@ body {
148149
border-radius: 9px;
149150

150151
/* Put transition on original "state" */
151-
transition: background-color 0.3s;
152+
/* transition: background-color 0.3s; */
153+
transition: all 0.3s;
152154
}
153155

154156
.btn--full:link,
@@ -178,6 +180,35 @@ body {
178180
box-shadow: inset 0 0 0 3px #fff;
179181
}
180182

183+
.link:link,
184+
.link:visited {
185+
display: inline-block;
186+
color: #e67e22;
187+
text-decoration: none;
188+
border-bottom: 1px solid currentColor;
189+
padding-bottom: 2px;
190+
transition: all 0.3;
191+
}
192+
193+
.link:hover,
194+
.link:active {
195+
color: #cf711f;
196+
border-bottom: 1px solid transparent;
197+
}
198+
199+
/* HELPER/SETTINGS CLASSES */
181200
.margin-right-sm {
182201
margin-right: 1.6rem !important;
183202
}
203+
204+
.margin-bottom-md {
205+
margin-bottom: 4.8rem !important;
206+
}
207+
208+
.center-text {
209+
text-align: center;
210+
}
211+
212+
strong {
213+
font-weight: 500;
214+
}

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

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

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

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,16 @@
1313
<link rel="stylesheet" href="css/general.css" />
1414
<link rel="stylesheet" href="css/style.css" />
1515

16+
<!-- Inject ioncions -->
17+
<script
18+
type="module"
19+
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
20+
></script>
21+
<script
22+
nomodule
23+
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
24+
></script>
25+
1626
<title>Omnifood</title>
1727
</head>
1828
<body>
@@ -157,6 +167,126 @@ <h3 class="heading-tertiary">Receive meals at convenient time:</h3>
157167
</div>
158168
</div>
159169
</section>
170+
171+
<!-- MEALs SECTION -->
172+
<section class="section-meals">
173+
<div class="container center-text">
174+
<span class="subheading">Meals</span>
175+
<h2 class="heading-secondary">
176+
Omnifood AI chooses from 5,000+ recipes
177+
</h2>
178+
</div>
179+
180+
<div class="container grid grid--3-cols margin-bottom-md">
181+
<div class="meal">
182+
<img
183+
src="img/meals/meal-1.jpg"
184+
class="meal-img"
185+
alt="Japanese Gyozas"
186+
/>
187+
<div class="meal-content">
188+
<div class="meal-tags">
189+
<span class="tag tag--vegetarian">Vegetarian</span>
190+
</div>
191+
<p class="meal-tittle">Japanese Gyozas</p>
192+
<ul class="meal-attributes">
193+
<li class="meal-attribute">
194+
<ion-icon class="meal-icon" name="flame-outline"></ion-icon>
195+
<span><strong>650</strong> calories</span>
196+
</li>
197+
<li class="meal-attribute">
198+
<ion-icon
199+
class="meal-icon"
200+
name="restaurant-outline"
201+
></ion-icon>
202+
<span>NutriScore &reg; <strong>74</strong></span>
203+
</li>
204+
<li class="meal-attribute">
205+
<ion-icon class="meal-icon" name="star-outline"></ion-icon>
206+
<span><strong>4.9</strong> rating (537)</span>
207+
</li>
208+
</ul>
209+
</div>
210+
</div>
211+
212+
<div class="meal">
213+
<img
214+
src="img/meals/meal-2.jpg"
215+
class="meal-img"
216+
alt="Avocado Salad"
217+
/>
218+
<div class="meal-content">
219+
<div class="meal-tags">
220+
<span class="tag tag--vegan">Vegan</span>
221+
<span class="tag tag--paleo">Paleo</span>
222+
</div>
223+
<p class="meal-tittle">Avocado Salad</p>
224+
<ul class="meal-attributes">
225+
<li class="meal-attribute">
226+
<ion-icon class="meal-icon" name="flame-outline"></ion-icon>
227+
<span><strong>400</strong> calories</span>
228+
</li>
229+
<li class="meal-attribute">
230+
<ion-icon
231+
class="meal-icon"
232+
name="restaurant-outline"
233+
></ion-icon>
234+
<span>NutriScore &reg; <strong>92</strong></span>
235+
</li>
236+
<li class="meal-attribute">
237+
<ion-icon class="meal-icon" name="star-outline"></ion-icon>
238+
<span><strong>4.8</strong> rating (441)</span>
239+
</li>
240+
</ul>
241+
</div>
242+
</div>
243+
<div class="diets">
244+
<h3 class="heading-tertiary">Works with any diet</h3>
245+
<ul class="list">
246+
<li class="list-item">
247+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon
248+
><span>Vegetarian</span>
249+
</li>
250+
<li class="list-item">
251+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon
252+
><span>Vegan</span>
253+
</li>
254+
<li class="list-item">
255+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon
256+
><span>Pescatarian</span>
257+
</li>
258+
<li class="list-item">
259+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon
260+
><span>Gluten-free</span>
261+
</li>
262+
<li class="list-item">
263+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon
264+
><span>Lactose-free</span>
265+
</li>
266+
<li class="list-item">
267+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon
268+
><span>Keto</span>
269+
</li>
270+
<li class="list-item">
271+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon
272+
><span>Paleo</span>
273+
</li>
274+
<li class="list-item">
275+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon
276+
><span>Low FODMAP</span>
277+
</li>
278+
<li class="list-item">
279+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon
280+
><span>Kid-friendly</span>
281+
</li>
282+
</ul>
283+
</div>
284+
</div>
285+
286+
<div class="container all-recipes">
287+
<a href="#" class="link">See all recipes &rarr;</a>
288+
</div>
289+
</section>
160290
</main>
161291
</body>
162292
</html>

0 commit comments

Comments
 (0)