MiauRizius/CoasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed 404 page style

Browse Source
This commit is contained in:
Maurice L.
2025-05-07 13:23:54 +02:00
parent e6a4c6d2f7
commit 8106a8f707
1 changed files with 12 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/NotFound.vue
View File

@@ -3,31 +3,16 @@
</script>
<template>
<head>
<meta charset="utf-8">
<title>404 - Seite nicht gefunden</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300i,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="bg-gradient-to-r from-red-400 to-orange-300">
<div class="w-9/12 m-auto py-16 min-h-screen flex items-center justify-center">
<div class="bg-white shadow overflow-hidden sm:rounded-lg pb-8">
<div class="border-t border-gray-200 text-center pt-8">
<h1 class="text-9xl font-bold text-red-400">404</h1>
<h1 class="text-6xl font-medium py-8">Seite wurde nicht gefunden!</h1>
<p class="text-2xl pb-8 px-12 font-medium">Die angeforderte Seite wurde nicht gefunden. Vielleicht hast du dich vertippt?</p>
<a class="bg-gradient-to-r from-purple-400 to-blue-500 hover:from-pink-500 hover:to-orange-500 text-white font-semibold px-6 py-3 rounded-md mr-6" href="/">
HOME
</a>
<button class="bg-gradient-to-r from-red-400 to-red-500 hover:from-red-500 hover:to-red-500 text-white font-semibold px-6 py-3 rounded-md">
Kontakt
</button>
<div class="bg-gray-900 text-white font-sans h-screen flex justify-center items-center">
<div class="text-center bg-gray-800 p-8 rounded-lg shadow-lg max-w-lg w-full">
<h1 class="text-6xl font-extrabold text-red-500 mb-4">404</h1>
<p class="text-xl mb-6">Die Seite, die du suchst, wurde nicht gefunden.</p>
<router-link
to="/"
class="bg-orange-500 hover:bg-orange-400 text-white py-2 px-6 rounded-md text-lg transition-all duration-200"
>
Zurück zur Startseite
</router-link>
</div>
</div>
</div>
</div>
</body>
</template>