Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
LQDN Adminsys
generateur-slogans
Commits
a3bb9d15
Verified
Commit
a3bb9d15
authored
Sep 18, 2017
by
Thibaut Broggi
Browse files
Update html layout
Label/checkboxes have been replaced by link/targets
parent
04ef00f4
Changes
2
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
›
</
label
>
<
a
href
=
"
#
step2"
class=
"nextButton"
>
ÉTAPE SUIVANTE
›
</
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"
>
‹
</
label
>
<
label
for
=
"step3"
class=
"nextButton"
>
ÉTAPE SUIVANTE
›
</
label
>
<
a
href
=
"
#
step1"
class=
"prevButton"
>
‹
</
a
>
<
a
href
=
"
#
step3"
class=
"nextButton"
>
ÉTAPE SUIVANTE
›
</
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"
>
‹
</
label
>
<
label
for
=
"step4"
class=
"nextButton"
>
ÉTAPE SUIVANTE
›
</
label
>
<
a
href
=
"
#
step2"
class=
"prevButton"
>
‹
</
a
>
<
a
href
=
"
#
step4"
class=
"nextButton"
>
ÉTAPE SUIVANTE
›
</
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"
>
‹
</
label
>
<
label
for
=
"step5"
class=
"nextButton"
>
ÉTAPE SUIVANTE
›
</
label
>
<
a
href
=
"
#
step3"
class=
"prevButton"
>
‹
</
a
>
<
a
href
=
"
#
step5"
class=
"nextButton"
>
ÉTAPE SUIVANTE
›
</
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"
>
‹
</
label
>
<
label
class=
"nextButton"
>
GÉNÉRER
›
</
label
>
<
a
href
=
"
#
step4"
class=
"prevButton"
>
‹
</
a
>
<
a
class=
"nextButton"
>
GÉNÉRER
›
</
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
;
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment