Webleb - HTML UI Elements - Um código por 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>

Um código por bachir123

Recomendado

Um Código de Metehan

Um Código de Metehan

Um código de Mete

HTML

CSS

JS

Recomendado

Um Código de Metehan

Um Código de Metehan

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS