65 lines
3.3 KiB
HTML
65 lines
3.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>CodePen - Isometric Color Picker</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<div class="cp">
|
||
|
|
<label class="cp__color cp__color--brown">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="brown" title="Brown" checked="checked"/><span class="cp__sr-only">Brown</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--red">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="red" title="Red"/><span class="cp__sr-only">Red</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--orange">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="orange" title="Orange"/><span class="cp__sr-only">Orange</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--yellow">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="yellow" title="Yellow"/><span class="cp__sr-only">Yellow</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--green">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="green" title="Green"/><span class="cp__sr-only">Green</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--lime">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="lime" title="Lime"/><span class="cp__sr-only">Lime</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--cyan">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="cyan" title="Cyan"/><span class="cp__sr-only">Cyan</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--lightblue">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="lightblue" title="Light Blue"/><span class="cp__sr-only">Light Blue</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--blue">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="blue" title="Blue"/><span class="cp__sr-only">Blue</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--purple">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="purple" title="Purple"/><span class="cp__sr-only">Purple</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--magenta">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="magenta" title="Magenta"/><span class="cp__sr-only">Magenta</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--pink">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="pink" title="Pink"/><span class="cp__sr-only">Pink</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--black">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="black" title="Black"/><span class="cp__sr-only">Black</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--gray">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="gray" title="Gray"/><span class="cp__sr-only">Gray</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--lightgray">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="lightgray" title="Light Gray"/><span class="cp__sr-only">Light Gray</span>
|
||
|
|
</label>
|
||
|
|
<label class="cp__color cp__color--white">
|
||
|
|
<input class="cp__color-input" type="radio" name="color" value="white" title="White"/><span class="cp__sr-only">White</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<!-- partial -->
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|