Desafio: RocketShoes

Índice

💻 Sobre o desafio

---

Neste desafio você deverá desenvolver um mini e-commerce de calçados esportivos.

Layout

Você pode visualizar o template do projeto clicando neste link e o zip com os assets exportados.

🚀 Techs

---

• HTML
• CSS

💡Como começar?

---

1 - Use o link do Figma como base para o projeto. Também disponibilizamos para download todos os assets necessários (imagens e ícones), para fazer o download basta clicar no link acima.

2 - Leia com atenção todas as instruções do desafio.

3 - Bora codar! Lembre-se que você pode usar as tecnologias que se sentir mais confortável, mas também pode se desafiar usando novas techs, fazendo modificações e/ou adicionando funcionalidades no projeto como preferir. 🚀

4 - Compartilhe seu resultado ou tire suas dúvidas na nossa comunidade aberta

✅ Requisitos

---

Neste desafio você deverá desenvolver um mini e-commerce de calçados esportivos*.* Caso você ainda não tenha feito os cursos do Discover ou queira fazer uma revisão, segue abaixo uma lista dos cursos e documentações que podem te ajudar a resolver este desafio.

• O guia estelar de HTML
• O guia estelar de CSS
• Posicionando foguetes
• Formulários de outro planeta
• Alinhando os planetas
• App bonito, até nos textos
• Posso ver e ouvir o HTML
• <iframe> - HTML: Linguagem de Marcação de Hipertexto | MDN (mozilla.org)

Requisitos para o desafio:

• Seguir o layout do Figma respeitando as medidas.
• O ponteiro do mouse deverá ter o comportamento de click nos menus, footer e nos botões da página.
• Adicionar um vídeo do youtube no local da imagem que representa um video.
• Deverá ter uma linha indicativa na foto que está aparecendo maximizada na galeria.

Se desafie também:

• Deixando o layout responsivo

🎨 Style Guide

---

Cores:

:root {
  --button: #FF0000;
  --main-background:  #C4C4C4;
  --background: #E5E5E5;
  --text: #000;
  --footer: #000;
  --text-description: #9C9696;
}

Tipo de fonte:

font-family: Roboto

font Weight: 400 e 700

Você pode encontrar a fonte no Google Fonts

📅 Entrega

---

Esses desafios não precisam ser entregues e não receberão correção. Após concluí-los, adicionar esses códigos ao seu Github é uma boa forma de demonstrar seus conhecimentos para oportunidades futuras.

Feito com 💜 por Rocketseat 👋 Participe da nossa comunidade aberta!