<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>filters</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>RESOURCES</h1>
<div class="container">
<input type="radio" id="softwares">
<label for="softwares">SOFTWARES</label>
<input type="radio" id="blogs" name="color"/>
<label for="blogs">BLOGS</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 softwares">1</div>
<div class="tile blogs">2</div>
<div class="tile softwares">3</div>
<div class="tile green">4</div>
<div class="tile softwares">5</div>
<div class="tile blogs">6</div>
<div class="tile blogs">7</div>
<div class="tile green">8</div>
<div class="tile softwares">9</div>
<div class="tile green">10</div>
<div class="tile blogs">11</div>
<div class="tile green">12</div>
<div class="tile softwares">13</div>
<div class="tile softwares">14</div>
<div class="tile green">15</div>
<div class="tile blogs">16</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/fabiocode/filters-yKVVLm */
h1 {
text-align:center;
}
input[type="radio"] {
display:none;
}
label {
width:23%;
float:left;
text-align:center;
background:#ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
color:#222222;
padding:0.5%;
margin:0.5%;
margin-bottom:30px;
cursor:pointer;
}
input[type="radio"][id="softwares"]:checked + label {
background:#6666ff;
}
input[type="radio"][id="softwares"]:checked ~ .blogs, input[type="radio"][id="softwares"]:checked ~ .green {
width:0;
height:0;
padding:0;
margin:0;
opacity:0;
}
input[type="radio"][id="blogs"]:checked + label {
background:#ff4466;
}
input[type="radio"][id="blogs"]:checked ~ .softwares, input[type="radio"][id="blogs"]:checked ~ .green {
width:0;
height:0;
padding:0;
margin:0;
opacity:0;
}
input[type="radio"][id="green"]:checked + label {
background:#66dd99;
}
input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .blogs {
width:0;
height:0;
padding:0;
margin:0;
opacity:0;
}
.tile {
width:23%;
height:100px;
float:left;
transition:all 1s;
margin:0.5%;
padding:0.5%;
}
.green {
background:#66dd99;
}
.softwares {
background:#6666ff;
}
.blogs {
background:#ff4466;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Twitter Bootstrap
jQuery
v3.2.1
