Verified Commit 04ef00f4 authored by Thibaut Broggi's avatar Thibaut Broggi
Browse files

Add "randomize" button

parent ec15ea19
...@@ -16,6 +16,9 @@ ...@@ -16,6 +16,9 @@
<label for="step5">5</label> <label for="step5">5</label>
</nav> </nav>
<div id="inputs"> <div id="inputs">
<div>
<button id="randomize">CHOISIR AU HASARD</button>
</div>
<input type="radio" name="step" id="step1" checked/> <input type="radio" name="step" id="step1" checked/>
<div> <div>
<h2>Choisissez 2 couleurs</h2> <h2>Choisissez 2 couleurs</h2>
......
...@@ -6,6 +6,7 @@ body { ...@@ -6,6 +6,7 @@ body {
margin: auto; margin: auto;
color: #497ed5; color: #497ed5;
min-height: 100vh; min-height: 100vh;
background-color: #2f5188;
} }
h2 { h2 {
...@@ -28,9 +29,13 @@ nav > * { ...@@ -28,9 +29,13 @@ nav > * {
cursor: pointer; cursor: pointer;
} }
nav > label:target {
background-color: blue;
}
div#inputs { div#inputs {
position: absolute; position: absolute;
top: 0; top: 10px;
left: 7vw; left: 7vw;
width: 30vw; width: 30vw;
height: 100%; height: 100%;
...@@ -42,37 +47,52 @@ div#inputs > input[type=radio] + div { ...@@ -42,37 +47,52 @@ div#inputs > input[type=radio] + div {
display: none; display: none;
} }
#inputs > input[type=radio]:checked + div { div#inputs > input[type=radio]:checked + div {
display: block; display: block;
} }
div#inputs > div:first-child {
display: flex;
align-items: center;
justify-content: center;
height: 7vw;
border-bottom: 1px solid #dde5f1;
}
div#inputs > div:first-child > button#randomize {
width: 60%;
}
div.navButtons { div.navButtons {
float: right; float: right;
margin-right: 20px; margin-right: 20px;
} }
div.navButtons > label { div.navButtons > label, button {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
background-color: white;
color: inherit;
font-size: inherit;
border: 1px solid #497ed5;
} }
label.nextButton { label.nextButton {
color: white; color: white !important;
background-color: #497ed5; background-color: #497ed5 !important;
width: 200px; width: 200px;
} }
label.prevButton { label.prevButton {
width: 50px; width: 50px;
border: 1px solid #497ed5;
} }
main { main {
position: absolute; position: absolute;
top: 0; top: 10px;
left: 37vw; left: 37vw;
right: 0; right: 0;
background-color: #dde5f1; background-color: #dde5f1;
......
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