🎧 Landing Page "Fone Fake" Este é um projeto de landing page estática para um produto fictício, o "Fone Fake". O objetivo foi criar uma página de vendas (One-Page) atraente, moderna e responsiva, utilizando apenas HTML5 e CSS3.

O design foca em uma apresentação limpa do produto, destacando seus benefícios e incentivando a compra através de "Calls-to-Action" (CTAs) claros.

💻 Visualização Você pode ver o projeto em ação clicando aqui!

Nota: Substitua o link https://biacursi.github.io/seu-repositorio/ pela URL real do seu GitHub Pages quando você publicar.

Nota: Sugiro que você tire um print da tela do seu projeto, faça upload no Imgur e cole o link no lugar de https://i.imgur.com/link-da-imagem.png.

🚀 Principais Destaques Design Responsivo: A página se adapta a dispositivos móveis (com max-width: 415px) para uma boa visualização em celulares.

CSS Moderno: O projeto utiliza:

Variáveis CSS (:root): Para fácil gerenciamento do tema e das cores primárias (ex: --cor-primaria).

Flexbox: Para todo o alinhamento e layout das seções, cabeçalho e cards.

Estilos Modulares: O CSS é bem organizado e dividido em global.css (para o tema principal e layout) e responsive.css (para os ajustes em media queries).

100% Estático: Construído sem nenhuma linha de JavaScript, focando na força pura do HTML semântico e do CSS.

Estrutura de Vendas: A página segue uma lógica de landing page, com seções bem definidas:

Hero: A "primeira dobra" com o título principal e imagem de impacto.

Features (Cards): Destaca os pontos fortes (Conforto, Qualidade, Conectividade).

Showcase: Uma seção secundária para reforçar o valor do produto.

Preços (Conversão): A seção final que apresenta as opções de cores e os botões de compra.

🛠️ Tecnologias Utilizadas HTML5: (Usando tags semânticas como

, ,

e ).

CSS3:

Variáveis CSS (:root)

Flexbox

Media Queries

Google Fonts (@import)

📂 Estrutura de Arquivos O projeto foi organizado de forma lógica, separando a estrutura (HTML), os estilos (CSS) e as imagens (images) em suas respectivas pastas dentro de assets/.

fone-fake-landing-page/ │ ├── 📄 index.html (O arquivo HTML principal) │ └── 📁 assets/ ├── 📁 css/ │ ├── 📄 global.css (Estilos principais, layout e variáveis) │ └── 📄 responsive.css (Estilos para @media queries) │ └── 📁 images/ ├── 🖼️ image-01.png ├── 🖼️ image-02.png ├── 🖼️ white-image.png ├── 🖼️ black-image.png └── 🖼️ red-image.png 🏁 Como Executar Localmente Sendo um projeto estático, basta seguir os passos:

Clone este repositório:

Bash

git clone https://github.com/biacursi/NOME-DO-SEU-REPOSITORIO.git Navegue até a pasta do projeto:

Bash

cd NOME-DO-SEU-REPOSITORIO Abra o arquivo index.html no seu navegador.

Feito com 💜 por © Bianca Cursi.