Modèle de formulaire de connexion HTML Sunflower

1,591 codex

Ouvrir dans l'éditeur Publiez votre code

Modèle de formulaire de connexion HTML Sunflower

Recommandé

16 January 2026

Lecteur de jeux Flash avec émulateur Ruffle

26 August 2025

Modèle HTML de site Web de film

24 July 2024

Modèle de site Web d'application

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sunflower Login</title>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Quicksand', sans-serif;
            background-color: #FFF8DC; /* Cornsilk - light yellow background */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            color: #333;
            /* Subtle repeating sunflower-like pattern */
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="%23FFD700"/><circle cx="50" cy="50" r="20" fill="%238B4513"/></svg>');
            background-size: 80px; /* Size of the repeating pattern */
            background-repeat: repeat;
        }

.login-container {
            background-color: #ffffff;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 400px;
            width: 90%;
            position: relative;
            overflow: hidden; /* To contain pseudo-elements */
            border: 2px solid #FFD700; /* Gold border */
            z-index: 1; /* Ensure container is above body background */
        }

/* Decorative pseudo-elements for a "sunflower" feel */
        .login-container::before {
            content: '';
            position: absolute;
            top: -30px;
            left: -30px;
            width: 90px;
            height: 90px;
            background-color: #FFC107; /* Amber */
            border-radius: 50%;
            opacity: 0.3;
            z-index: 0;
        }
        .login-container::after {
            content: '';
            position: absolute;
            bottom: -30px;
            right: -30px;
            width: 110px;
            height: 110px;
            background-color: #FFD700; /* Gold */
            border-radius: 50%;
            opacity: 0.2;
            z-index: 0;
        }

h2 {
            color: #FFC107; /* Amber - main heading color */
            margin-bottom: 30px;
            font-size: 2.2em;
            font-weight: 700;
            position: relative; /* Ensure text is above pseudo-elements */
            z-index: 1;
        }

.input-group {
            margin-bottom: 20px;
            text-align: left;
            position: relative;
            z-index: 1;
        }

.input-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 700;
            color: #555;
        }

.input-group input[type="text"],
        .input-group input[type="password"] {
            width: calc(100% - 24px); /* Account for padding */
            padding: 12px;
            border: 1px solid #FFD700; /* Gold border */
            border-radius: 8px;
            font-size: 1em;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            background-color: #FFFDF5; /* Slightly off-white input background */
        }

.input-group input[type="text"]:focus,
        .input-group input[type="password"]:focus {
            border-color: #FFA500; /* Orange on focus */
            box-shadow: 0 0 8px rgba(255, 165, 0, 0.2);
            outline: none;
        }

button[type="submit"] {
            background-color: #FFD700; /* Gold button background */
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 1.1em;
            font-weight: 700;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
            width: 100%;
            margin-top: 15px;
            box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
            position: relative;
            z-index: 1;
        }

button[type="submit"]:hover {
            background-color: #FFA500; /* Orange on hover */
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(255, 165, 0, 0.4);
        }

.forgot-password {
            margin-top: 20px;
            font-size: 0.9em;
            position: relative;
            z-index: 1;
        }

.forgot-password a {
            color: #FFA500; /* Orange link color */
            text-decoration: none;
            transition: color 0.3s ease;
        }

.forgot-password a:hover {
            color: #FF8C00; /* Darker orange on hover */
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Sunflower Login</h2>
        <form class="login-form">
            <div class="input-group">
                <label for="username">Username or Email</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Login</button>
            <p class="forgot-password"><a href="#">Forgot Password?</a></p>
        </form>
    </div>
</body>
</html>

CSS