Desafio Web: A Invasão Bongo Cat 🎹

Aprenda a incorporar vídeos e pratique suas habilidades de HTML e CSS!

Prof. Esp. Leandro Gaudio Rosa

📝 Parte 1: Galeria Bongo Cat

Regra: Nesta primeira etapa, todos os vídeos devem ser obrigatoriamente do canal Bongo Cat.
⚠️ Importante: Alguns vídeos podem mostrar a mensagem "Vídeo indisponível" devido a restrições de direitos autorais do YouTube. Se isso acontecer com algum vídeo que você escolheu, substitua-o por outro que permita a incorporação!
  1. Crie os arquivos index.html e style.css usando os códigos base abaixo.
  2. Acesse o canal Bongo Cat no YouTube.
  3. Escolha 10 vídeos musicais diferentes.
  4. Para cada vídeo: Compartilhar > Incorporar > Copiar código.
  5. Cole o código no seu HTML e duplique os cards até ter 10 vídeos.
  6. Personalização: Troque o texto da class="badge" por um emoji e interjeição (Ex: "🐱 Miau!", "🥁 Batida!", "🎹 Piano").
  7. Design Livre: Explore o arquivo style.css e mude as cores, bordas, fontes e sombras para deixar a galeria com a sua cara!
  8. Hospedagem: Suba este projeto para um repositório e ative o GitHub Pages.

🎨 Parte 2: Desafio Tema Livre

Após terminar a galeria do Bongo Cat e garantir que ela está online no GitHub Pages:

  1. Crie uma nova pasta/projeto ou uma nova página (ex: galeria2.html).
  2. Faça uma segunda versão com um tema de sua escolha (Ex: Esportes, K-Pop, Tutoriais de Code, Minecraft), contendo também 10 vídeos.
  3. Publique esta segunda versão também no GitHub Pages.

Recursos para a Atividade (Copiar e Colar)

index.html (Código Base)
style.css (Código Base)

👁️ Resultado Esperado (Tema: Bongo Cat)

Sua galeria final deve ficar parecida com isso, mas com 10 vídeos.

Bongo Cat - Believer
🐱 Miau!

Cover de Imagine Dragons.

Bongo Cat - Africa
🌧️ Chuva...

Clássico do Toto versão gato.

Hall of the Mountain King
🎻 Clássico!

Música clássica acelerada.