Página 404

283 Yotva

Abrir no Editor Publique Seu Código

Recomendado

11 April 2025

Uma página inicial perfeita projetada com Leon Matrex

28 December 2024

Um diretório de página inicial alternativo

17 December 2024

Endereço das páginas de login

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>

Página 404

Recomendado

Uma página inicial perfeita projetada com Leon Matrex

Um diretório de página inicial alternativo

Endereço das páginas de login

HTML

CSS

JS

Recomendado

Uma página inicial perfeita projetada com Leon Matrex

Um diretório de página inicial alternativo

Endereço das páginas de login

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS