diff --git a/assets/css/pokedex.css b/assets/css/pokedex.css index 59eef2bde..698eeb9fd 100644 --- a/assets/css/pokedex.css +++ b/assets/css/pokedex.css @@ -146,6 +146,72 @@ border-radius: 1rem; } +.tab-row { + display: flex; + justify-content: space-around; / + +} + + +.pokemon-details { + display: flex; + flex-wrap: wrap; + border: 2px solid #ddd; + border-radius: 10px; + background-color: #fff; + padding: 10px; + margin-top: 20px; +} +.column { + + position: relative; +} + +.tab { + cursor: pointer; + padding: 10px; + border-radius: 5px; + margin-bottom: 10px; + position: relative; + color: #007bff; /* Cor padrão do texto (azul piscina) */ + transition: color 0.3s; /* Adicionada transição para suavizar a mudança de cor */ +} + +.tab.active { + color: #000; /* Mudança de cor para preto quando a aba está ativa */ + border-bottom: 2px solid #800080; /* Cor roxa para indicar aba ativa */ +} + +.tab.active::after { + content: ''; + display: block; + width: 100%; + height: 2px; + background-color: #800080; /* Cor roxa para o traço */ + position: absolute; + bottom: 0; + left: 0; +} + + + +.tab-content { + width: 100%; + box-sizing: border-box; +} + + +.tab-content .content { + width: 100%; + box-sizing: border-box; + padding: 10px; + display: none; +} + +.tab-content[style*="block"] .content { + display: block; +} + @media screen and (min-width: 380px) { .pokemons { grid-template-columns: 1fr 1fr; diff --git a/assets/js/main.js b/assets/js/main.js index bcaa24508..18b508cd5 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,13 +1,15 @@ const pokemonList = document.getElementById('pokemonList') const loadMoreButton = document.getElementById('loadMoreButton') +var titleModal = document.getElementById('title-modal-pokemon-detail'); + const maxRecords = 151 const limit = 10 let offset = 0; function convertPokemonToLi(pokemon) { return ` -