Inicio de Sesión

16198 Ortiz

Abrir en el editor Video Publica tu código

Recomendado

18 December 2025

Cargador WebGL de Unity desde Zip con CrazyGames SDK Shim

23 March 2023

Página de preguntas frecuentes responsiva

5 June 2025

Un código de yuhhxn

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login web</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="cl-icon/css/all.min.css">
</head>
<body>
    <div class="wrapper">
        <form action="" class="form">
            <h1 class="title">Inicio</h1>
            <div class="inp">
                <input type="text" name="" id="" class="input" placeholder="usuario">
                <i class="fa-solid fa-user"></i>
            </div>
            <div class="inp">
                <input type="password" name="" id="" class="input" placeholder="contraseña">
                <i class="fa-solid fa-lock"></i>
            </div>
            <button class="submit">Iniciar sesión</button>
            <p class="footer">¿No tienes cuenta?  <a href="#" class="link">Por favor, Registrate</a></p>   
        </form>
        <div></div>
        <div class="banner">
            <h1 class="wel_text">Bienvenid@</h1><br>
            <p class="para"></p>
        </div>
    </div>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    font-family: arial;
    color: #fff;
}
body{
    width: 100vw;
    height: 100vh;
    background: #081b29;
    display: grid;
    justify-content: center;
    align-content: center;
}
::-webkit-input-placeholder{
    color: #eee;
}
.wrapper{
    position: relative;
    width: 800px;
    height: 65vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 3px solid #00ffff;
    box-shadow: 0 0 50px 0 #00a6bc;
}
.form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.title{
    font-size: 35px;
}
.inp{
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}
.input{
    border: none;
    outline: none;
    background: none;
    width: 260px;
    margin-top: 40px;
    padding-right: 10px;
    font-size: 17px;
    color: #0ef;

}
.submit{
    border: none;
    outline: none;
    width: 288px;
    margin-top: 25px;
    padding: 10px 0;
    font-size: 20px;
    border-radius: 40px;
    letter-spacing: 1px;
    cursor: pointer;
    background: linear-gradient(45deg, #0ef, #c800ff);
}
.footer{
    margin-top: 30px;
    letter-spacing: 0.5px;
    font-size: 14px;
}
.link{
    color: #0ef;
    text-decoration: none;
}
.banner{
    position: absolute;
    top: 0;
    right: 0;
    width: 450px;
    height: 390px;
    background: linear-gradient(to right,#0ef, #c800ff );
    clip-path: polygon(0 0,100% 0,100% 100%, 60% 100%);
    padding-right: 70px;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.wel_text{
    font-size: 40px;
    margin-top: -50px;
    line-height: 50px;
}
.para{
    margin-top: 10px;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 1px;
}

Recomendado

Cargador WebGL de Unity desde Zip con CrazyGames SDK Shim

Página de preguntas frecuentes responsiva

Un código de yuhhxn

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS