Skip to content

Commit 6b9d04c

Browse files
quechauquechau
committed
Add Hero section.
1 parent 934a0a6 commit 6b9d04c

File tree

2 files changed

+126
-7
lines changed

2 files changed

+126
-7
lines changed

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

Lines changed: 104 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,12 @@ Default: 1
1616
--- 02 COLORS
1717
1818
- Primary color: #e67e22
19-
- Tints:
20-
- Shades:
19+
- Tints: #fdf2e9
20+
- Shades: #cf711f
2121
- Accents:
2222
- Greys:
2323
#555
24+
#333
2425
2526
--- 05 SHADOWS
2627
@@ -46,21 +47,120 @@ html {
4647
}
4748

4849
body {
49-
font-family: sans-serif;
50+
font-family: "Rubik", sans-serif;
5051
line-height: 1;
5152
font-weight: 400;
5253
color: #555;
5354
}
5455

56+
.section-hero {
57+
background-color: #fdf2e9;
58+
padding: 9.6rem 0;
59+
}
60+
5561
.hero {
5662
/* width: 1300px; */
5763
max-width: 130rem;
5864
margin: 0 auto;
5965
display: grid;
6066
grid-template-columns: 1fr 1fr;
61-
background-color: blueviolet;
67+
gap: 9.6rem;
68+
align-items: center;
69+
}
70+
71+
.heading-primary {
72+
font-size: 5.2rem;
73+
font-weight: 600;
74+
line-height: 1.05;
75+
color: #333;
76+
margin-bottom: 3.2rem;
77+
}
78+
79+
.hero-description {
80+
font-size: 2rem;
81+
line-height: 1.5;
82+
letter-spacing: -0.5px;
83+
margin-bottom: 4.8rem;
84+
}
85+
86+
.btn:link,
87+
.btn:visited {
88+
display: inline-block;
89+
background-color: #e67e22;
90+
text-decoration: none;
91+
font-size: 2rem;
92+
font-weight: 600;
93+
padding: 1.6rem 3.2rem;
94+
border-radius: 9px;
95+
96+
/* Put transition on original "state" */
97+
transition: background-color 0.3s;
98+
}
99+
100+
.btn--full:link,
101+
.btn--full:visited {
102+
background-color: #e67e22;
103+
color: #fff;
104+
}
105+
106+
.btn--full:hover,
107+
.btn--full:active {
108+
background-color: #cf711f;
109+
}
110+
111+
.btn--outline:link,
112+
.btn--outline:visited {
113+
background-color: #fff;
114+
color: #555;
115+
}
116+
117+
.btn--outline:hover,
118+
.btn--outline:active {
119+
background-color: #fdf2e9;
120+
121+
/* border: 3px solid #fff; */
122+
123+
/* Trick to add border inside */
124+
box-shadow: inset 0 0 0 3px #fff;
62125
}
63126

64127
.hero-img {
65128
width: 100%;
66129
}
130+
131+
.margin-right-sm {
132+
margin-right: 1.6rem !important;
133+
}
134+
135+
.delivered-meals {
136+
display: flex;
137+
align-items: center;
138+
gap: 1.6rem;
139+
margin-top: 8rem;
140+
}
141+
142+
.delivered-imgs {
143+
display: flex;
144+
}
145+
146+
.delivered-imgs img {
147+
height: 4.8rem;
148+
width: 4.8rem;
149+
border-radius: 50%;
150+
margin-right: -1.6rem;
151+
border: 3px solid #fdf2e9;
152+
}
153+
154+
.delivered-imgs img:last-child {
155+
margin: 0;
156+
}
157+
158+
.delivered-text {
159+
font-size: 1.8rem;
160+
font-weight: 600;
161+
}
162+
163+
.delivered-text span {
164+
color: #cf711f;
165+
font-weight: 700;
166+
}

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

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="preconnect" href="https://fonts.googleapis.com" />
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Lato&family=Rubik:wght@400;500;600;700&display=swap"
10+
rel="stylesheet"
11+
/>
612

713
<link rel="stylesheet" href="css/style.css" />
814

@@ -18,11 +24,24 @@ <h1 class="heading-primary">
1824
<p class="hero-description">
1925
The smart 365-days-per-year food subscription that will make you eat
2026
healthy again. Tailored to your personal tastes and nutritional
21-
needs. We have delivered 250,000+ meals last year!
27+
needs.
2228
</p>
2329

24-
<a href="#" class="btn">Start eating well</a>
25-
<a href="#" class="btn">Learn more &darr;</a>
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-imgs">
36+
<img src="img/customers/customer-1.jpg" alt="Customer" />
37+
<img src="img/customers/customer-2.jpg" alt="Customer" />
38+
<img src="img/customers/customer-3.jpg" alt="Customer" />
39+
<img src="img/customers/customer-4.jpg" alt="Customer" />
40+
<img src="img/customers/customer-5.jpg" alt="Customer" />
41+
<img src="img/customers/customer-6.jpg" alt="Customer" />
42+
</div>
43+
<p class="delivered-text"><span>250,000+</span> meals last year!</p>
44+
</div>
2645
</div>
2746
<div class="hero-img-box">
2847
<img

0 commit comments

Comments
 (0)