Un código de securearray494

1323 securearray494

Abrir en el editor Publica tu código

Recomendado

13 October 2025

Ejemplo de código HTML del juego de la serpiente

28 August 2024

Tarjetas de profundidad de paralaje

24 August 2025

Especificaciones del coche (Acordeón) HTML

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>

Un código de securearray494

Recomendado

Ejemplo de código HTML del juego de la serpiente

Tarjetas de profundidad de paralaje

Especificaciones del coche (Acordeón) HTML

HTML

CSS

JS

Recomendado

Ejemplo de código HTML del juego de la serpiente

Tarjetas de profundidad de paralaje

Especificaciones del coche (Acordeón) HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS