<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="fr-fr"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="fr-fr"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="fr-fr"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="fr-fr">
<!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Connexion | Bénévolaide</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
  </style>
  <link rel="stylesheet" href="css/bootstrap-flatly.css">
  <link rel="stylesheet" href="css/main.css">
  <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
  <!-- Header Zone -->
  <header>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <span class="navbar-brand hidden-sm">Bénévolaide</span>
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span><span class="hidden-md hidden-sm"> Accueil</span></a></li>
        </ul>
        <!-- Left zone -->
        <ul class="nav navbar-nav navbar-right">
          <li>
            <p class="navbar-text hidden-sm">Bienvenue, visiteur ! </p>
          </li>
          <li>
            <p class="navbar-btn">
              <a href="connexion.html" class="btn btn-default" title="Se connecter ?">
                <span class="glyphicon glyphicon-log-in"></span>
                <span class="hidden-md hidden-sm"> Se connecter ?</span>
              </a>
            </p>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- Body zone -->
  <section class="jumbotron">
    <div class="container">
      <div class="col-md-8 col-md-offset-2 col-xs-12">
        <h2>Connexion</h2>
        <p>Pour accéder aux fonctionnalités de ce site, vous devez vous connecter. Si vous n'avez pas de compte, demandez à un administrateur de vous inscrire.</p>
        <!--<div class="alert alert-dismissible alert-danger">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <p>Oh flûte ! Je ne vous ai pas reconnu.</p>
        </div>-->
        <form class="form-horizontal">
          <fieldset>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="usernameinput">Nom d'utilisateur</label>
              <div class="col-md-4">
                <input id="usernameInput" name="usernameInput" type="text" placeholder="Votre nom d'utilisateur" class="form-control input-md" required>
              </div>
            </div>

            <!-- Password input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="passwordinput">Mot de passe</label>
              <div class="col-md-4">
                <input id="passwordInput" name="passwordInput" type="password" placeholder="Votre mot de passe" class="form-control input-md" required>
              </div>
            </div>

            <!-- Button -->
            <div class="form-group">
              <label class="col-md-4 control-label" for="submit"></label>
              <div class="col-md-4">
                <button id="submit" name="submit" class="btn btn-primary">Je vous connecte</button>
              </div>
            </div>

          </fieldset>
        </form>
      </div>
    </div>
  </section>
  <section class="container">
    <div class="row">
      <p>Besoin de contacter un administrateur ? Voyez avec l'un d'entre-eux :</p>
      <ul>
        <li>Amélie <span class="text-smallcase">Clark</span></li>
        <li>Claudette <span class="text-smallcase">Dupuis</span></li>
        <li>Pierro <span class="text-smallcase">d'Houin</span></li>
      </ul>
    </div>
  </section>
  <!-- Footer zone -->
  <footer class="well footer footer-bottom-patch">
    <div class="container">
      <div class="row">
        <div class="col-xs-6">
          <h5 class="text-primary">Remerciement</h5>
          <ul class="list-unstyled small">
            <li>Mise en page propulsé par <a href="http://getbootstrap.com/">Bootstrap</a>.</li>
            <li>Apparence et style fournit par <a href="https://bootswatch.com/">Bootswatch</a>.</li>
            <li>Scripts motorisé par <a href="https://jquery.com/">jQuery</a>.</li>
          </ul>
        </div>
        <div class="col-xs-6">
          <h5 class="text-primary">Termes</h5>
          <ul class="list-unstyled small">
            <li>Ce site web est un projet d'étude.</li>
            <li><a href="#">À propos</a> de Bénévolaide.</li>
            <li>License <a class="" href="http://creativecommons.org/licenses/by-nc-nd/3.0/fr/legalcode">CC-BY-NC-ND</a> 2016.</li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
  <!-- /container -->
  <script src="//code.jquery.com/jquery-2.2.1.js"></script>
  <script>window.jQuery || document.write('<script src="js/vendor/jquery-2.2.0.js"><\/script>')</script>
  <script src="js/vendor/bootstrap.min.js"></script>
  <script src="js/shared.js"></script>
  <script src="js/connexion.js"></script>
</body>
</html>
