<!DOCTYPE html>

<div class="container">
  <div class="row">
    <div class="col-md-5 mx-auto">
      <div class="myform">
        <div class="col-md-12 text-center">
          <h1>Login</h1>
        </div>
        <form>
          <div class="form-group">
            <label for="username">Username</label>
            <input
              type="text"
              class="form-control"
              name="username"
              id="username"
              placeholder="Entrez votre nom d'utilisateur"
            />
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input
              type="password"
              class="form-control"
              name="password"
              id="password"
              placeholder="Entrez votre mot de passe"
            />
          </div>
          <div class="form-group">
            <div
              class="g-recaptcha"
              data-sitekey="6LdxpDAbAAAAAO4apbOlAGRpHcOqcitbVdcqEQmO"
            ></div>
          </div>
          <div class="col-md-12 text-center">
            <input
              id="login-valider"
              type="button"
              class="btn btn-primary btn-block"
              value="Se connecter"
            />
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row justify-content-center mt-5">
    <iframe
      class=""
      width="600"
      height="450"
      style="border: 0"
      loading="lazy"
      allowfullscreen
      src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAlBHRR9o3IVU8l2BrpA8kEwvHbX4OM4fA
    &q=EMF+-+Ecole+des+Métiers+%2F+Berufsfachschule+-+Fribourg"
    >
    </iframe>
  </div>
</div>

<!-- Script à ne pas toucher -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
