Skip to content

Commit 2a53350

Browse files
owen-webbowen-webb
committed
section-7: Pricing.
1 parent da13025 commit 2a53350

File tree

3 files changed

+181
-21
lines changed

3 files changed

+181
-21
lines changed

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,10 @@ strong {
106106
row-gap: 9.6rem;
107107
}
108108

109+
.grid:not(:last-child) {
110+
margin-bottom: 9.6rem;
111+
}
112+
109113
.grid--center-v {
110114
align-items: center;
111115
}
@@ -160,6 +164,26 @@ strong {
160164
color: #cf711f;
161165
}
162166

167+
.list {
168+
display: flex;
169+
flex-direction: column;
170+
gap: 1.6rem;
171+
list-style: none;
172+
}
173+
174+
.list-icon {
175+
color: #e67e22;
176+
height: 3rem;
177+
width: 3rem;
178+
}
179+
180+
.list-item {
181+
align-items: center;
182+
display: flex;
183+
font-size: 1.8rem;
184+
gap: 1.6rem;
185+
}
186+
163187
.margin-bottom-md {
164188
margin-bottom: 4.8rem !important;
165189
}

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

Lines changed: 77 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -198,26 +198,6 @@
198198
text-align: center;
199199
}
200200

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-
221201
.meal {
222202
border-radius: 1.1rem;
223203
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
@@ -353,4 +333,80 @@
353333
font-size: 1.8rem;
354334
line-height: 1.8;
355335
margin-bottom: 1.6rem;
356-
}
336+
}
337+
338+
339+
/*** PRICING ***/
340+
341+
.plan-header {
342+
margin-bottom: 4.8rem;
343+
text-align: center;
344+
}
345+
346+
.plan-name {
347+
color: #cf711f;
348+
font-size: 2rem;
349+
font-weight: 600;
350+
letter-spacing: 0.75;
351+
margin-bottom: 3.2rem;
352+
text-transform: uppercase;
353+
}
354+
355+
.plan-price {
356+
color: #333;
357+
font-size: 6.2rem;
358+
font-weight: 600;
359+
margin-bottom: 1.6rem;
360+
}
361+
362+
.plan-price span {
363+
font-size: 3rem;
364+
font-weight: 500;
365+
margin-right: 0.8rem;
366+
}
367+
368+
.plan-sign-up {
369+
margin-top: 4.8rem;
370+
text-align: center;
371+
}
372+
373+
.plan-text {
374+
color: #6f6f6f;
375+
font-size: 1.6rem;
376+
line-height: 1.6;
377+
}
378+
379+
.pricing-plan {
380+
border-radius: 1.1rem;
381+
width: 75%;
382+
}
383+
384+
.pricing-plan--complete {
385+
background-color: #fdf2e9;
386+
padding: 4.8rem;
387+
overflow: hidden;
388+
position: relative;
389+
}
390+
391+
.pricing-plan--complete::after {
392+
background-color: #ffd43b;
393+
content: "Best value";
394+
font-size: 1.4rem;
395+
font-weight: 700;
396+
padding: 0.8rem 8rem;
397+
position: absolute;
398+
right: -18%;
399+
text-transform: uppercase;
400+
transform: rotate(45deg);
401+
top: 6%;
402+
}
403+
404+
.pricing-plan--starter {
405+
border: 2px solid #fdf2e9;
406+
justify-self: end;
407+
padding: 4.6rem;
408+
}
409+
410+
.section-pricing {
411+
padding: 9.6rem 0;
412+
}

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,86 @@ <h2 class="heading-secondary">
331331
</figure>
332332
</div>
333333
</section>
334+
335+
<!-- PRICING -->
336+
<section class="section-pricing">
337+
<div class="container">
338+
<span class="subheading">Pricing</span>
339+
<h2 class="heading-secondary">
340+
Eating well without breaking the bank
341+
</h2>
342+
</div>
343+
344+
<div class="container grid grid--2-cols">
345+
<div class="pricing-plan pricing-plan--starter">
346+
<header class="plan-header">
347+
<p class="plan-name">Starter</p>
348+
<p class="plan-price"><span>$</span>399</p>
349+
<p class="plan-text">per month. That's just $13 per meal!</p>
350+
</header>
351+
<ul class="list">
352+
<li class="list-item">
353+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
354+
<span>1 meal per day</span>
355+
</li>
356+
<li class="list-item">
357+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
358+
<span>Order times from 11am to 9pm</span>
359+
</li>
360+
<li class="list-item">
361+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
362+
<span>Delivery is free</span>
363+
</li>
364+
<li class="list-item">
365+
<ion-icon class="list-icon" name="close-outline"></ion-icon>
366+
</li>
367+
</ul>
368+
<div class="plan-sign-up">
369+
<a href="#" class="btn btn--full">
370+
Start eating well
371+
</a>
372+
</div>
373+
</div>
374+
375+
<div class="pricing-plan pricing-plan--complete">
376+
<header class="plan-header">
377+
<p class="plan-name">Starter</p>
378+
<p class="plan-price"><span>$</span>649</p>
379+
<p class="plan-text">per month. That's just $11 per meal!</p>
380+
</header>
381+
<ul class="list">
382+
<li class="list-item">
383+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
384+
<span><strong>2 meals</strong> per day</span>
385+
</li>
386+
<li class="list-item">
387+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
388+
<span>Order <strong>24/7</strong></span>
389+
</li>
390+
<li class="list-item">
391+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
392+
<span>Delivery is free</span>
393+
</li>
394+
<li class="list-item">
395+
<ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
396+
<span>Get access to latest recipes</span>
397+
</li>
398+
</ul>
399+
<div class="plan-sign-up">
400+
<a href="#" class="btn btn--full">
401+
Start eating well
402+
</a>
403+
</div>
404+
</div>
405+
</div>
406+
407+
<div class="container grid grid--4-cols">
408+
<div></div>
409+
<div></div>
410+
<div></div>
411+
<div></div>
412+
</div>
413+
</section>
334414
</main>
335415
</body>
336416
</html>

0 commit comments

Comments
 (0)