Agora o herói vai criar os posts do blog, cada um em sua própria página.
Nesta fase, o blog deixa de ser só uma entrada bonita e passa a ter caminhos, histórias e descobertas.
Um post do blog pode ter estas partes:
É como se cada post fosse uma sala do castelo com portas para outras salas.
No arquivo post1.html, cole este código:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>O começo da jornada</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="post-pagina">
<a href="index.html">⬅ Voltar para o blog</a>
<h1>O começo da jornada</h1>
<p>Hoje começa minha aventura como criador da internet. Estou montando meu blog e escrevendo meus primeiros pergaminhos digitais.</p>
<div class="caixa">
<h2>📌 Próximo post</h2>
<p><a href="post2.html">Meu jogo favorito</a></p>
</div>
<div class="caixa">
<h2>✨ Post recomendado</h2>
<p><a href="post3.html">Itens lendários</a></p>
</div>
</div>
</body>
</html>
No arquivo post2.html, cole este código:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu jogo favorito</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="post-pagina">
<a href="index.html">⬅ Voltar para o blog</a>
<h1>Meu jogo favorito</h1>
<p>Um dos jogos que eu mais gosto me inspira a imaginar mundos, personagens e aventuras. É por isso que eu quis criar este blog.</p>
<div class="caixa">
<h2>📌 Próximo post</h2>
<p><a href="post3.html">Itens lendários</a></p>
</div>
<div class="caixa">
<h2>✨ Post recomendado</h2>
<p><a href="post1.html">O começo da jornada</a></p>
</div>
</div>
</body>
</html>
No arquivo post3.html, cole este código:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Itens lendários</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="post-pagina">
<a href="index.html">⬅ Voltar para o blog</a>
<h1>Itens lendários</h1>
<p>Se eu pudesse criar um RPG, teria espada de luz, escudo ancestral, mapa encantado e poções mágicas espalhadas pelo mundo.</p>
<div class="caixa">
<h2>📌 Próximo post</h2>
<p><a href="post1.html">Voltar ao começo da jornada</a></p>
</div>
<div class="caixa">
<h2>✨ Post recomendado</h2>
<p><a href="post2.html">Meu jogo favorito</a></p>
</div>
</div>
</body>
</html>
Agora adicione estas classes no final do arquivo style.css:
.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;
}
Assim os posts ficam mais bonitos e organizados.
Agora ele pode trocar os textos dos posts por assuntos que gosta, como:
Quando ele quiser criar um novo post, basta:
Isso ensina uma lógica muito boa de reaproveitar estrutura.
Antes de seguir, o herói precisa conseguir:
Quando isso estiver pronto, o castelo do blog já terá corredores secretos funcionando.
No próximo capítulo vamos melhorar o blog com:
Aí o blog começa a ficar com cara de reino mesmo, não só de taverna improvisada.