Skip to content

Commit 6c28f53

Browse files
MjavadHMjavadH
committed
Added Page 404 SkyFly-Night 
1 parent d59fce7 commit 6c28f53

File tree

8 files changed

+187
-0
lines changed

8 files changed

+187
-0
lines changed

‎Minimal/SkyFly-Night/Image.png‎

278 KB
Loading

‎Minimal/SkyFly-Night/assets/1.png‎

134 KB
Loading

‎Minimal/SkyFly-Night/assets/2.png‎

18.2 KB
Loading

‎Minimal/SkyFly-Night/assets/3.png‎

11.6 KB
Loading

‎Minimal/SkyFly-Night/assets/4.png‎

18.3 KB
Loading

‎Minimal/SkyFly-Night/assets/5.png‎

24 KB
Loading

‎Minimal/SkyFly-Night/assets/style.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
font-size: 16px;
10+
font-family: Poppins, sans-serif;
11+
overflow: hidden !important;
12+
background: #0f0f0f;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
}
17+
18+
.background {
19+
width: 100%;
20+
height: 100%;
21+
position: absolute;
22+
}
23+
24+
.moon {
25+
z-index: 2;
26+
}
27+
28+
.Cloud {
29+
position: absolute;
30+
user-select: none;
31+
filter: brightness(30%);
32+
}
33+
34+
.Star {
35+
position: absolute;
36+
user-select: none;
37+
z-index: -1;
38+
}
39+
40+
.T404 {
41+
display: flex;
42+
justify-content: center;
43+
align-items: center;
44+
font-size: 10em;
45+
color: #fafafa;
46+
user-select: none;
47+
}
48+
49+
h1 {
50+
z-index: 1;
51+
-webkit-animation: fly 5s linear infinite;
52+
-o-animation: fly 5s linear infinite;
53+
animation: fly 5s linear infinite;
54+
}
55+
56+
.X {
57+
margin: 0 2rem;
58+
}
59+
60+
h1:nth-child(2) {
61+
animation-duration: 7s;
62+
}
63+
64+
h1:nth-child(3) {
65+
animation-duration: 9s;
66+
}
67+
68+
@keyframes fly {
69+
0%, 100% {
70+
transform: translateY(0);
71+
}
72+
50% {
73+
transform: translateY(60px);
74+
}
75+
}
76+
77+
@media (min-width: 1024px) {
78+
.T404 {
79+
font-size: 20vw;
80+
}
81+
}
82+
83+
@media (max-width: 768px) {
84+
.T404 {
85+
font-size: 7em;
86+
}
87+
}
88+
89+
@media (max-width: 412px) {
90+
.T404 {
91+
font-size: 6.5em;
92+
}
93+
}
94+
95+
@media (max-width: 300px) {
96+
.T404 {
97+
font-size: 4.5em;
98+
}
99+
}

‎Minimal/SkyFly-Night/index.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
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 SkyFly-Night</title>
9+
<!--Style-->
10+
<link rel="stylesheet" href="assets/style.css">
11+
</head>
12+
<body>
13+
<section id="background" class="background">
14+
<svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="190">
15+
<path fill="#FCF7CB" d="M64 29A41.5 42 0 1 0 64 113A41.5 42 0 1 0 64 29Z"/>
16+
<path fill="#D8D5B2"
17+
d="M64,29.5c-2.2,0-4.4,0.2-6.5,0.5c19.9,3.2,35,20.5,35,41.5c0,21-15.2,38.3-35,41.5c2.1,0.3,4.3,0.5,6.5,0.5c22.9,0,41.5-18.8,41.5-42C105.5,48.3,86.9,29.5,64,29.5z"/>
18+
<path fill="#454B54"
19+
d="M64,116.5c-24.6,0-44.5-20.2-44.5-45s20-45,44.5-45s44.5,20.2,44.5,45S88.6,116.5,64,116.5z M64,32.5c-21.3,0-38.5,17.5-38.5,39s17.3,39,38.5,39s38.5-17.5,38.5-39S85.3,32.5,64,32.5z"/>
20+
<path fill="#D8D5B2"
21+
d="M56 71.6A7.5 7.5 0 1 0 56 86.6 7.5 7.5 0 1 0 56 71.6zM61 43.5A4 4 0 1 0 61 51.5 4 4 0 1 0 61 43.5zM91 61.5A6 6 0 1 0 91 73.5 6 6 0 1 0 91 61.5z"/>
22+
</svg>
23+
</section>
24+
<section class="T404">
25+
<h1>4</h1>
26+
<h1 class="X">X</h1>
27+
<h1>4</h1>
28+
</section>
29+
</body>
30+
<script>
31+
let background = document.getElementById("background");
32+
33+
/* ----- Clouds -----*/
34+
let clouds = [];
35+
let cloud_len = 10;
36+
37+
function CreateCloud(length) {
38+
for (let i = 0; i < length; i++) {
39+
let Cloud = document.createElement("img");
40+
Cloud.className = "Cloud";
41+
Cloud.style.top = Random_Position(-10, background.offsetHeight) + "px";
42+
Cloud.style.right = -Random_Position(100, 1000) + "px";
43+
Cloud.style.width = Random_Position(100, 600) + "px";
44+
Cloud.style.zIndex = Random_Position(1, 2);
45+
Cloud.src = "./assets/" + Random_Position(1, 5) + ".png";
46+
background.appendChild(Cloud)
47+
clouds.push(Cloud)
48+
}
49+
}
50+
51+
function Cloud_Animation() {
52+
for (let i = 0; i < clouds.length; i++) {
53+
clouds[i].style.left = (clouds[i].offsetLeft - 15) + "px"
54+
if (clouds[i].offsetLeft < -400) {
55+
clouds[i].remove()
56+
clouds.splice(i, 1);
57+
CreateCloud(1)
58+
}
59+
}
60+
}
61+
62+
CreateCloud(cloud_len);
63+
setInterval(Cloud_Animation, 70);
64+
/* ----- Stars ----- */
65+
let Stars = ["★", "☆", "⚝", "✩", "✮", "✵", "✹", "⭑", "🟉", "🟊", "🟌", "🟒"]
66+
let Stars_color = ["#ffffff", "#ff0000", "#ff8c00", "#ffff00", "#00ff00", "#0000ff", "#ff00ff"]
67+
68+
function CreateStar(length) {
69+
for (let i = 0; i < length; i++) {
70+
let Star = document.createElement("p");
71+
Star.className = "Star";
72+
Star.style.top = Random_Position(-10, background.offsetHeight) + "px";
73+
Star.style.left = Random_Position(0, background.offsetWidth) + "px";
74+
Star.style.fontSize = Random_Position(1, 10) + "px";
75+
Star.style.color = Stars_color[Random_Position(0, Stars_color.length - 1)];
76+
Star.style.textShadow = Star.style.color + "0 0 " + Random_Position(3, 20) + "px";
77+
Star.innerText = Stars[Random_Position(0, Stars.length - 1)]
78+
background.appendChild(Star)
79+
}
80+
}
81+
82+
CreateStar(60);
83+
84+
function Random_Position(min, max) {
85+
return Math.floor(Math.random() * (max - (min) + 1)) + (min);
86+
}
87+
</script>
88+
</html>

0 commit comments

Comments
 (0)