<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Strona nie istnieje – Gavran</title>
<!--
Ta prosta strona informuje użytkownika, że pod podanym adresem nie ma
już poszukiwanej treści i zachęca do wyszukania właściwej witryny Gavran.
Projekt wykorzystuje nowoczesne techniki CSS, takie jak płynne gradienty,
efekt szklistej karty (glassmorphism) oraz animowany loader zbudowany
wyłącznie w CSS. Loader bazuje na efekcie „building‑blocks” z biblioteki
Whirl, w którym klocki spadają i znikają, tworząc wrażenie budowania strony
internetowej. Kod animacji pobrano i dostosowano na podstawie
ogólnodostępnego źródła【566477594440225†L0-L36】. Wykorzystanie takich
animacji i nowych właściwości CSS jest zgodne z trendami w projektowaniu
stron na 2025 rok, które podkreślają kreatywność i responsywność
interfejsów【962067822445051†L123-L143】.
-->
<style>
/* Zmienne kolorów do łatwej zmiany palety */
:root {
/* Kolor główny używany w animacji klocków */
--primary: #ffb74d;
/* Kolory gradientu tła */
--gradient-start: #141e30;
--gradient-end: #243b55;
/* Kolor tekstu */
--text-color: #f5f7fa;
/* Kolor tła karty (lekka biel z przezroczystością) */
--card-bg: rgba(255, 255, 255, 0.15);
/* Obramowanie karty */
--card-border: rgba(255, 255, 255, 0.25);
}
/* Resetowanie domyślnych marginesów i czcionek */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
sans-serif;
color: var(--text-color);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
overflow: hidden;
}
/* Tło dekoracyjne – delikatne kółka dodające głębi */
.background-shapes {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.background-shapes span {
position: absolute;
border-radius: 50%;
opacity: 0.3;
filter: blur(60px);
animation: float 12s infinite alternate ease-in-out;
}
/* Animacja pływających elementów w tle */
@keyframes float {
from {
transform: translateY(0) translateX(0);
}
to {
transform: translateY(-50px) translateX(50px);
}
}
/* Karta z komunikatem */
.card {
position: relative;
z-index: 1;
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 20px;
padding: 2rem 3rem;
max-width: 600px;
width: 90%;
text-align: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
animation: fadeIn 0.8s ease-out both;
}
/* Animacja pojawienia się karty */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
h1 {
font-size: clamp(2rem, 5vw, 2.5rem);
margin-bottom: 1rem;
}
p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.25rem;
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
font-size: 1rem;
color: #14213d;
background-color: var(--primary);
border-radius: 8px;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn:hover {
background-color: #ffa726;
transform: translateY(-3px);
}
.small-link {
display: block;
margin-top: 1rem;
font-size: 0.9rem;
color: var(--primary);
text-decoration: none;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.small-link:hover {
opacity: 1;
}
/* Definicja animacji „building‑blocks” zaczerpniętej z Whirl.
Poszczególne klocki spadają i znikają, tworząc efekt budowy. */
@-webkit-keyframes building-blocks {
0%,
20% {
opacity: 0;
-webkit-transform: translateY(-300%);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0);
}
90%,
100% {
opacity: 0;
-webkit-transform: translateY(300%);
}
}
@keyframes building-blocks {
0%,
20% {
opacity: 0;
transform: translateY(-300%);
}
30%,
70% {
opacity: 1;
transform: translateY(0);
}
90%,
100% {
opacity: 0;
transform: translateY(300%);
}
}
.loader-wrapper {
display: flex;
justify-content: center;
margin-bottom: 1.5rem;
}
.building-blocks {
position: relative;
width: 120px;
height: 120px;
/* skaluje animację do większych rozmiarów */
transform: scale(1.5);
}
.building-blocks div {
position: absolute;
width: 20px;
height: 20px;
}
.building-blocks div:after {
content: '';
display: block;
width: 100%;
height: 100%;
background: var(--primary);
animation: building-blocks 2.1s ease infinite backwards;
}
/* Ustawienia pozycji poszczególnych klocków w siatce 3×3 */
.building-blocks div:nth-child(1) {
transform: translate(-50%, -50%) translate(60%, 120%);
}
.building-blocks div:nth-child(2) {
transform: translate(-50%, -50%) translate(-60%, 120%);
}
.building-blocks div:nth-child(3) {
transform: translate(-50%, -50%) translate(120%, 0);
}
.building-blocks div:nth-child(4) {
transform: translate(-50%, -50%);
}
.building-blocks div:nth-child(5) {
transform: translate(-50%, -50%) translate(-120%, 0);
}
.building-blocks div:nth-child(6) {
transform: translate(-50%, -50%) translate(60%, -120%);
}
.building-blocks div:nth-child(7) {
transform: translate(-50%, -50%) translate(-60%, -120%);
}
/* Opóźnienia animacji dla poszczególnych klocków, dzięki czemu
spadają w różnym rytmie */
.building-blocks div:nth-child(1):after {
animation-delay: 0.15s;
}
.building-blocks div:nth-child(2):after {
animation-delay: 0.3s;
}
.building-blocks div:nth-child(3):after {
animation-delay: 0.45s;
}
.building-blocks div:nth-child(4):after {
animation-delay: 0.6s;
}
.building-blocks div:nth-child(5):after {
animation-delay: 0.75s;
}
.building-blocks div:nth-child(6):after {
animation-delay: 0.9s;
}
.building-blocks div:nth-child(7):after {
animation-delay: 1.05s;
}
</style>
</head>
<body>
<!-- Dekoracyjne elementy tła: półprzezroczyste kółka w ruchu -->
<div class="background-shapes">
<span style="width: 400px; height: 400px; background: #ff6f61; top: 20%; left: 10%;"></span>
<span style="width: 300px; height: 300px; background: #6d5dfc; bottom: 15%; right: 5%; animation-direction: alternate-reverse;"></span>
<span style="width: 250px; height: 250px; background: #ffd166; top: 60%; left: 60%;"></span>
</div>
<div class="card">
<!-- Animowany loader symbolizujący prace przy stronie -->
<div class="loader-wrapper">
<div class="building-blocks">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<h1>Ups! Strona nie istnieje</h1>
<p>
Pod podanym adresem nie istnieje już strona, której szukasz. Możliwe, że
została przeniesiona lub usunięta.
</p>
<p>
Zachęcamy do wyszukania naszej strony <strong>Gavran</strong> poprzez
wyszukiwarkę Google. Kliknij poniższy przycisk, aby przejść do
wyników wyszukiwania.
</p>
<a
class="btn"
href="https://www.google.com/search?q=Gavran"
target="_blank"
rel="noopener noreferrer"
>Wyszukaj Gavran w Google</a
>
<a class="small-link" href="/">Powrót do strony głównej</a>
</div>
</body>
</html>