Aplicação web para criação de convites digitais personalizáveis para diferentes tipos de eventos (aniversário, casamento, formatura, carnaval, natal, entre outros). O usuário preenche as informações do evento, escolhe cores, tema e estilo visual, e ao finalizar o formulário é exibido um modal com a prévia do convite gerado.
- HTML5 — estruturação semântica com
<form>,<fieldset>,<legend>,<label> - CSS3 — estilização com Grid, Flexbox, variáveis CSS e CSS Nesting
- JavaScript (vanilla) — validações, máscaras e geração dinâmica do modal
- Google Fonts — tipografia com as fontes Baloo 2 (títulos), Open Sans (texto) e Leckerli One (logo)
- ✅ Campos para informações do evento (título, data de início, data de fim, local, descrição)
- ✅ Seleção do tipo de evento (Presencial ou Online) via radio estilizado
- ✅ Painel de personalização visual com 11 cores para o tema principal
- ✅ Galeria de temas pré-definidos (aniversário, infantil, formatura, casamento, chá de bebê, chá de panela, carnaval, páscoa, são joão, halloween, natal e outro)
- ✅ Switch para alternar entre modo escuro e claro
- ✅ Upload de foto de capa customizado
- ✅ Dados de contato do organizador (nome, e-mail, telefone)
- ✅ Checkboxes de aceite dos termos e opt-in de comunicações
- ✅ Modal estilo ticket (com notches/recortes laterais simulando ingresso)
- ✅ Overlay com blur no fundo
- ✅ Animação de entrada suave com
cubic-bezier - ✅ Banner superior colorido de acordo com a cor escolhida
- ✅ Exibição organizada das informações do evento
- ✅ Badge com tipo de evento (presencial/online)
- ✅ Botão de copiar/compartilhar o convite
- ✅ Totalmente responsivo (vira bottom sheet no mobile)
- ✅ Validação de campos obrigatórios
- ✅ Formatação automática do campo de telefone
- ✅ Validação de e-mail com regex
- ✅ Feedback visual de erros (borda vermelha e mensagem)
- ✅ Mensagens de erro personalizadas
Paleta dark com azul como cor principal e 10 cores adicionais para personalização:
| Cor | Hex |
|---|---|
| 🔵 Brand Light | #59B2FF |
| 🔷 Brand Mid | #3487CF |
| 🔹 Brand Dark | #1D6FB6 |
| 🟣 Purple | #B259FF |
| 🟪 Fuschia | #FF59F9 |
| 💗 Pink | #FF598B |
| 🔴 Danger | #FF5959 |
| 🟠 Orange | #FF8B59 |
| 🟡 Yellow | #FFCD59 |
| 🟢 Lime | #E1FF59 |
| 🟩 Green | #59FF91 |
| 🔵 Cyan | #59FFF9 |
| 🌌 Navy | #6A59FF |
| ⬛ Background | #131516 |
| ⬜ Shape Body | #212427 |
📦 festivite
┣ 📂 assets
┃ ┣ 📂 icons → Ícones SVG (calendar, contact, ticket, upload, etc.)
┃ ┣ 🖼️ Background.png → Imagem de fundo do aside
┃ ┗ 🖼️ (imagens dos temas: aniversario, casamento, halloween, etc.)
┣ 📂 styles
┃ ┣ 📂 fields → Estilos específicos de cada fieldset
┃ ┃ ┣ 📜 about-event.css → Campos sobre o evento
┃ ┃ ┣ 📜 customization.css → Personalização (cores, temas, switch)
┃ ┃ ┗ 📜 contact.css → Dados para contato
┃ ┣ 📜 index.css → Arquivo principal (importa os demais)
┃ ┣ 📜 global.css → Reset, variáveis e estilos globais
┃ ┣ 📜 layout.css → Estrutura de layout (grid aside + main)
┃ ┣ 📜 forms.css → Estilos base dos formulários
┃ ┣ 📜 footer.css → Rodapé do form (termos e botão submit)
┃ ┣ 📜 modal.css → Modal de prévia do convite
┃ ┗ 📜 responsive.css → Media queries (4 breakpoints)
┣ 📂 js
┃ ┗ 📜 index.js → Lógica de validação, máscara e modal
┗ 📜 index.html → Página principal
O projeto conta com 4 breakpoints:
| Dispositivo | Largura | Principais ajustes |
|---|---|---|
| 💻 Desktop | acima de 1024px | Layout em 2 colunas (aside + form) |
| 📱 Tablet | até 1024px | Aside vira header com gradiente no título |
| 📱 Tablet S | até 768px | Campos empilham em coluna única |
| 📱 Mobile | até 480px | Temas em grid menor, botão submit full-width |
| 📱 Mobile S | até 425px | Ajustes finos nos círculos de cor |
Clone o repositório:
git clone https://github.com/rochacode08/Festivite.gitAcesse a pasta do projeto:
cd FestiviteAbra o arquivo index.html no navegador — ou utilize a extensão Live Server do VS Code para recarregamento automático.
Durante o desenvolvimento, foram aplicados os seguintes conceitos:
- Estruturação com
<fieldset>e<legend>com ícones - Uso de diversos tipos de input:
text,date,radio,checkbox,file,email,tel,textarea - Radio buttons customizados com imagens e seleção visual
- Checkbox customizado com imagem de check
- Upload de arquivo estilizado (input escondido)
- Switch toggle criado do zero usando checkbox escondido
- Troca dinâmica de ícones no radio com
content: url()
- CSS Nesting nativo em todos os arquivos
- Uso extensivo de CSS Custom Properties para cores, fontes e temas
- Organização CSS modular com pasta
fields/para componentes específicos - Shorthand da propriedade
fontnas variáveis - Layouts com Grid (
grid-template-columns,auto-fit,minmax) - Layouts com Flexbox combinado com Grid
- Animações com
cubic-bezierpara suavidade premium - Efeito glassmorphism no modal com
backdrop-filter: blur
- Modal criado com overlay e animações de entrada/saída
- Simulação de ticket rasgado com pseudo-elementos e
notches - Transformação em bottom sheet no mobile
- Manipulação do DOM para validação e feedback visual
- Máscara de telefone aplicada em tempo real
- Validação de e-mail com regex
- Geração dinâmica do modal com os dados do formulário
- Função de copiar texto para área de transferência
- Salvar convite como imagem/PDF para download
- Gerar link único de compartilhamento do convite
- Implementar preview em tempo real (conforme preenche, o convite atualiza)
- Adicionar mais opções de fontes customizáveis
- Implementar sistema de RSVP (confirmação de presença)
- Integrar com Google Calendar para adicionar o evento
- Salvar rascunhos no
localStorage - Adicionar mais temas pré-definidos
Este projeto foi desenvolvido apenas para fins educacionais e de estudo.
Desenvolvido com 💙 por Gabriel Rocha Lopes
