Skip to content

Commit 82e5aba

Browse files
shoaibansari5398shoaibansari5398
committed
how section started
1 parent eb00ca0 commit 82e5aba

File tree

2 files changed

+240
-35
lines changed

2 files changed

+240
-35
lines changed

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

Lines changed: 131 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@
1515
</head>
1616
<body>
1717
<header class="header">
18-
<img class="logo" src="./content/img/omnifood-logo.png" alt="omnifood-logo ">
18+
<img
19+
class="logo"
20+
src="./content/img/omnifood-logo.png"
21+
alt="omnifood-logo "
22+
/>
1923
<nav class="main-nav">
2024
<ul class="main-nav-list">
2125
<li><a class="main-nav-link" href="#">Section 1</a></li>
@@ -27,42 +31,135 @@
2731
</nav>
2832
</header>
2933
<main>
30-
<section class="section-hero">
31-
<div class="hero">
32-
<div class="hero-text-box">
33-
<h1 class="heading-primary">
34-
A healthy meal delivered to your door, every single day
35-
</h1>
36-
<p class="hero-description">
37-
The smart 365-days-per-year food subscription that will make you eat
38-
healthy again. Tailored to your personal tastes and nutritional
39-
needs.
40-
</p>
41-
<a href="#" class="btn btn--full margin-right-sm"
42-
>Start eating well</a
43-
>
44-
<a href="#" class="btn btn--outline">Learn more &darr;</a>
45-
<div class="delivered-meals">
46-
<div class="delivered-imgs">
47-
<img src="./content/img/customers/customer-1.jpg" alt="Customer Image">
48-
<img src="./content/img/customers/customer-2.jpg" alt="Customer Image">
49-
<img src="./content/img/customers/customer-3.jpg" alt="Customer Image">
50-
<img src="./content/img/customers/customer-4.jpg" alt="Customer Image">
51-
<img src="./content/img/customers/customer-5.jpg" alt="Customer Image">
52-
<img src="./content/img/customers/customer-6.jpg" alt="Customer Image">
34+
<section class="section-hero">
35+
<div class="hero">
36+
<div class="hero-text-box">
37+
<h1 class="heading-primary">
38+
A healthy meal delivered to your door, every single day
39+
</h1>
40+
<p class="hero-description">
41+
The smart 365-days-per-year food subscription that will make you
42+
eat healthy again. Tailored to your personal tastes and
43+
nutritional needs.
44+
</p>
45+
<a href="#" class="btn btn--full margin-right-sm"
46+
>Start eating well</a
47+
>
48+
<a href="#" class="btn btn--outline">Learn more &darr;</a>
49+
<div class="delivered-meals">
50+
<div class="delivered-imgs">
51+
<img
52+
src="./content/img/customers/customer-1.jpg"
53+
alt="Customer Image"
54+
/>
55+
<img
56+
src="./content/img/customers/customer-2.jpg"
57+
alt="Customer Image"
58+
/>
59+
<img
60+
src="./content/img/customers/customer-3.jpg"
61+
alt="Customer Image"
62+
/>
63+
<img
64+
src="./content/img/customers/customer-4.jpg"
65+
alt="Customer Image"
66+
/>
67+
<img
68+
src="./content/img/customers/customer-5.jpg"
69+
alt="Customer Image"
70+
/>
71+
<img
72+
src="./content/img/customers/customer-6.jpg"
73+
alt="Customer Image"
74+
/>
75+
</div>
76+
<p class="delivered-text">
77+
<span>250000+</span> meals delivered last year
78+
</p>
5379
</div>
54-
<p class="delivered-text"><span>250000+</span> meals delivered last year</p>
5580
</div>
81+
<div class="hero-img-box">
82+
<img
83+
src="./content/img/hero.png"
84+
class="hero-img"
85+
alt="Woman enjoying food, meals in storage container, and food bowls on a table"
86+
/>
87+
</div>
88+
</div>
89+
</section>
90+
91+
<section class="section-how">
92+
<div class="container">
93+
<span class="subheading">How it works</span>
94+
<h2 class="heading-secondary">
95+
Your daily dose of health in 3 simple steps
96+
</h2>
5697
</div>
57-
<div class="hero-img-box">
58-
<img
59-
src="./content/img/hero.png"
60-
class="hero-img"
61-
alt="Woman enjoying food, meals in storage container, and food bowls on a table"
62-
/>
98+
<div class="container grid grid--2-cols">
99+
<!-- Step 01 -->
100+
<div class="step-text-box">
101+
<p class="step-number">01</p>
102+
<div class="heading-tertiary">
103+
Tell us what you like (and what not)
104+
</div>
105+
<div class="step-description">
106+
Never again waste time
107+
thinking about what to eat! Omnifood AI will create a 100%
108+
personalized weekly meal plan just for you. It makes sure you get
109+
all the nutrients and vitamins you need, no matter what diet you
110+
follow!
111+
</div>
112+
</div>
113+
<div class="step-img-box">
114+
<img
115+
src="./content/img/app/app-screen-1.png"
116+
class="step-img"
117+
alt="iPhone app
118+
preferences selection screen"
119+
/>
120+
</div>
121+
122+
123+
<!-- Step 02 -->
124+
<div class="step-img-box">
125+
<img
126+
src="./content/img/app/app-screen-2.png"
127+
class="step-img"
128+
alt="iPhone app
129+
meal approving plan screen"
130+
/>
131+
</div>
132+
<div class="step-text-box">
133+
<p class="step-number">02</p>
134+
<h3 class="heading-tertiary">Approve your weekly meal plan</h3>
135+
<p class="step-description">
136+
Once per week, approve the meal plan generated for you by Omnifood
137+
AI. You can change ingredients, swap entire meals, or even add
138+
your own recipes.
139+
</p>
140+
</div>
141+
142+
143+
<!-- Step 03 -->
144+
<div class="step-text-box">
145+
<p class="step-number">03</p>
146+
<h3 class="heading-tertiary">Receive meals at convenient time</h3>
147+
<p class="step-description">
148+
Best chefs in town will cook your selected meal every day, and we
149+
will deliver it to your door whenever works best for you. You can
150+
change delivery schedule and address daily!
151+
</p>
152+
</div>
153+
<div class="step-img-box">
154+
<img
155+
src="./content/img/app/app-screen-3.png"
156+
class="step-img"
157+
alt="iPhone app
158+
delivery screen"
159+
/>
160+
</div>
63161
</div>
64-
</div>
65-
</section>
66-
</main>
162+
</section>
163+
</main>
67164
</body>
68165
</html>

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

