Loading repository data…
darioreisjr / repository
projeto-travelgram
Este projeto consiste na criação do layout do perfil de usuário, com foco em design responsivo e componentes reutilizáveis.
#css-flexbox#css3#html#html5
Live repository statistics
★ 1Stars
⑂ 0Forks
◯ 0Open issues
◉ 1Watchers
README preview
🏞️ TravelGram - Rede Social de Fotos de Viagem
Bem-vindo ao TravelGram, uma rede social focada em compartilhar experiências de viagem através de imagens inspiradoras! Este projeto consiste na criação do layout do perfil de usuário, com foco em design responsivo e componentes reutilizáveis.
🚀 Tecnologias Utilizadas
- HTML5 📄: Estrutura da página
- CSS3 🎨: Estilização e responsividade
📸 Capturas de Tela
🚀 Funcionalidades
- Perfil de usuário com foto, biografia e localização.
- Grid de fotos de viagem organizadas em layout visualmente atraente.
- Menu interativo com opções personalizadas.
- Design consistente com paleta de cores e tipografia definidas.
- Ícones temáticos para navegação (avião, mapa, lupa).
🎨 Design System
Cores
| Função | Código Hex | Amostra |
|---|---|---|
| Cor de Serviço | #875946 | |
| Background | #FFFFFF | |
| Superfície | #F8B9B1 | |
| Cor Secundária | #e6c5c4c |
Tipografia
| Nome | Tamanho | Line-Height | Peso |
|---|---|---|---|
| Reading I | 30px | 135% | Bold |
| Paragraph-md | 14px | 170% | Regular |
| Paragraph-sm | 12px | 170% | Regular |
🗂️ Estrutura do Projeto
projecto-travelgram/ ├── assets/ │ ├── icons/ # Ícones SVG (avião, mapa, lupa) │ └── images/ # Imagens de exemplo para posts ├── styles/ │ ├── global.css # Estilos globais │ ├── header.css # Estilização do cabeçalho │ ├── nav.css # Estilos da barra de navegação │ └── ... # Outros componentes └── index.html # Página principal
🛠️ Componentes Principais
Menu de Navegação
- Ícones interativos
- Opções responsivas
- Dropdown para configurações (em desenvolvimento)
Grid de Fotos
- Layout responsivo com imagens em grid (3x4)
- Hover effects para destacar imagens
- Tags de localização (
<MapPin>)
📸 Diretrizes de Imagens
- Formato: PNG (12 imagens de exemplo inclusas)
- Tema: Focadas em paisagens naturais e pontos turísticos
- Padrão: Recortes em modo "Pan" com proporção 4:3
- Otimização: Compressão para rápido carregamento
🔧 Como Contribuir
- Faça um fork do repositório
- Crie uma branch:
git checkout -b feature/nova-feature - Commit suas mudanças:
git commit -m 'Adiciona nova funcionalidade' - Push para a branch:
git push origin feature/nova-feature - Abra um Pull Request
🌎 Demonstração
🔗 Acesse o projeto online: Link da Página
🔧 Como Executar Localmente
- Clone o repositório:
git clone https://github.com/darioreisjr/projeto-travelgram.git - Abra o arquivo index.html em um navegador
📄 Licença
Este projeto está sob licença MIT. Veja o arquivo LICENSE para detalhes.
📬 Contato
📩 Email: dev.darioreis@gmail.com 💼 LinkedIn: Dario Reis 🐙 GitHub: @darioreisjr
Feito com ❤️ por Dario Reis | ✈️ Inspire-se e compartilhe suas aventuras!