Skip to content

Commit 6cf3019

Browse files
GameOfCode64GameOfCode64
committed
add 2 project
1 parent 9e82d25 commit 6cf3019

File tree

5 files changed

+70
-0
lines changed

5 files changed

+70
-0
lines changed

‎project-1/bg-video.mp4 renamed to ‎Background-video-webpage/bg-video.mp4

File renamed without changes.

‎project-1/index.html renamed to ‎Background-video-webpage/index.html

File renamed without changes.

‎project-1/style.css renamed to ‎Background-video-webpage/style.css

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
margin: 0%;
33
padding: 0%;
44
font-family: sans-serif;
5+
box-sizing: border-box;
56
}
67

78
.hero {

‎Loading Animation/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Loading Animation Using Html & Css</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<section class="wrapper">
11+
<div class="loader">
12+
<div class="loading one"></div>
13+
<div class="loading two"></div>
14+
<div class="loading three"></div>
15+
<div class="loading four"></div>
16+
</div>
17+
</section>
18+
</body>
19+
</html>

‎Loading Animation/style.css

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
background: rebeccapurple;
10+
}
11+
.wrapper {
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
min-height: 100vh;
16+
}
17+
18+
.wrapper .loader {
19+
display: flex;
20+
justify-content: space-between;
21+
padding: 0 20px;
22+
}
23+
.loader .loading {
24+
background: white;
25+
width: 30px;
26+
height: 30px;
27+
border-radius: 50%;
28+
margin: 0 10px;
29+
animation: load 0.7s ease infinite;
30+
}
31+
.loader .one {
32+
animation-delay: 0.3s;
33+
}
34+
.loader .two {
35+
animation-delay: 0.4s;
36+
}
37+
.loader .three {
38+
animation-delay: 0.5s;
39+
}
40+
41+
@keyframes load {
42+
0% {
43+
width: 30px;
44+
height: 30px;
45+
}
46+
50% {
47+
width: 20px;
48+
height: 20px;
49+
}
50+
}

0 commit comments

Comments
 (0)