Page 404

1,221 Yotva

Ouvrir dans l'éditeur Publiez votre code

Recommandé

26 October 2024

Plans Bot (page d'accueil)

22 July 2025

Page de destination du Samsung Galaxy S24 Ultra

28 November 2024

Page d'accueil - Logitech

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404 - Page Not Found</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        :root {
            --violet: #a259ff;
            --dark-bg: #18122b;
            --light-violet: #c3a6ff;
            --white: #fff;
        }
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            background: var(--dark-bg);
            color: var(--white);
            font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
            overflow: hidden;
        }
        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
        }
        .container {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 2rem 1.5rem;
            background: rgba(24, 18, 43, 0.85);
            border-radius: 1.5rem;
            box-shadow: 0 8px 32px 0 rgba(162, 89, 255, 0.25);
            backdrop-filter: blur(6px);
            max-width: 95vw;
        }
        h1 {
            font-size: 7rem;
            margin: 0;
            color: var(--violet);
            letter-spacing: 0.1em;
            font-weight: 900;
        }
        h2 {
            font-size: 2rem;
            margin: 0.5rem 0 1.5rem 0;
            color: var(--white);
            font-weight: 700;
        }
        p {
            color: var(--light-violet);
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }
        a {
            display: inline-block;
            padding: 0.75rem 2rem;
            background: linear-gradient(90deg, var(--violet), var(--light-violet));
            color: var(--dark-bg);
            border-radius: 2rem;
            text-decoration: none;
            font-weight: bold;
            font-size: 1rem;
            transition: background 0.2s;
            box-shadow: 0 2px 16px 0 rgba(162, 89, 255, 0.15);
        }
        a:hover {
            background: linear-gradient(90deg, var(--light-violet), var(--violet));
            color: var(--white);
        }
        #bg {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: 0;
            pointer-events: none;
        }
        @media (max-width: 600px) {
            h1 { font-size: 4rem; }
            h2 { font-size: 1.2rem; }
            .container { padding: 1.2rem 0.5rem; }
            p { font-size: 1rem; }
        }
    </style>
</head>
<body>
    <canvas id="bg"></canvas>
    <div class="container">
        <h1>404</h1>
        <h2>Page Not Found</h2>
        <p>Oops! The page you are looking for does not exist or has been moved.</p>
        <a href="/">Back to Home</a>
    </div>
    <script>
        // Dynamic animated background: moving violet particles, mobile friendly
        const canvas = document.getElementById('bg');
        const ctx = canvas.getContext('2d');
        let dpr = window.devicePixelRatio || 1;
        let w = window.innerWidth, h = window.innerHeight;

function resize() {
            dpr = window.devicePixelRatio || 1;
            w = window.innerWidth;
            h = window.innerHeight;
            canvas.width = w * dpr;
            canvas.height = h * dpr;
            canvas.style.width = w + "px";
            canvas.style.height = h + "px";
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.scale(dpr, dpr);
        }
        window.addEventListener('resize', resize);
        resize();

const particles = [];
        const colors = ['#a259ff', '#c3a6ff', '#7f5af0', '#5f2eea'];
        const numParticles = 60;

for (let i = 0; i < numParticles; i++) {
            particles.push({
                x: Math.random() * w,
                y: Math.random() * h,
                r: 1.5 + Math.random() * 3.5,
                dx: -1 + Math.random() * 2,
                dy: -1 + Math.random() * 2,
                color: colors[Math.floor(Math.random() * colors.length)],
                alpha: 0.3 + Math.random() * 0.5
            });
        }

function draw() {
            ctx.clearRect(0, 0, w, h);
            for (let p of particles) {
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI);
                ctx.fillStyle = p.color;
                ctx.globalAlpha = p.alpha;
                ctx.shadowColor = p.color;
                ctx.shadowBlur = 16;
                ctx.fill();
                ctx.globalAlpha = 1;
                ctx.shadowBlur = 0;
                // Move
                p.x += p.dx;
                p.y += p.dy;
                // Bounce off edges
                if (p.x < 0 || p.x > w) p.dx *= -1;
                if (p.y < 0 || p.y > h) p.dy *= -1;
            }
            requestAnimationFrame(draw);
        }
        draw();
    </script>
</body>
</html>

CSS