Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 3.59 KB
Newer Older
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
1
2
3
4
5
6
7
8
9
10
11 
<!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>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
12
13
14
15
16 
      <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>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
17
18 
    </nav>
    <div id="inputs">
Thibaut Broggi's avatar
Add "randomize" button    
Thibaut Broggi committed
19
20
21 
      <div>
	<button id="randomize">CHOISIR AU HASARD</button>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
22 
      <div id="step1">
Thibaut Broggi's avatar
Start to design color picker    
Thibaut Broggi committed
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57 
	<h2>Choisissez la couleur de fond</h2>
	<div class="colorpicker">
	  <div>
	    <input type="radio" name="bg-color" value="red" id="bg-red" />
	    <label style="background-color: red" for="bg-red"></label>
	  </div>
	  <div>
	    <input type="radio" name="bg-color" value="pink" id="bg-pink" />
	    <label style="background-color: pink" for="bg-pink"></label>
	  </div>
	  <div>
	    <input type="radio" name="bg-color" value="orange" id="bg-orange" />
	    <label style="background-color: orange" for="bg-orange"></label>
	  </div>
	  <div>
	    <input type="radio" name="bg-color" value="yellow" id="bg-yellow" />
	    <label style="background-color: yellow" for="bg-yellow"></label>
	  </div>
	  <div>
	    <input type="radio" name="bg-color" value="teal" id="bg-teal" />
	    <label style="background-color: teal" for="bg-teal"></label>
	  </div>
	  <div>
	    <input type="radio" name="bg-color" value="blue" id="bg-blue" />
	    <label style="background-color: blue" for="bg-blue"></label>
	  </div>
	  <div>
	    <input type="radio" name="bg-color" value="black" id="bg-black" />
	    <label style="background-color: black" for="bg-black"></label>
	  </div>
	  <div>
	    <input type="radio" name="bg-color" value="white" id="bg-white" />
	    <label style="background-color: white" for="bg-white"></label>
	  </div>
	</div>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
58 
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
59 
	  <a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
60
61
62 
	</div>
      </div>
      </input>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
63 
      <div id="step2">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
64
65 
	<h2>Remplissez le texte à trou</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
66
67 
	  <a href="#step1" class="prevButton">&lsaquo;</a>
	  <a href="#step3" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
68
69 
	</div>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
70 
      <div id="step3">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
71
72 
	<h2>Choisissez votre police</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
73
74 
	  <a href="#step2" class="prevButton">&lsaquo;</a>
	  <a href="#step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
75
76 
	</div>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
77 
      <div id="step4">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
78
79 
	<h2>Choisissez votre icône</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
80
81 
	  <a href="#step3" class="prevButton">&lsaquo;</a>
	  <a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
82
83 
	</div>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
84 
      <div id="step5">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
85
86 
	<h2>Signez votre création ! (optionnel)</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
87
88 
	  <a href="#step4" class="prevButton">&lsaquo;</a>
	  <a class="nextButton">GÉNÉRER &rsaquo;</a>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
89
90
91
92 
	</div>
      </div>
    </div>
    <main>
Thibaut Broggi's avatar
Add main div    
Thibaut Broggi committed
93
94
95
96
97
98
99
100 
      <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>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
101
102
103 
    </main>
  </body>
</html>