Formulario de inicio de sesión HTML (francés)

342 mark.charles26062007

Abrir en el editor Video Publica tu código

Formulario de inicio de sesión HTML (francés)

Recomendado

19 July 2023

Sistemas de energía solar | Soluciones GES de SolarTek

HTML

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

Formulario de inicio de sesión HTML (francés)

Recomendado

Carrusel de tarjetas con CSS

Asteroide

Sistemas de energía solar | Soluciones GES de SolarTek

HTML

CSS

JS

Recomendado

Carrusel de tarjetas con CSS

Asteroide

Sistemas de energía solar | Soluciones GES de SolarTek

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS