Capítulo 20: O Grande Projeto (P2 - Estilo) 🎨🎓

Parabéns por chegar ao último capítulo! Para finalizar o seu treinamento, vamos criar o arquivo CSS para deixar o site da guilda que criamos no capítulo anterior super bonito e organizado!


🏢 O Cenário Prático (Seu Desafio)

Agora você deve aplicar as regras de CSS que aprendeu para transformar o esqueleto do site da guilda em uma interface incrível!


📖 O que deve conter no seu CSS:

  1. Cores: Um fundo escuro para o corpo e cores de destaque para os títulos.
  2. Tipografia: Use fontes sans-serif para os textos.
  3. Box Model: Adicione padding e border nas seções para destacá-las.
  4. Flexbox: Use Flexbox no header ou no menu para alinhar os itens!

🛠️ Prática Obrigatória: Estilize a Guilda

Crie um arquivo chamado guilda.css e linke-o no arquivo guilda.html do capítulo anterior! Aplique os estilos acima.


🔑 Gabarito de Código (Exemplo de como deve ficar)

guilda.css

body {
    background-color: #1a1a1a;
    color: #e0e0e0;
    font-family: Arial, sans-serif;
    margin: 0;
}
 
header {
    background-color: #2c3e50;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
header h1 {
    margin: 0;
    color: #f1c40f;
}
 
nav a {
    color: white;
    text-decoration: none;
    margin-left: 15px;
}
 
main {
    padding: 20px;
}
 
section {
    background-color: #2980b9;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
}
 
footer {
    text-align: center;
    padding: 10px;
    background-color: #333;
}

🎉 Fim da Jornada!

Você concluiu o curso de HTML e CSS! Agora você tem o poder de criar e estilizar seus próprios mundos na web! Continue praticando e construindo projetos incríveis! 🚀

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo X) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.
  3. ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
  4. No Microsoft Teams:
    • Copie o link do seu repositório.
    • Cole na tarefa correspondente no Teams.
    • Clique em Entregar.

Capitulo Anterior