Un code par securearray494

2,202 securearray494

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 March 2025

Un code par lebdev

22 August 2025

Commentaire d'espace réservé au code HTML

22 January 2026

Code source HTML5 du jeu Room Clicker

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Sign In</title>
    <style>
        /* Reset and Base Styles */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

body {
            font-family: 'Poppins', sans-serif; /* More modern font */
            background: linear-gradient(135deg, #4e54c8, #8f94fb); /* Gradient background */
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden; /* Prevent scrollbars if content overflows */
        }

.container {
            position: relative;
            width: 80%;
            max-width: 800px;  /* Larger container */
            min-height: 500px;  /* Taller container */
            background: rgba(255, 255, 255, 0.1);  /* Semi-transparent white background */
            backdrop-filter: blur(15px);  /* Glassmorphism blur effect – Works in modern browsers */
            border-radius: 20px; /* More rounded corners */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Stronger shadow */
            display: flex;
            overflow: hidden;
             border: 2px solid rgba(255,255,255,0.25); /* subtle border */
        }

.form-container {
            width: 50%; /* Split into two halves */
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            z-index: 2; /* Ensure form is above background elements */
        }

.image-container {
          width: 50%;
          background-image: url('https://images.unsplash.com/photo-1519750783826-e2420f4d687f?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); /* add background */
          background-size: cover;
          background-position: center;
        }

h2 {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 30px;
            color: #fff; /* White text for better contrast */
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Text shadow for depth */
        }

/* Form Input Styles */
        .form-group {
            position: relative; /* For absolutely positioning the icons */
            margin-bottom: 30px;
        }

.form-group label {
            position: absolute;
            top: 12px;
            left: 15px;
            color: rgba(255, 255, 255, 0.7);
            pointer-events: none; /* Allows clicking through the label */
            transition: 0.3s ease;
            font-size: 0.9em;
        }

input[type="email"],
        input[type="password"] {
            width: 100%;
            padding: 12px 40px 12px 15px;  /* Space for icons on the left */
            border: none;
            border-bottom: 2px solid rgba(255, 255, 255, 0.4); /* Lighter bottom border */
            background: transparent; /* Remove background */
            color: #fff;
            font-size: 16px;
            outline: none; /* Remove default outline */
            transition: border-color 0.3s ease;
        }
        input[type="email"]::placeholder,
        input[type="password"]::placeholder{
            color: rgba(255, 255, 255, 0.7);
        }

input[type="email"]:focus,
        input[type="password"]:focus {
            border-bottom-color: #fff; /* Full white on focus */
        }

/* Floating Label Effect */
        input[type="email"]:focus + label,
        input[type="password"]:focus + label,
        input[type="email"]:not(:placeholder-shown) + label,
        input[type="password"]:not(:placeholder-shown) + label

{
            transform: translateY(-20px);
            font-size: 0.8em;
            color: #fff;
        }

/* Button Styles */
        button {
            width: 100%;
            padding: 15px;
            background-color: #fff;
            color: #4e54c8; /* Complementary color */
            border: none;
            border-radius: 30px; /* Pill-shaped button */
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Button shadow */
        }

button:hover {
            background-color: #4e54c8;
            color:#fff;
            transform: translateY(-3px); /* Slight lift on hover */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Increased shadow on hover */
        }

/* Forgot Password Link */
        .forgot-password {
            text-align: center;
            margin-top: 20px;
        }

.forgot-password a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-size: 0.9em;
            transition: color 0.3s ease;
        }

.forgot-password a:hover {
            color: #fff;
            text-decoration: underline;
        }
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;  /* Stack elements vertically on smaller screens */
                width: 90%;
                min-height: auto; /* Allow height to adjust to content */
            }

.form-container,
            .image-container{
                width: 100%; /* Full width on smaller screens */
             }
                .image-container{
                  display: none;
                }
            }

</style>
</head>
<body>
    <div class="container">
        <div class="form-container">
            <h2>Sign In</h2>
            <form>
                <div class="form-group">
                    <input type="email" id="email" name="email" required placeholder=" ">
                    <label for="email">Email</label>

</div>
                <div class="form-group">
                    <input type="password" id="password" name="password" required placeholder=" ">
                    <label for="password">Password</label>

</div>
                <button type="submit">Sign In</button>
                <div class="forgot-password">
                    <a href="#">Forgot Password?</a>
                </div>
            </form>
        </div>
        <div class="image-container">
        </div>
    </div>
</body>
</html>

CSS