Landing Page UOL

Uma landing page moderna inspirada no design do site UOL (https://www.uol.com.br/), criada com HTML, CSS e JavaScript puros.

🎯 Características

• Design Responsivo: Adaptado para desktop, tablet e mobile
• Layout Moderno: Baseado no design atual do UOL
• Interatividade: JavaScript para funcionalidades dinâmicas
• Acessibilidade: Implementação de boas práticas de acessibilidade
• Performance: Otimizado para carregamento rápido

📁 Estrutura dos Arquivos

├── index.html              # Página principal
├── styles.css              # Estilos principais
├── additional-styles.css   # Estilos adicionais e melhorias
├── script.js              # Funcionalidades JavaScript
└── README.md              # Este arquivo

🚀 Como Usar

1. Abrir Localmente:

   • Abra o arquivo index.html em qualquer navegador moderno
   • Ou use um servidor local como Live Server (VS Code)

2. Servidor Local (Recomendado):

   # Se tiver Python instalado
   python -m http.server 8000
   
   # Se tiver Node.js
   npx serve .

🎨 Funcionalidades Implementadas

Header

• Menu de navegação responsivo
• Área de busca funcional
• Links para serviços UOL
• Cotações de moedas
• Botões de login e assinatura

Conteúdo Principal

• Seção hero com notícia principal
• Notícias secundárias
• Categorias de notícias (Política, Economia, Tecnologia)
• Seção de produtos/serviços UOL
• Lista das "Mais Lidas"

Funcionalidades JavaScript

• Busca interativa
• Animações suaves
• Efeitos hover
• Responsividade dinâmica
• Simulação de cliques em notícias

🎨 Personalização

Cores Principais

• Azul UOL: #0066cc
• Laranja: #ff6600
• Cinza escuro: #333
• Fundo: #f5f5f5

Tipografia

• Fonte principal: Arial, sans-serif
• Hierarquia de tamanhos bem definida

📱 Responsividade

• Desktop: Layout completo com 3 colunas
• Tablet: Layout adaptado com 2 colunas
• Mobile: Layout single-column com menu otimizado

🔧 Tecnologias Utilizadas

• HTML5: Estrutura semântica
• CSS3:
  • Flexbox e Grid Layout
  • Media Queries
  • Animações CSS
  • Variables CSS
• JavaScript ES6+:
  • Event Listeners
  • DOM Manipulation
  • Intersection Observer
  • Local Storage

🌟 Características Especiais

Acessibilidade

• Suporte a leitores de tela
• Navegação por teclado
• Contraste adequado
• Textos alternativos

Performance

• CSS otimizado
• Carregamento lazy de imagens
• Animações suaves
• Código minificado

Funcionalidades Extras

• Modo escuro (opcional)
• Animações on scroll
• Estados de loading
• Validação de formulários

🚀 Melhorias Futuras

• Integração com APIs reais de notícias
• Sistema de comentários
• Newsletter signup
• Compartilhamento social
• PWA (Progressive Web App)
• Analytics tracking

📄 Licença

Este projeto é apenas para fins educacionais e demonstração de habilidades. O design é inspirado no UOL original.

🤝 Contribuição

Sinta-se à vontade para fazer fork, sugerir melhorias ou reportar issues.

---

Desenvolvido como demonstração de uma landing page moderna inspirada no UOL