Un código de securearray494

882 securearray494

Abrir en el editor Publica tu código

Recomendado

26 February 2024

Formulario de inicio de sesión HTML CSS

18 June 2025

escalada de montaña

20 June 2025

Interfaz de usuario de iconos de reproductor y aplicación CSS Glassmorphism

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 HTML CSS

escalada de montaña

Interfaz de usuario de iconos de reproductor y aplicación CSS Glassmorphism

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS