Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@mayumisiano
mayumisiano authored Mar 15, 2022
0 parents commit 57e437e
Show file tree
Hide file tree
Showing 19 changed files with 533 additions and 0 deletions.
283 changes: 283 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,283 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pokédex - MapaDev Week</title>
<link rel="stylesheet" href="src/css/reset.css" />
<link rel="stylesheet" href="src/css/global.css" />
<link rel="stylesheet" href="src/css/cartao.css" />
<link rel="stylesheet" href="src/css/listagem.css" />
<link rel="stylesheet" href="src/css/responsivo.css" />

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;800&display=swap" rel="stylesheet" />
</head>
<body>
<main>
<div class="pokedex">
<div class="cartoes-pokemon">
<div class="cartao-pokemon tipo-eletrico aberto" id="cartao-pikachu">
<div class="cartao-topo">
<div class="detalhes">
<h2 class="nome">Pikachu</h2>
<span>#001</span>
</div>

<span class="tipo">elétrico</span>

<div class="cartao-imagem">
<img src="src/imagens/pikachu.png" alt="pikachu" />
</div>
</div>

<div class="cartao-informacoes">
<div class="status">
<h3>Status</h3>

<ul>
<li>HP: 300</li>
<li>Ataque: 600</li>
<li>Defesa: 500</li>
<li>Velocidade: 300</li>
<li>Total: 1700</li>
</ul>
</div>

<div class="habilidades">
<h3>Habilidades</h3>

<ul>
<li>Choque do trovão</li>
<li>Cabeçada</li>
</ul>
</div>
</div>
</div>

<div class="cartao-pokemon tipo-fogo" id="cartao-charmander">
<div class="cartao-topo">
<div class="detalhes">
<h2 class="nome">Charmander</h2>
<span>#003</span>
</div>

<span class="tipo">fogo</span>

<div class="cartao-imagem">
<img src="src/imagens/charmander.png" alt="charmander" />
</div>
</div>

<div class="cartao-informacoes">
<div class="status">
<h3>Status</h3>

<ul>
<li>HP: 200</li>
<li>Ataque: 300</li>
<li>Defesa: 400</li>
<li>Velocidade: 320</li>
<li>Total: 1220</li>
</ul>
</div>

<div class="habilidades">
<h3>Habilidades</h3>

<ul>
<li>Lança-chamas</li>
<li>Cabeçada</li>
</ul>
</div>
</div>
</div>

<div class="cartao-pokemon tipo-agua" id="cartao-gyarados">
<div class="cartao-topo">
<div class="detalhes">
<h2 class="nome">Gyarados</h2>
<span>#022</span>
</div>

<span class="tipo">água</span>

<div class="cartao-imagem">
<img src="src/imagens/gyarados.png" alt="gyarados" />
</div>
</div>

<div class="cartao-informacoes">
<div class="status">
<h3>Status</h3>

<ul>
<li>HP: 300</li>
<li>Ataque: 600</li>
<li>Defesa: 500</li>
<li>Velocidade: 300</li>
<li>Total: 1700</li>
</ul>
</div>

<div class="habilidades">
<h3>Habilidades</h3>

<ul>
<li>Jato d'Água</li>
<li>Hidro bomba</li>
</ul>
</div>
</div>
</div>

<div class="cartao-pokemon tipo-trevas" id="cartao-gengar">
<div class="cartao-topo">
<div class="detalhes">
<h2 class="nome">Gengar</h2>
<span>#013</span>
</div>

<span class="tipo">trevas</span>

<div class="cartao-imagem">
<img src="src/imagens/gengar.png" alt="gengar" />
</div>
</div>

<div class="cartao-informacoes">
<div class="status">
<h3>Status</h3>

<ul>
<li>HP: 100</li>
<li>Ataque: 200</li>
<li>Defesa: 300</li>
<li>Velocidade: 400</li>
<li>Total: 1000</li>
</ul>
</div>

<div class="habilidades">
<h3>Habilidades</h3>

<ul>
<li>Bola sombria</li>
<li>Lambida</li>
</ul>
</div>
</div>
</div>

<div class="cartao-pokemon tipo-grama" id="cartao-bulbasaur">
<div class="cartao-topo">
<div class="detalhes">
<h2 class="nome">Bulbasaur</h2>
<span>#002</span>
</div>

<span class="tipo">grama</span>

<div class="cartao-imagem">
<img src="src/imagens/bulbasaur.png" alt="bulbasaur" />
</div>
</div>

<div class="cartao-informacoes">
<div class="status">
<h3>Status</h3>

