https://github.com/motak7/fintech
Um protótipo de alta fidelidade de um dashboard para uma Fintech moderna, construído com foco em design, responsividade e micro-interações avançadas utilizando apenas HTML e CSS.
https://github.com/motak7/fintech
css-animations css3 dashboard fintech glassmorphism html5 responsive-design
Last synced: 5 months ago
JSON representation
Um protótipo de alta fidelidade de um dashboard para uma Fintech moderna, construído com foco em design, responsividade e micro-interações avançadas utilizando apenas HTML e CSS.
- Host: GitHub
- URL: https://github.com/motak7/fintech
- Owner: Motak7
- Created: 2025-06-17T16:30:57.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-06-17T16:37:29.000Z (5 months ago)
- Last Synced: 2025-06-17T17:43:45.719Z (5 months ago)
- Topics: css-animations, css3, dashboard, fintech, glassmorphism, html5, responsive-design
- Language: CSS
- Homepage:
- Size: 67.4 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fintech ✨
## 🚀 Sobre o Projeto
Um protótipo de alta fidelidade e totalmente responsivo de um dashboard para uma Fintech moderna. O projeto foi desenvolvido como um desafio para explorar o potencial máximo do CSS3, criando uma experiência de usuário rica, fluida e com micro-interações avançadas, sem o uso de JavaScript. O design é focado em clareza, modernidade e uma estética de "vidro" (glassmorphism).
---
### ✨ Features Principais
- **Layout Responsivo:** Experiência perfeita em dispositivos móveis e desktop, utilizando uma arquitetura com CSS Grid para telas maiores.
- **Fundo Cósmico Animado:** Um background sutil e dinâmico com partículas animadas, criado inteiramente com CSS.
- **Painéis de Vidro Translúcido:** Efeito "glassmorphism" em todos os widgets para criar profundidade e uma hierarquia visual clara.
- **Micro-interações Avançadas:**
- Animação 3D sutil no cartão principal ao passar o mouse.
- Efeito de "brilho" (`shine`) em botões e menus.
- Transições suaves em todos os elementos interativos.
- **Design System com Variáveis CSS:** Arquitetura de estilos limpa e de fácil manutenção com o uso de variáveis CSS (`:root`) para cores, fontes e espaçamentos.
---
### 🛠️ Tecnologias Utilizadas
O projeto foi construído utilizando as seguintes tecnologias:
- 
- 
- 
---
### ▶️ Como Executar
Para visualizar o projeto, basta seguir os passos:
1. Clone o repositório:
```bash
git clone [https://github.com/Motak7/Fintech.git](https://github.com/Motak7/Fintech.git)
```
2. Navegue até a pasta do projeto:
```bash
cd Fintech
```
3. Abra o arquivo `index.html` em qualquer navegador moderno.
---
### Licença
Este projeto está sob a licença MIT. Veja o arquivo `LICENSE` para mais detalhes.