43 lines
1.1 KiB
HTML
43 lines
1.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Easy CSS content filter</title>
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>FILTER BY COLOR</h1>
|
||
|
|
<div class="container">
|
||
|
|
<input type="radio" id="blue" name="color" />
|
||
|
|
<label for="blue">BLUE</label>
|
||
|
|
<input type="radio" id="red" name="color"/>
|
||
|
|
<label for="red">RED</label>
|
||
|
|
<input type="radio" id="green" name="color"/>
|
||
|
|
<label for="green">GREEN</label>
|
||
|
|
<input type="radio" id="reset" name="color"/>
|
||
|
|
<label for="reset">RESET</label>
|
||
|
|
|
||
|
|
<div class="tile blue">1</div>
|
||
|
|
<div class="tile red">2</div>
|
||
|
|
<div class="tile blue">3</div>
|
||
|
|
<div class="tile green">4</div>
|
||
|
|
<div class="tile blue">5</div>
|
||
|
|
<div class="tile red">6</div>
|
||
|
|
<div class="tile red">7</div>
|
||
|
|
<div class="tile green">8</div>
|
||
|
|
<div class="tile blue">9</div>
|
||
|
|
<div class="tile green">10</div>
|
||
|
|
<div class="tile red">11</div>
|
||
|
|
<div class="tile green">12</div>
|
||
|
|
<div class="tile blue">13</div>
|
||
|
|
<div class="tile blue">14</div>
|
||
|
|
<div class="tile green">15</div>
|
||
|
|
<div class="tile red">16</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|