Plantilla de formulario de inicio de sesión HTML de Sunflower

826 codex

Abrir en el editor Publica tu código

Plantilla de formulario de inicio de sesión HTML de Sunflower

Recomendado

18 December 2023

Animación de Texto en HTML y CSS

31 July 2025

Plantilla HTML de página de inicio de sesión de Liquid Drop

18 December 2025

Geometry Dash Lite: Juego en línea con HTML incrustado

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>

Recomendado

Animación de Texto en HTML y CSS

Plantilla HTML de página de inicio de sesión de Liquid Drop

Geometry Dash Lite: Juego en línea con HTML incrustado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS