Skip to content

Commit dadc022

Browse files
owen-webbowen-webb
committed
section-7: Build hero section.
1 parent b8064e4 commit dadc022

File tree

2 files changed

+140
-5
lines changed

2 files changed

+140
-5
lines changed

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

Lines changed: 104 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ Default: 1
1414
--- COLORS
1515
1616
Primary: #e67e22
17-
Tints:
18-
Shades:
17+
Tints: #fdf2e9
18+
Shades: #cf711f
1919
Accents:
20-
Greys: #555
20+
Greys: #555, #333
2121
2222
2323
--- SHADOWS
@@ -45,7 +45,107 @@ html {
4545

4646
body {
4747
color: #555;
48-
font-family: sans-serif;
48+
font-family: "Rubik", sans-serif;
4949
font-weight: 400;
5050
line-height: 1;
5151
}
52+
53+
.btn:link, .btn:visited {
54+
border-radius: .9rem;
55+
color: #fff;
56+
display: inline-block;
57+
font-size: 2rem;
58+
padding: 1.6rem 3.2rem;
59+
text-decoration: none;
60+
transition: background-color 300ms;
61+
}
62+
63+
.btn--full:link, .btn--full:visited {
64+
background-color: #e67e22;
65+
color: #fff;
66+
}
67+
68+
.btn--full:hover, .btn--full:active {
69+
background-color: #cf711f;
70+
}
71+
72+
.btn--outline:link, .btn--outline:visited {
73+
background-color: #fff;
74+
color: #555;
75+
}
76+
77+
.btn--outline:hover, .btn--outline:active {
78+
background-color: #fdf2e9;
79+
box-shadow: inset 0 0 0 .3rem #fff;
80+
}
81+
82+
.delivered-imgs {
83+
display: flex;
84+
}
85+
86+
.delivered-imgs img {
87+
border: 3px solid #fdf2e9;
88+
border-radius: 50%;
89+
height: 4.8rem;
90+
margin-right: -1.6rem;
91+
width: 4.8rem;
92+
}
93+
94+
.delivered-imgs img:last-child {
95+
margin: 0;
96+
}
97+
98+
.delivered-meals {
99+
align-items: center;
100+
display: flex;
101+
gap: 1.6rem;
102+
margin-top: 8rem;
103+
}
104+
105+
.delivered-text {
106+
font-size: 1.8rem;
107+
font-weight: 600;
108+
}
109+
110+
.delivered-text span {
111+
color: #cf711f;
112+
font-weight: 700;
113+
}
114+
115+
.heading-primary {
116+
color: #333;
117+
font-size: 5.2rem;
118+
font-weight: 600;
119+
letter-spacing: -0.5px;
120+
line-height: 1.05;
121+
margin-bottom: 3.2rem;
122+
}
123+
124+
.hero {
125+
align-items: center;
126+
display: grid;
127+
gap: 9.6rem;
128+
grid-template-columns: 1fr 1fr;
129+
margin: 0 auto;
130+
max-width: 130rem;
131+
padding: 0 3.2rem;
132+
}
133+
134+
.hero-description {
135+
font-size: 2rem;
136+
line-height: 1.6;
137+
margin-bottom: 4.8rem;
138+
}
139+
140+
.hero-img {
141+
width: 100%;
142+
}
143+
144+
.margin-right-sm {
145+
margin-right: 1.6rem !important;
146+
}
147+
148+
.section-hero {
149+
background-color: #fdf2e9;
150+
padding: 4.8rem 0 9.6rem 0;
151+
}

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

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,45 @@
77

88
<title>Omnifood</title>
99

10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">
13+
1014
<link rel="stylesheet" href="css/style.css">
1115
</head>
1216

1317
<body>
14-
<h1>A healthy meal delivered to your door, every single day</h1>
18+
<section class="section-hero">
19+
<div class="hero">
20+
<div class="hero-text-box">
21+
<h1 class="heading-primary">
22+
A healthy meal delivered to your door, every single day
23+
</h1>
24+
<p class="hero-description">
25+
The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs.
26+
</p>
27+
<!-- Buttons -->
28+
<a href="#" class="btn btn--full margin-right-sm">Start eating well</a>
29+
<a href="#" class="btn btn--outline">Learn more &darr;</a>
30+
<!-- Delivered -->
31+
<div class="delivered-meals">
32+
<div class="delivered-imgs">
33+
<img src="img/customers/customer-1.jpg" alt="Customer photo." />
34+
<img src="img/customers/customer-2.jpg" alt="Customer photo." />
35+
<img src="img/customers/customer-3.jpg" alt="Customer photo." />
36+
<img src="img/customers/customer-4.jpg" alt="Customer photo." />
37+
<img src="img/customers/customer-5.jpg" alt="Customer photo." />
38+
<img src="img/customers/customer-6.jpg" alt="Customer photo." />
39+
</div>
40+
<p class="delivered-text"><span>250,000+</span>meals delivered last year!</p>
41+
</div>
42+
</div>
43+
<div class="hero-image-box">
44+
<img src="img/hero.png"
45+
alt="The hero we all needed."
46+
class="hero-img">
47+
</div>
48+
</div>
49+
</section>
1550
</body>
1651
</html>

0 commit comments

Comments
 (0)