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:
- Cores: Um fundo escuro para o corpo e cores de destaque para os títulos.
- Tipografia: Use fontes
sans-serifpara os textos. - Box Model: Adicione
paddingebordernas seções para destacá-las. - Flexbox: Use Flexbox no
headerou 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)
- Faça o Commit: No GitHub Desktop, digite a mensagem (ex:
Finaliza Capítulo X) e clique em Commit to main. - Envie para a Nuvem (Push): Clique em Push origin.
- ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
- No Microsoft Teams:
- Copie o link do seu repositório.
- Cole na tarefa correspondente no Teams.
- Clique em Entregar.