Un código de nehapanchal8087

1,655 nehapanchal8087

Abrir en el editor Publica tu código

Recomendado

27 September 2024

Latidos del corazón

14 September 2024

Animación de línea de frecuencia cardíaca

22 June 2025

Ejemplo de formulario de inicio de sesión HTML

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;
}