Skip to content

Commit a011ba8

Browse files
N0sBaN0sBa
committed
Update
1 parent 3c9c17b commit a011ba8

File tree

4 files changed

+456
-56
lines changed

4 files changed

+456
-56
lines changed

‎.DS_Store

6 KB
Binary file not shown.

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

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
z/*****************************************/
2+
/************** GENERAL *************/
3+
/*****************************************/
4+
5+
* {
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
}
10+
11+
html {
12+
font-size: 62.5%;
13+
}
14+
15+
body {
16+
font-family: "Rubik", sans-serif;
17+
font-weight: 400;
18+
color: #555;
19+
line-height: 1;
20+
}
21+
22+
.container {
23+
max-width: 120rem;
24+
padding: 0 3.2rem;
25+
margin: 0 auto;
26+
}
27+
28+
/* FLEX */
29+
.flex {
30+
display: flex;
31+
}
32+
33+
.justify-content--space-between {
34+
justify-content: space-between;
35+
}
36+
37+
.align-item--center {
38+
align-items: center;
39+
}
40+
41+
/* GRID */
42+
.grid {
43+
display: grid;
44+
column-gap: 4.8rem;
45+
row-gap: 9.6rem;
46+
}
47+
48+
.grid--center-v {
49+
align-items: center;
50+
}
51+
52+
.grid--2-cols {
53+
grid-template-columns: repeat(2, 1fr);
54+
}
55+
56+
.grid--3-cols {
57+
grid-template-columns: repeat(3, 1fr);
58+
}
59+
60+
.grid--4-cols {
61+
grid-template-columns: repeat(4, 1fr);
62+
}
63+
64+
.gap-sm {
65+
gap: 1.6rem;
66+
}
67+
68+
.gap-md {
69+
gap: 2.4rem;
70+
}
71+
72+
.gap-semi-lg {
73+
gap: 4.4rem;
74+
}
75+
76+
.gap-lg {
77+
gap: 9.6rem;
78+
}
79+
80+
/* HEADING */
81+
.heading-primary,
82+
.heading-secondary {
83+
font-weight: 600;
84+
letter-spacing: -0.25px;
85+
}
86+
87+
.heading-primary {
88+
font-size: 5.2rem;
89+
line-height: 1.05;
90+
}
91+
92+
.heading-secondary {
93+
font-size: 4.4rem;
94+
line-height: 1.2;
95+
margin-bottom: 9.6rem;
96+
}
97+
98+
.subheading {
99+
display: block;
100+
font-size: 1.6rem;
101+
font-weight: 500;
102+
text-transform: uppercase;
103+
margin-bottom: 1.6rem;
104+
letter-spacing: 0.75px;
105+
}
106+
107+
.heading-tertiary {
108+
font-size: 3.6rem;
109+
list-style: 1.2;
110+
margin-bottom: 3.2rem;
111+
}
112+
113+
.background-primary {
114+
background-color: #e67e22;
115+
}
116+
117+
.background-primary-shade {
118+
background-color: #cf711f;
119+
}
120+
121+
.background-tints--0 {
122+
background-color: #fdf2e9;
123+
}
124+
125+
.background-tints--1 {
126+
background-color: #fff;
127+
}
128+
129+
.background-shade {
130+
131+
}
132+
133+
.color-primary {
134+
color: #555;
135+
}
136+
137+
.color-tints {
138+
139+
}
140+
141+
.color-shade {
142+
color: #333;
143+
}
144+
145+
.color--background-primary {
146+
color: #e67e22;
147+
}
148+
149+
.color--background-primary-shade {
150+
color: #cf711f;
151+
}
152+
153+
.color--background-tints {
154+
color: #fdf2e9;
155+
}
156+
157+
.btn:link,
158+
.btn:visited {
159+
display: inline-block;
160+
border-radius: 0.8rem;
161+
text-decoration: none;
162+
font-weight: 500;
163+
font-size: 1.6rem;
164+
transition: background-color 0.3s;
165+
}
166+
167+
.btn-padding-sm {
168+
padding: 1.6rem 3.2rem;
169+
}
170+
171+
.margin-right-sm {
172+
margin-right: 1.6rem;
173+
}
174+
175+
.margin-left-sm {
176+
margin-left: 1.6rem;
177+
}
178+
179+
.margin-top-sm {
180+
margin-top: 1.6rem;
181+
}
182+
183+
.margin-top-med {
184+
margin-top: 3.2rem;
185+
}
186+
187+
.margin-top-semi-lg {
188+
margin-top: 4.4rem;
189+
}
190+
191+
.margin-top-lg {
192+
margin-top: 5.2rem;
193+
}
194+
195+
.margin-bottom-sm {
196+
margin-bottom: 1.6rem;
197+
}

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

Lines changed: 121 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,134 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
78
<title>Omnifood</title>
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">
12+
13+
<link rel="stylesheet" href="genreral.css">
814
<link rel="stylesheet" href="style.css">
915
</head>
16+
1017
<body>
11-
<section class="hero-section">
12-
<div class="hero-information">
13-
<h1>A healthy meal delivered to your door, every single day</h1>
14-
<p>The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs. We have delivered 250,000+ meals last year!</p>
15-
<div class="hero-cta">
16-
<a class="btn btn-main" href="#">Eating clean now</a>
17-
<a class="btn btn-sub" href="#">More information</a>
18-
</div>
18+
<header class="background-tints--0 header">
19+
<div class="container flex justify-content--space-between align-item--center color-shade">
20+
<img class="logo" src="content/img/omnifood-logo.png" alt="Omnifood logo">
21+
<nav class="main-nav">
22+
<ul class="main-nav-list flex align-item--center gap-sm">
23+
<li>
24+
<a class="main-nav-link" href="#">Section 1</a>
25+
</li>
26+
<li>
27+
<a class="main-nav-link" href="#">Section 2</a>
28+
</li>
29+
<li>
30+
<a class="main-nav-link" href="#">Section 3</a>
31+
</li>
32+
<li>
33+
<a class="main-nav-link" href="#">Section 4</a>
34+
</li>
35+
<li>
36+
<a class="main-nav-link main-nav-link-active" href="#">Section 5</a>
37+
</li>
38+
</ul>
39+
</nav>
1940
</div>
20-
<img class="hero-image" src="content/img/hero.png" alt="eating">
21-
</section>
41+
</header>
42+
<main>
43+
<section class="background-tints--0 hero">
44+
<div class="container grid grid--2-cols gap-lg color-shade">
45+
<div class="hero-text-box">
46+
<h1 class="heading-primary">
47+
A healthy meal delivered to your door, every single day
48+
</h1>
49+
<p class="hero-text margin-top-sm">
50+
The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to
51+
your
52+
personal tastes and nutritional needs.
53+
</p>
54+
<div class="margin-top-med">
55+
<a class="btn hero-btn-main background-primary btn-padding-sm color--background-tints margin-right-sm"
56+
href="#">Start earing well</a>
57+
<a class="btn hero-btn-sub background-tints--1 btn-padding-sm color-primary" href="#">Learn more
58+
&DownArrow;</a>
59+
</div>
60+
<div class="delivered-meals-box margin-top-semi-lg">
61+
<img class="delivered-img" src="content/img/customers/customer-1.jpg" alt="Customer">
62+
<img class="delivered-img" src="content/img/customers/customer-2.jpg" alt="Customer">
63+
<img class="delivered-img" src="content/img/customers/customer-3.jpg" alt="Customer">
64+
<img class="delivered-img" src="content/img/customers/customer-4.jpg" alt="Customer">
65+
<img class="delivered-img" src="content/img/customers/customer-5.jpg" alt="Customer">
66+
<p class="delivered-text margin-left-sm">
67+
<span class="color--background-primary-shade">250,000+</span> meals delivered last year!
68+
</p>
69+
</div>
70+
</div>
71+
<div class="hero-img-box">
72+
<img class="hero-img" src="content/img/hero.png" alt="Mixed meals">
73+
</div>
74+
</div>
75+
</section>
76+
77+
<section class="how">
78+
<div class="container color-shade">
79+
<span class="subheading color--background-primary-shade">How it works</span>
80+
<h2 class="heading-secondary">
81+
Your daily dose of health in 3 simple steps
82+
</h2>
83+
</div>
84+
85+
<div class="container grid grid--2-cols grid--center-v">
86+
<!-- STEP 01 -->
87+
<div class="step-text-box color-shade">
88+
<p class="step-number">01</p>
89+
<h3 class="heading-tertiary">
90+
Tell us what you like (and what not)
91+
</h3>
92+
<p class="step-description">
93+
Never again waste time thinking about what to eat! Omnifood AI will create a 100% personalized
94+
weekly meal plan just for you. It makes sure you get all the nutrients and vitamins you need, no
95+
matter what diet you follow!
96+
</p>
97+
</div>
98+
<div class="step-img-box">
99+
<img class="step-img" src="content/img/app/app-screen-1.png" alt="Iphone app delivery screen">
100+
</div>
101+
<!-- STEP 02 -->
102+
<div class="step-img-box">
103+
<img class="step-img" src="content/img/app/app-screen-2.png" alt="Iphone app delivery screen">
104+
</div>
105+
<div class="step-text-box color-shade">
106+
<p class="step-number">02</p>
107+
<h3 class="heading-tertiary">
108+
Approve your weekly meal plan:
109+
</h3>
110+
<p class="step-description">
111+
Once per week, approve the meal plan generated for you by Omnifood AI. You can change
112+
ingredients, swap entire meals, or even add your own recipes.
113+
</p>
114+
</div>
115+
<!-- STEP 03 -->
116+
<div class="step-text-box">
117+
<p class="step-number">03</p>
118+
<h3 class="heading-tertiary">
119+
Receive meals at convenient time:
120+
</h3>
121+
<p class="step-description">
122+
Best chefs in town will cook your selected meal every day, and we will deliver it to your door
123+
whenever works best for you. You can change delivery schedule and address daily!
124+
</p>
125+
</div>
126+
<div class="step-img-box">
127+
<img class="step-img" src="content/img/app/app-screen-3.png" alt="Iphone app delivery screen">
128+
</div>
129+
</div>
130+
</section>
131+
</main>
22132
</body>
133+
23134
</html>

0 commit comments

Comments
 (0)