🌱 Plataforma ONG — Projeto Acadêmico

Este projeto foi desenvolvido como parte das **Entregas Práticas I, II e III**, com o objetivo de construir uma **plataforma web para gestão de ONGs**, aplicando conceitos de **HTML5, CSS3 e JavaScript Avançado**.

 🎯 Objetivo do Projeto

Criar uma aplicação web que permita gerenciar **projetos, voluntários e doações** de ONGs, simulando uma plataforma real com:

* Interface responsiva e moderna (CSS Grid e Flexbox)
* Sistema de Single Page Application (SPA)
* Validação de formulários com feedback visual
* Armazenamento local (LocalStorage)
* Componentes dinâmicos e reutilizáveis

 🧱 Estrutura do Projeto

projeto-ongs/
│
├── index.html
├── css/
│   ├── style.css
│   ├── layout.css
│   └── components.css
├── js/
│   ├── app.js
│   ├── router.js
│   ├── formValidation.js
│   └── components/
│       ├── cards.js
│       ├── navbar.js
│       └── modal.js
├── images/
│   ├── logo.png
│   └── icons/
└── README.md

 🎨 Sistema de Design

O sistema de design foi desenvolvido com base em **variáveis CSS customizadas**, garantindo consistência visual e escalabilidade:

 Paleta de cores:
  Primárias e neutras em tons de vermelho, cinza e branco.

  ```
  --primary: #c62828;
  --primary-light: #ef5350;
  --neutral-dark: #212121;
  --neutral-light: #f5f5f5;
  --white: #ffffff;

  Tipografia hierárquica:
  5 níveis de fontes (títulos, subtítulos, corpo, legendas e botões)
  Sistema de espaçamento modular:
  Base: 8px (8, 16, 24, 32, 48, 64)

 ⚙️ Funcionalidades JavaScript

* Navegação SPA (Single Page Application)
* Manipulação do DOM com templates dinâmicos
* Sistema de validação de formulários com mensagens de erro
* Armazenamento de dados (LocalStorage)
* Atualização dinâmica de cards de projetos e voluntários
* Simulação de sistema administrativo com contadores

 🧩 Tecnologias Utilizadas

* **HTML5** — Estrutura semântica
* **CSS3** — Layout responsivo (Grid e Flexbox)
* **JavaScript (ES6+)** — Lógica e interatividade
* **LocalStorage** — Persistência de dados no navegador
* **GitHub Pages** — Hospedagem pública do projeto

 🧠 Entregas Atendidas

 ✅ Entrega I — Estrutura HTML

Criação da base da aplicação com HTML semântico e organização inicial das páginas.

 ✅ Entrega II — Estilo CSS3

Aplicação de design system, layout responsivo e componentes visuais.

 ✅ Entrega III — JavaScript Avançado

Implementação de SPA, manipulação do DOM e validação de formulários.

👨‍💻 Autor

 Julio Alves
Estudante de Análise e Desenvolvimento de Sistemas