Lines changed: 109 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,87 @@ body {
1515
color: #555;
1616
}
1717

18+
/* *************************** */
19+
/* REUSABLE COMPONENT */
20+
/* *************************** */
21+
22+
.container{
23+
max-width: 120rem;
24+
padding: 0 3.2rem;
25+
margin: 0 auto;
26+
/* background-color: aqua ; */
27+
}
28+
29+
.grid{
30+
display: grid;
31+
column-gap: 6.4rem;
32+
row-gap: 9.6rem;
33+
34+
}
35+
36+
.grid--2-cols {
37+
grid-template-columns: repeat(2, 1fr);
38+
}
39+
40+
.grid--3-cols {
41+
grid-template-columns: repeat(3, 1fr);
42+
}
43+
44+
.grid--4-cols {
45+
grid-template-columns: repeat(4, 1fr);
46+
}
47+
48+
.grid--5-cols {
49+
grid-template-columns: repeat(5, 1fr);
50+
}
51+
52+
.grid--center-v {
53+
align-items: center;
54+
}
55+
56+
.heading-primary,
57+
.heading-secondary,
58+
.heading-tertiary {
59+
font-weight: 700;
60+
color: #333;
61+
/* color: #45260a; */
62+
/* color: #343a40; */
63+
letter-spacing: -0.5px;
64+
}
65+
66+
.heading-primary {
67+
font-size: 5.2rem;
68+
line-height: 1.05;
69+
margin-bottom: 3.2rem;
70+
}
71+
72+
.heading-secondary {
73+
font-size: 4.4rem;
74+
line-height: 1.2;
75+
margin-bottom: 9.6rem;
76+
}
77+
78+
.heading-tertiary {
79+
font-size: 3rem;
80+
line-height: 1.2;
81+
margin-bottom: 3.2rem;
82+
}
83+
84+
.subheading {
85+
display: block;
86+
font-size: 1.6rem;
87+
font-weight: 500;
88+
color: #cf711f;
89+
text-transform: uppercase;
90+
margin-bottom: 1.6rem;
91+
letter-spacing: 0.75px;
92+
}
93+
94+
95+
/* ************************* */
96+
97+
98+
1899
.section-hero{
19100
background-color: #fdf2e9;
20101
padding: 4.8rem 0 9.6rem 0;
@@ -173,4 +254,31 @@ body {
173254
.main-nav-link.nav-cta:hover,
174255
.main-nav-link.nav-cta:active {
175256
background-color: #cf711f;
176-
}
257+
}
258+
259+
/* HOW IT WORKS */
260+
261+
262+
.section-how {
263+
/* padding: 9.6rem 0; */
264+
}
265+
266+
.step-number {
267+
font-size: 8.6rem;
268+
font-weight: 600;
269+
color: #ddd;
270+
margin-bottom: 1.2rem;
271+
}
272+
273+
.step-description {
274+
font-size: 1.8rem;
275+
line-height: 1.8;
276+
}
277+
278+
.step-img-box {
279+
position: relative;
280+
281+
display: flex;
282+
align-items: center;
283+
justify-content: center;
284+
}

0 commit comments

Comments
 (0)