Skip to content

Commit f26af41

Browse files
fiona-caifiona-cai
committed
first commit
1 parent 21908fc commit f26af41

7 files changed

+832
-0
lines changed

‎Myhandwriting2-Regular.ttf

143 KB
Binary file not shown.

‎ReemKufi-Regular.ttf

56.5 KB
Binary file not shown.

‎Screen Shot 2023-12-18 at 1.14.27 AM.png

839 KB
Loading

‎circles.css

+192
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
.circles{
2+
position: absolute;
3+
top: 0;
4+
left: 0;
5+
width: 100%;
6+
height: 110%;
7+
overflow: hidden;
8+
}
9+
10+
.circles li{
11+
position: absolute;
12+
display: block;
13+
width: 20px;
14+
height: 20px;
15+
background: rgba(255, 242, 242, 0.2);
16+
animation: animate 25s linear infinite;
17+
bottom: -150px;
18+
z-index: 1;
19+
}
20+
21+
.circles li:nth-child(1){
22+
left: 25%;
23+
width: 80px;
24+
height: 80px;
25+
animation-delay: 3s;
26+
}
27+
28+
.circles li:nth-child(2){
29+
left: 10%;
30+
width: 120px;
31+
height: 120px;
32+
animation-delay: 2s;
33+
animation-duration: 12s;
34+
}
35+
36+
.circles li:nth-child(3){
37+
left: 70%;
38+
width: 20px;
39+
height: 20px;
40+
animation-delay: 4s;
41+
}
42+
43+
.circles li:nth-child(4){
44+
left: 40%;
45+
width: 60px;
46+
height: 60px;
47+
animation-delay: 0s;
48+
animation-duration: 8s;
49+
}
50+
51+
.circles li:nth-child(5){
52+
left: 65%;
53+
width: 110px;
54+
height: 110px;
55+
animation-delay: 1s;
56+
}
57+
58+
.circles li:nth-child(6){
59+
left: 75%;
60+
width: 110px;
61+
height: 110px;
62+
animation-delay: 5s;
63+
}
64+
65+
.circles li:nth-child(7){
66+
left: 35%;
67+
width: 150px;
68+
height: 150px;
69+
animation-delay: 7s;
70+
}
71+
72+
.circles li:nth-child(8){
73+
left: 50%;
74+
width: 25px;
75+
height: 25px;
76+
animation-delay: 9s;
77+
animation-duration: 45s;
78+
}
79+
80+
.circles li:nth-child(9){
81+
left: 20%;
82+
width: 15px;
83+
height: 15px;
84+
animation-delay: 2s;
85+
animation-duration: 35s;
86+
}
87+
88+
.circles li:nth-child(10){
89+
left: 90%;
90+
width: 45px;
91+
height: 45px;
92+
animation-delay: 0s;
93+
animation-duration: 18s;
94+
}
95+
.circles li:nth-child(11){
96+
left: 55%;
97+
width: 25px;
98+
height: 25px;
99+
animation-delay: 0s;
100+
animation-duration: 25s;
101+
}
102+
103+
.circles li:nth-child(12){
104+
left: 25%;
105+
width: 15px;
106+
height: 15px;
107+
animation-delay: 2s;
108+
animation-duration: 12s;
109+
}
110+
111+
.circles li:nth-child(13){
112+
left: 2%;
113+
width: 110px;
114+
height: 110px;
115+
animation-delay: 1s;
116+
animation-duration: 11s;
117+
}
118+
.circles li:nth-child(14){
119+
left: 32%;
120+
width: 25px;
121+
height: 25px;
122+
animation-delay: 3s;
123+
animation-duration: 45s;
124+
}
125+
126+
.circles li:nth-child(15){
127+
left: 15%;
128+
width: 15px;
129+
height: 15px;
130+
animation-delay: 2s;
131+
animation-duration: 12s;
132+
}
133+
134+
.circles li:nth-child(16){
135+
left: 60%;
136+
width: 125px;
137+
height: 125px;
138+
animation-delay: 0s;
139+
animation-duration: 13s;
140+
}
141+
142+
.circles li:nth-child(17){
143+
left: 30%;
144+
width: 135px;
145+
height: 135px;
146+
animation-delay: 1s;
147+
}
148+
149+
.circles li:nth-child(18){
150+
left: 50%;
151+
width: 25px;
152+
height: 25px;
153+
animation-delay: 0s;
154+
animation-duration: 45s;
155+
}
156+
157+
.circles li:nth-child(19){
158+
left: 95%;
159+
width: 15px;
160+
height: 15px;
161+
animation-delay: 2s;
162+
animation-duration: 35s;
163+
}
164+
165+
.circles li:nth-child(20){
166+
left: 85%;
167+
width: 150px;
168+
height: 150px;
169+
animation-delay: 0s;
170+
animation-duration: 11s;
171+
}
172+
@keyframes animate {
173+
174+
0%{
175+
transform: translateY(0) rotate(0deg);
176+
opacity: 1;
177+
border-radius: 0;
178+
}
179+
180+
100%{
181+
transform: translateY(-1200px) rotate(360deg);
182+
opacity: 0;
183+
border-radius: 70%;
184+
}
185+
186+
}
187+
188+
@media screen and (max-width: 700px) {
189+
.circles {
190+
visibility: hidden;
191+
}
192+
}

‎cropped_image.png

29.9 KB
Loading

0 commit comments

Comments
 (0)