Boa noite.
Quero saber como posso ordenar e criar buscas com esses cars templates.
Como posso criar uma function no javascript ou algo do tipo…
Não sei fazer essas buscas e ordenação.
Desde já agradeço!
HTML------------------------------------------------------------------------------------------------------
<div class="container">
<div class="card">
<img src="https://i.pinimg.com/originals/68/51/2c/68512c2a74a394fd18f3f96eb7e88b6e.jpg">
<div class="status">
<h4>Homem-Aranha</h4>
<p>Peter Benjamin Parker</p>
</div>
</div>
<div class="card">
<img src="https://s.aficionados.com.br/imagens/homem-de-ferro_f.jpg">
<div class="status">
<h4>Anthony Edward "Tony" Stark</h4>
<p>Homem de Ferro</p>
</div>
</div>
<div class="card">
<img src="https://terrigen-cdn-dev.marvel.com/content/prod/1x/cyclops_head.jpg">
<div class="status">
<h4>Scott Summers</h4>
<p>Ciclope</p>
</div>
</div>
<div class="card">
<img src="https://nerdbreak.com.br/wp-content/uploads/2018/01/pantera-negra-tops-capa.jpg">
<div class="divisor"></div>
<div class="status">
<h4>T'Challa</h4>
<p>Pantera Negra</p>
</div>
</div>
<div class="card">
<img src="https://referencianerd.com/wp-content/uploads/2019/12/capa.jpg">
<div class="divisor"></div>
<div class="status">
<h4>Thor Odinson "Donald Blake"</h4>
<p>Thor</p>
</div>
</div>
<div class="card">
<img
src="https://www.einerd.com.br/wp-content/uploads/2019/02/capit%C3%A3o-am%C3%A9rica-hq-890x504.jpg">
<div class="divisor"></div>
<div class="status">
<h4>Steve Rogers</h4>
<p>Capitao América</p>
</div>
</div>
<div class="card">
<img src="https://upload.wikimedia.org/wikipedia/pt/a/a5/Gavi%C3%A3o_Arqueiro.jpg">
<div class="divisor"></div>
<div class="status">
<h4>Clint Barton</h4>
<p>Gavião-Arqueiro</p>
</div>
</div>
<div class="card">
<img src="https://www.aliancanerd.com.br/conteudo/wp-content/uploads/2019/11/Captura-de-Tela-84.png">
<div class="divisor"></div>
<div class="status">
<h4>Natasha Romanov</h4>
<p>Viúva-negra</p>
</div>
</div>
<div class="card">
<img src="https://psxbrasil.com.br/wp-content/uploads/2020/02/hulk-hq.jpg">
<div class="divisor"></div>
<div class="status">
<h4>Bruce Banner</h4>
<p>Hulk</p>
</div>
</div>
<div class="card">
<img src="https://litherarium.files.wordpress.com/2016/07/homem-formiga-quadrinhos.png">
<div class="status">
<h4>Hank Pym</h4>
<p>Homem-Formiga</p>
</div>
</div>
<div class="card">
<img src="https://uploads.jovemnerd.com.br/wp-content/uploads/2016/07/vitrine-12.jpg">
<div class="status">
<h4>Wade Wylson</h4>
<p>DeadPool</p>
</div>
</div>
<div class="card">
<img
src="https://upload.wikimedia.org/wikipedia/pt/thumb/e/e0/Blade_em_Deadpool_Vol_4_28_001.jpg/200px-Blade_em_Deadpool_Vol_4_28_001.jpg">
<div class="status">
<h4>Eric Brooks</h4>
<p>Blade</p>
</div>
</div>
<div class="card">
<img src="https://img.elo7.com.br/product/zoom/17CBDF3/elektra-00-hq.jpg">
<div class="status">
<h4>Elektra Natchios</h4>
<p>Elektra</p>
</div>
</div>
CSS-------------------------------------------------------------------------------------------------------
body{
background: white;
margin: 0;
overflow-x: hidden;
background-image: url("https://i.pinimg.com/originals/de/f4/73/def473f3b4380d977d23ac2502cb1d77.jpg"); */
}
main{
background-color: rgba(0, 0,0, 0.5)
}
.container{
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto ;
object-fit: fill;
gap: 20px;
margin: 0px 20px;
padding-top: 10px;
}
.card{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 100%;
height: 100%;
position: relative;
background: black;
object-fit: fill;
border-bottom-right-radius: 50px;
overflow: hidden;
}
.card:hover{
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
transition-duration: 1s;
background-color: red;
height:105%;
width: 105%;
}
.status{
padding: 2px 16px;
}
div.card > img{
width: 100%;
height: 50%;
object-fit: cover;
}
div.status > h4{
font-family: 'Anton' , sans-serif;
color: white;
}
div.status > p{
font-family: 'Coming Soon', cursive;
color: white;
}
div.status{
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
#divBusca{
position: absolute;
align-self: center;
margin-left: 80%;
}
#campobusca{
background:transparent;
border-bottom-color:gray;
width: 200px;
height: 20px;
color: white;
}
header{
width: 100%;
height: 60px;
background-color: black;
position: relative;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
header> img{
width: auto;
height: 100%;
align-items: center;
}
@media only screen and (max-width: 800px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
margin: 0 auto;
}
}