Modèle de formulaire de connexion HTML Sunflower

832 codex

Ouvrir dans l'éditeur Publiez votre code

Modèle de formulaire de connexion HTML Sunflower

Recommandé

23 May 2025

Un code de Skyrreum

19 May 2025

menu de la barre de navigation

27 December 2024

Une page d'accueil créée avec des annuaires

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>

Modèle de formulaire de connexion HTML Sunflower

Recommandé

Un code de Skyrreum

menu de la barre de navigation

Une page d'accueil créée avec des annuaires

HTML

CSS

JS

Recommandé

Un code de Skyrreum

menu de la barre de navigation

Une page d'accueil créée avec des annuaires

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS