242 lines
8.0 KiB
Plaintext
242 lines
8.0 KiB
Plaintext
---
|
|
import Layout from "../layouts/Layout.astro";
|
|
---
|
|
|
|
<Layout title="Not found">
|
|
<div id="wrapper">
|
|
<div id="box">
|
|
<svg viewBox="30 -20 450 280" x="0" y="0">
|
|
<!-- Box -->
|
|
<polygon
|
|
points="100,70 170,0 370,50 370,180"
|
|
style="fill:#b58747;"></polygon>
|
|
<defs>
|
|
<linearGradient
|
|
id="shadow_grad1"
|
|
x1="50%"
|
|
y1="0%"
|
|
x2="0%"
|
|
y2="50%"
|
|
>
|
|
<stop
|
|
offset="0%"
|
|
style="stop-color:#876029;stop-opacity:1"></stop>
|
|
<stop
|
|
offset="100%"
|
|
style="stop-color:#000000;stop-opacity:1"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<defs>
|
|
<linearGradient
|
|
id="shadow_grad2"
|
|
x1="0%"
|
|
y1="0%"
|
|
x2="50%"
|
|
y2="100%"
|
|
>
|
|
<stop
|
|
offset="0%"
|
|
style="stop-color:#876029;stop-opacity:1"></stop>
|
|
<stop
|
|
offset="100%"
|
|
style="stop-color:#000000;stop-opacity:1"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<polygon
|
|
points="100,70 170,0 330,100 300,120"
|
|
style="fill:#876029;fill:url(#shadow_grad1)"></polygon>
|
|
<polygon
|
|
points="100,70 170,0 170,130 100,200, 100,70"
|
|
style="fill:#876029;fill:url(#shadow_grad2)"></polygon>
|
|
<line
|
|
x1="170"
|
|
y1="0"
|
|
x2="370"
|
|
y2="50"
|
|
style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"
|
|
></line>
|
|
<line
|
|
x1="170"
|
|
y1="0"
|
|
x2="170"
|
|
y2="130"
|
|
style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"
|
|
></line>
|
|
<!-- Katzenschweif -->
|
|
<path
|
|
id="schweif"
|
|
d="M 280,120 C 250 100, 310 70, 320 20"
|
|
style="fill:transparent;stroke:black;stroke-width:10;stroke-linecap:round"
|
|
></path>
|
|
<!-- Box-linien -->
|
|
<polygon
|
|
points="100,70 300,120 370,50 370,180 300,250 100,200"
|
|
style="fill:#d19b4f;"></polygon>
|
|
<g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
|
|
<line x1="100" y1="70" x2="100" y2="200"></line>
|
|
<line x1="100" y1="200" x2="300" y2="250"></line>
|
|
<line x1="300" y1="250" x2="300" y2="120"></line>
|
|
<line x1="100" y1="70" x2="300" y2="120"></line>
|
|
<line x1="300" y1="120" x2="370" y2="50"></line>
|
|
<line x1="300" y1="250" x2="370" y2="180"></line>
|
|
<line x1="370" y1="50" x2="370" y2="180"></line>
|
|
</g>
|
|
<!-- Lappen-rechts -->
|
|
<polygon
|
|
points="300,120 350,150 420,80 370,50"
|
|
style="fill:#b58747;"></polygon>
|
|
<g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
|
|
<line x1="300" y1="120" x2="370" y2="50"></line>
|
|
<line x1="300" y1="120" x2="350" y2="150"></line>
|
|
<line x1="350" y1="150" x2="420" y2="80"></line>
|
|
<line x1="370" y1="50" x2="420" y2="80"></line>
|
|
</g>
|
|
<!-- Lappen-links -->
|
|
<polygon
|
|
points="100,70 50,100 120,30 170,0"
|
|
style="fill:#b58747;"></polygon>
|
|
<g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
|
|
<line x1="100" y1="70" x2="170" y2="0"></line>
|
|
<line x1="100" y1="70" x2="50" y2="100"></line>
|
|
<line x1="50" y1="100" x2="120" y2="30"></line>
|
|
<line x1="170" y1="0" x2="120" y2="30"></line>
|
|
</g>
|
|
<!-- Text -->
|
|
<text
|
|
x="120"
|
|
y="120"
|
|
style="font-size:4em;font-weight:bold;fill:#000000;transform:rotateX(40deg) rotateY(21deg);"
|
|
>404</text
|
|
>
|
|
<!-- Killeraugen -->
|
|
<ellipse
|
|
cx="275"
|
|
cy="150"
|
|
rx="32"
|
|
ry="20"
|
|
style="fill:#291e0f;transform:rotateZ(12deg)"></ellipse>
|
|
<ellipse
|
|
cx="266"
|
|
cy="153"
|
|
rx="7"
|
|
ry="5"
|
|
style="fill:#4a6b2a;transform:rotateZ(12deg)"></ellipse>
|
|
<ellipse
|
|
cx="266"
|
|
cy="153"
|
|
rx="2"
|
|
ry="5"
|
|
style="fill:#000000;transform:rotateZ(12deg)"></ellipse>
|
|
<ellipse
|
|
cx="285"
|
|
cy="153"
|
|
rx="7"
|
|
ry="5"
|
|
style="fill:#4a6b2a;transform:rotateZ(12deg)"></ellipse>
|
|
<ellipse
|
|
cx="285"
|
|
cy="153"
|
|
rx="2"
|
|
ry="5"
|
|
style="fill:#000000;transform:rotateZ(12deg)"></ellipse>
|
|
<rect
|
|
id="blinzeln"
|
|
width="40"
|
|
height="22"
|
|
x="255"
|
|
y="139"
|
|
style="fill:#291e0f;transform:rotateZ(12deg);"></rect>
|
|
</svg>
|
|
</div>
|
|
<div id="errorText">
|
|
The site you requested could not be found.<br />
|
|
<a href="/">> Back to the main page <</a>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
|
|
<style>
|
|
/*.container {
|
|
background: #222222;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}*/
|
|
|
|
#errorText {
|
|
margin-top: 2vh;
|
|
color: #fff;
|
|
text-align: center;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 150%;
|
|
}
|
|
|
|
#wrapper a:link,
|
|
#wrapper a:visited,
|
|
#wrapper a:hover,
|
|
#wrapper a:active {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#wrapper {
|
|
margin: auto;
|
|
position: relative;
|
|
}
|
|
|
|
#box {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
}
|
|
|
|
@keyframes schweif {
|
|
0% {
|
|
d: path("M 280,120 C 250 100, 310 70, 320 20");
|
|
}
|
|
12.5% {
|
|
d: path("M 280,120 C 260 100, 280 70, 310 20");
|
|
}
|
|
25% {
|
|
d: path("M 280,120 C 280 100, 260 70, 290 20");
|
|
}
|
|
37.5% {
|
|
d: path("M 280,120 C 280 100, 240 70, 270 20");
|
|
}
|
|
50% {
|
|
d: path("M 280,120 C 280 100, 240 70, 230 20");
|
|
}
|
|
62.5% {
|
|
d: path("M 280,120 C 270 100, 260 70, 250 20");
|
|
}
|
|
75% {
|
|
d: path("M 280,120 C 270 100, 280 70, 270 20");
|
|
}
|
|
87.5% {
|
|
d: path("M 280,120 C 250 100, 310 70, 290 20");
|
|
}
|
|
100% {
|
|
d: path("M 280,120 C 250 100, 310 70, 320 20");
|
|
}
|
|
}
|
|
|
|
#schweif {
|
|
animation-name: schweif;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
#box svg:hover > #schweif {
|
|
animation-duration: 1s;
|
|
}
|
|
|
|
#blinzeln {
|
|
fill-opacity: 1;
|
|
transition: fill-opacity 0.5s;
|
|
}
|
|
|
|
#box svg:hover > #blinzeln {
|
|
fill-opacity: 0;
|
|
}
|
|
</style>
|