-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy patherrorpage.html
More file actions
142 lines (136 loc) · 10.1 KB
/
errorpage.html
File metadata and controls
142 lines (136 loc) · 10.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>404 Page</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;900&display=swap" rel="stylesheet">
</head>
<style>
body {
margin: 0;
font-family: 'Poppins', sans-serif;
height: 100vh;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='1024' viewBox='0 0 1440 1024'%3E%3Cg filter='url(%23filter0)'%3E%3Crect width='1440' height='1024' fill='url(%23paint0)'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0' x='0' y='0' width='1440' height='1024' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2 2' stitchTiles='stitch' numOctaves='3' result='noise' seed='303'/%3E%3CfeColorMatrix in='noise' type='luminanceToAlpha' result='alphaNoise'/%3E%3CfeComponentTransfer in='alphaNoise' result='coloredNoise1'%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeComposite operator='in' in2='shape' in='coloredNoise1' result='noise1Clipped'/%3E%3CfeFlood flood-color='rgba(0,0,0,0.3)' result='color1Flood'/%3E%3CfeComposite operator='in' in2='noise1Clipped' in='color1Flood' result='color1'/%3E%3CfeMerge result='effect1'%3E%3CfeMergeNode in='shape'/%3E%3CfeMergeNode in='color1'/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id='paint0' x1='1440' y1='0' x2='-142.355' y2='704.063' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B3E6EE'/%3E%3Cstop offset='0.5' stop-color='%23203A43'/%3E%3Cstop offset='1' stop-color='%232C5364'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
flex-direction: column;
justify-content: flex-start;
align-items: center;
color: white;
position: relative;
padding-top: 80px;
}
.container {
text-align: center;
padding: 20px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center; /* vertically centers */
align-items: center;
}
.container h1{
font-family: "Poppins";
font-weight:900;
font-size:64px;
line-height:100%;
letter-spacing:6%;
margin-top:150px;
margin-bottom:-10px;
}
.container h2{
margin-bottom:-90px;
}
.container p {
font-size:64px;
font-weight:500;
font-family:"Poppins";
line-height:100%;
letter-spacing:6%;
margin-bottom:100px;
}
.back-button {
cursor: pointer;
transition: transform 0.3s ease;
}
.back-button:hover {
transform: scale(1.03);
}
.back-button:hover rect {
fill: #203A43;
stroke:black;
transition: fill 0.3s ease, stroke 0.3s ease;
}
.back-button path {
fill: white;
transition: fill 0.3s ease;
}
img{
width:580px;
height:321px;
margin-top: 0px;
margin-bottom: -80px;
}
.scale-wrapper {
transform: scale(0.7); /* or try 0.9 or 0.8 */
transform-origin: top center;
width:100%;
height:100%;
align-content: center;
}
.login-button {
float: right;
display: inline-block;
background: none;
padding: 0;
border: none;
text-decoration: none;
cursor: pointer;
line-height: 0; /* prevents vertical clipping */
overflow: visible; /* ensures SVG is not cut */
}
.login-button svg {
display: block;
width: 80px;
height: 80px;
}
</style>
<body>
<header>
<div id="navbar-placeholder"></div>
</header>
<div>
<a href="login.html" class="login-button no-hover">
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="80" height="80" fill="url(#pattern0_62_569)"/>
<defs>
<pattern id="pattern0_62_569" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_62_569" transform="scale(0.02)"/>
</pattern>
<image id="image0_62_569" width="50" height="50" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEIElEQVR4nO2aSWyNURTHXyklKqgqMYRamQmJsCeGpCgrylJY6cDGBrFCWNVQIRZWYmmoYUElYiaIGKpEzCkikRha2p8cPS+5efne9917362W9J80fXn3DN//nXvPPffcL5XqwX8KYDCwBNgFnAQeAR+A7/onnx8CJ1SmDBiU6g4ACoAK4CzwC3eIzhlgldhKdQGBfkAN8MZ4qB9AA7AVKAcmA0NVtp9+ngIsV5lLQIuh/xqoEtm/RWIR0GQ8wG1gHTDEw9YQ1b1j2HsKLOjsKOw3HIrzhYFs5+kPdNewXxt8ugHDgVvq4BtQCfQO6qTDTz5QrclBcAMoCWV8nIZb8BiYmiA/EdgMXASeKfGvwHPgKDDXwud0oFF9yv9xISKRJnFNFmyMbDFwBGhLyFTtwHaRT/BdDFw3yJTksibS0+kqUBgjWwI8wA0/gYPAgBi7hQaZG15rBjhgTKe4SPQCLuMP0e2bEJlGld3rSmKxKn6zWBMryB2bEnzMMBKAXWoG+usiFWywkJdyJFe8sPBTrbKNVlMM2GjsE70t8v8XwmC8RWq+p7KVNgv8jW0IgWGEwzyHKf86NirAahW8lWRU5UcEJLLMwl+eUc6sjBM8r0JrLYlI2g0Fq0UMrFf5+rgC7pdWsYMtjQ7UDS4EJlj6LNKq+WfkeUZCqwYv2Bg09F4GINHmUr7TcQQQlEUN7tbBLY5E6gMQue/oc5vq7YoaPKWDSx2N7gtA5Iijz3LVOxE1mC4DJjoYlPLkXQAib8VWyt6vnD4Fj6MGP+lgkYNBWXih4OI3vX81Rw2mz89ZC7gInT5aj+WKHy6VLR1Njz96QYionnRQcsUZR58FqtcSZGqp3iw9AfpCdGc6+ixW3Y9xi91qY8qSRXxQ7uFvUtxir/dJv0aomz1IvHedyhmb96lUJoA9Phuiob/Jg0iNp6+tcRuiV4mSkcFuOpCQM3i+p6+GuBJlqBZi1kVjhI3RDkRGefoo0gzbmvU5gXMuZXyWqNjCNxrrVP90nNAaFbrj6UTaN7Yo9LCfZxysKpKyT/qo69zXBUodiJR62F+suq8Ss52Rfe66hF9bq9KNtIU0/cY62M+Xcl91q2wUCox2UKICMBs45Lm7i85hYI6FnxrVabTeezSE7doUm5alRNiQcQ2QK+TXro7q8RoNunbnKW+0TJ+kG87aJT+WcdMUGq3AcXl4o2RPN9JrnUgYHcfrxnzeZ9FpD4k2oM5Yd1e8r+W0byX3Gl2NZ3LF4UXCIDPGCG1X4LlPqs5GZqRjag2FKzIrgpDI6AvXBWzIxaFd12Tn3b1L+uvkddMEzO80AhGbZrW2cUJBSqNKn4NWCEJ99fWLs5r/XdGir3CslMo51R2gTXA5nO3UY7O8QPPZeOjP+p2M7ZAjtc/bEj1I/SP4DZI1epJ9LEGlAAAAAElFTkSuQmCC"/>
</defs>
</svg>
</a></div>
<div class="scale-wrapper">
<div class="container">
<h1>Oops !!!</h1>
<div>
<img src="assets/404.png" alt="404"/></div>
<p>There’s NOTHING here...</p>
<a onclick="window.location.href='events.html'" style="display: inline-block; cursor: pointer; line-height: 0;" class="back-button">
<svg width="207" height="78" viewBox="0 0 207 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2.5" y="2.5" width="202" height="73" rx="22.5" fill="url(#paint0_linear_39_516)"/>
<rect x="2.5" y="2.5" width="202" height="73" rx="22.5" stroke="black" stroke-width="5"/>
<path d="M69.6666 48V31.2H78.2586C80.4666 31.2 82.1146 31.608 83.2026 32.424C84.2906 33.224 84.8346 34.28 84.8346 35.592C84.8346 36.456 84.6026 37.216 84.1386 37.872C83.6906 38.512 83.0506 39.024 82.2186 39.408C81.4026 39.776 80.4266 39.96 79.2906 39.96L79.7706 38.808C80.9546 38.808 81.9866 38.992 82.8666 39.36C83.7466 39.712 84.4266 40.232 84.9066 40.92C85.4026 41.592 85.6506 42.416 85.6506 43.392C85.6506 44.848 85.0586 45.984 83.8746 46.8C82.7066 47.6 80.9946 48 78.7386 48H69.6666ZM74.3706 44.568H78.3546C79.1706 44.568 79.7866 44.432 80.2026 44.16C80.6346 43.872 80.8506 43.44 80.8506 42.864C80.8506 42.288 80.6346 41.864 80.2026 41.592C79.7866 41.304 79.1706 41.16 78.3546 41.16H74.0346V37.872H77.6346C78.4346 37.872 79.0346 37.736 79.4346 37.464C79.8346 37.192 80.0346 36.784 80.0346 36.24C80.0346 35.696 79.8346 35.296 79.4346 35.04C79.0346 34.768 78.4346 34.632 77.6346 34.632H74.3706V44.568ZM97.9999 48V45.576L97.6879 44.976V40.512C97.6879 39.792 97.4639 39.24 97.0159 38.856C96.5839 38.456 95.8879 38.256 94.9279 38.256C94.3039 38.256 93.6719 38.36 93.0319 38.568C92.3919 38.76 91.8479 39.032 91.3999 39.384L89.8639 36.288C90.5999 35.808 91.4799 35.44 92.5039 35.184C93.5439 34.912 94.5759 34.776 95.5999 34.776C97.7119 34.776 99.3439 35.264 100.496 36.24C101.664 37.2 102.248 38.712 102.248 40.776V48H97.9999ZM94.1599 48.216C93.1199 48.216 92.2399 48.04 91.5199 47.688C90.7999 47.336 90.2479 46.856 89.8639 46.248C89.4959 45.64 89.3119 44.96 89.3119 44.208C89.3119 43.408 89.5119 42.72 89.9119 42.144C90.3279 41.552 90.9599 41.104 91.8079 40.8C92.6559 40.48 93.7519 40.32 95.0959 40.32H98.1679V42.696H95.7199C94.9839 42.696 94.4639 42.816 94.1599 43.056C93.8719 43.296 93.7279 43.616 93.7279 44.016C93.7279 44.416 93.8799 44.736 94.1839 44.976C94.4879 45.216 94.9039 45.336 95.4319 45.336C95.9279 45.336 96.3759 45.216 96.7759 44.976C97.1919 44.72 97.4959 44.336 97.6879 43.824L98.3119 45.504C98.0719 46.4 97.5999 47.08 96.8959 47.544C96.2079 47.992 95.2959 48.216 94.1599 48.216ZM114.098 48.216C112.658 48.216 111.37 47.928 110.234 47.352C109.114 46.776 108.234 45.984 107.594 44.976C106.954 43.952 106.634 42.784 106.634 41.472C106.634 40.16 106.954 39 107.594 37.992C108.234 36.984 109.114 36.2 110.234 35.64C111.37 35.064 112.658 34.776 114.098 34.776C115.57 34.776 116.842 35.088 117.914 35.712C118.986 36.336 119.746 37.216 120.194 38.352L116.666 40.152C116.362 39.544 115.986 39.104 115.538 38.832C115.09 38.544 114.602 38.4 114.074 38.4C113.546 38.4 113.066 38.52 112.634 38.76C112.202 39 111.858 39.352 111.602 39.816C111.362 40.264 111.242 40.816 111.242 41.472C111.242 42.144 111.362 42.712 111.602 43.176C111.858 43.64 112.202 43.992 112.634 44.232C113.066 44.472 113.546 44.592 114.074 44.592C114.602 44.592 115.09 44.456 115.538 44.184C115.986 43.896 116.362 43.448 116.666 42.84L120.194 44.64C119.746 45.776 118.986 46.656 117.914 47.28C116.842 47.904 115.57 48.216 114.098 48.216ZM127.816 45.6L127.936 40.152L133.24 34.992H138.64L132.76 41.064L130.432 42.936L127.816 45.6ZM124.024 48V30.192H128.584V48H124.024ZM133.576 48L129.592 43.008L132.424 39.504L139.096 48H133.576Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_39_516" x1="9" y1="0" x2="207" y2="61.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#82A7AD"/>
<stop offset="0.653278" stop-color="#354547"/>
</linearGradient>
</defs>
</svg>
</a>
</div>
</div>
<script src="script.js"></script>
</body>
</html>