Este projeto é uma landing page clonada da Apple, focada na apresentação do MacBook Air com chip M4, feita com HTML, CSS e JavaScript. A proposta é recriar o visual e interações da página oficial do produto com atenção aos detalhes, responsividade e experiência do usuário.
- ✨ Visual fiel ao site original da Apple
- 🎨 Seleção de cores com troca de imagens dos modelos
- 📱 Design 100% responsivo
- 💬 Textos adaptados e estilizados com fontes e gradientes
- 🌍 Suporte a múltiplos tamanhos de tela
- 🔁 Carregamento de imagens dinâmico com
<picture>
- HTML5
- CSS3 (com uso de gradientes, media queries, reset.css, etc.)
- JavaScript Vanilla
- Google Fonts (Poppins)
📁 Projeto-Macbook-Air ├── index.html ├── fav.png ├── vendor │ └── reset.css ├── src │ ├── imgs │ │ ├── sections │ │ │ ├── hero_static__2x.png │ │ │ ├── design_hero_static___2x.jpg │ │ ├── colors │ │ ├── design_side_skyblue.jpg │ │ ├── design_magsafe_skyblue.jpg │ │ └── design_top_skyblue.jpg │ ├── styles │ │ └── main.css │ └── scripts │ └── main.js
- Azul-céu
- Prateado
- Estelar
- Meia-noite
As imagens do produto são trocadas conforme a cor selecionada, simulando a experiência do site oficial.
Durante a construção deste projeto, foram reforçados conhecimentos em:
- Estrutura semântica com HTML5
- Estilização moderna e responsiva com CSS
- Manipulação de DOM com JavaScript puro
- Uso de
<picture>para imagens adaptáveis - Recriação de design real baseado em referência visual
- Design inspirado na página oficial da Apple
- Fonte: Google Fonts - Poppins
- Imagens de produto utilizadas apenas para fins educacionais.
Feito com 💙 por Enzo Andrade Cruz
- GitHub: @EnzoAndrade2001
- Projeto criado durante a Start Week da DIO
- Clone o repositório:
git clone https://github.com/EnzoAndrade2001/cloneMacBook
Acesse o diretório do projeto:
bash
Copiar
Editar
cd cloneMacBook
Abra o arquivo index.html no seu navegador.
🧪 Projeto criado para fins educacionais com foco em desenvolvimento front-end.