Skip to content

Commit fd92d6f

Browse files
Nadix92Nadix92
committed
hero added
1 parent f30ddf3 commit fd92d6f

File tree

3 files changed

+144
-0
lines changed

3 files changed

+144
-0
lines changed

‎starter/06-Components/hero/hero.css

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/*
2+
SPACING SYSTEM (px)
3+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
4+
5+
FONT SIZE SYSTEM (px)
6+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
7+
8+
MAIN COLOR: #087f5b
9+
GRAY COLOR: #343a40
10+
11+
12+
*/
13+
14+
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap');
15+
16+
* {
17+
margin: 0;
18+
padding: 0;
19+
box-sizing: border-box;
20+
}
21+
22+
/* ------------------------ */
23+
/* GENERAL STYLES */
24+
/* ------------------------ */
25+
26+
html {
27+
font-family: 'Rubik', sans-serif;
28+
color: #444;
29+
}
30+
31+
.container {
32+
margin: 0 auto;
33+
width: 1200px;
34+
}
35+
36+
nav {
37+
font-size: 20px;
38+
font-weight: 700;
39+
display: flex;
40+
justify-content: space-between;
41+
padding-top: 32px;
42+
}
43+
44+
h1 {
45+
font-size: 52px;
46+
margin-bottom: 32px;
47+
line-height: 1.05;
48+
}
49+
50+
h2 {
51+
font-size: 44px;
52+
margin-bottom: 48px;
53+
}
54+
55+
p {
56+
font-size: 20px;
57+
line-height: 1.6;
58+
margin-bottom: 48px;
59+
}
60+
61+
section {
62+
padding: 96px 0;
63+
}
64+
65+
.btn:link,
66+
.btn:visited {
67+
font-size: 20px;
68+
font-weight: 600;
69+
background-color: #e67e22;
70+
color: #fff;
71+
text-decoration: none;
72+
display: inline-block;
73+
padding: 16px 32px;
74+
border-radius: 9px;
75+
}
76+
77+
header {
78+
height: 100vh;
79+
position: relative;
80+
81+
background-image: url(hero.jpg);
82+
background-image: linear-gradient(rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6)), url(hero.jpg);
83+
84+
background-size: cover;
85+
color: #fff;
86+
}
87+
88+
.header-container {
89+
width: 1200px;
90+
position: absolute;
91+
92+
/* relation to parents size */
93+
left: 50%;
94+
top: 50%;
95+
/* Relation to element size */
96+
transform: translate(-50%, -50%);
97+
}
98+
99+
.header-container-inner {
100+
width: 50%;
101+
}

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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>Omifood Hero Section</title>
8+
9+
<link rel="stylesheet" href="hero.css" />
10+
</head>
11+
<body>
12+
<header>
13+
<nav class="container">
14+
<div>LOGO</div>
15+
<div>NAVIGATION</div>
16+
</nav>
17+
18+
<div class="header-container">
19+
<div class="header-container-inner">
20+
<h1>A healty meal delivered to your door, every singel day</h1>
21+
<p>
22+
The smart 365-days-per-year food subscriptions that will make you eat healty again. Tailored to
23+
your personal tastes and nutritional needs
24+
</p>
25+
<a href="#" class="btn">Start eating well</a>
26+
</div>
27+
</div>
28+
</header>
29+
30+
<section>
31+
<div class="container">
32+
<h2>Some random heading</h2>
33+
<p>
34+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ullam in earum incidunt voluptatum
35+
illo perferendis, nam voluptate necessitatibus ipsum adipisci libero quos possimus saepe minus
36+
facilis, nemo corrupti magnam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque
37+
impedit perferendis consequuntur dolor, distinctio eaque, dolore aperiam illum nisi harum corporis
38+
quis nesciunt nulla, delectus rem. Hic, ea perspiciatis? Dignissimos!
39+
</p>
40+
</div>
41+
</section>
42+
</body>
43+
</html>

‎starter/06-Components/hero.jpg renamed to ‎starter/06-Components/hero/hero.jpg

File renamed without changes.

0 commit comments

Comments
 (0)