Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 4.11 KB
Newer Older
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
1
2
3
4
5 
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
6 
    <link rel="stylesheet" href="./bootstrap-grid.min.css" />
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
7
8
9
10
11
12 
    <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
13
14
15
16
17 
      <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
18
19 
    </nav>
    <div id="inputs">
Thibaut Broggi's avatar
Add "randomize" button    
Thibaut Broggi committed
20
21
22 
      <div>
	<button id="randomize">CHOISIR AU HASARD</button>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
23 
      <div id="step1">
Thibaut Broggi's avatar
Start to design color picker    
Thibaut Broggi committed
24 
	<h2>Choisissez la couleur de fond</h2>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
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
58 
	<div class="colorpicker container">
	  <div class="row">
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="red" id="bg-red" />
	      <label style="background-color: red" for="bg-red"></label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="pink" id="bg-pink" />
	      <label style="background-color: pink" for="bg-pink"></label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="orange" id="bg-orange" />
	      <label style="background-color: orange" for="bg-orange"></label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="yellow" id="bg-yellow" />
	      <label style="background-color: yellow" for="bg-yellow"></label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="teal" id="bg-teal" />
	      <label style="background-color: teal" for="bg-teal"></label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="blue" id="bg-blue" />
	      <label style="background-color: blue" for="bg-blue"></label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="black" id="bg-black" />
	      <label style="background-color: black" for="bg-black"></label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="white" id="bg-white" />
	      <label style="background-color: white" for="bg-white"></label>
	    </div>
Thibaut Broggi's avatar
Start to design color picker    
Thibaut Broggi committed
59
60 
	  </div>
	</div>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
61 
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
62 
	  <a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
63
64
65 
	</div>
      </div>
      </input>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
66 
      <div id="step2">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
67
68 
	<h2>Remplissez le texte à trou</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
69
70 
	  <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
71
72 
	</div>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
73 
      <div id="step3">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
74
75 
	<h2>Choisissez votre police</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
76
77 
	  <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
78
79 
	</div>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
80 
      <div id="step4">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
81
82 
	<h2>Choisissez votre icône</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
83
84 
	  <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
85
86 
	</div>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
87 
      <div id="step5">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
88
89 
	<h2>Signez votre création ! (optionnel)</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
90
91 
	  <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
92
93
94
95 
	</div>
      </div>
    </div>
    <main>
Thibaut Broggi's avatar
Add main div    
Thibaut Broggi committed
96
97
98
99
100
101
102
103 
      <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
104
105
106 
    </main>
  </body>
</html>