← Homepage
Product Page Preview

Product Page

Design Gráfico
2024

O que foi desenvolvido

Desenvolvido para a certificação de Web Design Responsivo da freeCodeCamp, este projeto consiste em uma Landing Page de produto de alta fidelidade. A página foca na conversão e experiência do usuário, implementando um cabeçalho fixo que mantém a navegação acessível em todo o scroll.

A estrutura inclui uma barra de navegação (nav-bar) com links âncora para transições suaves entre seções, um vídeo demonstrativo incorporado para apresentação visual do produto e um formulário de e-mail com validações nativas do HTML para captura de leads.

Aprendizados e Técnicas

O desafio técnico principal foi garantir a total responsividade do layout sem o uso de bibliotecas externas. Para isso, utilizei CSS Flexbox para alinhar os componentes e Media Queries estratégicas para adaptar a visualização para dispositivos mobile e desktop.

Também utilizei o Adobe Photoshop para o tratamento das imagens e logotipo, garantindo que a estética visual fosse coesa. A lógica de interface foi refinada para cumprir os critérios rigorosos da plataforma freeCodeCamp, focando em semântica HTML e acessibilidade.

Habilidades

Photoshop
HTML / CSS
JavaScript

Demonstração

código do projeto visualize na web