Formulaire de connexion HTML (français)

9 mark.charles26062007

Ouvrir dans l'éditeur Publiez votre code

Recommandé

3 January 2025

<!DOCTYPE html>
<html lang="fr">
<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>Se connecter</header>
            </div>

<div class="bottom">
                <div class="left">
                    <input type="checkbox"  id="check">
                    <label for="check"> Souvenir de cette appareil</label>
                </div>
                <div class="right">
                    <label><a href="#">Mot de passe oublié?</a></label>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

*{
    font-family: 'Poppins', sans-serif;
}
body{
    background-image: url("https://static.vecteezy.com/ti/vecteur-libre/p1/1953845-retro-futurisme-style-avec-fond-espace-violet-vectoriel.jpg");
    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;
}

Formulaire de connexion HTML (français)

Recommandé

Un code par adonis1887

Un code de Landingpage1

Un code de Mete

HTML

CSS

JS

Recommandé

Un code par adonis1887

Un code de Landingpage1

Un code de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS