KuParty,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
:root {
--color-orange: #ffa728;
--color-red: #e66c6e;
--color-green: #a7d6bb;
--color-blue: #1c4961;
--color-sky: #58C9E2FF;
--color-brown: #a56e47;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
line-height: 1.2;
background-color: #faebd7;
}
.header {
padding: 20px 0;
margin-bottom: 48px;
}
.filter {
display: flex;
justify-content: center;
max-width: 1024px;
margin: 0 auto;
}
.filter-category {
display: flex;
justify-content: center;
max-width: 1024px;
margin: 0 auto;
padding-bottom: 20px;
}
.button {
padding: 12px 24px;
margin-right: 18px;
cursor: pointer;
color: white;
text-transform: uppercase;
font-weight: bold;
border: 0;
outline: none;
border-radius: 0;
position: relative;
}
.button:last-child {
margin-right: 0;
}
.button:active {
bottom: -1px;
}
.button_type_all {
background-color: var(--color-orange);
}
.button_type_flying {
background-color: var(--color-sky);
}
.button_type_running {
background-color: var(--color-brown);
}
.button_type_cat {
background-color: var(--color-green);
}
.button_type_dog {
background-color: var(--color-red);
}
.button_type_bird {
background-color: var(--color-blue);
}
.container {
display: flex;
flex-wrap: wrap;
max-width: 1024px;
margin: 0 auto;
}
.card {
width: calc(33.3333333% - 72px);
margin: 36px;
height: 100px;
line-height: 100px;
text-align: center;
color: white;
font-weight: bold;
font-size: 48px;
overflow: hidden;
transition: 0.5s all;
}
.cat {
background-color: var(--color-green);
}
.dog {
background-color: var(--color-red);
}
.bird {
background-color: var(--color-blue);
}
.anime {
transform: scale(0);
opacity: 0;
}
.hide {
animation-name: hide;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-delay: 0.6s;
}
@keyframes hide {
0% {
visibility: visible;
height: 200px;
}
100% {
visibility: hidden;
width: 0;
height: 0;
max-width: 0;
font-size: 0;
margin: 0;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const header = document.querySelector('.header');
header.addEventListener("click", function({
target
}) {
if (target.closest('[data-filter]')) {
let categorys = target.dataset.filter;
const isShowAll = categorys == 'all'
categorys = categorys.split(',');
document.querySelectorAll('[data-filter]').forEach(elem => {
let keys = elem.dataset.filter;
const isKeyAll = keys == 'all';
keys = keys.split(',');
const isItemFiltered = isKeyAll || isShowAll || keys.some(key => categorys.includes(key));
elem.classList.remove("hide");
elem.classList.toggle("anime", !isItemFiltered);
if (!isItemFiltered) elem.classList.add("hide");
})
};
})
})
</script>
</head>
<body>
<header class="header">
<div class="filter-category">
<button class="button button_type_all" data-filter="all">All</button>
<button class="button button_type_running" data-filter="cat,dog">Running</button>
<button class="button button_type_flying" data-filter="bird">Flying</button>
</div>
<div class="filter">
<button class="button button_type_cat" data-filter="cat">Cat</button>
<button class="button button_type_dog" data-filter="dog">Dog</button>
<button class="button button_type_bird" data-filter="bird">Bird</button>
</div>
</header>
<main class="content">
<div class="container">
<div class="card cat" data-filter="cat">Cat</div>
<div class="card dog" data-filter="dog">Dog</div>
<div class="card bird" data-filter="bird">Bird</div>
<div class="card dog" data-filter="dog">Dog</div>
<div class="card cat" data-filter="cat">Cat</div>
<div class="card bird" data-filter="bird">Bird</div>
<div class="card bird" data-filter="bird">Bird</div>
<div class="card dog" data-filter="dog">Dog</div>
<div class="card cat" data-filter="cat">Cat</div>
</div>
</main>
</body>
</html>