Formulario de inicio de sesión

2003 Anes_unk

Abrir en el editor Publica tu código

Recomendado

17 May 2025

Barra lateral de Glassmorphism HTML CSS Estilo Apple

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

Formulario de inicio de sesión

Recomendado

emoji bailando

Sólo un jefe

Barra lateral de Glassmorphism HTML CSS Estilo Apple

HTML

CSS

JS

Recomendado

emoji bailando

Sólo un jefe

Barra lateral de Glassmorphism HTML CSS Estilo Apple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS