Modèle de formulaire de connexion HTML Sunflower

54 codex

Ouvrir dans l'éditeur Publiez votre code

Modèle de formulaire de connexion HTML Sunflower

Recommandé

31 January 2025

Formulaire d'inscription responsive Bootstrap

4 December 2024

Un code par mikey

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é

Films de cartes CSS pures 3D

Formulaire d'inscription responsive Bootstrap

Un code par mikey

HTML

CSS

JS

Recommandé

Films de cartes CSS pures 3D

Formulaire d'inscription responsive Bootstrap

Un code par mikey

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS