Atividade: Galeria de Vídeos Embed

📝 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! O canal Bongo Cat foi propositalmente escolhido por conter alguns vídeos indisponíves, para que você aprenda a lidar com isso. 😉

Crie os arquivos index.html e style.css usando os códigos base abaixo.

Acesse o canal Bongo Cat no YouTube.

Escolha 10 vídeos musicais diferentes.

Para cada vídeo: Compartilhar > Incorporar > Copiar código.

Cole o código no seu HTML e duplique os cards até ter 10 vídeos.

Personalização: Troque o texto da div com a class="badge" por um emoji e uma interjeição (Ex: "🐱 Miau!", "🥁 Batida!", "😯 Wow!).

Design Livre: Explore o arquivo style.css e mude as cores, bordas, fontes e sombras para deixar a galeria com a sua cara!

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:

Crie uma nova página (ex: galeria2.html) na mesma pasta iniciada na parte 1.

Faça uma segunda versão com um tema de sua escolha (Ex: Esportes, K-Pop, tutoriais de programação, Minecraft, etc.), contendo também 10 vídeos.

Introduza um link para a segunda versão na página principal (index.html), produzida na parte 1.

Publique esta segunda versão, contendo também os arquivos da parte 1 que foram modificados, no mesmo repositório do GitHub.

Recursos para a Atividade (Copiar e Colar)

index.html (Código Base)

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Galeria Bongo Cat</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Minha Playlist: Bongo Cat 🐱</h1>
  
  <section class="grid">
    
    <!-- EXEMPLO 1 -->
    <article class="card">
      <div class="video-wrap">
        <!-- APAGUE ESTE COMENTÁRIO E COLE O IFRAME DO BONGO CAT AQUI -->
      </div>
      <div class="meta">
        <div class="title">Nome da Música 1</div>
        <div class="badge">🎹 Piano!</div>
      </div>
      <p class="desc">Descrição curta sobre o vídeo.</p>
    </article>

    <!-- EXEMPLO 2 -->
    <article class="card">
      <div class="video-wrap">
        <!-- APAGUE ESTE COMENTÁRIO E COLE O IFRAME DO BONGO CAT AQUI -->
      </div>
      <div class="meta">
        <div class="title">Nome da Música 2</div>
        <div class="badge">🥁 Beat!</div>
      </div>
      <p class="desc">Descrição curta sobre o vídeo.</p>
    </article>

    <!-- EXEMPLO 3 -->
    <article class="card">
      <div class="video-wrap">
        <!-- APAGUE ESTE COMENTÁRIO E COLE O IFRAME DO BONGO CAT AQUI -->
      </div>
      <div class="meta">
        <div class="title">Nome da Música 3</div>
        <div class="badge">😻 Amei!</div>
      </div>
      <p class="desc">Descrição curta sobre o vídeo.</p>
    </article>

    <!-- Continue copiando e colando até completar 10 vídeos... -->

  </section>
</body>
</html>

style.css (Código Base)

:root{
  --gap: 1rem;
  --card-bg: #ffffff;
  --radius: 12px;
}
body{
  font-family: system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg,#f6f7fb,#eef2f7);
  margin: 0;
  padding: 2rem;
  color: #111;
}

h1{ margin: 0 0 1rem 0; font-size: 1.6rem; }

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap);
  align-items: start;
}

.card{
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 0.6rem;
  box-shadow: 0 6px 18px rgba(15,20,30,0.06);
  transition: transform .18s ease;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(15,20,30,0.12);
}

.video-wrap{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Mantém proporção 16:9 */
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  background: #000;
}
/* O CSS abaixo garante que o iframe colado ocupe todo o espaço */
.video-wrap iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.meta{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
}
.title{ font-weight: 600; }

.desc{
  font-size: .9rem;
  color: #444;
  line-height: 1.3;
}

.badge{
  background: #f0f4f8;
  padding: .25rem .5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #4a5568;
}

👁️ 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 - Faded

🤩 Yupi!

Classiquêra versão gatíneo!

Hall of the Mountain King

🎻 Clássico!

Música clássica acelerada.

Incorporando vídeos em HTML 🎹

A Invasão Bongo Cat

📝 Parte 1: Galeria Bongo Cat

🎨 Parte 2: Desafio Tema Livre

Recursos para a Atividade (Copiar e Colar)

👁️ Resultado Esperado (Tema: Bongo Cat)