Skip to content

Commit e7b30c0

Browse files
FrankGeckoFrankGecko
committed
ch. 95: Building a Hero Section - Part 1
1 parent 5f6827b commit e7b30c0

File tree

1 file changed

+103
-0
lines changed

1 file changed

+103
-0
lines changed

‎final/06-Components/hero.html

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Omnifood hero section</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
11+
rel="stylesheet">
12+
<style>
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
box-sizing: border-box;
17+
}
18+
19+
html {
20+
font-family: "Rubik", sans-serif;
21+
font-optical-sizing: auto;
22+
font-weight: 400;
23+
font-style: normal;
24+
color: #444;
25+
}
26+
27+
.container {
28+
margin: 0 auto;
29+
width: 1200px;
30+
}
31+
32+
header {
33+
background-color: orangered;
34+
height: 100vh;
35+
}
36+
37+
nav {
38+
font-size: 20px;
39+
font-weight: 700;
40+
display: flex;
41+
justify-content: space-between;
42+
background-color: green;
43+
}
44+
45+
h1 {
46+
font-size: 52px;
47+
margin-bottom: 32px;
48+
}
49+
50+
p {
51+
font-size: 20px;
52+
line-height: 1.6;
53+
margin-bottom: 48px;
54+
}
55+
56+
.btn:link,
57+
.btn:visited {
58+
font-size: 20px;
59+
font-weight: 600;
60+
background-color: #e56e22;
61+
color: #fff;
62+
text-decoration: none;
63+
display: inline-block;
64+
padding: 16px 32px;
65+
border-radius: 9px;
66+
}
67+
68+
h2 {
69+
font-size: 42px;
70+
margin-bottom: 48px;
71+
}
72+
73+
section {
74+
padding: 96px 0;
75+
background-color: #f7f7f7;
76+
}
77+
</style>
78+
</head>
79+
80+
<body>
81+
<header>
82+
<nav class="container">
83+
<div>LOGO</div>
84+
<div>NAVIGATION</div>
85+
</nav>
86+
<div class="container">
87+
<h1>A healthy meal delivered to your door, every single day</h1>
88+
<p>The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your
89+
personal teastes and nutritional needs.</p>
90+
<a href="#" class="btn">Start eating well</a>
91+
</div>
92+
</header>
93+
<section>
94+
<div class="container">
95+
<h2>Some random heading</h2>
96+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam corrupti, quis quam qui, quasi quae
97+
dignissimos cumque assumenda doloremque vero, minima officia magnam excepturi quidem repellendus maxime
98+
impedit debitis. Labore.</p>
99+
</div>
100+
</section>
101+
</body>
102+
103+
</html>

0 commit comments

Comments
 (0)