Instruções

Crie uma página de e-mail confidencial

Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve ter um elemento main com um id de email. 1. O elemento #email deve ter um padding de 50px, uma margem superior de 50px, uma width de 500px e um border de 2px. 1. A largura total do elemento #email, incluindo paddings e bordas, deve ser 500px. 1. Você deve ter dois elementos div, um com um id de confidential e o outro com um id de top-secret, dentro do elemento #email. 1. Os elementos #confidential e #top-secret devem ter um display de inline-block. 1. Os elementos #confidential e #top-secret devem ter um padding, uma margem esquerda e um border. 1. O elemento #confidential deve conter o texto CONFIDENCIAL. 1. O elemento #top-secret deve conter o texto TOP SECRET. 1. Os elementos #confidential e #top-secret devem ser rotacionados usando um transform do CSS. 1. Você deve ter pelo menos três elementos de parágrafo dentro do elemento #email. 1. Você deve ter pelo menos três elementos span com uma classe de blurred dentro de seus elementos de parágrafo. 1. Você deve ter um seletor blurred que desfoca o elemento 3px usando um filtro do CSS.

O que fazer:

Testes:

  • Você deve ter um elemento `main` com um `id` de `email`.
  • Você deve ter um seletor `#email` que define o `padding` dos elementos em todos os lados como `50px`.
  • Você deve ter um seletor `#email` que define a `margin-top` dos elementos como `50px`.
  • Você deve ter um seletor `#email` que define a `width` dos elementos como `500px`.
  • O elemento `#email` deve ter uma borda de `2px`.
  • O elemento `#email` deve ter um `box-sizing` de `border-box`.
  • Você deve ter um elemento `div` com um `id` de `confidential` dentro do elemento `#email`.
  • Você deve ter um elemento `div` com um `id` de `top-secret` dentro do elemento `#email`.
  • O elemento `#confidential` deve ter o `display` definido como `inline-block`.
  • O elemento `#top-secret` deve ter o `display` definido como `inline-block`.
  • O elemento `#confidential` deve ter um `padding` em todos os lados.
  • O elemento `#top-secret` deve ter um `padding` em todos os lados.
  • O elemento `#confidential` deve ter uma margem esquerda.
  • O elemento `#top-secret` deve ter uma margem esquerda.
  • O elemento `#confidential` deve ter uma `border`.
  • O elemento `#top-secret` deve ter uma `border`.
  • O texto do seu elemento `#confidential` deve ser `CONFIDENTIAL`. Você ou omitiu o texto ou cometeu um erro de digitação.
  • O texto do seu elemento `#top-secret` deve ser `TOP SECRET`. Você ou omitiu o texto ou cometeu um erro de digitação.
  • O elemento `#confidential` deve usar um `transform` em CSS para rotacionar o elemento.
  • O elemento `#top-secret` deve usar um `transform` do CSS para rotacionar o elemento.
  • Você deve ter pelo menos três elementos de parágrafo dentro do elemento `#email`.
  • Você deve ter pelo menos três elementos `span` com uma classe de `blurred` dentro dos parágrafos.
  • Os elementos `.blurred` não devem estar vazios.
  • Você deve ter um seletor `.blurred` que define o `filter` dos elementos como `blur(3px)`.

Preview