Um Código por nehapanchal8087

Abrir no Editor Publique Seu Código

Recomendado

10 February 2025

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

Um Código por nehapanchal8087

Recomendado

Um código por bachir123

Um Código de Metehan

Um Código por ashimadison8

HTML

CSS

JS

Recomendado

Um código por bachir123

Um Código de Metehan

Um Código por ashimadison8

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS