Skip to content

Commit 4601e9e

Browse files
rameskumrameskum
committed
hero component
1 parent fd99d99 commit 4601e9e

File tree

1 file changed

+125
-0
lines changed

1 file changed

+125
-0
lines changed

‎practice/06 - Components/05-hero.html

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
6+
name="viewport">
7+
<meta content="ie=edge" http-equiv="X-UA-Compatible">
8+
<title>Omifood Hero Component</title>
9+
<link href="https://fonts.googleapis.com" rel="preconnect">
10+
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
11+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
12+
<style>
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
box-sizing: border-box;
17+
}
18+
19+
html {
20+
font-family: 'Inter', sans-serif;
21+
color: #444;
22+
}
23+
24+
.container {
25+
margin: 0 auto;
26+
width: 1200px;
27+
}
28+
29+
header {
30+
height: 100vh;
31+
position: relative;
32+
background-image: linear-gradient(rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6)), url(hero.jpg);
33+
background-size: cover;
34+
color: #fff;
35+
}
36+
37+
nav {
38+
font-size: 20px;
39+
font-weight: 700;
40+
display: flex;
41+
justify-content: space-between;
42+
padding-top: 32px;
43+
44+
/*background-image: linear-gradient(to right, red, blue);*/
45+
}
46+
47+
.header-container {
48+
width: 1200px;
49+
position: absolute;
50+
51+
/* in relation to parent size */
52+
left: 50%;
53+
top: 50%;
54+
55+
/* in relation to element size */
56+
transform: translate(-50%, -50%);
57+
}
58+
59+
.header-container-inner {
60+
width: 50%;
61+
}
62+
63+
h1 {
64+
font-size: 52px;
65+
margin-bottom: 32px;
66+
line-height: 1.05;
67+
}
68+
69+
p {
70+
font-size: 20px;
71+
line-height: 1.6;
72+
margin-bottom: 48px;
73+
}
74+
75+
.btn:link,
76+
.btn:visited {
77+
font-size: 20px;
78+
font-weight: 600;
79+
background-color: #e67e22;
80+
color: #fff;
81+
text-decoration: none;
82+
padding: 16px 32px;
83+
display: inline-block;
84+
border-radius: 9px;
85+
}
86+
87+
h2 {
88+
font-size: 42px;
89+
margin-bottom: 48px;
90+
}
91+
92+
section {
93+
padding: 96px 0;
94+
background-color: #f7f7f7;
95+
}
96+
</style>
97+
</head>
98+
<body>
99+
<header>
100+
<nav class="container">
101+
<div>LOGO</div>
102+
<div>NAVIGATION</div>
103+
</nav>
104+
<div class="header-container">
105+
<div class="header-container-inner">
106+
<h1>A healthy meal delivered to your door, every single day</h1>
107+
<p>The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal
108+
tastes and nutritional needs.</p>
109+
<a class="btn" href="#">Start eating well</a>
110+
</div>
111+
</div>
112+
</header>
113+
<section>
114+
<div class="container">
115+
<h2>Some random heading</h2>
116+
<p>
117+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis doloremque harum magnam non quidem rerum velit
118+
veniam voluptatum. Atque dolor ea est incidunt molestias rerum temporibus? Animi doloremque nulla totam! Lorem
119+
ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis fuga incidunt laborum nisi nostrum velit? Assumenda
120+
autem corporis deleniti doloribus earum eligendi eos excepturi ipsam natus nobis, numquam, quae, quasi!
121+
</p>
122+
</div>
123+
</section>
124+
</body>
125+
</html>

0 commit comments

Comments
 (0)