Formulaire de connexion simple

7254 Andev.web

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

22 November 2025

Effet de survol du bouton en verre liquide CSS

17 May 2025

site web moderne

22 August 2025

Animation de notification de blob CSS

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="boxicons/css/boxicons.css">
    <title>Andev web</title>
</head>
<body>
    <div class="box">
        <div class="container">
            <div class="top-header">
                <span>Andev web</span>
                <header>Iniciar Sesión</header>
            </div>

<div class="bottom">
                <div class="left">
                    <input type="checkbox"  id="check">
                    <label for="check"> Recordarme</label>
                </div>
                <div class="right">
                    <label><a href="#">¿Olvidaste la contraseña?</a></label>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

*{
    font-family: 'Poppins', sans-serif;
}
body{
    background-image: url("https://images.unsplash.com/photo-1477346611705-65d1883cee1e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
.box{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90vh;
}
.container{
    width: 350px;
    display: flex;
    flex-direction: column;
    padding: 0 15px 0 15px;
}
span{
    color: #fff;
    font-size: small;
    display: flex;
    justify-content: center;
    padding: 10px 0 15px 0;
}
header{
    color: #fff;
    font-size: 30px;
    display: flex;
    justify-content: center;
    padding: 0 0 15px 0; 
}
.input-field{
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}
.input-field .input{
    height: 45px;
    width: 87%;
    border: none;
    outline: none;
    border-radius: 30px;
    color: #fff;
    padding: 0 0 0 42px;
    background: rgba(255,255,255,0.1);
}
i{
    position: relative;
    top: -31px;
    left: 17px;
    color: #fff;
}
::-webkit-input-placeholder{
    color: #fff;
}
.submit{
    border: none;
    border-radius: 30px;
    font-size: 15px;
    height: 45px;
    outline: none;
    width: 100%;
    background: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: .3s;
}
.submit:hover{
    box-shadow: 1px 5px 7px 1px rgba(0, 0, 0, 0.2);
}
.bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: small;
    color: #fff;
    margin-top: 10px;
}
.left{
    display: flex;
}
label a{
    color: #fff;
    text-decoration: none;
}

Recommandé

Effet de survol du bouton en verre liquide CSS

site web moderne

Animation de notification de blob CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS