Skip to content

Commit 31d6990

Browse files
nuthancnuthanc
committed
Update
1 parent 3f92942 commit 31d6990

File tree

4 files changed

+163
-1
lines changed

4 files changed

+163
-1
lines changed

‎README.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -620,4 +620,13 @@
620620
* For the links to be perfect circle, we cannot using padding(Padding top and bottom doesn't work on inline elements and also even if used with inline-block, it wouldn't be perfect)
621621
* Author gave equal width and height to make it a square first and then used border-radius
622622
* Also Circles were made even before Hover
623-
* Cool trick is `.btn:hover .btn-icon` using class like this, so that stroke would become white when hovered over button
623+
* Cool trick is `.btn:hover .btn-icon` using class like this, so that stroke would become white when hovered over button
624+
625+
### Building a Hero Section
626+
627+
* This time using Rubik Google Fonts
628+
* Use 100vh for header height as 100% won't work
629+
* Adding Gradient to image to make text more readable
630+
* Stack of background-images where the 1st background image is a gradient which is transparent
631+
* 1st is in top of 2nd in background-image property
632+
* Centering done via **Vertical Centering with Absolute Position and Transform**

‎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+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
html {
15+
font-family: 'Rubik', sans-serif;
16+
/* color: #fff;
17+
background-image: url('./hero.jpg');
18+
background-position: center center;
19+
background-repeat: no-repeat;
20+
background-size: cover;
21+
height: 100%; */
22+
}
23+
24+
header {
25+
/* background-color: maroon; */
26+
height: 100vh;
27+
/* Author used absolute positioning technique, even grid like below works for centering*/
28+
/* display: grid;
29+
grid-template-rows: auto 1fr;
30+
align-items: center; */
31+
position: relative;
32+
33+
color: #fff;
34+
background-image: linear-gradient(rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6)), url(hero.jpg);
35+
background-size: cover;
36+
}
37+
38+
.header-container {
39+
position: absolute;
40+
width: 1200px;
41+
/* background-color: aqua; */
42+
top: 50%;
43+
left: 50%;
44+
45+
transform: translate(-50%, -50%);
46+
}
47+
48+
.header-container-inner {
49+
/* In relation to parent */
50+
width: 50%;
51+
/* background-color: papayawhip; */
52+
}
53+
54+
nav {
55+
font-size: 20px;
56+
font-weight: 700;
57+
display: flex;
58+
justify-content: space-between;
59+
padding-top: 32px;
60+
/* background-color: lightgreen; */
61+
/* background-image: linear-gradient(to right, red, blue); */
62+
}
63+
64+
h1 {
65+
font-size: 52px;
66+
line-height: 1.05;
67+
margin-bottom: 32px;
68+
}
69+
70+
p {
71+
font-size: 20px;
72+
line-height: 1.6;
73+
margin-bottom: 48px;
74+
}
75+
76+
h2 {
77+
font-size: 44px;
78+
margin-bottom: 48px;
79+
}
80+
81+
section {
82+
padding: 96px 0;
83+
background-color: #f7f7f7;
84+
}
85+
86+
.container {
87+
margin: 0 auto;
88+
width: 1200px;
89+
}
90+
91+
.btn:link,
92+
.btn:visited {
93+
font-size: 20px;
94+
font-weight: 600;
95+
text-decoration: none;
96+
color: #fff;
97+
background-color: #e67e22;
98+
display: inline-block;
99+
padding: 16px 32px;
100+
border-radius: 9px;
101+
}

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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+
<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;600;700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<link rel="stylesheet" href="hero.css" />
15+
</head>
16+
<body>
17+
<header>
18+
<nav class="container">
19+
<div>LOGO</div>
20+
<div>NAVIGATION</div>
21+
</nav>
22+
23+
<div class="header-container">
24+
<div class="header-container-inner">
25+
<h1>A healthy meal delivered to your door, every single day</h1>
26+
<p>
27+
The smart 365-days-per-year food subscription that will make you eat
28+
healthy again. Tailored to your personal tastes and nutritional
29+
needs
30+
</p>
31+
<a href="#" class="btn">Start eating well</a>
32+
</div>
33+
</div>
34+
</header>
35+
36+
<section>
37+
<div class="container">
38+
<h2>Some random heading</h2>
39+
<p>
40+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit nemo
41+
veritatis ex consequatur quidem reprehenderit, delectus dolor non.
42+
Omnis dignissimos sit totam quas commodi veniam voluptate quae
43+
voluptates molestiae voluptatem. Lorem ipsum dolor sit, amet
44+
consectetur adipisicing elit. Impedit magnam, perspiciatis molestias,
45+
corporis explicabo minima doloremque ad commodi quia quisquam non, ut
46+
officia ipsa doloribus pariatur nostrum exercitationem? Odio,
47+
blanditiis.
48+
</p>
49+
</div>
50+
</section>
51+
</body>
52+
</html>

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

File renamed without changes.

0 commit comments

Comments
 (0)