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 cd95a6f

Browse files
09 - Animation
I have developed this project ~ [9] as part of HTML & CSS Tutorial and Projects Course(Flexbox&Grid) taught by John Smilga.
1 parent ce65a1a commit cd95a6f

File tree

4 files changed

+179
-0
lines changed

4 files changed

+179
-0
lines changed

‎09-animation-property/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
## Position Property Project
2+
3+
#### Setup
4+
5+
- copy last project
6+
- rename to (09-animation-property)
7+
- change title (Animation Property)
8+
9+
#### HTML (structure)
10+
11+
- group h1 and p in div, with class .hero-text
12+
13+
#### CSS (styles)
14+
15+
- setup two animations (entering from top, bottom)
16+
- add one to .hero-text, other to button
17+
- values up to you

‎09-animation-property/hero-bcg.jpg‎

226 KB
Loading[フレーム]

‎09-animation-property/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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>Animation 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+
<div class="hero-text">
24+
<h1>coffee market</h1>
25+
<p>
26+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat a
27+
doloribus culpa quos numquam, tenetur dolorum sit eaque adipisci
28+
voluptas.
29+
</p>
30+
</div>
31+
<button class="hero-btn">explore more</button>
32+
</div>
33+
</div>
34+
<!-- End of Hero -->
35+
36+
<!-- Temporary Content -->
37+
<div class="temp"></div>
38+
</body>
39+
</html>

‎09-animation-property/main.css‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
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-text {
83+
animation: slideFromTop 5s ease-in-out 1;
84+
}
85+
86+
.hero-btn {
87+
padding: 0.75rem 0.25rem;
88+
border: 1px solid #fff;
89+
background: transparent;
90+
text-transform: uppercase;
91+
color: #fff;
92+
letter-spacing: 2px;
93+
animation: slideFromBottom 5s ease-in-out 1;
94+
}
95+
96+
.temp {
97+
background: red;
98+
height: 100vh;
99+
}
100+
101+
/* animations */
102+
103+
@keyframes slideFromTop {
104+
0% {
105+
opacity: 0;
106+
transform: translateY(-100px);
107+
}
108+
100% {
109+
opacity: 1;
110+
transform: translateY(0);
111+
}
112+
}
113+
114+
@keyframes slideFromBottom {
115+
0% {
116+
opacity: 0;
117+
transform: translateY(100px);
118+
}
119+
100% {
120+
opacity: 1;
121+
transform: translateY(0);
122+
}
123+
}

0 commit comments

Comments
(0)

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