<ul>
<li>HP: 320</li>
<li>Ataque: 510</li>
<li>Defesa: 400</li>
<li>Velocidade: 200</li>
<li>Total: 1430</li>
</ul>
</div>

<div class="habilidades">
<h3>Habilidades</h3>

<ul>
<li>Folha navalha</li>
<li>Raio solar</li>
</ul>
</div>
</div>
</div>

<div class="cartao-pokemon tipo-dragao" id="cartao-dragonite">
<div class="cartao-topo">
<div class="detalhes">
<h2 class="nome">Dragonite</h2>
<span>#062</span>
</div>

<span class="tipo">dragão</span>

<div class="cartao-imagem">
<img src="src/imagens/dragonite.png" alt="dragonite" />
</div>
</div>

<div class="cartao-informacoes">
<div class="status">
<h3>Status</h3>

<ul>
<li>HP: 500</li>
<li>Ataque: 600</li>
<li>Defesa: 400</li>
<li>Velocidade: 400</li>
<li>Total: 1900</li>
</ul>
</div>

<div class="habilidades">
<h3>Habilidades</h3>

<ul>
<li>Dança do dragão</li>
<li>Velocidade extrema</li>
</ul>
</div>
</div>
</div>
</div>

<nav class="listagem">
<ul>
<li class="pokemon ativo" id="pikachu">
<img src="src/imagens/cabeca-pikachu.png" alt="cabeça do pikachu" />
<span>Pikachu</span>
</li>
<li class="pokemon" id="bulbasaur">
<img src="src/imagens/cabeca-bulbasaur.png" alt="cabeça do bulbasaur" />
<span>Bulbasaur</span>
</li>
<li class="pokemon" id="charmander">
<img src="src/imagens/cabeca-charmander.png" alt="cabeça do charmander" />
<span>Charmander</span>
</li>
<li class="pokemon" id="gyarados">
<img src="src/imagens/cabeca-gyarados.png" alt="cabeça do gyarados" />
<span>Gyarados</span>
</li>
<li class="pokemon" id="gengar">
<img src="src/imagens/cabeca-gengar.png" alt="cabeça do gengar" />
<span>Gengar</span>
</li>
<li class="pokemon" id="dragonite">
<img src="src/imagens/cabeca-dragonite.png" alt="cabeça do dragonite" />
<span>Dragonite</span>
</li>
</ul>
</nav>
</div>
</main>

<script src="src/js/index.js"></script>
</body>
</html>
94 changes: 94 additions & 0 deletions src/css/cartao.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
.cartao-pokemon {
display: none;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 10px;
}

.cartao-pokemon .cartao-topo {
padding: 30px 40px 0;
}

.cartao-pokemon .nome {
margin-bottom: 5px;
}

.cartao-pokemon .tipo {
font-size: 12px;
background-color: #FFFFFF;
opacity: 0.7;
border-radius: 10px;
padding: 2px 10px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.cartao-pokemon .detalhes {
color: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
}

.cartao-pokemon .cartao-imagem {
width: 350px;
height: 350px;
}

.cartao-pokemon img {
max-height: 100%;
}

.cartao-pokemon .cartao-informacoes {
display: flex;
justify-content: space-between;
background-color: #FFFFFF;
padding: 80px 30px 50px;
margin-top: -70px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}

.cartao-pokemon .cartao-informacoes h3 {
font-size: 20px;
margin-bottom: 15px;
border-bottom: 1px solid #6B727A;
}

.cartao-pokemon .cartao-informacoes .status, .cartao-pokemon .cartao-informacoes .habilidades {
padding: 0 10px;
width: 180px;
}

.cartao-pokemon .cartao-informacoes .habilidades ul li, .cartao-pokemon .cartao-informacoes .status ul li {
border-bottom: 1px solid #C3C4C5;
padding: 0 0 5px;
margin-bottom: 5px;
font-size: 15px;
}

.cartao-pokemon.aberto {
display: block;
}

.tipo-fogo {
background-color: #ED8A8B;
}

.tipo-eletrico {
background-color: #FCC719;
}

.tipo-agua {
background-color: #76BEFE;
}

.tipo-grama {
background-color: #49D0B0;
}

.tipo-trevas {
background-color: #BA68C8;
}

.tipo-dragao {
background-color: #C29791;
}
17 changes: 17 additions & 0 deletions src/css/global.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
body {
font-family: 'Poppins', sans-serif;
}

main {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #DADFE8;
}

.pokedex {
display: flex;
gap: 30px;
padding: 30px 0;
}
Loading

0 comments on commit 57e437e

Please sign in to comment.