Página 404

2,228 alqsdeus

Abrir en el editor Publica tu código

Recomendado

4 December 2024

Página de inicio de CodePen ThreeJS 'Portal Planes' con Matcaps

23 August 2025

Página de inicio de sesión HTML CSS con diseño de huella digital

23 November 2024

Página de inicio - ImprovalAI

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>404 - Page Not Found with Key Generation</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="apple.css">
</head>
<body>
    <div class="container">
        <h1 class="error-title">404</h1>
        <p class="error-subtitle">Page Not Found</p>
        <p>Oops! The page you're looking for doesn't exist.</p>
        <p>Error Key: <span id="error-key"></span></p>

<div class="buttons">
            <a href="/" class="btn">Go Home</a>
            <button class="btn" id="copy-btn">Copy Error</button>
        </div>
    </div>

<div class="notification" id="notification">
        <button class="close-btn" id="close-btn">×</button>
        <span>Successfully copied the error.</span>
    </div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #111;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
}

.container {
    background-color: #222;
    padding: 40px 60px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
    max-width: 500px;
    width: 90%;
}

.error-title {
    font-size: 6rem;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

.error-title:hover {
    color: #fe5c5c;
    text-shadow: 0 0 25px rgba(255, 95, 95, 0.8), 0 0 50px rgba(255, 112, 112, 0.6);
}

.error-subtitle {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.8);
}

p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
}

.buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn {
    text-decoration: none;
    color: #fff;
    background-color: transparent;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 300;
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #042d19;
    color: #a3f9b6; 
    padding: 10px 20px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center; 
    max-width: 320px;
    font-size: 0.95rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.notification.show {
    opacity: 1;
    visibility: visible;
}

.notification .close-btn {
    background-color: transparent;
    border: none;
    color: #a3f9b6;
    font-size: 1.2rem;
    cursor: pointer;
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    transition: background-color 0.3s ease;
}

.notification .close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#error-key {
    font-weight: bold;
    font-size: 1.2rem;
    color: #a3f9b6;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.container {
    background: linear-gradient(135deg, #2c2c2c, #1a1a1a);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}