Desafio CSS: Treinamento Pokémon
Prof. Esp. Leandro Gaudio Rosa
O que são Flexbox e Grid?
CSS Flexbox: Pense no Flexbox como uma forma de organizar seus Pokémon em uma única fila (linha ou coluna). Ele é perfeito para dizer se eles devem ficar juntos no centro, espalhados nas bordas, ou alinhados na parte de baixo da caixa.
CSS Grid: Pense no Grid como um habitat 2D completo (com linhas e colunas). Com o Grid, você pode criar um viveiro 2x2 ou 3x3 e dizer exatamente em qual célula cada Pokémon deve ficar, ou até fazer um Pokémon grande (como o Snorlax) ocupar várias células de uma vez.
Instruções de Entrega
Siga estes passos para preparar seu projeto para a entrega:
- 1. Crie uma pasta para este projeto no seu VS Code.
- 2. Para cada um dos 10 exercícios, crie um arquivo HTML (ex:
ex01.html) e um arquivo CSS (ex:ex01.css) correspondente. - 3. Dentro de cada arquivo HTML, lembre-se de linkar seu respectivo arquivo CSS usando a tag
<link>no<head>. - 4. Crie uma página principal chamada
index.html. Nesta página, crie uma lista com links para cada um dos 10 exercícios. - 5. Envie todo o projeto para um repositório no GitHub (use GitHub Pages para uma melhor visualização).
- 6. A entrega será a URL do seu repositório no GitHub.
Parte 1: Flexbox (Organizando a PC Box)
Exercício 1: Centralizar na Box
Use 'justify-content' para centralizar os 3 Pokémon horizontalmente no meio da caixa.
Exercício 2: Espaçar Igualmente
Use 'justify-content' para que o primeiro Pokémon fique na borda esquerda, o último na borda direita, e o do meio perfeitamente centralizado.
Exercício 3: Pokémon na Grama (Alinhamento Vertical)
A caixa é alta! Use 'align-items' para fazer todos os Pokémon descerem para a "grama" (a parte de baixo da caixa).
Exercício 4: Torre Pokémon (Mudando a Direção)
Use 'flex-direction' para empilhar os Pokémon verticalmente (um em cima do outro). Depois, use 'justify-content' para espaçá-los igualmente na vertical.
Exercício 5: O Gengar Fugitivo! (Alinhamento Individual)
O Alakazam e o Haunter devem ficar no topo da caixa (o padrão atual). Use 'align-self' para fazer *apenas* o Gengar descer para o fundo da caixa.
Parte 2: CSS Grid (Montando o Habitat)
Exercício 6: Habitat 2x2
Use 'grid-template-columns' para organizar os 4 Pokémon em um grid perfeito de 2 colunas e 2 linhas (duas colunas de tamanho igual).
Exercício 7: O Snorlax Bloqueia a Passagem (Column Span)
O Snorlax é muito grande! Faça o Snorlax ocupar as 2 colunas da primeira linha. Os outros Pokémon devem ficar abaixo dele.
Exercício 8: A Videira do Oddish (Row Span)
O grid é 2x2. Faça o Oddish ocupar a primeira coluna inteira (as 2 linhas verticalmente). O Gloom e o Vileplume devem se organizar na segunda coluna.
Exercício 9: Alinhamento no Habitat
Este habitat tem 4 colunas. Alinhe os pokémons em suas células:
1. Centralize os Pokémon diurnos (Sentret e Ledyba).
2. Alinhe os Pokémon noturnos (Hoothoot e Spinarak) ao final (à direita) de suas células.
Exercício 10: Posicionando os Lendários (Posicionamento Específico)
Este é um grid 3x3. Use 'grid-column' e 'grid-row' para posicionar os pássaros lendários em seus locais corretos e com um distanciamento grande para que não duelem desnecessariamente:
1. Coloque Articuno no canto superior esquerdo (linha 1, coluna 1).
2. Coloque Zapdos exatamente no centro (linha 2, coluna 2).
3. Coloque Moltres no canto inferior direito (linha 3, coluna 3).