Skip to content
GitLab
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
2f52c253
Verified
Commit
2f52c253
authored
Sep 19, 2017
by
Thibaut Broggi
Browse files
Start to design color picker
parent
4c0ee903
Changes
2
Hide whitespace changes
Inline
Side-by-side
index.html
View file @
2f52c253
...
...
@@ -20,7 +20,41 @@
<button
id=
"randomize"
>
CHOISIR AU HASARD
</button>
</div>
<div
id=
"step1"
>
<h2>
Choisissez 2 couleurs
</h2>
<h2>
Choisissez la couleur de fond
</h2>
<div
class=
"colorpicker"
>
<div>
<input
type=
"radio"
name=
"bg-color"
value=
"red"
id=
"bg-red"
/>
<label
style=
"background-color: red"
for=
"bg-red"
></label>
</div>
<div>
<input
type=
"radio"
name=
"bg-color"
value=
"pink"
id=
"bg-pink"
/>
<label
style=
"background-color: pink"
for=
"bg-pink"
></label>
</div>
<div>
<input
type=
"radio"
name=
"bg-color"
value=
"orange"
id=
"bg-orange"
/>
<label
style=
"background-color: orange"
for=
"bg-orange"
></label>
</div>
<div>
<input
type=
"radio"
name=
"bg-color"
value=
"yellow"
id=
"bg-yellow"
/>
<label
style=
"background-color: yellow"
for=
"bg-yellow"
></label>
</div>
<div>
<input
type=
"radio"
name=
"bg-color"
value=
"teal"
id=
"bg-teal"
/>
<label
style=
"background-color: teal"
for=
"bg-teal"
></label>
</div>
<div>
<input
type=
"radio"
name=
"bg-color"
value=
"blue"
id=
"bg-blue"
/>
<label
style=
"background-color: blue"
for=
"bg-blue"
></label>
</div>
<div>
<input
type=
"radio"
name=
"bg-color"
value=
"black"
id=
"bg-black"
/>
<label
style=
"background-color: black"
for=
"bg-black"
></label>
</div>
<div>
<input
type=
"radio"
name=
"bg-color"
value=
"white"
id=
"bg-white"
/>
<label
style=
"background-color: white"
for=
"bg-white"
></label>
</div>
</div>
<div
class=
"navButtons"
>
<a
href=
"#step2"
class=
"nextButton"
>
ÉTAPE SUIVANTE
›
</a>
</div>
...
...
style.css
View file @
2f52c253
...
...
@@ -42,6 +42,39 @@ div#inputs {
background-color
:
white
;
}
.colorpicker
{
padding
:
20px
;
width
:
100%
;
}
.colorpicker
>
div
{
width
:
20%
;
height
:
20%
;
text-align
:
center
;
display
:
inline-block
;
}
.colorpicker
>
div
>
input
[
type
=
"radio"
]
{
display
:
none
;
}
.colorpicker
>
div
>
input
[
type
=
"radio"
]
+
label
{
display
:
inline-block
;
width
:
4em
;
height
:
4em
;
margin
:
1em
;
border-radius
:
50%
;
cursor
:
pointer
;
}
.colorpicker
>
div
>
input
[
type
=
"radio"
][
value
=
"white"
]
:not
(
:checked
)
+
label
{
border
:
2px
solid
grey
}
.colorpicker
>
div
>
input
[
type
=
"radio"
]
:checked
+
label
{
border
:
5px
solid
grey
;
}
div
[
id
^=
"step"
]
{
display
:
none
;
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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