Formulario de inicio de sesión

2,415 Anes_unk

Abrir en el editor Publica tu código

Recomendado

16 January 2026

Friday Night Funkin' vs. Nonsense Game HTML5

30 January 2025

Botones con gradiente al pasar el mouse

21 April 2025

Un código de Metehan

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="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;
}

.login-footer a:hover {
    color: #0091C6;
    text-decoration: underline;
}

@media (max-width: 500px) {
    .login-container {
        width: 90%;
    }

.login-header h1 {
        font-size: 24px;
    }

button {
        font-size: 16px;
    }
}