Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
index.html
View file @ a3bb9d15
......@@ -9,54 +9,49 @@
<body>
<nav>
<span>LQDN</span>
<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>
</nav>
<div id="inputs">
<div>
<button id="randomize">CHOISIR AU HASARD</button>
</div>
<input type="radio" name="step" id="step1" checked/>
<div>
<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>
</div>
</div>
</input>
<input type="radio" name="step" id="step2" />
<div>
<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>
</div>
</div>
<input type="radio" name="step" id="step3" />
<div>
<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>
</div>
</div>
<input type="radio" name="step" id="step4" />
<div>
<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>
</div>
</div>
<input type="radio" name="step" id="step5" />
<div>
<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>
</div>
</div>
</div>
......
style.css
View file @ a3bb9d15
......@@ -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;
}
......
Supports Markdown
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