Desenvolver uma landing page utilizando HTML, CSS e JavaScript, garantindo que o resultado final seja o mais fiel possível ao layout fornecido.
- 📥 Baixe aqui o layout em formato .PSD (Photoshop).
- 📥 Baixe aqui os arquivos-base a serem utilizados (teste-woolly.zip).
- ✅ Código organizado e bem estruturado.
- ✅ Manter a estrutura de pastas fornecida no ZIP.
- ✅ Landing page responsiva, garantindo uma boa experiência em dispositivos móveis.
- ✅ O layout responsivo pode ser adaptado a partir da versão desktop.
- ✅ As imagens a serem utilizadas devem ser exportadas de dentro do arquivo psd;
- ✅ Uso opcional de frameworks como Bootstrap, jQuery, entre outros, para facilitar a implementação.
- 1️⃣ Preloader (animação de pré-carregamento) ao acessar a página.
- 2️⃣ Vídeo interativo: Ao clicar no botão "Play", um embed do YouTube (qualquer vídeo de exemplo) deve ser exibido no lugar da imagem inicial ou em um popup, com reprodução automática.
- 3️⃣ Scroll suave: O botão "Fale conosco", abaixo do vídeo, deve rolar suavemente até a seção do formulário.
- 4️⃣ Máscaras nos campos: Os campos CNPJ e Telefone devem conter máscaras de formatação adequadas para a digitação.
- 5️⃣ Validação do formulário:
- ✔️ Todos os campos devem ser obrigatórios.
- ✔️ Não é necessário configurar o envio do formulário, apenas a validação.
O projeto deve rodar corretamente nos principais navegadores e ser fiel ao layout fornecido, tanto em desktop quanto em dispositivos móveis.
📅 Prazo de entrega: 01/04 às 14h.
- Alguns elementos foram adicionados como animações ao scroll utilizando a biblioteca AOS;
- O player de vídeo interativo foi feito com uma combinação entre o modal e iframe, do próprio YouTube;
- No formulário, as validações foram feitas utilizando puramente regular expressions (regex) do JavaScript;
- O layout mobile seguiu o padrão de deixar todo o website em uma única coluna;
- Estilizações de pseudoclasses foram desenvolvidas para terem uma fluidez.
No geral, uma experiência muito divertida!