Webleb - Extraits de Code - Un code par bachir123

HTML

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

Un code par bachir123

Recommandé

Le chuchoteur de codes

Un code par ytr3d3

Un code par hunganh

HTML

CSS

JS

Recommandé

Le chuchoteur de codes

Un code par ytr3d3

Un code par hunganh

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS