Skip to content

Commit ba80f60

Browse files
Added Day 83
1 parent 2437186 commit ba80f60

File tree

2 files changed

+82
-0
lines changed

2 files changed

+82
-0
lines changed

public/82/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
align-items: center;
2727
width: 100vw;
2828
height: 100vh;
29+
background-color: #fff;
2930
}
3031

3132
.circle {

public/83/index.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
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>Day 83/100</title>
7+
</head>
8+
<body>
9+
<main>
10+
<div class="square">
11+
<div class="line-1"></div>
12+
<div class="line-2"></div>
13+
<div class="line-3"></div>
14+
</div>
15+
</main>
16+
17+
<style>
18+
body {
19+
margin: 0;
20+
overflow: hidden;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
width: 100vw;
25+
height: 100vh;
26+
background-color: #000;
27+
}
28+
29+
.square {
30+
position: relative;
31+
width: 100px;
32+
height: 100px;
33+
}
34+
35+
.line-1,
36+
.line-2,
37+
.line-3 {
38+
position: absolute;
39+
width: 20%;
40+
height: 20%;
41+
background-color: #fff;
42+
}
43+
44+
.line-1 {
45+
top: 50%;
46+
left: 0%;
47+
transform: translate(0%, -50%);
48+
49+
animation: line-animation 3s 0s ease-in-out infinite;
50+
}
51+
52+
.line-2 {
53+
top: 50%;
54+
left: 40%;
55+
transform: translate(0%, -50%);
56+
57+
animation: line-animation 3s 1s ease-in-out infinite;
58+
}
59+
60+
.line-3 {
61+
top: 50%;
62+
left: 80%;
63+
transform: translate(0%, -50%);
64+
65+
animation: line-animation 3s 2s ease-in-out infinite;
66+
}
67+
68+
@keyframes line-animation {
69+
0% {
70+
height: 20%;
71+
}
72+
50% {
73+
height: 100%;
74+
}
75+
100% {
76+
height: 20%;
77+
}
78+
}
79+
</style>
80+
</body>
81+
</html>

0 commit comments

Comments
 (0)