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