Un code par Liamgilles76

Ouvrir dans l'éditeur Publiez votre code

Recommandé

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

Un code par Liamgilles76

Recommandé

Un code par ytr3d3

Un code de Mete

Un code par toolify001

HTML

CSS

JS

Recommandé

Un code par ytr3d3

Un code de Mete

Un code par toolify001

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS