Instruções
Crie uma página de anúncio de evento
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
header dentro do corpo.
1. Seu elemento header deve conter uma imagem para o seu evento e um h1 com o título do seu evento, nessa ordem. Você pode usar esta imagem se desejar: https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/event.jpg
1. Você deve ter um elemento main dentro do body.
1. Seu elemento main deve conter pelo menos dois elementos section dentro dele, exibindo os recursos do evento.
1. Seus elementos section devem conter um h2 dentro deles.
1. Seu corpo deve ter um preenchimento superior e inferior de 50px.
1. Seu corpo deve ter uma margem superior e inferior de 0, e uma margem esquerda e direita que se centralize.
1. Seu corpo deve ter uma largura definida em relação à largura da janela de visualização.
1. Seu corpo deve usar a função calc para definir sua propriedade min-height como 100% da altura da viewport menos todo o padding aplicado ao topo e à parte inferior do body.
1. Você deve ter pelo menos um hr dentro do seu flyer.
1. Você deve definir a width de todos os elementos hr e section para um valor percentual relativo ao seu elemento pai.
Nota: Certifique-se de vincular sua folha de estilos no seu HTML e aplicar seu CSS.
O que fazer:
Testes:
- Você deve ter um elemento `header` dentro do elemento `body`.
- Você deve ter um elemento `img` como o primeiro filho no `header`.
- Você deve ter um elemento `h1` como o segundo filho no `header`.
- Você deve ter apenas um elemento `h1`.
- Seu `h1` deve conter o título do seu evento.
- Você deve ter um elemento `main` dentro do elemento `body`.
- Você deve ter pelo menos dois elementos `section` dentro do seu elemento `main`.
- Seus elementos `section` devem conter cada um um `h2` dentro deles.
- Seus elementos `h2` não devem estar vazios.
- Seu elemento `body` deve ter um padding superior e inferior de `50px`.
- Seu elemento `body` deve ter uma margem superior e inferior de `0`.
- Seu elemento `body` deve ter uma margem esquerda e direita de `auto`.
- Seu elemento `body` deve definir sua largura usando `vw`.
- Seu `body` deve usar `calc` para definir seu `min-height` como `100vh - 100px`.
- Você deve ter pelo menos um elemento `hr`.
- A largura dos seus elementos `hr` deve ser definida usando um valor percentual.
- A largura dos seus elementos `section` deve ser definida usando um valor percentual.
Preview