Update html layout

       Label/checkboxes have been replaced by link/targets
parent 04ef00f4
......@@ -9,54 +9,49 @@
<label for="step1">1</label>
<label for="step2">2</label>
<label for="step3">3</label>
<label for="step4">4</label>
<label for="step5">5</label>
<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>
<div id="inputs">
<button id="randomize">CHOISIR AU HASARD</button>
<input type="radio" name="step" id="step1" checked/>
<div id="step1">
<h2>Choisissez 2 couleurs</h2>
<div class="navButtons">
<label for="step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</label>
<a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
<input type="radio" name="step" id="step2" />
<div id="step2">
<h2>Remplissez le texte à trou</h2>
<div class="navButtons">
<label for="step1" class="prevButton">&lsaquo;</label>
<label for="step3" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</label>
<a href="#step1" class="prevButton">&lsaquo;</a>
<a href="#step3" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
<input type="radio" name="step" id="step3" />
<div id="step3">
<h2>Choisissez votre police</h2>
<div class="navButtons">
<label for="step2" class="prevButton">&lsaquo;</label>
<label for="step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</label>
<a href="#step2" class="prevButton">&lsaquo;</a>
<a href="#step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
<input type="radio" name="step" id="step4" />
<div id="step4">
<h2>Choisissez votre icône</h2>
<div class="navButtons">
<label for="step3" class="prevButton">&lsaquo;</label>
<label for="step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</label>
<a href="#step3" class="prevButton">&lsaquo;</a>
<a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
<input type="radio" name="step" id="step5" />
<div id="step5">
<h2>Signez votre création ! (optionnel)</h2>
<div class="navButtons">
<label for="step4" class="prevButton">&lsaquo;</label>
<label class="nextButton">GÉNÉRER &rsaquo;</label>
<a href="#step4" class="prevButton">&lsaquo;</a>
<a class="nextButton">GÉNÉRER &rsaquo;</a>
......@@ -29,8 +29,9 @@ nav > * {
cursor: pointer;
nav > label:target {
background-color: blue;
a {
text-decoration: none;
color: white;
div#inputs {
......@@ -42,12 +43,11 @@ div#inputs {
background-color: white;
div#inputs > input[type=radio],
div#inputs > input[type=radio] + div {
div[id^="step"] {
display: none;
div#inputs > input[type=radio]:checked + div {
div[id^="step"]:target {
display: block;
......@@ -68,7 +68,7 @@ div.navButtons {
margin-right: 20px;
div.navButtons > label, button {
div.navButtons > a, button {
display: inline-block;
cursor: pointer;
height: 50px;
......@@ -80,13 +80,13 @@ div.navButtons > label, button {
border: 1px solid #497ed5;
label.nextButton {
a.nextButton {
color: white !important;
background-color: #497ed5 !important;
width: 200px;
label.prevButton {
a.prevButton {
width: 50px;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment