Um código por bachir123

Abrir no Editor Publique Seu Código

Recomendado

3 June 2025

Comentário de espaço reservado para código HTML

5 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Login Form</title>
    <style>
        body {
            font-family: sans-serif;
            background-color: #f4f4f4; /* Light background color */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

.login-container {
            background-color: #fff; /* White container */
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
            width: 350px; /* Adjust width as needed */
        }

.login-container h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #333; /* Darker heading color */
        }

.form-group {
            margin-bottom: 20px;
        }

label {
            display: block;
            margin-bottom: 5px;
            color: #555; /* Slightly darker label color */
        }

input[type="text"],
        input[type="password"] {
            width: calc(100% - 12px); /* Account for padding */
            padding: 10px;
            border: 1px solid #ddd; /* Light border */
            border-radius: 4px;
            box-sizing: border-box; /* Include padding in width */
            font-size: 16px;
            transition: border-color 0.3s; /* Smooth border transition */
        }

input[type="text"]:focus,
        input[type="password"]:focus {
            border-color: #007bff; /* Highlight border on focus */
            outline: none; /* Remove default outline */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.2); /* Subtle shadow on focus */
        }

button {
            width: 100%;
            padding: 10px;
            background-color: #007bff; /* Blue button */
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s; /* Smooth background transition */
        }

button:hover {
            background-color: #0056b3; /* Darker blue on hover */
        }

.forgot-password {
            text-align: center;
            margin-top: 15px;
        }

.forgot-password a {
            color: #007bff;
            text-decoration: none;
        }

.forgot-password a:hover {
            text-decoration: underline;
        }

/* Optional: Add some responsive styling */
        @media (max-width: 400px) {
            .login-container {
                width: 90%; /* Make container wider on smaller screens */
                padding: 20px;
            }
        }
    </style>
</head>
<body>

<div class="login-container">
        <h2>Login</h2>
        <form>
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Login</button>
            <div class="forgot-password">
                <a href="#">Forgot Password?</a>
            </div>
        </form>
    </div>

</body>
</html>

Um código por bachir123

Recomendado

Um Código de Metehan

Comentário de espaço reservado para código HTML

Um código por yuhhxn

HTML

CSS

JS

Recomendado

Um Código de Metehan

Comentário de espaço reservado para código HTML

Um código por yuhhxn

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS