Skip to content

Commit ccca843

Browse files
andreituicuandreituicu
committed
Section 6 - Hero Section
1 parent 0963b29 commit ccca843

File tree

1 file changed

+140
-0
lines changed

1 file changed

+140
-0
lines changed

‎starter/06-Components/05-hero-section.html‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
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 Hero <Section></Section></title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Rubik:wght@400;500;700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<style>
15+
* {
16+
margin: 0;
17+
padding: 0;
18+
box-sizing: border-box;
19+
}
20+
21+
html {
22+
font-family: "Rubik", sans-serif;
23+
color: #444;
24+
}
25+
26+
.container {
27+
width: 1200px;
28+
margin: 0 auto;
29+
}
30+
31+
header {
32+
/* background-color: orangered; */
33+
height: 100vh;
34+
position: relative;
35+
36+
background-image: linear-gradient(
37+
rgb(34, 34, 34, 0.6),
38+
rgb(34, 34, 34, 0.6)
39+
),
40+
url(hero.jpg);
41+
background-size: cover;
42+
color: #fff;
43+
}
44+
45+
nav {
46+
font-size: 20px;
47+
font-weight: 700;
48+
display: flex;
49+
justify-content: space-between;
50+
padding-top: 32px;
51+
/* background-image: linear-gradient(red, blue); */
52+
/* background-color: green; */
53+
}
54+
55+
.header-container {
56+
width: 1200px;
57+
position: absolute;
58+
left: 50%;
59+
top: 50%;
60+
61+
transform: translate(-50%, -50%);
62+
}
63+
64+
.header-container-inner {
65+
width: 50%;
66+
}
67+
68+
h1 {
69+
font-size: 52px;
70+
margin-bottom: 32px;
71+
line-height: 1.05;
72+
}
73+
74+
p {
75+
font-size: 20px;
76+
line-height: 1.6;
77+
margin-bottom: 48px;
78+
}
79+
80+
.btn:link,
81+
.btn:visited {
82+
font-size: 20px;
83+
font-weight: 600;
84+
background-color: #e67e22;
85+
color: #fff;
86+
text-decoration: none;
87+
display: inline-block;
88+
89+
padding: 16px 32px;
90+
91+
border-radius: 9px;
92+
}
93+
94+
h2 {
95+
font-size: 44px;
96+
margin-bottom: 48px;
97+
}
98+
99+
section {
100+
padding: 96px 0;
101+
background-color: #f7f7f7;
102+
}
103+
</style>
104+
</head>
105+
<body>
106+
<header>
107+
<nav class="container">
108+
<div>LOGO</div>
109+
<div>NAVIGATION</div>
110+
</nav>
111+
112+
<div class="header-container">
113+
<div class="header-container-inner">
114+
<h1>A healthy meal delivered to your door, every single day</h1>
115+
<p>
116+
The smart 365-days-per-year food subscription that will make you eat
117+
healthy again. Tailored to your personal tastes and nutritional
118+
needs
119+
</p>
120+
<a href="#" class="btn">Start eating well</a>
121+
</div>
122+
</div>
123+
</header>
124+
125+
<section>
126+
<div class="container">
127+
<h2>Some random heading.</h2>
128+
<p>
129+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat,
130+
porro at? Dolores unde dolorum obcaecati non quidem maiores fugit. At
131+
provident ea quasi dolorum maxime cupiditate consequuntur accusantium
132+
magnam accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing
133+
elit. Doloribus, quas mollitia ea quidem earum minima beatae eveniet
134+
autem error, ipsa vel natus. Vitae error asperiores, reiciendis dolor
135+
sed odio perspiciatis?
136+
</p>
137+
</div>
138+
</section>
139+
</body>
140+
</html>

0 commit comments

Comments
 (0)