Pagina 404

1799 alqsdeus

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

28 June 2025

Modello HTML della pagina di errore 404

25 July 2025

Modello di pagina di accesso HTML

22 November 2025

Piè di pagina di attribuzione CSS: posizionamento assoluto

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

Consigliato

Modello HTML della pagina di errore 404

Modello di pagina di accesso HTML

Piè di pagina di attribuzione CSS: posizionamento assoluto

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS