Login Form

Open In Editor Video Publish Your Code

<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 Form

Recommended

Chinese Community HTML Template

CSS Thought Bubble Animation

Jelly Morph Login Form HTML Code Example

HTML

CSS

JS

Recommended

Chinese Community HTML Template

CSS Thought Bubble Animation

Jelly Morph Login Form HTML Code Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS