html = """ A Grande Aventura do Blog - Capítulo 3
A Grande Aventura do Blog

🌲 Capítulo 3 — O Reino Ganha Forma

Agora o blog vai ficar mais bonito, mais mágico e com mais cara de mundo próprio.

Nesta fase, o herói aprende que um blog não é só texto. É atmosfera, identidade e charme de reino encantado.

Progresso da jornada
Capítulo 3 • 42% da aventura concluída
Objetivo

🎯 O que vamos melhorar?

Missão 12

🎨 Atualizar o visual do style.css

Substitua o conteúdo do style.css por esta versão melhorada:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(180deg, #0b1020, #12294a);
  color: white;
}

.layout {
  display: flex;
  min-height: 100vh;
}

.menu {
  width: 270px;
  background: #18233f;
  padding: 20px;
  border-right: 2px solid rgba(255,255,255,0.08);
}

.menu h2 {
  font-size: 20px;
  margin-top: 0;
  color: #fde68a;
}

.menu ul {
  list-style: none;
  padding: 0;
}

.menu li {
  margin-bottom: 10px;
}

.menu a {
  color: #7dd3fc;
  text-decoration: none;
}

.menu a:hover {
  color: #86efac;
}

.conteudo {
  flex: 1;
  padding: 30px;
}

.caixa {
  background: rgba(29, 78, 216, 0.85);
  padding: 20px;
  border-radius: 16px;
  margin-top: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.post-pagina {
  max-width: 800px;
  margin: 40px auto;
  padding: 30px;
}

.post-pagina a {
  color: #7dd3fc;
  text-decoration: none;
}

.post-pagina a:hover {
  color: #86efac;
}

.post-pagina h1 {
  margin-top: 20px;
}

.autor {
  background: rgba(255,255,255,0.06);
  padding: 16px;
  border-radius: 14px;
  margin-top: 20px;
}

.blogs-amigos {
  background: rgba(255,255,255,0.05);
  padding: 16px;
  border-radius: 14px;
  margin-top: 20px;
}

Agora o reino fica mais elegante e com cara de aventura mesmo.

Missão 13

🧝 Criar uma área sobre o autor

No index.html, adicione esta caixa dentro da área principal do conteúdo:

<div class="autor">
  <h2>🧝 Sobre o autor</h2>
  <p>Olá! Eu sou um pequeno aventureiro da internet. Gosto de jogos, mundos mágicos e ideias legais.</p>
</div>

Isso deixa o blog mais pessoal e mais vivo.

Missão 14

⭐ Melhorar o post em destaque

Troque a caixa de destaque do index.html por algo assim:

<div class="caixa">
  <h2>✨ Post em destaque</h2>
  <p>Uma aventura começa aqui: <a href="post1.html">O começo da jornada</a></p>
  <p>Este é um dos posts mais importantes do reino.</p>
</div>

Agora o destaque parece realmente especial.

Missão 15

🌍 Melhorar a área de blogs amigos

No menu lateral, você pode trocar a área simples por uma versão mais charmosa:

<div class="blogs-amigos">
  <h2>🌍 Blogs amigos</h2>
  <ul>
    <li><a href="https://neocities.org/" target="_blank">Neocities</a></li>
    <li><a href="#">Blog do amigo</a></li>
    <li><a href="#">Blog de aventuras</a></li>
  </ul>
</div>

Assim essa parte ganha mais cara de seção especial.

Missão 16

🏰 Dar mais clima de RPG ao blog

Agora peça para ele mudar o texto do blog para combinar com um reino de fantasia, por exemplo:

Aqui ele aprende uma coisa poderosa: texto também faz parte do design.

Missão 17

🪄 Personalizar ainda mais

Desafie ele a trocar:

  • cores do fundo,
  • nomes das caixas,
  • textos dos menus,
  • post em destaque.

Essa fase é muito boa para ele sentir domínio sobre o projeto.

Missão 18

📖 Revisar se tudo continua funcionando

Depois das mudanças, ele deve testar:

  • se os links dos posts ainda funcionam,
  • se os blogs amigos continuam clicáveis,
  • se a página principal continua organizada,
  • se o visual ficou mais bonito.

Isso ensina a mexer com cuidado e revisar depois.

Quest principal

⚔️ Desafio do Capítulo 3

Antes de seguir, o herói precisa conseguir:

Quando isso estiver pronto, o blog deixa de ser só funcional e começa a ter alma.

Próximo capítulo

🗺️ O que vem no Capítulo 4?

No próximo capítulo vamos organizar melhor a jornada do leitor com:

Aí o blog vai ficar com cara de aventura que guia o leitor pelo mundo criado.

Capítulo 3 concluído: o reino agora tem beleza, atmosfera e identidade. ✨