Un código de securearray494

1047 securearray494

Abrir en el editor Publica tu código

Recomendado

19 January 2024

Formulario de Inicio de Sesión con Validación de Entrada

17 March 2025

Búsqueda de cifrado en CodePen Home: Descifrador de códigos

6 October 2025

Fragmento de código de animación de laberinto CSS

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>

Recomendado

Formulario de Inicio de Sesión con Validación de Entrada

Búsqueda de cifrado en CodePen Home: Descifrador de códigos

Fragmento de código de animación de laberinto CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS