Modulo di accesso

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

23 June 2025

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="Customer login page">
    <title>Customer Login</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

<div class="login-container">
        <div class="login-header">
            <h1>Customer Login</h1>
            <p>Log in to your account</p>
        </div>

<form method="POST" action="/login">
            <label for="email">Email Address</label>
            <input type="email" id="email" name="email" placeholder="Enter your email" required>

<label for="password">Password</label>
            <input type="password" id="password" name="password" placeholder="Enter your password" required>

<button type="submit">Login</button>
        </form>

<div class="login-footer">
            <p>Don't have an account? <a href="#">Sign up</a></p>
        </div>
    </div>

</body>

</html>

CSS

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

body {
    font-family: 'Arial', sans-serif;
    background-color: #121212;
    color: #E0E0E0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
    transition: all 0.3s ease;
}

.login-container {
    background-color: #1F1F1F;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    padding: 30px;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    transition: transform 0.3s ease;
    border: 1px solid #333;
}

.login-container:hover {
    transform: scale(1.02);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h1 {
    font-size: 30px;
    color: #00B0FF;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.login-header p {
    font-size: 14px;
    color: #B0B0B0;
}

label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    color: #E0E0E0;
}

input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border: 1px solid #444;
    background-color: #333;
    color: #E0E0E0;
    border-radius: 8px;
    margin-bottom: 20px;
    outline: none;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

input[type="email"]:focus,
input[type="password"]:focus {
    border-color: #00B0FF;
    box-shadow: 0 0 5px rgba(0, 176, 255, 0.5);
}

input[type="email"]:invalid {
    border-color: #FF4500;
}

button {
    width: 100%;
    padding: 14px;
    background-color: #00B0FF;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
    background-color: #0091C6;
    transform: translateY(-2px);
}

button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 176, 255, 0.6);
}

.login-footer {
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
    color: #B0B0B0;
}

.login-footer a {
    color: #00B0FF;
    text-decoration: none;
    transition: color 0.3s ease;
}

Modulo di accesso

Consigliato

Un codice di Mete

Un codice di Metehan

Un codice di Metehan

HTML

CSS

JS

Consigliato

Un codice di Mete

Un codice di Metehan

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS