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

Change blocks order depending on viewport size

parent 0700c5cf
......@@ -17,6 +17,11 @@ nav {
background-color: #2f5188;
color: white;
text-align: center;
position: fixed;
top: 0;
left: 0;
height: 12vw;
z-index: 2;
font-size: 8vw;
display: flex;
flex-direction: row;
......@@ -59,20 +64,11 @@ a {
}
div#inputs {
position: absolute;
left: 0;
width: 30vw;
height: 100%;
background-color: white;
}
@media (min-width: 992px) {
div#inputs {
top: 0;
left: 7vw;
}
}
.colorpicker input[type="radio"] {
display: none;
}
......@@ -166,18 +162,23 @@ a.prevButton {
}
main {
position: absolute;
left: 30vw;
background-color: #ebf3ff;
min-height: 100%;
padding-left: 40px;
}
@media (min-width: 992px) {
main {
top: 0;
left: 37vw;
right: 0;
#body {
display: flex;
flex-direction: row;
}
@media (max-width: 991px) {
#credits {
display: none;
}
#body {
flex-direction: column-reverse;
}
}
......
......@@ -22,248 +22,250 @@
<a class="fa fa-pencil" href="#step4"></a>
<a class="fa fa-cogs" href="#step5"></a>
</nav>
<div id="inputs">
<div>
<button id="randomize">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
</div>
<div id="step1">
<h2>Choisissez la couleur de fond</h2>
<div class="colorpicker container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
<label for="bg-red">
<span style="background-color: #f54358"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#ee0088" id="bg-pink" />
<label for="bg-pink">
<span style="background-color: #ee0088"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#ff9146" id="bg-orange" />
<label for="bg-orange">
<span style="background-color: #ff9146"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#ffd201" id="bg-yellow" />
<label for="bg-yellow">
<span style="background-color: #ffd201"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#39d0b7" id="bg-teal" />
<label for="bg-teal">
<span style="background-color: #39d0b7"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#2f5189" id="bg-blue" />
<label for="bg-blue">
<span style="background-color: #2f5189"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#000" id="bg-black" />
<label for="bg-black">
<span style="background-color: #000"></span>
</label>
</div>
</div>
<div id="body">
<div id="inputs">
<div>
<button id="randomize">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
</div>
<h2>Choisissez la couleur du texte</h2>
<div class="colorpicker container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#f54358" id="fg-red" />
<label for="fg-red">
<span style="background-color: #f54358"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#ee0088" id="fg-pink" />
<label for="fg-pink">
<span style="background-color: #ee0088"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#ff9146" id="fg-orange" />
<label for="fg-orange">
<span style="background-color: #ff9146"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#ffd201" id="fg-yellow" checked/>
<label for="fg-yellow">
<span style="background-color: #ffd201"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#39d0b7" id="fg-teal" />
<label for="fg-teal">
<span style="background-color: #39d0b7"></span>
</label>
<div id="step1">
<h2>Choisissez la couleur de fond</h2>
<div class="colorpicker container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
<label for="bg-red">
<span style="background-color: #f54358"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#ee0088" id="bg-pink" />
<label for="bg-pink">
<span style="background-color: #ee0088"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#ff9146" id="bg-orange" />
<label for="bg-orange">
<span style="background-color: #ff9146"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#ffd201" id="bg-yellow" />
<label for="bg-yellow">
<span style="background-color: #ffd201"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#39d0b7" id="bg-teal" />
<label for="bg-teal">
<span style="background-color: #39d0b7"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#2f5189" id="bg-blue" />
<label for="bg-blue">
<span style="background-color: #2f5189"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#000" id="bg-black" />
<label for="bg-black">
<span style="background-color: #000"></span>
</label>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#2f5189" id="fg-blue" />
<label for="fg-blue">
<span style="background-color: #2f5189"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#000" id="fg-black" />
<label for="fg-black">
<span style="background-color: #000"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#fff" id="fg-white" />
<label for="fg-white">
<span style="background-color: #fff"></span>
</label>
</div>
<h2>Choisissez la couleur du texte</h2>
<div class="colorpicker container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#f54358" id="fg-red" />
<label for="fg-red">
<span style="background-color: #f54358"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#ee0088" id="fg-pink" />
<label for="fg-pink">
<span style="background-color: #ee0088"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#ff9146" id="fg-orange" />
<label for="fg-orange">
<span style="background-color: #ff9146"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#ffd201" id="fg-yellow" checked/>
<label for="fg-yellow">
<span style="background-color: #ffd201"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#39d0b7" id="fg-teal" />
<label for="fg-teal">
<span style="background-color: #39d0b7"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#2f5189" id="fg-blue" />
<label for="fg-blue">
<span style="background-color: #2f5189"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#000" id="fg-black" />
<label for="fg-black">
<span style="background-color: #000"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#fff" id="fg-white" />
<label for="fg-white">
<span style="background-color: #fff"></span>
</label>
</div>
</div>
</div>
<div class="navButtons">
<a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
</div>
</div>
<div class="navButtons">
<a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
</div>
</div>
<div id="step2">
<h2>Remplissez le texte à trou</h2>
<textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" maxlength="90"></textarea>
<div class="navButtons">
<a href="#step1" class="prevButton">&lsaquo;</a>
<a href="#step3" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
</div>
</div>
<div id="step3">
<h2>Choisissez votre police</h2>
<div>
<input type="radio" id="radio-font-1" name="font" value="bilbo-inc" /><label for="radio-font-1" style="font-family: bilbo-inc">Bilbo inc</label>
<input type="radio" id="radio-font-2" name="font" value="bluu-next" checked/><label for="radio-font-2" style="font-family: bluu-next">Bluu Next</label>
<input type="radio" id="radio-font-3" name="font" value="boeticher" /><label for="radio-font-3" style="font-family: boeticher">Boeticher</label>
<input type="radio" id="radio-font-4" name="font" value="combat" /><label for="radio-font-4" style="font-family: combat">Combat</label>
<input type="radio" id="radio-font-5" name="font" value="gulax" /><label for="radio-font-5" style="font-family: gulax">Gulax</label>
<input type="radio" id="radio-font-6" name="font" value="lineal" checked/><label for="radio-font-6" style="font-family: lineal">Lineal</label>
<input type="radio" id="radio-font-7" name="font" value="resistance" /><label for="radio-font-7" style="font-family: resistance">Resistance</label>
<input type="radio" id="radio-font-8" name="font" value="savate" /><label for="radio-font-8" style="font-family: savate">Savate</label>
<input type="radio" id="radio-font-9" name="font" value="solid-mirage" /><label for="radio-font-9" style="font-family: solid-mirage">Solid Mirage</label>
<input type="radio" id="radio-font-10" name="font" value="steps-mono" /><label for="radio-font-10" style="font-family: steps-mono">Steps-Mono</label>
<input type="radio" id="radio-font-11" name="font" value="terminal" /><label for="radio-font-11" style="font-family: terminal">Terminal</label>
<div id="step2">
<h2>Remplissez le texte à trou</h2>
<textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" maxlength="90"></textarea>
<div class="navButtons">
<a href="#step1" class="prevButton">&lsaquo;</a>
<a href="#step3" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
</div>
</div>
<div class="navButtons">
<a href="#step2" class="prevButton">&lsaquo;</a>
<a href="#step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
<div id="step3">
<h2>Choisissez votre police</h2>
<div>
<input type="radio" id="radio-font-1" name="font" value="bilbo-inc" /><label for="radio-font-1" style="font-family: bilbo-inc">Bilbo inc</label>
<input type="radio" id="radio-font-2" name="font" value="bluu-next" checked/><label for="radio-font-2" style="font-family: bluu-next">Bluu Next</label>
<input type="radio" id="radio-font-3" name="font" value="boeticher" /><label for="radio-font-3" style="font-family: boeticher">Boeticher</label>
<input type="radio" id="radio-font-4" name="font" value="combat" /><label for="radio-font-4" style="font-family: combat">Combat</label>
<input type="radio" id="radio-font-5" name="font" value="gulax" /><label for="radio-font-5" style="font-family: gulax">Gulax</label>
<input type="radio" id="radio-font-6" name="font" value="lineal" checked/><label for="radio-font-6" style="font-family: lineal">Lineal</label>
<input type="radio" id="radio-font-7" name="font" value="resistance" /><label for="radio-font-7" style="font-family: resistance">Resistance</label>
<input type="radio" id="radio-font-8" name="font" value="savate" /><label for="radio-font-8" style="font-family: savate">Savate</label>
<input type="radio" id="radio-font-9" name="font" value="solid-mirage" /><label for="radio-font-9" style="font-family: solid-mirage">Solid Mirage</label>
<input type="radio" id="radio-font-10" name="font" value="steps-mono" /><label for="radio-font-10" style="font-family: steps-mono">Steps-Mono</label>
<input type="radio" id="radio-font-11" name="font" value="terminal" /><label for="radio-font-11" style="font-family: terminal">Terminal</label>
</div>
<div class="navButtons">
<a href="#step2" class="prevButton">&lsaquo;</a>
<a href="#step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
</div>
</div>
</div>
<div id="step4">
<h2>Choisissez votre icône</h2>
<div class="container">
<div class="row">
<input type="radio" id="radio-icon-1" name="icon" value="1" checked/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-1"></label>
<input type="radio" id="radio-icon-2" name="icon" value="2" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-2" style="background-position: 33% 0"></label>
<input type="radio" id="radio-icon-3" name="icon" value="3" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-3" style="background-position: 67% 0"></label>
<input type="radio" id="radio-icon-4" name="icon" value="4" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-4" style="background-position: 100% 0"></label>
<input type="radio" id="radio-icon-5" name="icon" value="5" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-5" style="background-position: 0 12.5%"></label>
<input type="radio" id="radio-icon-6" name="icon" value="6" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-6" style="background-position: 33% 12.5%"></label>
<input type="radio" id="radio-icon-7" name="icon" value="7" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-7" style="background-position: 67% 12.5%"></label>
<input type="radio" id="radio-icon-8" name="icon" value="8" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-8" style="background-position: 100% 12.5%"></label>
<input type="radio" id="radio-icon-9" name="icon" value="9" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-9" style="background-position: 0 24%"></label>
<input type="radio" id="radio-icon-10" name="icon" value="10" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-10" style="background-position: 33% 24%"></label>
<input type="radio" id="radio-icon-11" name="icon" value="11" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-11" style="background-position: 67% 24%"></label>
<input type="radio" id="radio-icon-12" name="icon" value="12" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-12" style="background-position: 100% 24%"></label>
<input type="radio" id="radio-icon-13" name="icon" value="13"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-13" style="background-position: 0 37.5%"></label>
<input type="radio" id="radio-icon-14" name="icon" value="14"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-14" style="background-position: 33% 37.5%"></label>
<input type="radio" id="radio-icon-15" name="icon" value="15"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-15" style="background-position: 67% 37.5%"></label>
<input type="radio" id="radio-icon-16" name="icon" value="16"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-16" style="background-position: 100% 37.5%"></label>
<input type="radio" id="radio-icon-17" name="icon" value="17"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-17" style="background-position: 0 50%"></label>
<input type="radio" id="radio-icon-18" name="icon" value="18"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-18" style="background-position: 33% 50%"></label>
<input type="radio" id="radio-icon-19" name="icon" value="19"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-19" style="background-position: 67% 50%"></label>
<input type="radio" id="radio-icon-20" name="icon" value="20"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-20" style="background-position: 100% 50%"></label>
<input type="radio" id="radio-icon-21" name="icon" value="21"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-21" style="background-position: 0 61%"></label>
<input type="radio" id="radio-icon-22" name="icon" value="22"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-22" style="background-position: 33% 61%"></label>
<input type="radio" id="radio-icon-23" name="icon" value="23"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-23" style="background-position: 67% 61%"></label>
<input type="radio" id="radio-icon-24" name="icon" value="24"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-24" style="background-position: 100% 61%"></label>
<input type="radio" id="radio-icon-25" name="icon" value="25"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-25" style="background-position: 0 73%"></label>
<input type="radio" id="radio-icon-26" name="icon" value="26"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-26" style="background-position: 33% 73%"></label>
<input type="radio" id="radio-icon-27" name="icon" value="27"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-27" style="background-position: 67% 73%"></label>
<input type="radio" id="radio-icon-28" name="icon" value="28"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-28" style="background-position: 100% 73%"></label>
<input type="radio" id="radio-icon-29" name="icon" value="29"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-29" style="background-position: 0 87.5%"></label>
<input type="radio" id="radio-icon-30" name="icon" value="30"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-30" style="background-position: 33% 87.5%"></label>
<input type="radio" id="radio-icon-31" name="icon" value="31"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-31" style="background-position: 67% 87.5%"></label>
<input type="radio" id="radio-icon-32" name="icon" value="32"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-32" style="background-position: 100% 87.5%"></label>
<input type="radio" id="radio-icon-33" name="icon" value="33"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-33" style="background-position: -1% 100%"></label>
<input type="radio" id="radio-icon-34" name="icon" value="34"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-34" style="background-position: 32% 100%"></label>
<input type="radio" id="radio-icon-35" name="icon" value="35"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-35" style="background-position: 67% 100%"></label>
<input type="radio" id="radio-icon-36" name="icon" value="36"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-36" style="background-position: 100% 100%"></label>
<div id="step4">
<h2>Choisissez votre icône</h2>
<div class="container">
<div class="row">
<input type="radio" id="radio-icon-1" name="icon" value="1" checked/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-1"></label>
<input type="radio" id="radio-icon-2" name="icon" value="2" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-2" style="background-position: 33% 0"></label>
<input type="radio" id="radio-icon-3" name="icon" value="3" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-3" style="background-position: 67% 0"></label>
<input type="radio" id="radio-icon-4" name="icon" value="4" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-4" style="background-position: 100% 0"></label>
<input type="radio" id="radio-icon-5" name="icon" value="5" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-5" style="background-position: 0 12.5%"></label>
<input type="radio" id="radio-icon-6" name="icon" value="6" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-6" style="background-position: 33% 12.5%"></label>
<input type="radio" id="radio-icon-7" name="icon" value="7" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-7" style="background-position: 67% 12.5%"></label>
<input type="radio" id="radio-icon-8" name="icon" value="8" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-8" style="background-position: 100% 12.5%"></label>
<input type="radio" id="radio-icon-9" name="icon" value="9" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-9" style="background-position: 0 24%"></label>
<input type="radio" id="radio-icon-10" name="icon" value="10" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-10" style="background-position: 33% 24%"></label>
<input type="radio" id="radio-icon-11" name="icon" value="11" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-11" style="background-position: 67% 24%"></label>
<input type="radio" id="radio-icon-12" name="icon" value="12" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-12" style="background-position: 100% 24%"></label>
<input type="radio" id="radio-icon-13" name="icon" value="13"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-13" style="background-position: 0 37.5%"></label>
<input type="radio" id="radio-icon-14" name="icon" value="14"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-14" style="background-position: 33% 37.5%"></label>
<input type="radio" id="radio-icon-15" name="icon" value="15"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-15" style="background-position: 67% 37.5%"></label>
<input type="radio" id="radio-icon-16" name="icon" value="16"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-16" style="background-position: 100% 37.5%"></label>
<input type="radio" id="radio-icon-17" name="icon" value="17"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-17" style="background-position: 0 50%"></label>
<input type="radio" id="radio-icon-18" name="icon" value="18"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-18" style="background-position: 33% 50%"></label>
<input type="radio" id="radio-icon-19" name="icon" value="19"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-19" style="background-position: 67% 50%"></label>
<input type="radio" id="radio-icon-20" name="icon" value="20"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-20" style="background-position: 100% 50%"></label>
<input type="radio" id="radio-icon-21" name="icon" value="21"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-21" style="background-position: 0 61%"></label>
<input type="radio" id="radio-icon-22" name="icon" value="22"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-22" style="background-position: 33% 61%"></label>
<input type="radio" id="radio-icon-23" name="icon" value="23"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-23" style="background-position: 67% 61%"></label>
<input type="radio" id="radio-icon-24" name="icon" value="24"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-24" style="background-position: 100% 61%"></label>
<input type="radio" id="radio-icon-25" name="icon" value="25"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-25" style="background-position: 0 73%"></label>
<input type="radio" id="radio-icon-26" name="icon" value="26"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-26" style="background-position: 33% 73%"></label>
<input type="radio" id="radio-icon-27" name="icon" value="27"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-27" style="background-position: 67% 73%"></label>
<input type="radio" id="radio-icon-28" name="icon" value="28"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-28" style="background-position: 100% 73%"></label>
<input type="radio" id="radio-icon-29" name="icon" value="29"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-29" style="background-position: 0 87.5%"></label>
<input type="radio" id="radio-icon-30" name="icon" value="30"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-30" style="background-position: 33% 87.5%"></label>
<input type="radio" id="radio-icon-31" name="icon" value="31"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-31" style="background-position: 67% 87.5%"></label>
<input type="radio" id="radio-icon-32" name="icon" value="32"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-32" style="background-position: 100% 87.5%"></label>
<input type="radio" id="radio-icon-33" name="icon" value="33"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-33" style="background-position: -1% 100%"></label>
<input type="radio" id="radio-icon-34" name="icon" value="34"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-34" style="background-position: 32% 100%"></label>
<input type="radio" id="radio-icon-35" name="icon" value="35"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-35" style="background-position: 67% 100%"></label>
<input type="radio" id="radio-icon-36" name="icon" value="36"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-36" style="background-position: 100% 100%"></label>
</div>
</div>
<div class="navButtons">
<a href="#step3" class="prevButton">&lsaquo;</a>
<a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
</div>
</div>
<div class="navButtons">
<a href="#step3" class="prevButton">&lsaquo;</a>
<a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
<div id="step5">
<h2>Signez votre création ! (optionnel)</h2>
<input type="text" id="signature" />
<div class="navButtons">
<a href="#step4" class="prevButton">&lsaquo;</a>
</div>
</div>
</div>
<div id="step5">
<h2>Signez votre création ! (optionnel)</h2>
<input type="text" id="signature" />
<div class="navButtons">
<a href="#step4" class="prevButton">&lsaquo;</a>
<main>
<div>
<canvas id="output" width="600" height="413"></canvas>
<a id="tweet-button" target="_blank" href="https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net !">Tweet <span class="fa fa-twitter"></span></a>
<a id="save-image" download="lqdn-slogan.png">Enregistrer <span class="fa fa-save"></span></a>
</div>
</div>
<div id="credits">
<p><strong>Site hébergé par La Quadrature du Net</strong></p>
<p><strong>Crédits :</strong> Les polices utilisées viennnent de <a href="https://www.velvetyne.fr/">Velvetyne Type Foundry</a>. Bluu par Jean Baptiste Morizot, Bilbo Inc par Hélène Marian Srodogora, Boeticher par Charles Paille, Combat par Martin Desinde, Gulax par Morgan Gilbert, Lineal par Frank Adebiaye, Resistance par Collective, Savate par Wech, Solide Mirage par Jérémy Landes-Nones, Steps mono par Jean Baptiste Morizot, Terminal par Rapaël Bastide et Jérémy Landes-Nones.</p>
<p><strong>Code source du site :</strong><br />
contact@laquadrature.net
</p>
</div>
</main>
</div>
<main>
<div>
<canvas id="output" width="600" height="413"></canvas>
<a id="tweet-button" target="_blank" href="https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net !">Tweet <span class="fa fa-twitter"></span></a>
<a id="save-image" download="lqdn-slogan.png">Enregistrer <span class="fa fa-save"></span></a>
</div>
<div id="credits">
<p><strong>Site hébergé par La Quadrature du Net</strong></p>
<p><strong>Crédits :</strong> Les polices utilisées viennnent de <a href="https://www.velvetyne.fr/">Velvetyne Type Foundry</a>. Bluu par Jean Baptiste Morizot, Bilbo Inc par Hélène Marian Srodogora, Boeticher par Charles Paille, Combat par Martin Desinde, Gulax par Morgan Gilbert, Lineal par Frank Adebiaye, Resistance par Collective, Savate par Wech, Solide Mirage par Jérémy Landes-Nones, Steps mono par Jean Baptiste Morizot, Terminal par Rapaël Bastide et Jérémy Landes-Nones.</p>
<p><strong>Code source du site :</strong><br />
contact@laquadrature.net
</p>
</div>
</main>
<script src="./canvas.js"></script>
</body>
</html>
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