Skip to content

Commit 5563690

Browse files
MjavadHMjavadH
committed
Add Page 404 Floating Cloud 
1 parent 8c70f9a commit 5563690

File tree

3 files changed

+307
-0
lines changed

3 files changed

+307
-0
lines changed

‎Fantasy/Floating Cloud/Image.png‎

29.5 KB
Loading

‎Fantasy/Floating Cloud/assets/style.css‎

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
/* Source code: https://codepen.io/shshaw/pen/jOMdaL */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
body {
11+
min-height: 100dvh;
12+
color: #FFF;
13+
background-color: #FD940A;
14+
background-image: radial-gradient(circle, #F9A72B 0%, #FA9026 70%, #FB6C1F 100%);
15+
font-family: 'Poppins', sans-serif;
16+
font-size: 16px;
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
overflow-x: hidden;
21+
}
22+
23+
#text404 {
24+
font-size: 10em;
25+
z-index: 2;
26+
}
27+
28+
#Clouds {
29+
position: absolute;
30+
top: 0;
31+
right: 0;
32+
bottom: 0;
33+
left: 0;
34+
margin: auto;
35+
height: 30%;
36+
overflow: hidden;
37+
animation: FadeIn 3.1s ease-out;
38+
user-select: none;
39+
}
40+
41+
@keyframes FadeIn {
42+
from {
43+
opacity: 0;
44+
}
45+
to {
46+
opacity: 1;
47+
}
48+
}
49+
50+
.Cloud {
51+
position: absolute;
52+
width: 100%;
53+
height: 70px;
54+
background-repeat: no-repeat;
55+
background-size: auto 100%;
56+
animation: Float 120s linear infinite, FadeFloat 120s linear infinite;
57+
z-index: 1;
58+
}
59+
60+
.Cloud.Foreground {
61+
height: 10%;
62+
min-height: 20px;
63+
z-index: 3;
64+
}
65+
66+
.Cloud.Background {
67+
height: 9.09%;
68+
min-height: 8px;
69+
animation-duration: 210s;
70+
z-index: 1;
71+
}
72+
73+
@keyframes Float {
74+
from {
75+
transform: translateX(100%) translateZ(0);
76+
}
77+
to {
78+
transform: translateX(-15%) translateZ(0);
79+
}
80+
}
81+
82+
@keyframes FadeFloat {
83+
0%, 100% {
84+
opacity: 0;
85+
}
86+
5%, 90% {
87+
opacity: 1;
88+
}
89+
}
90+
91+
.Cloud:nth-child(10) {
92+
animation-delay: -184.61538462s;
93+
top: 60%;
94+
}
95+
96+
.Cloud.Foreground:nth-child(10) {
97+
animation-duration: 80s;
98+
height: 35%;
99+
}
100+
101+
.Cloud.Background:nth-child(10) {
102+
animation-duration: 110s;
103+
}
104+
105+
/* Repeat similar structure for other clouds with nth-child(9) to nth-child(1) */
106+
.Cloud:nth-child(9) {
107+
animation-delay: -166.15384615s;
108+
top: 54%;
109+
}
110+
111+
.Cloud.Foreground:nth-child(9) {
112+
animation-duration: 84s;
113+
height: 32.5%;
114+
}
115+
116+
.Cloud.Background:nth-child(9) {
117+
animation-duration: 114s;
118+
}
119+
120+
.Cloud:nth-child(8) {
121+
animation-delay: -147.69230769s;
122+
top: 48%;
123+
}
124+
125+
.Cloud.Foreground:nth-child(8) {
126+
animation-duration: 88s;
127+
height: 30%;
128+
}
129+
130+
.Cloud.Background:nth-child(8) {
131+
animation-duration: 118s;
132+
}
133+
134+
.Cloud:nth-child(7) {
135+
animation-delay: -129.23076923s;
136+
top: 42%;
137+
}
138+
139+
.Cloud.Foreground:nth-child(7) {
140+
animation-duration: 92s;
141+
height: 27.5%;
142+
}
143+
144+
.Cloud.Background:nth-child(7) {
145+
animation-duration: 122s;
146+
height: 0.34%;
147+
}
148+
149+
.Cloud:nth-child(6) {
150+
animation-delay: -110.76923077s;
151+
top: 36%;
152+
}
153+
154+
.Cloud.Foreground:nth-child(6) {
155+
animation-duration: 96s;
156+
height: 25%;
157+
}
158+
159+
.Cloud.Background:nth-child(6) {
160+
animation-duration: 126s;
161+
height: 1.59%;
162+
}
163+
164+
.Cloud:nth-child(5) {
165+
animation-delay: -92.30769231s;
166+
top: 30%;
167+
}
168+
169+
.Cloud.Foreground:nth-child(5) {
170+
animation-duration: 100s;
171+
height: 22.5%;
172+
}
173+
174+
.Cloud.Background:nth-child(5) {
175+
animation-duration: 130s;
176+
height: 2.84%;
177+
}
178+
179+
.Cloud:nth-child(4) {
180+
animation-delay: -73.84615385s;
181+
top: 24%;
182+
}
183+
184+
.Cloud.Foreground:nth-child(4) {
185+
animation-duration: 104s;
186+
height: 20%;
187+
}
188+
189+
.Cloud.Background:nth-child(4) {
190+
animation-duration: 134s;
191+
height: 4.09%;
192+
}
193+
194+
.Cloud:nth-child(3) {
195+
animation-delay: -55.38461538s;
196+
top: 18%;
197+
}
198+
199+
.Cloud.Foreground:nth-child(3) {
200+
animation-duration: 108s;
201+
height: 17.5%;
202+
}
203+
204+
.Cloud.Background:nth-child(3) {
205+
animation-duration: 138s;
206+
height: 5.34%;
207+
}
208+
209+
.Cloud:nth-child(2) {
210+
animation-delay: -36.92307692s;
211+
top: 12%;
212+
}
213+
214+
.Cloud.Foreground:nth-child(2) {
215+
animation-duration: 112s;
216+
height: 15%;
217+
}
218+
219+
.Cloud.Background:nth-child(2) {
220+
animation-duration: 142s;
221+
height: 6.59%;
222+
}
223+
224+
.Cloud:nth-child(1) {
225+
animation-delay: -18.46153846s;
226+
top: 6%;
227+
}
228+
229+
.Cloud.Foreground:nth-child(1) {
230+
animation-duration: 116s;
231+
height: 12.5%;
232+
}
233+
234+
.Cloud.Background:nth-child(1) {
235+
animation-duration: 146s;
236+
height: 7.84%;
237+
}
238+
239+
.Cloud {
240+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAABgCAYAAACTzNnjAAAFCklEQVR42u3d34uVRRjA8YMsEi0iSwhdRBGhSJgZiNRFIkWhQVEXBipKUVBBLCF6k0h4UxFkBLq4QT/Qiyi80EgxCjXMWqOMtqy0bBNja92yXatN3c3pGc9sHU/v+X3emWfe93vx+QN23u+e95x5Z94pmNWFQo5NEytErzgoBsSIOCf+FqbEBTEhzophcVTsFxvFEjE152PZHGMukbcB6BAPij0uqgtl0bXCBvyjeFPcS2wEWc0y0ec++Ywnf7rwbyc8grQ6RY8Y9RhhJT+Jde4TmghzFuR08bo4ryDEpE/N58QUYsx+kFPcD4yzCkMsZz+1uwkyu0HeKYYiCLHcN2I2QWYnSPudbHubfy37NuFu4wQZeZD2k2Uw4hDLHRZdBBnnH3K/5ykcX86IeQQZl6civ0XXYv/RlhJkHLZkOMTypz7dBKnbyzmJsfTZeTdB6vRszmIsjXI5QeryWMa/M9ZinzjdTJA63CLGcxzjpD/ElQQZfq3iKDFe8lSHIAPqI8L/6SHIMB4nvorTQQsI0v+teoz4KjpBkH7tIrqaNhCkH9cnbK5C8q/uywiSHzKabCLIdM3K+QR4o8YysfVWcZDvElnD1hNkOi5XuilLu5MlOyzni3vESnGfWCRuIMjm1zgSWPM7GWvNXdonXkdM8Q0dCwmytu8Iy/vK9B3iRoJMnghnqifc8jb7yXkXQf5nLWGo2WR2HUGuLrxPDKq25D6d9yBPE4I6/e6rVO6CnMpkuFq/eLmFKwtyMRde/dOg2XkKkvlH/X5P9ZNSWZBvcMGjMJza6iJlQe7nYkfjozwE+TkXOiprsx7kES5yVOzLYK/IcpA/cJGj806Wg/yaCxzlzsersxpkPxc4SruzGuQBLm603yU7DPOQUOSJWIK0E6j2lcvPm+JJVp+674oDbiFuv5t/fEXs5cJG65DmIO3KY3vG3yCLbXO1N1xVkB3uWfQQFye3rtUS5DN1bC5C9j0cOki7XOwUFwJOb6gg7TmCW1lMizI7QwQ5nW2qqGCv7yDtwsxfGXhU0OczyKvECIOOKvb5CnKa2+TDoKOat3wFyaIH1ONFH0H2MNCo00NpBzmXR39owIy0gzzOIKNOv6X9LHsZg4wGp3xsM/ZMoUfF3aaZ4++qBDnIIKMNzrsHKb11Lb6oEORtDCRSYB81f+vWxzYUJBv2kTYb5vx6gzzHgMHTjsUXagV5BwMFzz78d5NYQpDbGCAEcOzissaEIL9kcBDIx0lBsrwMIW0uD3KcQUHgqaEFpUGyLQGhnSgNkgGBBg8QJDQ5Phkky82g5bvkNQXDscDQY6MNcpiBgBL9NsjDDAS0LPq1Qb7EQECJicLFSUkGAkpMLgMaYzCgKci3GQxomPqZDPImBgMa9uOULifnDWcI7VRpkIsYEAR2sHwX2GcMCgJak/QKPh4lIsgcpOhM2iv7JIODAPqqvY7vPQYInlf6zKsWpN2iOMBAwZMD9bzSudPwvh+kr3gofJ0vve/ikxIp36pXNHosiD2j5gMGD2ksyG3lJK917qc5A4l2eNW04Wi5OaZ41DADilZu0xtMmw/fXCV+ZnDRoFFTfBdpaudlLxVfsXMRNYy7W3SH8XSAu/01bo8s/kL8xQWAM+JC7DIeDnCvZqZ4RGxxi3/3iUPOJ+5TtRXfG/v6jeadNMVjlqsZquG0uwU164ybg2vFuPuh2ax23tkm3N91VLwmbjVNvPT+H7Ro4730ITNPAAAAAElFTkSuQmCC);
241+
}
242+
243+
.Cloud.Background {
244+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAAAqCAYAAAAUJM0rAAACFUlEQVRo3u3aPSwDYRzH8UZEbAYiYrDYjLZGpIPBJLGwSKwi0k1iYBKDdFJsEiMxSZgsFZJGiGjqJWEhSKuaNKRUG8r5PfI8SXOud72+PH2eu2f47Ndv7+V5/nee/G6bh5MWmIV9iEMWvkGjfiADD7AHk9BU6+PSNK0kPAINwwXkC6KU6gvC4HVyKB/clhHHCDnbTqHbSaEaYIv+OK3KyBk274RQrXBXg0B6B/QPkTIUiZTiEIm5gkbZQjXTJ5nG2ZFsocJ1iMQEZQk1VcdIGl2L9Yoeitwj3uocirgRPVRAgEjMoMihkgKFStIzK063QVHYhKF6h/IKFMlKGpaNlhM8Qq1JFIp5gQHeoSIShmJPST/PUElJQ7FN9hivUGmJQxE56OQRKiN5qL/NNY9QKQeEIpdgR7VC9cEqHeGeUyEHXHrMUiWhyKx6BV4dEsNMtNxQI4Ls33h5LidUoEYjXKEXoXZDLbgsEBOzE8qne8fmJhE7oWIujUQcwhyMmy0VSKRRF0cyWlclYMYo1LEKZOgRugpDpVWUot5ZLI8LlwN23bNQKoY1vwpVmmsS6kOFsPRJQl2qENZIqGkVwnp9xb5nUksEcxm2hZlQMcy3OYXTgx0VpOi2pl8/jwqpMP9sF5twBl08ctE7I/dws5l5D5y4OBj51HvdzluYdlik0RL06cjkKpSlB1Span5x/AQb5Hfrxyy/oU5ISeVw53AAAAAASUVORK5CYII=);
245+
}
246+
247+
@media (min-width: 1440px) {
248+
#text404 {
249+
font-size: 15em;
250+
}
251+
}
252+
253+
@media (max-width: 768px) {
254+
#text404 {
255+
font-size: 6em;
256+
}
257+
}
258+
259+
@media (max-width: 412px) {
260+
#text404 {
261+
font-size: 4em;
262+
}
263+
}
264+
265+
@media (max-width: 300px) {
266+
#text404 {
267+
font-size: 3em;
268+
}
269+
}
270+
271+
@media (max-width: 200px) {
272+
#text404 {
273+
font-size: 2em;
274+
}
275+
}

‎Fantasy/Floating Cloud/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Page 404 Floating Cloud</title>
9+
<!-- Source code: https://codepen.io/shshaw/pen/jOMdaL -->
10+
<!--Style-->
11+
<link rel="stylesheet" href="assets/style.css">
12+
</head>
13+
<body>
14+
<div id="Clouds">
15+
<div class="Cloud Foreground"></div>
16+
<div class="Cloud Background"></div>
17+
<div class="Cloud Foreground"></div>
18+
<div class="Cloud Background"></div>
19+
<div class="Cloud Foreground"></div>
20+
<div class="Cloud Background"></div>
21+
<div class="Cloud Background"></div>
22+
<div class="Cloud Foreground"></div>
23+
<div class="Cloud Background"></div>
24+
<div class="Cloud Background"></div>
25+
</div>
26+
27+
<div id="text404">
28+
<h1>4X4</h1>
29+
</div>
30+
31+
</body>
32+
</html>

0 commit comments

Comments
 (0)