Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ce65a1a

Browse files
08 - Position Property
I have developed this project ~ [8] as part of HTML & CSS Tutorial and Projects Course(Flexbox&Grid) taught by John Smilga.
1 parent 62b6bbb commit ce65a1a

File tree

4 files changed

+150
-0
lines changed

4 files changed

+150
-0
lines changed

‎08-position-property/README.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
## Position Property Project
2+
3+
#### Setup
4+
5+
- copy last project
6+
- rename to (08-position-property)
7+
- change title (Position Property)
8+
9+
#### HTML (structure)
10+
11+
- add div with class of "temp" at the end of the html document (still inside the body)
12+
13+
#### CSS (styles)
14+
15+
- set .temp (min-heigth:100vh), so scroll works
16+
- set nav sticky (position,top,z-index)
17+
- set .hero on small screen only with color background, starting with 768px add current (image background)
18+
- add position relative to .hero
19+
- set .hero-center position absolute and place in the center (gotcha - section 19)

‎08-position-property/hero-bcg.jpg‎

226 KB
Loading[フレーム]

‎08-position-property/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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>Position Property</title>
8+
<link rel="stylesheet" href="./main.css" />
9+
</head>
10+
11+
<body>
12+
<!-- Navbar -->
13+
<div class="nav">
14+
<div class="nav-center">
15+
<span class="nav-title">kofi</span>
16+
</div>
17+
</div>
18+
<!-- End of Navbar -->
19+
20+
<!-- Hero -->
21+
<div class="hero">
22+
<div class="hero-center">
23+
<h1>coffee market</h1>
24+
<p>
25+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat a
26+
doloribus culpa quos numquam, tenetur dolorum sit eaque adipisci
27+
voluptas.
28+
</p>
29+
<button class="hero-btn">explore more</button>
30+
</div>
31+
</div>
32+
<!-- End of Hero -->
33+
34+
<!-- Temporary Content -->
35+
<div class="temp"></div>
36+
</body>
37+
</html>

‎08-position-property/main.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
9+
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
10+
line-height: 1.5;
11+
}
12+
13+
.nav {
14+
height: 5rem;
15+
background: black;
16+
padding: 1rem 0;
17+
position: sticky;
18+
top: 0;
19+
/* z-index */
20+
z-index: 2;
21+
}
22+
23+
.nav-title {
24+
color: #fff;
25+
text-transform: uppercase;
26+
font-size: 2rem;
27+
font-weight: 700;
28+
letter-spacing: 2px;
29+
}
30+
31+
.nav-center {
32+
width: 90vw;
33+
max-width: 1170px;
34+
margin: 0 auto;
35+
/* border: 2px solid red;
36+
padding: 0 2rem; */
37+
}
38+
39+
.hero {
40+
min-height: calc(100vh - 5rem);
41+
background: rgb(105, 62, 27);
42+
position: relative;
43+
}
44+
45+
@media screen and (min-width: 768px) {
46+
.hero {
47+
background: linear-gradient(
48+
to right,
49+
rgba(105, 62, 27, 0.5),
50+
rgba(105, 62, 27, 1)
51+
),
52+
url("./hero-bcg.jpg") no-repeat center/cover;
53+
}
54+
}
55+
56+
.hero-center {
57+
color: #fff;
58+
width: 90vw;
59+
max-width: 1170px;
60+
margin: 0 auto;
61+
/* border: 2px solid red; */
62+
padding: 5rem 0;
63+
position: absolute;
64+
top: 50%;
65+
left: 50%;
66+
transform: translate(-50%, -50%);
67+
text-align: center;
68+
}
69+
70+
.hero-center h1 {
71+
letter-spacing: 2px;
72+
text-transform: capitalize;
73+
margin-bottom: 0.75rem;
74+
}
75+
76+
.hero-center p {
77+
max-width: 35rem;
78+
margin: 0 auto;
79+
margin-bottom: 1.5rem;
80+
}
81+
82+
.hero-btn {
83+
padding: 0.75rem 0.25rem;
84+
border: 1px solid #fff;
85+
background: transparent;
86+
text-transform: uppercase;
87+
color: #fff;
88+
letter-spacing: 2px;
89+
}
90+
91+
.temp {
92+
background: red;
93+
height: 100vh;
94+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /