Ano 2045. Um evento chamado “A falha” dizimou grande parte das cidades. Criaturas mutantes — chamadas genericamente de Vácua — dominam vastas áreas. Comunidades remanescentes criam portais informativos para ensinar sobrevivência. Seu grupo é uma equipe de “comunicadores de campo” encarregada de construir um site informativo que ajude sobreviventes a reconhecerem cada criatura, descobrir pontos fracos, táticas de sobrevivência e locais seguros.
🎯 Objetivo do Projeto
Construir um mini-site responsivo (HTML + CSS + Bootstrap) com múltiplas páginas que apresente:
- Informações sobre as criaturas (descrição, ponto fraco, tática)
- Guias de sobrevivência (como montar abrigo, sinais de socorro, rotas seguras)
- Mapa / Recursos (lista de locais seguros fictícios)
- Formulário para “reportar avistamento” (estático — sem back-end)
Além disso devem trabalhar em Git colaborativo (ramificação, PRs/merge) e gerir tarefas via Kanban (GitHub Projects / Trello / Notion).
📁 Exemplo de Estrutura (arquivos/pastas)
guia-sobrevivencia/
├── index.html # Página inicial (landing)
├── criaturas.html # Lista detalhada de criaturas
├── taticas.html # Táticas de sobrevivência / guias
├── recursos.html # Locais seguros / mapa (estático)
├── relatar.html # Formulário de avistamento (estático)
├── assets/
│ ├── imagens/
│ └── icons/
└── style.css # (opcional) — mas incentive uso do Bootstrap e utilitários
Nota: É permitido usar Bootstrap via CDN e utilitários. Pode haver um style.css para ajustes mínimos, mas priorizem classes do Bootstrap.
📄 Páginas e requisitos funcionais (detalhado)
index.html — Landing / Portal
- Cabeçalho (navbar) com o nome do projeto (ex: Refúgio 2145) e links para todas as páginas.
- Introdução narrativa curta (2–4 parágrafos) explicando o que aconteceu e o propósito do guia.
- Destaques rápidos: 3 cards com links para “Criaturas”, “Táticas”, “Recursos”.
criaturas.html — Bestiário
- Grade (Grid) com pelo menos 9 criaturas. Cada item deve ter:
- Imagem (pode ser placeholder)
- Nome da criatura
- Curta descrição (1–2 frases)
- Ponto fraco (destaque visual)
- Tática recomendada (resumo)
- Ao clicar no card (ou em “Ver mais”) abrir uma secção detalhada na mesma página (anchor) ou usar modal do Bootstrap com conteúdo expandido.
taticas.html — Guias práticos
- Várias seções: Abrigos, Alimentação, Sinais de Socorro, Primeiros Socorros.
- Cada seção com passos numerados ou checklist (
<ol> ou ul com .list-group).
- Use Grid/Flex para organizar texto + imagens lado a lado em telas grandes e empilhado em mobile.
recursos.html — Mapa e Locais Seguros
- Lista de “postos seguros” (mín. 5) com:
- Nome, descrição curta, coordenadas fictícias, e nível de segurança.
- Opcional: um “mapa” estático (imagem) com marcadores (pode ser .png com sobreposição).
- Mostre filtros visuais (badges) por nível de segurança: Alto/Médio/Baixo.
relatar.html — Formulário de Avistamento
- Formulário com: Nome, Local (texto), Tipo de criatura (select), Descrição do ocorrido, Data/Hora.
- Campos com
<label> e required (HTML) — não precisa enviar, é estático.
- Ao submeter, pode direcionar para uma página de agradecimento local (ex:
#obrigado) ou mostrar um alert Bootstrap.
- Coloque instruções de segurança no formulário (roleplay).