Webleb - fragmentos de código

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);
}

Página 404

Recomendado

Página de inicio de la cartera

Dirección de las páginas de inicio de sesión

Página 404

HTML

CSS

JS

Recomendado

Página de inicio de la cartera

Dirección de las páginas de inicio de sesión

Página 404

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS