Player Cards List - Copy this Html, Bootstrap Component to your project

create-a-page-where-you-list-players-within-cards-based-on-this-html:-{%-extends-'blog/base.html'-%}-{%-block-title-%}Jogadores-Lendários---Universo-da-Bola{%-endblock-%}-{%-block-content-%}-<!---Players-Section--->-<section-class="hero-section">-<div-class="container">-<h1>Jogadores-Lendários</h1>-<p>Conheça-os-jogadores-que-marcaram-época-no-futebol.</p>-</div>-</section>-<div-class="container-mt-5">-<!---Filtro-Moderno--->-<div-class="filter-input-mb-4">-<input-type="text"-class="form-control-mb-2"-id="nome"-placeholder="Nome-do-Jogador">-<input-type="text"-class="form-control-mb-2"-id="nacionalidade"-placeholder="Nacionalidade">-<input-type="text"-class="form-control-mb-2"-id="periodo"-placeholder="Período-de-Atuação-(ex:-1990-2000)">-</div>-<!---Listagem-de-Jogadores--->-<div-class="row"-id="jogadores-container">-{%-for-jogador-in-jogadores-%}-<div-class="col-md-4-jogador-card"-data-nome="{{-jogador.nome-}}"-data-nacionalidade="{{-jogador.nacionalidade-}}"-data-periodo="{{-jogador.inicio_carreira.year-}}-{{-jogador.fim_carreira.year-}}">-<div-class="mb-4-shadow-sm">-{%-if-jogador.imagem-%}-<img-src="{{-jogador.imagem.url-}}"-class="card-img-top-img-fluid"-alt="{{-jogador.nome-}}">-{%-endif-%}-<div-class="card-body">-<h5>{{-jogador.nome-}}</h5>-<div-class="card-info">-<span-class="nickname">{{-jogador.apelido-}}</span>-<span-class="position">{{-jogador.posicao-}}</span>-</div>-<a-href="{%-url-'jogador_detail'-jogador.id-%}"-class="btn-btn-primary">Leia-mais</a>-</div>-</div>-</div>-{%-endfor-%}-</div>-</div>-{%-endblock-%}-{%-block-extra_js-%}-<!---JavaScript-para-Filtragem--->-<script>-document.addEventListener('DOMContentLoaded',-function-()-{-const-nomeInput-=-document.getElementById('nome');-const-nacionalidadeInput-=-document.getElementById('nacionalidade');-const-periodoInput-=-document.getElementById('periodo');-const-cards-=-document.querySelectorAll('.jogador-card');-function-filterCards()-{-const-nome-=-nomeInput.value.toLowerCase();-const-nacionalidade-=-nacionalidadeInput.value.toLowerCase();-const-periodo-=-periodoInput.value.toLowerCase();-cards.forEach(card-=>-{-const-cardNome-=-card.getAttribute('data-nome').toLowerCase();-const-cardNacionalidade-=-card.getAttribute('data-nacionalidade').toLowerCase();-const-cardPeriodo-=-card.getAttribute('data-periodo').toLowerCase();-if-(cardNome.includes(nome)-&&-cardNacionalidade.includes(nacionalidade)-&&-cardPeriodo.includes(periodo))-{-card.style.display-=-'';-}-else-{-card.style.display-=-'none';-}-});-}-nomeInput.addEventListener('input',-filterCards);-nacionalidadeInput.addEventListener('input',-filterCards);-periodoInput.addEventListener('input',-filterCards);-});-</script>-{%-endblock-%}