index.html

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Soutenez La Quadrature du Net !</title>
  </head>
  <body>
    <nav>
      <span>LQDN</span>
      <a href="#step1">1</a>
      <a href="#step2">2</a>
      <a href="#step3">3</a>
      <a href="#step4">4</a>
      <a href="#step5">5</a>
    </nav>
    <div id="inputs">
      <div>
	<button id="randomize">CHOISIR AU HASARD</button>
      </div>
      <div id="step1">
	<h2>Choisissez 2 couleurs</h2>
	<div class="navButtons">
	  <a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
	</div>
      </div>
      </input>
      <div id="step2">
	<h2>Remplissez le texte à trou</h2>
	<div class="navButtons">
	  <a href="#step1" class="prevButton">&lsaquo;</a>
	  <a href="#step3" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
	</div>
      </div>
      <div id="step3">
	<h2>Choisissez votre police</h2>
	<div class="navButtons">
	  <a href="#step2" class="prevButton">&lsaquo;</a>
	  <a href="#step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
	</div>
      </div>
      <div id="step4">
	<h2>Choisissez votre icône</h2>
	<div class="navButtons">
	  <a href="#step3" class="prevButton">&lsaquo;</a>
	  <a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
	</div>
      </div>
      <div id="step5">
	<h2>Signez votre création ! (optionnel)</h2>
	<div class="navButtons">
	  <a href="#step4" class="prevButton">&lsaquo;</a>
	  <a class="nextButton">GÉNÉRER &rsaquo;</a>
	</div>
      </div>
    </div>
    <main>
      <div id="output"></div>
      <div id="credits">
	<p><strong>Site hébergé par La Quadrature du Net</strong></p>
	<p><strong>Crédits :</strong> Les policies utilisées viennnent de <strong>Velvetyne Type Foundry</strong>. Bluu par Jean Baptiste Morizot, Bilbo Inc par Hélène Marian Srodogora, Boeticher par Charles Paille, Combat par Martin Desinde, Gulax par Morgan Gilbert, Lineal par Frank Adebiaye, Resistance par Collective, Savate par Wech, Solide Mirage par Jérémy Landes-Nones, Steps mono par Jean Baptiste Morizot, Terminal par Rapaël Bastide et Jérémy Landes-Nones.</p>
	<p><strong>Code source du site :</strong><br />
	  contact@laquadrature.net
	</p>
      </div>
    </main>
  </body>
</html>