Skip to content

Commit a309470

Browse files
clinton74clinton74
committed
meals section
1 parent 3089b86 commit a309470

File tree

3 files changed

+234
-1
lines changed

3 files changed

+234
-1
lines changed

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

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ Paragraph default: 1.6
4141
--- 06 Border radius
4242
4343
Default: 9px
44+
MediumL 11px
4445
4546
4647
--- 07 Whitespace
@@ -151,7 +152,7 @@ body {
151152
border-radius: 9px;
152153
font-weight: 600;
153154

154-
transition: background-color 0.3s;
155+
transition: all 0.3s;
155156
}
156157

157158
.btn--full:link,
@@ -178,6 +179,35 @@ body {
178179
box-shadow: inset 0 0 0 3px #fff;
179180
}
180181

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

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

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

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

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
<link rel="stylesheet" href="css/general.css" />
1616
<link rel="stylesheet" href="css/style.css" />
1717

18+
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
19+
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
20+
1821
<title>Omnifood</title>
1922
</head>
2023
<body>
@@ -128,6 +131,101 @@ <h3 class="heading-tertiary">Receive meals at convenient time</h3>
128131
</div>
129132
</div>
130133
</section>
134+
135+
<section class="section-meals">
136+
<div class="container center-text">
137+
<span class="subheading">Meals</span>
138+
<h2 class="heading-secondary">Omnifood AI chooses from 5,000+ recipes</h2>
139+
</div>
140+
<div class="container grid grid--3-cols margin-bottom-md">
141+
<div class="meal">
142+
<img src="img/meals/meal-1.jpg" class="meal-img" alt="Japanese Gyozas" />
143+
<div class="meal-content">
144+
<div class="meal-tags">
145+
<span class="tag tag--vegetarian">Vegetarian</span>
146+
</div>
147+
148+
<p class="meal-title">Japanese Gyozas</p>
149+
<ul class="meal-attributes">
150+
<li class="meal-attribute">
151+
<ion-icon class="meal-icon" name="flame-outline"></ion-icon
152+
><span><strong>650</strong> calories</span>
153+
</li>
154+
<li class="meal-attribute">
155+
<ion-icon class="meal-icon" name="restaurant-outline"></ion-icon
156+
><span>Nutriscore&reg; <strong>74</strong></span>
157+
</li>
158+
<li class="meal-attribute">
159+
<ion-icon class="meal-icon" name="star-outline"></ion-icon
160+
><span><strong>4.9</strong> rating (537)</span>
161+
</li>
162+
</ul>
163+
</div>
164+
</div>
165+
<div class="meal">
166+
<img src="img/meals/meal-2.jpg" class="meal-img" alt="Avocado Salad" />
167+
<div class="meal-content">
168+
<div class="meal-tags">
169+
<span class="tag tag--vegan">Vegan</span>
170+
<span class="tag tag--paleo">Paleo</span>
171+
</div>
172+
173+
<p class="meal-title">Avocado Salad</p>
174+
<ul class="meal-attributes">
175+
<li class="meal-attribute">
176+
<ion-icon class="meal-icon" name="flame-outline"></ion-icon
177+
><span><strong>400</strong> calories</span>
178+
</li>
179+
<li class="meal-attribute">
180+
<ion-icon class="meal-icon" name="restaurant-outline"></ion-icon
181+
><span>Nutriscore&reg; <strong>92</strong></span>
182+
</li>
183+
<li class="meal-attribute">
184+
<ion-icon class="meal-icon" name="star-outline"></ion-icon
185+
><span><strong>4.8</strong> rating (441)</span>
186+
</li>
187+
</ul>
188+
</div>
189+
</div>
190+
<div class="diets">
191+
<h3 class="heading-tertiary">Works with any diet:</h3>
192+
<ul class="list">
193+
<li class="list-item">
194+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon><span>Vegetarian</span>
195+
</li>
196+
<li class="list-item">
197+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon><span>Vegan</span>
198+
</li>
199+
<li class="list-item">
200+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon><span>Pescatarian</span>
201+
</li>
202+
<li class="list-item">
203+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon><span>Gluten-free</span>
204+
</li>
205+
<li class="list-item">
206+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon
207+
><span>Lactose-free</span>
208+
</li>
209+
<li class="list-item">
210+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon><span>Keto</span>
211+
</li>
212+
<li class="list-item">
213+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon><span>Paleo</span>
214+
</li>
215+
<li class="list-item">
216+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon><span>Low FODMAP</span>
217+
</li>
218+
<li class="list-item">
219+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon
220+
><span>Kid-friendly</span>
221+
</li>
222+
</ul>
223+
</div>
224+
</div>
225+
<div class="container all-recipes">
226+
<a href="#" class="link">See all recipes &rarr;</a>
227+
</div>
228+
</section>
131229
</main>
132230
<footer></footer>
133231
</body>

0 commit comments

Comments
 (0)