Landing page de Produtos de tecnologia

Crie uma landing page responsiva que apresenta smartphones e smartwatches, simulando uma página inicial de um e-commerce. O objetivo é aplicar conceitos de HTML e CSS para criar uma estrutura bem organizada e estilizada. A página deve ser funcional e focada no design, com elementos que simulam uma experiência real de compra online.

🤓 Antes de começar

Note

Esse projeto é focado só na construção do HTML & CSS, a parte do javascript faz parte de outro projeto, você pode acessar aqui Fique a vontade para implementar as funcionalidades dos botões

Certifique-se de ter instalado um editor de código (recomendamos o VS Code). Utilize fontes gratuitas do Google Fonts para tipografia e, se preferir, ícones de bibliotecas como Font Awesome.

Crie uma estrutura básica de pastas:

• Um arquivo index.html para o HTML principal.
• Uma pasta css contendo style.css para os estilos.
• Uma pasta images para armazenar imagens utilizadas.

🔨 Requisitos

Requisito 1: Menu

Crie o cabeçalho da página, ele deve conter:

Logotipo.

Menu com links para "Home", "Produtos" e "Contato".

Um botão de "Carrinho".

Requisito 2: Banner

Crie a seção inicial da página (hero banner).

Um título principal (h1) com destaque para a frase "Design com Beleza e Funcionalidade".

Um botão de "Compre agora".

Uma imagem grande de smartphone em destaque.

Requisito 3: Produtos

Desenvolva uma seção de "Produtos em destaque" e deve exibir pelo menos 4 smartphones e 4 smartwatches. Cada produto deve ter:

Uma imagem.

Avaliação (usando estrelas ou ícones).

Um botão "Compre agora".

Requisito 4: Suporte ao cliente

Adicione uma seção de suporte ao cliente.

Texto principal: "24/7 no suporte ao cliente".

Subtexto explicando o suporte.

Uma imagem representando a equipe de suporte.

Requisito 5: Formulário

Insira um formulário para encomendas. Campos necessários:

Nome.

E-mail.

Mensagem.

Adicione um botão de envio estilizado.

👀 Dicas:

Use display: flex; para organizar os elementos.

Utilize hover nos links para destacar interações.

🔨 Desafio extra para quem quer ir além

• Deve ajustar o layout para telas menores (smartphones e tablets).

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.

Figma

🔗 Link do design

👉🏽 Sobre esse mini-projeto

O que você irá praticar:

HTML

Estruturação semântica: Aprenda a usar tags semânticas, como <header>, <section>, <article>, e <footer>, para criar uma página bem organizada. Formulários básicos: Estruture um formulário funcional com campos de entrada e um botão de envio.

CSS

Estilização visual: Desenvolva um layout visualmente atrativo utilizando seletores, pseudo-classes e pseudo-elementos. Responsividade: Pratique a criação de layouts que se ajustam a diferentes tamanhos de tela usando media queries. Flexbox e Grid Layout: Use essas técnicas para alinhar e organizar os elementos da página.

Pré-requisitos

Conhecimento básico de HTML e CSS, incluindo:

• Como estruturar uma página web.
• Como aplicar estilos usando uma folha de estilo externa.
• Fundamentos de responsividade com CSS.