Skip to content

Commit 4674438

Browse files
hariket-sheth1hariket-sheth1
committed
Added HTML Templates
1 parent 34684c1 commit 4674438

15 files changed

+4141
-0
lines changed

‎templates/404.html

+363
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,363 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>404 Page not Found</title>
8+
</head>
9+
<body>
10+
<div class="box">
11+
<div class="box__ghost">
12+
<div class="symbol"></div>
13+
<div class="symbol"></div>
14+
<div class="symbol"></div>
15+
<div class="symbol"></div>
16+
<div class="symbol"></div>
17+
<div class="symbol"></div>
18+
19+
<div class="box__ghost-container">
20+
<div class="box__ghost-eyes">
21+
<div class="box__eye-left"></div>
22+
<div class="box__eye-right"></div>
23+
</div>
24+
<div class="box__ghost-bottom">
25+
<div></div>
26+
<div></div>
27+
<div></div>
28+
<div></div>
29+
<div></div>
30+
</div>
31+
</div>
32+
<div class="box__ghost-shadow"></div>
33+
</div>
34+
35+
<div class="box__description">
36+
<div class="box__description-container">
37+
<div class="box__description-title">Whoops!</div>
38+
<div class="box__description-text">It seems like we couldn't find the page you were looking for</div>
39+
</div>
40+
41+
<a href="/" class="box__button">Go back</a>
42+
43+
</div>
44+
45+
</div>
46+
<style>
47+
48+
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
49+
html, body {
50+
background: #28254c;
51+
font-family: 'Ubuntu';
52+
}
53+
* {
54+
box-sizing: border-box;
55+
}
56+
.box {
57+
width: 350px;
58+
height: 100%;
59+
max-height: 600px;
60+
min-height: 450px;
61+
background: #332f63;
62+
border-radius: 20px;
63+
position: absolute;
64+
left: 50%;
65+
top: 50%;
66+
transform: translate(-50%, -50%);
67+
padding: 30px 50px;
68+
}
69+
.box .box__ghost {
70+
padding: 15px 25px 25px;
71+
position: absolute;
72+
left: 50%;
73+
top: 30%;
74+
transform: translate(-50%, -30%);
75+
}
76+
.box .box__ghost .symbol:nth-child(1) {
77+
opacity: 0.2;
78+
animation: shine 4s ease-in-out 3s infinite;
79+
}
80+
.box .box__ghost .symbol:nth-child(1):before, .box .box__ghost .symbol:nth-child(1):after {
81+
content: '';
82+
width: 12px;
83+
height: 4px;
84+
background: #fff;
85+
position: absolute;
86+
border-radius: 5px;
87+
bottom: 65px;
88+
left: 0;
89+
}
90+
.box .box__ghost .symbol:nth-child(1):before {
91+
transform: rotate(45deg);
92+
}
93+
.box .box__ghost .symbol:nth-child(1):after {
94+
transform: rotate(-45deg);
95+
}
96+
.box .box__ghost .symbol:nth-child(2) {
97+
position: absolute;
98+
left: -5px;
99+
top: 30px;
100+
height: 18px;
101+
width: 18px;
102+
border: 4px solid;
103+
border-radius: 50%;
104+
border-color: #fff;
105+
opacity: 0.2;
106+
animation: shine 4s ease-in-out 1.3s infinite;
107+
}
108+
.box .box__ghost .symbol:nth-child(3) {
109+
opacity: 0.2;
110+
animation: shine 3s ease-in-out 0.5s infinite;
111+
}
112+
.box .box__ghost .symbol:nth-child(3):before, .box .box__ghost .symbol:nth-child(3):after {
113+
content: '';
114+
width: 12px;
115+
height: 4px;
116+
background: #fff;
117+
position: absolute;
118+
border-radius: 5px;
119+
top: 5px;
120+
left: 40px;
121+
}
122+
.box .box__ghost .symbol:nth-child(3):before {
123+
transform: rotate(90deg);
124+
}
125+
.box .box__ghost .symbol:nth-child(3):after {
126+
transform: rotate(180deg);
127+
}
128+
.box .box__ghost .symbol:nth-child(4) {
129+
opacity: 0.2;
130+
animation: shine 6s ease-in-out 1.6s infinite;
131+
}
132+
.box .box__ghost .symbol:nth-child(4):before, .box .box__ghost .symbol:nth-child(4):after {
133+
content: '';
134+
width: 15px;
135+
height: 4px;
136+
background: #fff;
137+
position: absolute;
138+
border-radius: 5px;
139+
top: 10px;
140+
right: 30px;
141+
}
142+
.box .box__ghost .symbol:nth-child(4):before {
143+
transform: rotate(45deg);
144+
}
145+
.box .box__ghost .symbol:nth-child(4):after {
146+
transform: rotate(-45deg);
147+
}
148+
.box .box__ghost .symbol:nth-child(5) {
149+
position: absolute;
150+
right: 5px;
151+
top: 40px;
152+
height: 12px;
153+
width: 12px;
154+
border: 3px solid;
155+
border-radius: 50%;
156+
border-color: #fff;
157+
opacity: 0.2;
158+
animation: shine 1.7s ease-in-out 7s infinite;
159+
}
160+
.box .box__ghost .symbol:nth-child(6) {
161+
opacity: 0.2;
162+
animation: shine 2s ease-in-out 6s infinite;
163+
}
164+
.box .box__ghost .symbol:nth-child(6):before, .box .box__ghost .symbol:nth-child(6):after {
165+
content: '';
166+
width: 15px;
167+
height: 4px;
168+
background: #fff;
169+
position: absolute;
170+
border-radius: 5px;
171+
bottom: 65px;
172+
right: -5px;
173+
}
174+
.box .box__ghost .symbol:nth-child(6):before {
175+
transform: rotate(90deg);
176+
}
177+
.box .box__ghost .symbol:nth-child(6):after {
178+
transform: rotate(180deg);
179+
}
180+
.box .box__ghost .box__ghost-container {
181+
background: #fff;
182+
width: 100px;
183+
height: 100px;
184+
border-radius: 100px 100px 0 0;
185+
position: relative;
186+
margin: 0 auto;
187+
animation: upndown 3s ease-in-out infinite;
188+
}
189+
.box .box__ghost .box__ghost-container .box__ghost-eyes {
190+
position: absolute;
191+
left: 50%;
192+
top: 45%;
193+
height: 12px;
194+
width: 70px;
195+
}
196+
.box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-left {
197+
width: 12px;
198+
height: 12px;
199+
background: #332f63;
200+
border-radius: 50%;
201+
margin: 0 10px;
202+
position: absolute;
203+
left: 0;
204+
}
205+
.box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-right {
206+
width: 12px;
207+
height: 12px;
208+
background: #332f63;
209+
border-radius: 50%;
210+
margin: 0 10px;
211+
position: absolute;
212+
right: 0;
213+
}
214+
.box .box__ghost .box__ghost-container .box__ghost-bottom {
215+
display: flex;
216+
position: absolute;
217+
top: 100%;
218+
left: 0;
219+
right: 0;
220+
}
221+
.box .box__ghost .box__ghost-container .box__ghost-bottom div {
222+
flex-grow: 1;
223+
position: relative;
224+
top: -10px;
225+
height: 20px;
226+
border-radius: 100%;
227+
background-color: #fff;
228+
}
229+
.box .box__ghost .box__ghost-container .box__ghost-bottom div:nth-child(2n) {
230+
top: -12px;
231+
margin: 0 0px;
232+
border-top: 15px solid #332f63;
233+
background: transparent;
234+
}
235+
.box .box__ghost .box__ghost-shadow {
236+
height: 20px;
237+
box-shadow: 0 50px 15px 5px #3b3769;
238+
border-radius: 50%;
239+
margin: 0 auto;
240+
animation: smallnbig 3s ease-in-out infinite;
241+
}
242+
.box .box__description {
243+
position: absolute;
244+
bottom: 30px;
245+
left: 50%;
246+
transform: translateX(-50%);
247+
}
248+
.box .box__description .box__description-container {
249+
color: #fff;
250+
text-align: center;
251+
width: 200px;
252+
font-size: 16px;
253+
margin: 0 auto;
254+
}
255+
.box .box__description .box__description-container .box__description-title {
256+
font-size: 24px;
257+
letter-spacing: 0.5px;
258+
}
259+
.box .box__description .box__description-container .box__description-text {
260+
color: #8c8aa7;
261+
line-height: 20px;
262+
margin-top: 20px;
263+
}
264+
.box .box__description .box__button {
265+
display: block;
266+
position: relative;
267+
background: #ff5e65;
268+
border: 1px solid transparent;
269+
border-radius: 50px;
270+
height: 50px;
271+
text-align: center;
272+
text-decoration: none;
273+
color: #fff;
274+
line-height: 50px;
275+
font-size: 18px;
276+
padding: 0 70px;
277+
white-space: nowrap;
278+
margin-top: 25px;
279+
transition: background 0.5s ease;
280+
overflow: hidden;
281+
-webkit-mask-image: -webkit-radial-gradient(white, black);
282+
}
283+
.box .box__description .box__button:before {
284+
content: '';
285+
position: absolute;
286+
width: 20px;
287+
height: 100px;
288+
background: #fff;
289+
bottom: -25px;
290+
left: 0;
291+
border: 2px solid #fff;
292+
transform: translateX(-50px) rotate(45deg);
293+
transition: transform 0.5s ease;
294+
}
295+
.box .box__description .box__button:hover {
296+
background: transparent;
297+
border-color: #fff;
298+
}
299+
.box .box__description .box__button:hover:before {
300+
transform: translateX(250px) rotate(45deg);
301+
}
302+
@keyframes upndown {
303+
0% {
304+
transform: translateY(5px);
305+
}
306+
50% {
307+
transform: translateY(15px);
308+
}
309+
100% {
310+
transform: translateY(5px);
311+
}
312+
}
313+
@keyframes smallnbig {
314+
0% {
315+
width: 90px;
316+
}
317+
50% {
318+
width: 100px;
319+
}
320+
100% {
321+
width: 90px;
322+
}
323+
}
324+
@keyframes shine {
325+
0% {
326+
opacity: 0.2;
327+
}
328+
25% {
329+
opacity: 0.1;
330+
}
331+
50% {
332+
opacity: 0.2;
333+
}
334+
100% {
335+
opacity: 0.2;
336+
}
337+
}
338+
339+
</style>
340+
341+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
342+
<script>
343+
344+
345+
var pageX = $(document).width();
346+
var pageY = $(document).height();
347+
var mouseY=0;
348+
var mouseX=0;
349+
350+
$(document).mousemove(function( event ) {
351+
//verticalAxis
352+
mouseY = event.pageY;
353+
yAxis = (pageY/2-mouseY)/pageY*300;
354+
//horizontalAxis
355+
mouseX = event.pageX / -pageX;
356+
xAxis = -mouseX * 100 - 100;
357+
358+
$('.box__ghost-eyes').css({ 'transform': 'translate('+ xAxis +'%,-'+ yAxis +'%)' });
359+
});
360+
</script>
361+
362+
</body>
363+
</html>

0 commit comments

Comments
 (0)