Skip to content

Commit 39e09df

Browse files
matteobrunimatteobruni
committed
startup space 404 template
1 parent 24444f9 commit 39e09df

File tree

7 files changed

+487
-1
lines changed

7 files changed

+487
-1
lines changed

‎README.md

+19-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,19 @@
1-
# 404-templates
1+
# tsParticles 404 Templates
2+
3+
tsParticles used in various 404 Pages for Websites
4+
5+
## 404 Space Page Preview
6+
7+
[![login](https://raw.githubusercontent.com/tsparticles/auth-template/master/__screenshots/login.png?raw=true)](https://tsparticles.github.io/404-templates/space/404.html)
8+
9+
See working preview [here](https://tsparticles.github.io/404-templates/space/404.html)
10+
11+
## What is tsParticles
12+
13+
[tsParticles](https://github.com/matteobruni/tsparticles) is a lightweight library for easily creating particles animations in your websites or web applications.
14+
15+
The [tsParticles](https://github.com/matteobruni/tsparticles) library is ready to be used in standard JavaScript, React, Vue.js, Angular, Svelte, jQuery, Preact, Inferno.
16+
17+
Want to see more particles demos? [Checkout this collection](https://codepen.io/collection/DPOage)
18+
19+
Want to see more templates or want to share yours? [Checkout this README](https://github.com/tsparticles/templates)

‎_config.yml

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
theme: jekyll-theme-cayman

‎space/404.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<link type="text/css" rel="stylesheet" href="css/404.css" />
6+
</head>
7+
8+
<body class="permission_denied">
9+
<div id="tsparticles"></div>
10+
<div class="denied__wrapper">
11+
<h1>404</h1>
12+
<h3>LOST IN <span>SPACE</span> App-Name? Hmm, looks like that page doesn't exist.</h3>
13+
<img id="astronaut" src="images/astronaut.svg" />
14+
<img id="planet" src="images/planet.svg" />
15+
<a href="#"><button class="denied__link">Go Home</button></a>
16+
</div>
17+
18+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tsparticles.min.js"></script>
19+
<script type="text/javascript" src="js/404.js"></script>
20+
21+
</html>

‎space/css/404.css

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
@import url("https://fonts.googleapis.com/css?family=Dosis:300,400,700,800");
2+
3+
/** Styles for the 403 Page **/
4+
5+
.particle-error,
6+
.permission_denied,
7+
#tsparticles {
8+
width: 100%;
9+
height: 100%;
10+
margin: 0px !important;
11+
}
12+
13+
#tsparticles {
14+
position: fixed !important;
15+
opacity: 0.23;
16+
}
17+
18+
.permission_denied {
19+
background: #24344c !important;
20+
}
21+
22+
.permission_denied a {
23+
text-decoration: none;
24+
}
25+
26+
.denied__wrapper {
27+
max-width: 390px;
28+
width: 100%;
29+
height: 390px;
30+
display: block;
31+
margin: 0 auto;
32+
position: relative;
33+
margin-top: 8vh;
34+
}
35+
36+
.permission_denied h1 {
37+
text-align: center;
38+
color: #fff;
39+
font-family: "Dosis", sans-serif;
40+
font-size: 100px;
41+
margin-bottom: 0px;
42+
font-weight: 800;
43+
}
44+
45+
.permission_denied h3 {
46+
text-align: center;
47+
color: #fff;
48+
font-size: 19px;
49+
line-height: 23px;
50+
max-width: 330px;
51+
margin: 0px auto 30px auto;
52+
font-family: "Dosis", sans-serif;
53+
font-weight: 400;
54+
}
55+
56+
.permission_denied h3 span {
57+
position: relative;
58+
width: 65px;
59+
display: inline-block;
60+
}
61+
62+
.permission_denied h3 span:after {
63+
content: "";
64+
border-bottom: 3px solid #ffbb39;
65+
position: absolute;
66+
left: 0;
67+
top: 43%;
68+
width: 100%;
69+
}
70+
71+
.denied__link {
72+
background: none;
73+
color: #fff;
74+
padding: 12px 0px 10px 0px;
75+
border: 1px solid #fff;
76+
outline: none;
77+
border-radius: 7px;
78+
width: 150px;
79+
font-size: 15px;
80+
text-align: center;
81+
margin: 0 auto;
82+
vertical-align: middle;
83+
display: block;
84+
margin-bottom: 40px;
85+
margin-top: 25px;
86+
font-family: "Dosis", sans-serif;
87+
font-weight: 400;
88+
}
89+
90+
.denied__link:hover {
91+
color: #ffbb39;
92+
border-color: #ffbb39;
93+
cursor: pointer;
94+
opacity: 1;
95+
}
96+
97+
.permission_denied .stars {
98+
animation: sparkle 1.6s infinite ease-in-out alternate;
99+
}
100+
101+
@keyframes sparkle {
102+
0% {
103+
opacity: 1;
104+
}
105+
100% {
106+
opacity: 0.3;
107+
}
108+
}
109+
110+
#astronaut {
111+
width: 43px;
112+
position: absolute;
113+
right: 20px;
114+
top: 210px;
115+
animation: spin 4.5s infinite linear;
116+
}
117+
118+
@keyframes spin {
119+
0% {
120+
transform: rotateZ(0deg);
121+
}
122+
100% {
123+
transform: rotateZ(360deg);
124+
}
125+
}
126+
127+
@media (max-width: 600px) {
128+
.permission_denied h1 {
129+
font-size: 75px;
130+
}
131+
.permission_denied h3 {
132+
font-size: 16px;
133+
width: 200px;
134+
margin: 0 auto;
135+
line-height: 23px;
136+
}
137+
.permission_denied h3 span {
138+
width: 60px;
139+
}
140+
#astronaut {
141+
width: 35px;
142+
right: 40px;
143+
top: 170px;
144+
}
145+
}
146+
147+
.saturn,
148+
.saturn-2,
149+
.hover {
150+
animation: hover 2s infinite ease-in-out alternate;
151+
}
152+
153+
@keyframes hover {
154+
0% {
155+
transform: translateY(3px);
156+
}
157+
100% {
158+
transform: translateY(-3px);
159+
}
160+
}

‎space/images/astronaut.svg

+139
Loading

0 commit comments

Comments
 (0)