Skip to content

Commit ca1744e

Browse files
andreituicuandreituicu
committed
Section 7 - Omnifood project. part 3 - Pricing
1 parent 137ca99 commit ca1744e

File tree

3 files changed

+259
-61
lines changed

3 files changed

+259
-61
lines changed

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,10 @@ body {
193193
row-gap: 9.6rem;
194194
}
195195

196+
.grid:not(:last-child) {
197+
margin-bottom: 9.6rem;
198+
}
199+
196200
.grid--center-v {
197201
align-items: center;
198202
}
@@ -212,3 +216,23 @@ body {
212216
strong {
213217
font-weight: 500;
214218
}
219+
220+
.list {
221+
list-style: none;
222+
display: flex;
223+
flex-direction: column;
224+
gap: 1.6rem;
225+
}
226+
227+
.list-item {
228+
font-size: 1.8rem;
229+
display: flex;
230+
align-items: center;
231+
gap: 1.6rem;
232+
}
233+
234+
.list-icon {
235+
width: 3rem;
236+
height: 3rem;
237+
color: #e67e22;
238+
}

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

Lines changed: 107 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -290,26 +290,6 @@
290290
width: 100%;
291291
}
292292

293-
.diet-list {
294-
list-style: none;
295-
display: flex;
296-
flex-direction: column;
297-
gap: 1.6rem;
298-
}
299-
300-
.diet-list-item {
301-
font-size: 1.8rem;
302-
display: flex;
303-
align-items: center;
304-
gap: 1.6rem;
305-
}
306-
307-
.diet-list-icon {
308-
width: 3rem;
309-
height: 3rem;
310-
color: #e67e22;
311-
}
312-
313293
.all-recipes {
314294
text-align: center;
315295
font-size: 1.8rem;
@@ -375,3 +355,110 @@
375355
.gallery-item img:hover {
376356
transform: scale(1.1);
377357
}
358+
359+
/**********************/
360+
/* Pricing SECTION */
361+
/**********************/
362+
363+
.section-pricing {
364+
padding: 9.6rem 0;
365+
}
366+
367+
.pricing-plan {
368+
border-radius: 11px;
369+
padding: 4.8rem;
370+
width: 75%;
371+
}
372+
373+
.pricing-plan--starter {
374+
justify-self: end;
375+
border: solid 2px #fdf2e9;
376+
padding: 4.6rem;
377+
}
378+
379+
.pricing-plan--complete {
380+
background-color: #fdf2e9;
381+
padding: 4.8rem;
382+
position: relative;
383+
overflow: hidden;
384+
}
385+
386+
.pricing-plan--complete::after {
387+
position: absolute;
388+
content: "Best value";
389+
text-transform: uppercase;
390+
font-size: 1.4rem;
391+
color: #333;
392+
font-weight: 700;
393+
top: 6%;
394+
right: -18%;
395+
background-color: #ffd43b;
396+
padding: 0.8rem 8rem;
397+
transform: rotate(45deg);
398+
}
399+
400+
.plan-header {
401+
text-align: center;
402+
margin-bottom: 4.8rem;
403+
}
404+
405+
.plan-name {
406+
color: #cf711f;
407+
font-weight: 600;
408+
font-size: 2rem;
409+
text-transform: uppercase;
410+
letter-spacing: 0.75px;
411+
margin-bottom: 3.2rem;
412+
}
413+
414+
.plan-price {
415+
font-size: 6.2rem;
416+
font-weight: 600;
417+
color: #333;
418+
margin-bottom: 1.6rem;
419+
}
420+
421+
.plan-sign-up {
422+
text-align: center;
423+
margin-top: 4.8rem;
424+
}
425+
426+
.plan-price span {
427+
font-size: 3rem;
428+
font-weight: 500;
429+
margin-right: 0.8rem;
430+
}
431+
432+
.plan-text {
433+
font-size: 1.6rem;
434+
line-height: 1.6;
435+
color: #6f6f6f;
436+
}
437+
438+
.plan-details {
439+
text-align: center;
440+
font-size: 1.6rem;
441+
line-height: 1.6;
442+
}
443+
444+
.feature-icon {
445+
color: #e67e22;
446+
height: 3.2rem;
447+
width: 3.2rem;
448+
margin-bottom: 3.2rem;
449+
background-color: #fdf2e9;
450+
padding: 1.6rem;
451+
border-radius: 50%;
452+
}
453+
454+
.feature-title {
455+
font-size: 2.4rem;
456+
color: #333;
457+
font-weight: 700;
458+
margin-bottom: 1.6rem;
459+
}
460+
461+
.feature-text {
462+
font-size: 1.8rem;
463+
line-height: 1.8;
464+
}

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

Lines changed: 128 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -235,61 +235,37 @@ <h2 class="heading-secondary">
235235
<div class="diets">
236236
<h3 class="heading-tertiary">Works with any diet:</h3>
237237

238-
<ul class="diet-list">
239-
<li class="diet-list-item">
240-
<ion-icon
241-
class="diet-list-icon"
242-
name="checkmark-outline"
243-
></ion-icon>
238+
<ul class="list">
239+
<li class="list-item">
240+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
244241
<span>Vegan</span>
245242
</li>
246-
<li class="diet-list-item">
247-
<ion-icon
248-
class="diet-list-icon"
249-
name="checkmark-outline"
250-
></ion-icon>
243+
<li class="list-item">
244+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
251245
<span>Pescatarian</span>
252246
</li>
253-
<li class="diet-list-item">
254-
<ion-icon
255-
class="diet-list-icon"
256-
name="checkmark-outline"
257-
></ion-icon>
247+
<li class="list-item">
248+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
258249
<span>Gluten-free</span>
259250
</li>
260-
<li class="diet-list-item">
261-
<ion-icon
262-
class="diet-list-icon"
263-
name="checkmark-outline"
264-
></ion-icon>
251+
<li class="list-item">
252+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
265253
<span>Lactose-free</span>
266254
</li>
267-
<li class="diet-list-item">
268-
<ion-icon
269-
class="diet-list-icon"
270-
name="checkmark-outline"
271-
></ion-icon>
255+
<li class="list-item">
256+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
272257
<span>Keto</span>
273258
</li>
274-
<li class="diet-list-item">
275-
<ion-icon
276-
class="diet-list-icon"
277-
name="checkmark-outline"
278-
></ion-icon>
259+
<li class="list-item">
260+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
279261
<span>Paleo</span>
280262
</li>
281-
<li class="diet-list-item">
282-
<ion-icon
283-
class="diet-list-icon"
284-
name="checkmark-outline"
285-
></ion-icon>
263+
<li class="list-item">
264+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
286265
<span>Low FODMA</span>
287266
</li>
288-
<li class="diet-list-item">
289-
<ion-icon
290-
class="diet-list-icon"
291-
name="checkmark-outline"
292-
></ion-icon>
267+
<li class="list-item">
268+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
293269
<span>Kid-friendly</span>
294270
</li>
295271
</ul>
@@ -458,6 +434,117 @@ <h2 class="heading-secondary">Once you try it, you can't go back</h2>
458434
</figure>
459435
</div>
460436
</section>
437+
438+
<section class="section-pricing">
439+
<div class="container">
440+
<span class="subheading">Meals</span>
441+
<h2 class="heading-secondary">
442+
Eating well without breaking the bank
443+
</h2>
444+
</div>
445+
446+
<div class="container grid grid--2-cols margin-bottom-md">
447+
<div class="pricing-plan pricing-plan--starter">
448+
<header class="plan-header">
449+
<p class="plan-name">Starter</p>
450+
<p class="plan-price"><span>$</span>399</p>
451+
<p class="plan-text">per month. That's just 13$ per meal!</p>
452+
</header>
453+
454+
<ul class="list">
455+
<li class="list-item">
456+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
457+
<span>1 meal per day</span>
458+
</li>
459+
<li class="list-item">
460+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
461+
<span>Order from 11am to 9pm</span>
462+
</li>
463+
<li class="list-item">
464+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
465+
<span>Delivery is free</span>
466+
</li>
467+
<li class="list-item">
468+
<ion-icon class="list-icon" name="close-outline"></ion-icon>
469+
</li>
470+
</ul>
471+
<div class="plan-sign-up">
472+
<a href="#" class="btn btn--full">Start eating well</a>
473+
</div>
474+
</div>
475+
476+
<div class="pricing-plan pricing-plan--complete">
477+
<header class="plan-header">
478+
<p class="plan-name">Complete</p>
479+
<p class="plan-price"><span>$</span>649</p>
480+
<p class="plan-text">per month. That's just 11$ per meal!</p>
481+
</header>
482+
<ul class="list">
483+
<li class="list-item">
484+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
485+
<span><strong>2 meals</strong> per day</span>
486+
</li>
487+
<li class="list-item">
488+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
489+
<span>Order <strong>24/7</strong></span>
490+
</li>
491+
<li class="list-item">
492+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
493+
<span>Delivery is free</span>
494+
</li>
495+
<li class="list-item">
496+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
497+
<span>Get access to latest recipes</span>
498+
</li>
499+
</ul>
500+
<div class="plan-sign-up">
501+
<a href="#" class="btn btn--full">Start eating well</a>
502+
</div>
503+
</div>
504+
</div>
505+
506+
<div class="container grid">
507+
<aside class="plan-details">
508+
Prices include all applicable taxes. You can cancel at any time.
509+
Both plans include the following:
510+
</aside>
511+
</div>
512+
513+
<div class="container grid grid--4-cols">
514+
<div class="feature">
515+
<ion-icon class="feature-icon" name="infinite-outline"></ion-icon>
516+
<p class="feature-title">Never cook again!</p>
517+
<p class="feature-text">
518+
Our subscriptions cover 365 days per year, even including major
519+
holidays.
520+
</p>
521+
</div>
522+
<div class="feature">
523+
<ion-icon class="feature-icon" name="nutrition-outline"></ion-icon>
524+
<p class="feature-title">Never cook again!</p>
525+
<p class="feature-text">
526+
Our cooks only use local, fresh, and organic products to prepare
527+
your meals.
528+
</p>
529+
</div>
530+
<div class="feature">
531+
<ion-icon class="feature-icon" name="leaf-outline"></ion-icon>
532+
<p class="feature-title">Local and organic</p>
533+
<p class="feature-text">
534+
All our partners only use reusable containers to package all your
535+
meals.
536+
</p>
537+
</div>
538+
<div class="feature">
539+
<ion-icon class="feature-icon" name="pause-outline"></ion-icon>
540+
<p class="feature-title">Pause anytime</p>
541+
<p class="feature-text">
542+
Going on vacation? Just pause your subscription, and we refund
543+
unused days.
544+
</p>
545+
</div>
546+
</div>
547+
</section>
461548
</main>
462549
</body>
463550
</html>

0 commit comments

Comments
 (0)