Skip to content

Commit ba2e74f

Browse files
shoaibansari5398shoaibansari5398
committed
Pricing section complete
1 parent f9166ec commit ba2e74f

File tree

2 files changed

+222
-0
lines changed

2 files changed

+222
-0
lines changed

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,6 +453,116 @@ <h2 class="heading-secondary">Once you try it, you can't go back</h2>
453453
</div>
454454
</section>
455455

456+
<section class="section-pricing">
457+
<div class="container">
458+
<span class="subheading">Pricing</span>
459+
<h2 class="heading-secondary">
460+
Eating well without breaking the bank
461+
</h2>
462+
</div>
463+
464+
<div class="container grid grid--2-cols margin-bottom-md">
465+
<div class="princing-plan princing-plan--starter">
466+
<header class="plan-header">
467+
<p class="plan-name">Starter</p>
468+
<p class="plan-price"><span>$</span>399</p>
469+
<p class="plan-text">per month. That's just $13 per meal!</p>
470+
</header>
471+
<ul class="list">
472+
<li class="list-item">
473+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
474+
<span>1 meal per day</span>
475+
</li>
476+
<li class="list-item">
477+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
478+
<span>Order from 11am to 9pm</span>
479+
</li>
480+
<li class="list-item">
481+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
482+
<span>Delivery is free</span>
483+
</li>
484+
<li class="list-item">
485+
<ion-icon class="list-icon" name="close-outline"></ion-icon>
486+
</li>
487+
</ul>
488+
<div class="plan-sing-up">
489+
<a href="#" class="btn btn--full">Start eating well</a>
490+
</div>
491+
</div>
492+
493+
<div class="princing-plan princing-plan--complete">
494+
<header class="plan-header">
495+
<p class="plan-name">Complete</p>
496+
<p class="plan-price"><span>$</span>649</p>
497+
<p class="plan-text">per month. That's just $11 per meal!</p>
498+
</header>
499+
<ul class="list">
500+
<li class="list-item">
501+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
502+
<span><strong>2 meals</strong> per day</span>
503+
</li>
504+
<li class="list-item">
505+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
506+
<span>Order <strong>24/7</strong></span>
507+
</li>
508+
<li class="list-item">
509+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
510+
<span>Delivery is free</span>
511+
</li>
512+
<li class="list-item">
513+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
514+
<span>Get access to latest recipes</span>
515+
</li>
516+
</ul>
517+
<div class="plan-sing-up">
518+
<a href="#" class="btn btn--full">Start eating well</a>
519+
</div>
520+
</div>
521+
</div>
522+
523+
<div class="container grid">
524+
<aside class="plan-details">
525+
Prices include all applicable taxes. You can cancel at any time.
526+
Both plans include the following:
527+
</aside>
528+
</div>
529+
530+
<div class="container grid grid--4-cols">
531+
<div class="feature">
532+
<ion-icon class="feature-icon" name="infinite-outline"></ion-icon>
533+
<p class="feature-title">Never cook again!</p>
534+
<p class="feature-text">
535+
Our subscriptions cover 365 days per year, even including major
536+
holidays.
537+
</p>
538+
</div>
539+
<div class="feature">
540+
<ion-icon class="feature-icon" name="nutrition-outline"></ion-icon>
541+
<p class="feature-title">Local and organic</p>
542+
<p class="feature-text">
543+
Our cooks only use local, fresh, and organic products to prepare
544+
your meals.
545+
</p>
546+
</div>
547+
<div class="feature">
548+
<ion-icon class="feature-icon" name="leaf-outline"></ion-icon>
549+
<p class="feature-title">No waste</p>
550+
<p class="feature-text">
551+
All our partners only use reusable containers to package all your
552+
meals.
553+
</p>
554+
</div>
555+
<div class="feature">
556+
<ion-icon class="feature-icon" name="pause-outline"></ion-icon>
557+
<p class="feature-title">Pause anytime</p>
558+
<p class="feature-text">
559+
Going on vacation? Just pause your subscription, and we refund
560+
unused days.
561+
</p>
562+
</div>
563+
</div>
564+
</section>
565+
456566
</main>
457567
</body>
458568
</html>

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ body {
3232
row-gap: 9.6rem;
3333
}
3434

35+
.grid:not(:last-child){
36+
padding: 9.6rem 0;
37+
}
38+
3539
.grid--2-cols {
3640
grid-template-columns: repeat(2, 1fr);
3741
}
@@ -566,4 +570,112 @@ body {
566570
transform: scale(1.1);
567571
}
568572

573+
/* ******************** */
574+
/* Pricing section */
575+
/* ******************** */
576+
577+
.section-pricing {
578+
padding: 9.6rem 0;
579+
}
580+
581+
.princing-plan {
582+
border-radius: 11px;
583+
584+
width: 75%;
585+
}
586+
587+
.princing-plan--starter {
588+
justify-self: end;
589+
border: 2px solid #fdf2e9;
590+
padding: 4.6rem;
591+
}
592+
593+
.princing-plan--complete {
594+
background-color: #fdf2e9;
595+
padding: 4.8rem;
596+
position: relative;
597+
overflow: hidden;
598+
}
599+
600+
.princing-plan--complete::after {
601+
content: "Best value";
602+
position: absolute;
603+
top: 6%;
604+
right: -18%;
605+
606+
text-transform: uppercase;
607+
font-size: 1.4rem;
608+
font-weight: 700;
609+
color: #333;
610+
background-color: #ffd43b;
611+
padding: 0.8rem 8rem;
612+
transform: rotate(45deg);
613+
}
614+
615+
.plan-header {
616+
text-align: center;
617+
margin-bottom: 4.8rem;
618+
}
619+
620+
.plan-name {
621+
color: #cf711f;
622+
font-weight: 600;
623+
font-size: 2rem;
624+
text-transform: uppercase;
625+
letter-spacing: 0.75;
626+
margin-bottom: 3.2rem;
627+
}
628+
629+
.plan-price {
630+
font-size: 6.2rem;
631+
font-weight: 600;
632+
color: #333;
633+
margin-bottom: 1.6rem;
634+
}
635+
636+
.plan-price span {
637+
font-size: 3rem;
638+
font-weight: 500;
639+
margin-right: 0.8rem;
640+
}
641+
642+
.plan-text {
643+
font-size: 1.6rem;
644+
line-height: 1.6;
645+
color: #6f6f6f;
646+
}
647+
648+
.plan-sing-up {
649+
text-align: center;
650+
margin-top: 4.8rem;
651+
}
652+
653+
.plan-details {
654+
font-size: 1.6rem;
655+
line-height: 1.6;
656+
text-align: center;
657+
}
658+
659+
.feature-icon {
660+
color: #e67e22;
661+
height: 3.2rem;
662+
width: 3.2rem;
663+
background-color: #fdf2e9;
664+
margin-bottom: 3.2rem;
665+
padding: 1.6rem;
666+
border-radius: 50%;
667+
}
668+
669+
.feature-title {
670+
font-size: 2.4rem;
671+
color: #333;
672+
font-weight: 700;
673+
margin-bottom: 1.6rem;
674+
}
675+
676+
.feature-text {
677+
font-size: 1.8rem;
678+
line-height: 1.8;
679+
}
680+
569681

0 commit comments

Comments
 (0)