<!DOCTYPE html>
<html lang="en">
<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">
<title>Connexion</title>
</head>
<body>
<style>
body{
background: rgb(252,132,12);
background: linear-gradient(90deg, rgba(252,132,12,1) 25%, rgba(255,182,0,1) 100%);
}
h1{
margin-top: 5em;
font-size: 2em;
font-family: 'Montserrat', sans-serif;
color: rgba(255, 255, 255, 0.903);
text-align: center;
}
.form-container{
max-width: 400px;
margin: 50px auto;
padding: 20px 0;
}
.form-label{
color: rgba(255, 255, 255, 0.903);
font-family: 'Montserrat', sans-serif;
}
.form-input{
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
position: relative;
margin-top: 0.5em;
margin-bottom: 0.5em;
border: solid#ffb600 2px;
font-family: 'Montserrat', sans-serif;
}
.form-submit{
width: 100%;
height: 50px;
font-size: 1.3rem;
padding: 5px;
border: none;
margin-top: 1.3em;
background-color: white;
color: rgba(255, 255, 255, 0.903);
background-color: #ffb600;
font-family: 'Montserrat', sans-serif;
border: solid #fc840c 2px;
}
.forgot-password{
text-decoration: none;
color: rgba(255, 255, 255, 0.903);
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
margin-top: 20px;
display: block;
text-align: center;
}
.form-submit:hover{
background-color:#fc840c;
border: #ffb600 solid 2px;
color: white;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
}
.forgot-password:hover{
color: white;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
}
@media (max-width: 470px){
.form-container{
margin-left: 2em;
margin-right: 2em;
}
}
</style>
<h1><strong>Connexion</strong></h1>
<div class="form-container">
<form method="GET" action="">
<label for="email" for="email" class="form-label">Email</label>
<input type="text" class="form-input" id="email" name="email">
<label for="password" class="form-label">Mot de passe</label>
<input type="password" class="form-input" id="password" name="password">
<input type="submit" value="Login" class="form-submit" aria-label="submit">
<a href="#" class="forgot-password">Mot de passe oubliƩ?</a>
</form>
</div>
</body>
</html>