Start to design color picker

index.html

@@ -20,7 +20,41 @@
 	<button id="randomize">CHOISIR AU HASARD</button>
       </div>
       <div id="step1">
-	<h2>Choisissez 2 couleurs</h2>
+	<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>
 	<div class="navButtons">
 	  <a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
 	</div>

style.css

@@ -42,6 +42,39 @@ div#inputs {
   background-color: white;
 }
 
+.colorpicker {
+  padding: 20px;
+  width: 100%;
+}
+
+.colorpicker > div {
+  width: 20%;
+  height: 20%;
+  text-align: center;
+  display: inline-block;
+}
+
+.colorpicker > div > input[type="radio"] {
+  display: none;
+}
+
+.colorpicker > div > input[type="radio"] + label {
+  display: inline-block;
+  width: 4em;
+  height: 4em;
+  margin: 1em;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.colorpicker > div > input[type="radio"][value="white"]:not(:checked) + label {
+  border: 2px solid grey
+}
+
+.colorpicker > div > input[type="radio"]:checked + label {
+  border: 5px solid grey;
+}
+
 div[id^="step"] {
   display: none;
 }