Skip to content

Commit c124db9

Browse files
clinton74clinton74
committed
hero
1 parent 13bf68b commit c124db9

File tree

2 files changed

+175
-0
lines changed

2 files changed

+175
-0
lines changed

‎starter/06-Components/hero.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</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=Rubik:wght@400;500;600;700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<style>
15+
/*
16+
SPACING SYSTEM (px)
17+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
18+
19+
FONT SIZE SYSTEM (px)
20+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
21+
*/
22+
23+
* {
24+
margin: 0;
25+
padding: 0;
26+
box-sizing: border-box;
27+
}
28+
29+
/* ------------------------ */
30+
/* GENERAL STYLES */
31+
/* ------------------------ */
32+
33+
.container {
34+
margin: 0 auto;
35+
width: 1200px;
36+
}
37+
38+
body {
39+
font-family: "Rubik", sans-serif;
40+
color: #444;
41+
line-height: 1;
42+
}
43+
44+
header {
45+
height: 100vh;
46+
position: relative;
47+
48+
background-image: linear-gradient(rgba(37, 37, 37, 0.55), rgba(37, 37, 37, 0.55)), url(hero.jpg);
49+
background-size: cover;
50+
color: #fff;
51+
}
52+
53+
nav {
54+
font-size: 20px;
55+
font-weight: 700;
56+
padding-top: 32px;
57+
display: flex;
58+
justify-content: space-between;
59+
}
60+
61+
.header-container {
62+
width: 1200px;
63+
position: absolute;
64+
65+
/* In relation to parent size*/
66+
left: 50%;
67+
top: 50%;
68+
69+
/* In relation to element size*/
70+
transform: translate(-50%, -50%);
71+
}
72+
73+
.header-container-inner {
74+
width: 50%;
75+
}
76+
77+
h1 {
78+
font-size: 52px;
79+
margin-bottom: 32px;
80+
line-height: 1.05;
81+
}
82+
83+
p {
84+
font-size: 20px;
85+
line-height: 1.6;
86+
margin-bottom: 48px;
87+
}
88+
89+
.btn:link,
90+
.btn:visited {
91+
font-size: 20px;
92+
font-weight: 600;
93+
background-color: #e67e22;
94+
color: #fff;
95+
text-decoration: none;
96+
display: inline-block;
97+
padding: 16px 32px;
98+
border-radius: 9px;
99+
}
100+
101+
h2 {
102+
font-size: 44px;
103+
margin-bottom: 48px;
104+
}
105+
106+
section {
107+
padding: 96px 0;
108+
background-color: #f7f7f7;
109+
}
110+
</style>
111+
</head>
112+
<body>
113+
<header>
114+
<nav class="container">
115+
<div>LOGO</div>
116+
<div>NAVIGATION</div>
117+
</nav>
118+
<div class="header-container">
119+
<div class="header-container-inner">
120+
<h1>A heatlthy meal delivered to your door, every single day</h1>
121+
<p>
122+
The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to
123+
your personal tastes and nutritional needs.
124+
</p>
125+
<a href="#" class="btn">Start eating well</a>
126+
</div>
127+
</div>
128+
</header>
129+
<section>
130+
<div class="container">
131+
<h2>Some random heading</h2>
132+
header-container-inner
133+
<p>
134+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem praesentium vero voluptatum molestiae
135+
ratione corrupti tenetur ipsum provident assumenda dolore.
136+
</p>
137+
</div>
138+
</section>
139+
</body>
140+
</html>

‎starter/06-Components/web-application.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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>Web Application</title>
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
9+
<style>
10+
/*
11+
SPACING SYSTEM (px)
12+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
13+
14+
FONT SIZE SYSTEM (px)
15+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
16+
*/
17+
18+
* {
19+
margin: 0;
20+
padding: 0;
21+
box-sizing: border-box;
22+
}
23+
24+
/* ------------------------ */
25+
/* GENERAL STYLES */
26+
/* ------------------------ */
27+
body {
28+
font-family: "Inter", sans-serif;
29+
color: #343a40;
30+
line-height: 1;
31+
}
32+
</style>
33+
</head>
34+
<body></body>
35+
</html>

0 commit comments

Comments
 (0)