Un codice di bachir123

1320 bachir123

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

26 October 2024

Modello di sito Web per portfolio di sviluppatori HTML CSS

18 May 2025

Un codice di youssefdahroug2005

25 May 2025

Un codice di Liamgilles76

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>

Consigliato

Modello di sito Web per portfolio di sviluppatori HTML CSS

Un codice di youssefdahroug2005

Un codice di Liamgilles76

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS