O terceiro setor brasileiro movimenta mais de R$ 15 bilhões por ano e emprega cerca de 3 milhões de pessoas, mas apenas 30% das ONGs possuem presença digital adequada.
Este projeto foi desenvolvido como parte da Experiência Prática II, com o objetivo de aplicar HTML5 e CSS3 avançado na criação de uma plataforma web moderna e responsiva voltada para Organizações Não Governamentais.
Desenvolver uma plataforma web profissional para ONGs gerenciarem atividades, divulgarem projetos, captarem recursos e engajarem voluntários.
- Aplicar fundamentos de HTML5 em estruturas semânticas complexas;
- Implementar CSS3 para design moderno e responsivo;
- Utilizar Flexbox e Grid na organização do layout;
- Criar um sistema de design com cores, tipografia e espaçamento modular;
- Garantir acessibilidade e responsividade;
- Organizar o código em pastas e módulos.
projeto-ongs/
│
├── index.html
│
├── css/
│ ├── base.css # Reset e variáveis globais
│ ├── layout.css # Estrutura geral e grid principal
│ ├── components.css # Botões, cards, formulários e modais
│ └── style.css # Importa e organiza todos os módulos
│
└── imagens/
├── logo.svg
├── project-1.svg
└── project-2.svg
| Tipo | Cor | Código |
|---|---|---|
| Primária | Vermelho Principal | #D32F2F |
| Secundária | Vermelho Claro | #E57373 |
| Neutra 1 | Branco | #FFFFFF |
| Neutra 2 | Cinza Claro | #F5F5F5 |
| Neutra 3 | Cinza Médio | #9E9E9E |
| Neutra 4 | Cinza Escuro | #424242 |
| Acento | Preto | #000000 |
| Suporte | Bege Claro | #FFF8E1 |
- Título Principal: 32px
- Subtítulo: 24px
- Texto: 16px
- Botões: 18px
- Pequeno / Rodapé: 14px
8px, 16px, 24px, 32px, 48px, 64px
O layout é totalmente responsivo, com 5 breakpoints:
- 320px (mobile pequeno)
- 480px (mobile padrão)
- 768px (tablet)
- 1024px (notebook)
- 1440px (desktop)
Utiliza CSS Grid para estrutura geral e Flexbox para alinhamento interno.
- Menu responsivo com submenu e ícone hambúrguer;
- Cards de projetos com hover interativo;
- Botões com estados (
hover,focus,active,disabled); - Formulários estilizados e com feedback visual;
- Componentes de alerta e modal;
- Tags e badges para categorização de projetos.
Desenvolvido por Julio Maximus
📘 Curso: Análise e Desenvolvimento de Sistemas
🏫 Instituição: Cruzeiro do Sul / Faculdade de Ánalise e desenvolvimento de sistema
📅 Entrega: Experiência Prática II – 2025