Skip to content

Commit 858728c

Browse files
BernardoJakubiakBernardoJakubiak
committed
Co-authored-by: Samuel Krabbe <SamuelKrabbe@users.noreply.github.com>
1 parent 4abb988 commit 858728c

File tree

3 files changed

+51
-40
lines changed

3 files changed

+51
-40
lines changed

‎main.html‎

Lines changed: 51 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,64 @@
77
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
88
</head>
99
<body>
10-
<div class="accordion" id="accordion">
11-
<div class="accordion-item">
12-
<h2 class="accordion-header">
13-
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
14-
Informações sobre Ditto
15-
</button>
16-
</h2>
17-
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion">
18-
<div class="accordion-body">
19-
<ul>
20-
<li>Nome: <span id="nome"></span></li>
21-
<li>ID: <span id="id"></span></li>
22-
<li>Altura: <span id="altura"></span></li>
23-
<li>Peso: <span id="peso"></span></li>
24-
</ul>
10+
11+
<div class="container">
12+
<div class="menu">
13+
<div class="card" style="width: 18rem; display: inline-block;">
14+
<img src="pokemon.jpeg" class="card-img-top" alt="pokemom_menu">
15+
<div class="card-body">
16+
<div class="accordion" id="accordionExample">
17+
<h5 class="card-title">Escolha seu pokemon</h5>
18+
<div class="accordion-item">
19+
<h2 class="accordion-header">
20+
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
21+
Elétrico
22+
</button>
23+
</h2>
24+
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
25+
<div class="accordion-body">
26+
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
27+
</div>
28+
</div>
29+
</div>
30+
<div class="accordion-item">
31+
<h2 class="accordion-header">
32+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
33+
Fogo
34+
</button>
35+
</h2>
36+
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
37+
<div class="accordion-body">
38+
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
39+
</div>
40+
</div>
41+
</div>
42+
<div class="accordion-item">
43+
<h2 class="accordion-header">
44+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
45+
Água
46+
</button>
47+
</h2>
48+
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
49+
<div class="accordion-body">
50+
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
<br>
56+
<a href="#" class="btn btn-primary">Selecionar</a>
2557
</div>
2658
</div>
2759
</div>
28-
</div>
60+
</div>
2961

3062
<!-- Inclua os arquivos JavaScript do Bootstrap -->
31-
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
32-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-EKb0L2OJN5YrK5l/K6HIq5yfub9BsA7P/D/u5z5eRsE0k5KjcSHbS1T7xXv2Ks0p1" crossorigin="anonymous"></script>
63+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-EKb0L2OJN5YrK5l/K6HIq5yfub9BsA7P/D/u5z5eRsE0k5KjcSHbS1T7xXv2Ks0p1" crossorigin="anonymous">
3364

34-
<script>
65+
3566
// URL da API para o Pokémon Ditto
36-
const apiUrl = 'https://pokeapi.co/api/v2/pokemon/ditto';
67+
const apiUrl = 'https://pokeapi.co/api/v2/pokemon/';
3768

3869
// Função para fazer a solicitação à API e atualizar a página
3970
async function fetchPokemonData() {

‎pokemon.jpeg‎

190 KB
Loading

‎script.js‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

0 commit comments

Comments
 (0)