Un código de nehapanchal8087

1,405 nehapanchal8087

Abrir en el editor Publica tu código

Recomendado

12 January 2025

Un código de Mikeykun

21 June 2024

Botón de autodestrucción

25 May 2025

Clon de Pinterest

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