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