Pagina 404

810 Yotva

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

20 March 2025

Bingles - Pagina di destinazione dell'azienda di formazione IT

17 July 2025

Modello HTML della pagina di errore 404

14 October 2024

Un modello di pagina web per "Anes Development" con un messaggio di benvenuto e la navigazione.

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>

Pagina 404

Consigliato

Bingles - Pagina di destinazione dell'azienda di formazione IT

Modello HTML della pagina di errore 404

Un modello di pagina web per "Anes Development" con un messaggio di benvenuto e la navigazione.

HTML

CSS

JS

Consigliato

Bingles - Pagina di destinazione dell'azienda di formazione IT

Modello HTML della pagina di errore 404

Un modello di pagina web per "Anes Development" con un messaggio di benvenuto e la navigazione.

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS