Verified Commit a3bb9d15 authored by Thibaut Broggi's avatar Thibaut Broggi
Browse files

Update html layout

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