Skip to content

Commit 25da1cc

Browse files
zangeronimozangeronimo
committed
feat: building the hero
1 parent 844531a commit 25da1cc

39 files changed

+227
-0
lines changed

‎starter/07-Omnifood-Desktop/content/content.md renamed to ‎starter/07-Omnifood-Desktop/content.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,3 +126,17 @@ Careers
126126
Recipe directory
127127
Help center
128128
Privacy & terms
129+
130+
######
131+
132+
## Sections
133+
134+
- Logo + Navigation
135+
- Hero
136+
- Featured in
137+
- How it works
138+
- Meals (abd list of diets)
139+
- Testimonials + gallery
140+
- Pricing + features
141+
- CTA
142+
- Footer

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

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
/*
2+
3+
--- 01 TYPOGRAPHY SYSTEM
4+
5+
- Font sizes (px)
6+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
7+
8+
- Font weights:
9+
Default: 400
10+
11+
- Line height:
12+
Default: 1
13+
14+
--- 02 COLORS
15+
16+
- Primary: #e67e22
17+
- Tints: #fdf2e9
18+
- Shades:
19+
- Accents:
20+
- Greys
21+
#555
22+
#333
23+
24+
--- 03 SHADOWS
25+
26+
--- 04 BORDER-RADIUS
27+
28+
--- 05 WHITESPACE
29+
30+
- Spacing system (px)
31+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
32+
33+
*/
34+
35+
* {
36+
margin: 0;
37+
padding: 0;
38+
box-sizing: border-box;
39+
}
40+
41+
html {
42+
font-size: 62.5%;
43+
}
44+
45+
body {
46+
font-family: "Rubik", sans-serif;
47+
line-height: 1;
48+
font-weight: 400;
49+
color: #555;
50+
}
51+
52+
.section-hero {
53+
background-color: #fdf2e9;
54+
padding: 9.6rem 0;
55+
}
56+
57+
.hero {
58+
max-width: 130rem;
59+
margin: 0 auto;
60+
display: grid;
61+
grid-template-columns: 1fr 1fr;
62+
gap: 9.6rem;
63+
align-items: center;
64+
}
65+
66+
.heading-primary {
67+
font-size: 5.2rem;
68+
line-height: 1.05;
69+
font-weight: 700;
70+
color: #333;
71+
letter-spacing: -0.5px;
72+
margin-bottom: 3.2rem;
73+
}
74+
75+
.hero-description {
76+
font-size: 2rem;
77+
line-height: 1.6;
78+
margin-bottom: 4.8rem;
79+
}
80+
81+
.btn:link,
82+
.btn:visited {
83+
display: inline-block;
84+
text-decoration: none;
85+
font-size: 2rem;
86+
font-weight: 600;
87+
padding: 1.6rem 2.3rem;
88+
border-radius: 9px;
89+
90+
transition: all 0.3s;
91+
}
92+
93+
.btn--full:link,
94+
.btn--full:visited {
95+
background-color: #e67e22;
96+
color: #fff;
97+
}
98+
99+
.btn--full:hover,
100+
.btn--full:active {
101+
background-color: #cf711f;
102+
}
103+
104+
.btn--outline:link,
105+
.btn--outline:visited {
106+
background-color: #fff;
107+
color: #555;
108+
}
109+
110+
.btn--outline:hover,
111+
.btn--outline:active {
112+
background-color: #fdf2e9;
113+
box-shadow: inset 0 0 0 3px #fff;
114+
}
115+
116+
.hero-img {
117+
width: 100%;
118+
}
119+
120+
.margin-right-sm {
121+
margin-right: 1.6rem !important;
122+
}
123+
124+
.delivered-meals {
125+
display: flex;
126+
align-items: center;
127+
gap: 1.6rem;
128+
margin-top: 8rem;
129+
}
130+
131+
.delivered-img {
132+
display: flex;
133+
}
134+
135+
.delivered-img img {
136+
height: 4.8rem;
137+
width: 4.8rem;
138+
border-radius: 50%;
139+
margin-right: -1.6rem;
140+
border: 3px solid #fdf2e9;
141+
}
142+
143+
.delivered-img img:last-child {
144+
margin-right: 0;
145+
}
146+
147+
.delivered-text {
148+
font-size: 1.8rem;
149+
font-weight: 600;
150+
}
151+
152+
.delivered-text span {
153+
color: #cf711f;
154+
font-weight: 700;
155+
}

‎starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png renamed to ‎starter/07-Omnifood-Desktop/img/app/app-screen-1.png

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/app/app-screen-2.png renamed to ‎starter/07-Omnifood-Desktop/img/app/app-screen-2.png

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/app/app-screen-3.png renamed to ‎starter/07-Omnifood-Desktop/img/app/app-screen-3.png

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/customers/ben.jpg renamed to ‎starter/07-Omnifood-Desktop/img/customers/ben.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg renamed to ‎starter/07-Omnifood-Desktop/img/customers/customer-1.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg renamed to ‎starter/07-Omnifood-Desktop/img/customers/customer-2.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg renamed to ‎starter/07-Omnifood-Desktop/img/customers/customer-3.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg renamed to ‎starter/07-Omnifood-Desktop/img/customers/customer-4.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg renamed to ‎starter/07-Omnifood-Desktop/img/customers/customer-5.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg renamed to ‎starter/07-Omnifood-Desktop/img/customers/customer-6.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/customers/dave.jpg renamed to ‎starter/07-Omnifood-Desktop/img/customers/dave.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg renamed to ‎starter/07-Omnifood-Desktop/img/customers/hannah.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/customers/steve.jpg renamed to ‎starter/07-Omnifood-Desktop/img/customers/steve.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/eating.jpg renamed to ‎starter/07-Omnifood-Desktop/img/eating.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/favicon.png renamed to ‎starter/07-Omnifood-Desktop/img/favicon.png

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg renamed to ‎starter/07-Omnifood-Desktop/img/gallery/gallery-1.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg renamed to ‎starter/07-Omnifood-Desktop/img/gallery/gallery-10.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg renamed to ‎starter/07-Omnifood-Desktop/img/gallery/gallery-11.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg renamed to ‎starter/07-Omnifood-Desktop/img/gallery/gallery-12.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg renamed to ‎starter/07-Omnifood-Desktop/img/gallery/gallery-2.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg renamed to ‎starter/07-Omnifood-Desktop/img/gallery/gallery-3.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg renamed to ‎starter/07-Omnifood-Desktop/img/gallery/gallery-4.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg renamed to ‎starter/07-Omnifood-Desktop/img/gallery/gallery-5.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg renamed to ‎starter/07-Omnifood-Desktop/img/gallery/gallery-6.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg renamed to ‎starter/07-Omnifood-Desktop/img/gallery/gallery-7.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg renamed to ‎starter/07-Omnifood-Desktop/img/gallery/gallery-8.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg renamed to ‎starter/07-Omnifood-Desktop/img/gallery/gallery-9.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/hero.png renamed to ‎starter/07-Omnifood-Desktop/img/hero.png

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/logos/business-insider.png renamed to ‎starter/07-Omnifood-Desktop/img/logos/business-insider.png

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/logos/forbes.png renamed to ‎starter/07-Omnifood-Desktop/img/logos/forbes.png

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png renamed to ‎starter/07-Omnifood-Desktop/img/logos/techcrunch.png

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png renamed to ‎starter/07-Omnifood-Desktop/img/logos/the-new-york-times.png

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/logos/usa-today.png renamed to ‎starter/07-Omnifood-Desktop/img/logos/usa-today.png

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg renamed to ‎starter/07-Omnifood-Desktop/img/meals/meal-1.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg renamed to ‎starter/07-Omnifood-Desktop/img/meals/meal-2.jpg

File renamed without changes.

‎starter/07-Omnifood-Desktop/content/img/omnifood-logo.png renamed to ‎starter/07-Omnifood-Desktop/img/omnifood-logo.png

File renamed without changes.

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Omnifood</title>
8+
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"
13+
rel="stylesheet"
14+
/>
15+
16+
<link rel="stylesheet" href="css/style.css" />
17+
</head>
18+
<body>
19+
<section class="section-hero">
20+
<div class="hero">
21+
<div class="hero-text-box">
22+
<h1 class="heading-primary">
23+
A healthy meal delivered to your door, every single day
24+
</h1>
25+
<p class="hero-description">
26+
The smart 365-days-per-year food subscription that will make you eat
27+
healthy again. Tailored to your personal tastes and nutritional
28+
needs.
29+
</p>
30+
<a href="#" class="btn btn--full margin-right-sm"
31+
>Start eating well</a
32+
>
33+
<a href="#" class="btn btn--outline">Learn more &darr;</a>
34+
<div class="delivered-meals">
35+
<div class="delivered-img">
36+
<img src="img/customers/customer-1.jpg" alt="Customer photo" />
37+
<img src="img/customers/customer-2.jpg" alt="Customer photo" />
38+
<img src="img/customers/customer-3.jpg" alt="Customer photo" />
39+
<img src="img/customers/customer-4.jpg" alt="Customer photo" />
40+
<img src="img/customers/customer-5.jpg" alt="Customer photo" />
41+
<img src="img/customers/customer-6.jpg" alt="Customer photo" />
42+
</div>
43+
<p class="delivered-text">
44+
<span>250,000+</span> meals delivered last year!
45+
</p>
46+
</div>
47+
</div>
48+
<div class="hero-img-box">
49+
<img
50+
src="img/hero.png"
51+
alt="Woman enjoying food, meals in storage container, and food bawls on a table"
52+
class="hero-img"
53+
/>
54+
</div>
55+
</div>
56+
</section>
57+
</body>
58+
</html>

0 commit comments

Comments
 (0)