Skip to content

Commit 028b855

Browse files
owen-webbowen-webb
committed
section-7: Meals
1 parent 92b3d87 commit 028b855

File tree

3 files changed

+247
-1
lines changed

3 files changed

+247
-1
lines changed

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

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,18 @@ body {
5757
line-height: 1;
5858
}
5959

60+
strong {
61+
font-weight: 500;
62+
}
63+
6064
.btn:link, .btn:visited {
6165
border-radius: .9rem;
6266
color: #fff;
6367
display: inline-block;
6468
font-size: 2rem;
6569
padding: 1.6rem 3.2rem;
6670
text-decoration: none;
67-
transition: background-color 300ms;
71+
transition: all 300ms;
6872
}
6973

7074
.btn--full:link, .btn--full:visited {
@@ -86,6 +90,10 @@ body {
8690
box-shadow: inset 0 0 0 .3rem #fff;
8791
}
8892

93+
.center-text {
94+
text-align: center;
95+
}
96+
8997
.container {
9098
margin: 0 auto;
9199
max-width: 120rem;
@@ -138,6 +146,24 @@ body {
138146
margin-bottom: 3.2rem;
139147
}
140148

149+
.link:link, .link:visited {
150+
border-bottom: 1px solid currentColor;
151+
color: #e67e22;
152+
display: inline-block;
153+
padding-bottom: 2px;
154+
text-decoration: none;
155+
transition: all 300ms;
156+
}
157+
158+
.link:hover, .link:active {
159+
border-bottom: 1px solid transparent;
160+
color: #cf711f;
161+
}
162+
163+
.margin-bottom-md {
164+
margin-bottom: 4.8rem !important;
165+
}
166+
141167
.margin-right-sm {
142168
margin-right: 1.6rem !important;
143169
}

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,3 +189,110 @@
189189
font-weight: 600;
190190
margin-bottom: 1.2rem;
191191
}
192+
193+
194+
/* MEALS */
195+
196+
.all-recipes {
197+
font-size: 1.8rem;
198+
text-align: center;
199+
}
200+
201+
.list {
202+
display: flex;
203+
flex-direction: column;
204+
gap: 1.6rem;
205+
list-style: none;
206+
}
207+
208+
.list-icon {
209+
color: #e67e22;
210+
height: 3rem;
211+
width: 3rem;
212+
}
213+
214+
.list-item {
215+
align-items: center;
216+
display: flex;
217+
font-size: 1.8rem;
218+
gap: 1.6rem;
219+
}
220+
221+
.meal {
222+
border-radius: 1.1rem;
223+
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
224+
overflow: hidden;
225+
transition: all 400ms;
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-attribute {
234+
align-items: center;
235+
display: flex;
236+
font-size: 1.8rem;
237+
gap: 1.6rem;
238+
}
239+
240+
.meal-attributes {
241+
display: flex;
242+
flex-direction: column;
243+
gap: 2rem;
244+
list-style: none;
245+
}
246+
247+
.meal-content {
248+
padding: 3.2rem 4.8rem 4.8rem 4.8rem;
249+
}
250+
251+
.meal-icon {
252+
color: #e67e22;
253+
height: 2.4rem;
254+
width: 2.4rem;
255+
}
256+
257+
.meal-img {
258+
width: 100%;
259+
}
260+
261+
.meal-tags {
262+
display: flex;
263+
gap: 0.4rem;
264+
margin-bottom: 1.2rem;
265+
}
266+
267+
.meal-title {
268+
color: #333;
269+
font-size: 2.4rem;
270+
font-weight: 600;
271+
margin-bottom: 3.2rem;
272+
}
273+
274+
.section-meals {
275+
padding: 9.6rem 0;
276+
}
277+
278+
.tag {
279+
border-radius: 10rem;
280+
color: #333;
281+
display: inline-block;
282+
font-size: 1.2rem;
283+
font-weight: 600;
284+
padding: 0.4rem 0.8rem;
285+
text-transform: uppercase;
286+
}
287+
288+
.tag--paleo {
289+
background-color: #ffd43b;
290+
}
291+
292+
.tag--vegan {
293+
background-color: #94d82d;
294+
}
295+
296+
.tag--vegetarian {
297+
background-color: #51cf66;
298+
}

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

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313

1414
<link rel="stylesheet" href="css/general.css" />
1515
<link rel="stylesheet" href="css/style.css" />
16+
17+
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
18+
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
1619
</head>
1720

1821
<body>
@@ -65,6 +68,7 @@ <h1 class="heading-primary">
6568
</div>
6669
</section>
6770

71+
6872
<!-- FEATURED IN -->
6973
<section class="section-featured">
7074
<div class="container">
@@ -81,6 +85,7 @@ <h2 class="heading-featured-in">
8185
</div>
8286
</section>
8387

88+
8489
<!-- HOW IT WORKS -->
8590
<section class="section-how">
8691
<div class="container">
@@ -132,6 +137,114 @@ <h3 class="heading-tertiary">
132137
</div>
133138
</div>
134139
</section>
140+
141+
142+
<!-- MEALS -->
143+
<section class="section-meals">
144+
<div class="container center-text">
145+
<span class="subheading">Meals</span>
146+
<h2 class="heading-secondary">
147+
Omnifood AI chooses from 5,000+ recipes
148+
</h2>
149+
</div>
150+
151+
<div class="container grid grid--3-cols margin-bottom-md">
152+
<div class="meal">
153+
<img src="img/meals/meal-1.jpg" alt="Japanese gyozas." class="meal-img" />
154+
<div class="meal-content">
155+
<div class="meal-tags">
156+
<span class="tag tag--vegetarian">Vegetarian</span>
157+
</div>
158+
<p class="meal-title">Japanese Gyozas</p>
159+
<ul class="meal-attributes">
160+
<li class="meal-attribute">
161+
<ion-icon class="meal-icon" name="flame-outline"></ion-icon>
162+
<span><strong>650</strong> calories</span>
163+
</li>
164+
<li class="meal-attribute">
165+
<ion-icon class="meal-icon" name="restaurant-outline"></ion-icon>
166+
<span>NutriScore &reg; <strong>74</strong></span>
167+
</li>
168+
<li class="meal-attribute">
169+
<ion-icon class="meal-icon" name="star-outline"></ion-icon>
170+
<span><strong>4.9</strong> rating (537)</span>
171+
</li>
172+
</ul>
173+
</div>
174+
</div>
175+
176+
<div class="meal">
177+
<img src="img/meals/meal-2.jpg" alt="Avocado salad." class="meal-img" />
178+
<div class="meal-content">
179+
<div class="meal-tags">
180+
<span class="tag tag--vegan">Vegan</span>
181+
<span class="tag tag--paleo">Paleo</span>
182+
</div>
183+
<p class="meal-title">Avocado Salad</p>
184+
<ul class="meal-attributes">
185+
<li class="meal-attribute">
186+
<ion-icon class="meal-icon" name="flame-outline"></ion-icon>
187+
<span><strong>400</strong> calories</span>
188+
</li>
189+
<li class="meal-attribute">
190+
<ion-icon class="meal-icon" name="restaurant-outline"></ion-icon>
191+
<span>NutriScore &reg; <strong>92</strong></span>
192+
</li>
193+
<li class="meal-attribute">
194+
<ion-icon class="meal-icon" name="star-outline"></ion-icon>
195+
<span><strong>4.8</strong> rating (441)</span>
196+
</li>
197+
</ul>
198+
</div>
199+
</div>
200+
201+
<div class="diets">
202+
<h3 class="heading-tertiary">Works with any diet:</h3>
203+
<ul class="list">
204+
<li class="list-item">
205+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
206+
<span>Vegetarian</span>
207+
</li>
208+
<li class="list-item">
209+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
210+
<span>Vegan</span>
211+
</li>
212+
<li class="list-item">
213+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
214+
<span>Pescatarian</span>
215+
</li>
216+
<li class="list-item">
217+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
218+
<span>Gluten-free</span>
219+
</li>
220+
<li class="list-item">
221+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
222+
<span>Lactose-free</span>
223+
</li>
224+
<li class="list-item">
225+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
226+
<span>Keto</span>
227+
</li>
228+
<li class="list-item">
229+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
230+
<span>Paleo</span>
231+
</li>
232+
<li class="list-item">
233+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
234+
<span>Low FODMAP</span>
235+
</li>
236+
<li class="list-item">
237+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
238+
<span>Kid-friendly</span>
239+
</li>
240+
</ul>
241+
</div>
242+
</div>
243+
244+
<div class="container all-recipes">
245+
<a href="#" class="link">See all recipes &rarr;</a>
246+
</div>
247+
</section>
135248
</main>
136249
</body>
137250
</html>

0 commit comments

Comments
 (0)