Webleb - fragmentos de código - Un código de 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 código de bachir123

Recomendado

Un código de adonis1887

Texto con degradado de neón

Efecto de botón de burbuja

HTML

CSS

JS

Recomendado

Un código de adonis1887

Texto con degradado de neón

Efecto de botón de burbuja

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS