douglasabnovato/rocket-coffee

css design html javascript responsive-design

🚧 Rocket Coffee 🚀

💻 Sobre o desafio

Neste desafio você deverá desenvolver uma homepage para uma marca de café.

💻 Techs

Nível de dificuldade: Intermediário
HTML
CSS
JavaScript

💻 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

💡 Conteúdos Aplicados

Neste desafio você vai construir uma homepage para uma marca de café*.* 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.

✅ Requisitos

layout responsivo
layout do Figma
Na versão mobile, ao clicar no menu hamburger deverá exibir um menu responsivo: aperfeiçoar o background
Adicionar hover nos botões.

🎨 Style Guide

🎨 css

Para criar o stroke do título <Great Code /> utilize a seguinte estilização:

text-shadow: -1px -1px 0 var(--button), 1px -1px 0 var(--button), -1px 1px 0 var(--button), 1px 1px 0 var(--button);

Eu tinha utilizado o trecho a seguir, mas a primeira opção é a melhor.

  -webkit-text-stroke: 2px var(--button);
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  opacity: 1;

Adicionando animações: botões de menu

🎨 Cores

Adicionar variáveis

:root {
  --backgrond: #000;
  --text-color: #FFF;
  --button: #8257E5;
  --border: #29292E;
  --border-menu-mobile: #A8A8B3;
  --text-color-menu-mobile: #E1E1E6;
}