💻 Sobre o desafio

Nessa parte do desafio você vai adicionar os estilos da página. Para isso, é necessário conhecer o básico de CSS, caso você ainda não tenha feito os cursos do Discover ou queira fazer uma revisão, segue abaixo uma lista dos cursos que podem te ajudar a resolver esse desafio.

O guia estelar de CSS "Nenhuma aplicação web vive sem CSS"

Layout da página

Ao finalizar o desafio você vai ter um resultado parecido com o da imagem abaixo.

Os estilos usados nesse desafio são bem simples, e lembrando que as imagens e textos abaixo são ilustrativos e você pode adicionar seu próprio CSS como preferir.

screencapture-127-0-0-1-5500-01-recipe-index-html-2021-09-01-15_25_07.png

Importando o arquivo styles.css

Agora você deve criar o arquivo styles.css que é onde vamos adicionar todo o CSS da página. Depois de criado, você deve importar o arquivo no HTML usando a tag <link> dentro da tag <head>.

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" /> 
  </head>

Fazendo o reset do CSS

Por padrão o navegador pode adicionar alguns estilos, então para fazer o reset desses estilos podemos adicionar o código abaixo:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }

<aside> ❓ Se você ficou com dúvida sobre o trecho de código acima, no curso do Discover "Uma caixa dentro da outra" tem várias dicas que podem te ajudar.

</aside>

Cores e tipografia

Cores:

As cores usada no exemplo são as seguintes:

Background da página: #EAEAEA;
Background da receita: #FFFFFF;