web-html5-scripts/web-techniques/easy-css-content-filter/index.html

43 lines
1.1 KiB
HTML
Raw Normal View History

<!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>