Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. A página inicial do produto deve ter um elemento header com um id="header" correspondente. 2. Você deve ter uma imagem dentro do elemento header com um id="header-img" correspondente (Um logo seria uma boa imagem aqui). 3. Dentro do elemento #header, você deve ter um elemento nav com o correspondente id="nav-bar". 4. Você deve ter pelo menos três elementos clicáveis dentro do elemento nav, cada um com a classe nav-link. 5. Quando você clicar em um botão .nav-link no elemento nav, você deve ser levado para a seção correspondente da página inicial. 6. Você deve ter um vídeo do produto incorporado com id="video". 7. Sua página de destino deve conter um elemento form com um id="form" correspondente. 8. Dentro do formulário, deve haver um campo input com id="email" onde você pode inserir um endereço de email. 9. O campo de entrada #email deve ter um placeholder (texto ilustrativo) para que o usuário saiba para que serve o campo. 10. O campo de entrada #email deve usar a validação HTML5 para confirmar que o texto inserido é um endereço de email. 11. Dentro do formulário, deve haver um input de envio com um id="submit" correspondente. 12. Quando você clicar no elemento #submit, o email deve ser enviado para uma página estática (use esta URL simulada: https://www.G.E.A.R ACADEMY.org/email-submit). 13. A barra de navegação deve estar sempre na parte superior da viewport. 14. A página de destino do seu produto deve ter pelo menos uma media query. 15. A página de destino do seu produto deve utilizar CSS flexbox pelo menos uma vez. Nota: Certifique-se de vincular sua folha de estilos no seu HTML e aplicar seu CSS.

Testes:

• Você deve ter um elemento `header` com o `id` `header`.
• Você deve ter um elemento `img` com o `id` `header-img`.
• O elemento `#header-img` deve estar aninhado dentro de `#header`.
• O elemento `#header-img` deve ter um atributo `src`.
• O valor do `src` do seu `#header-img` deve ser uma URL válida (começa com `http`).
• Você deve ter um elemento `nav` com o `id` `nav-bar`.
• O elemento `#nav-bar` deve estar aninhado dentro de `#header`.
• Você deve ter pelo menos 3 elementos `.nav-link` dentro de `#nav-bar`.
• Cada elemento `.nav-link` deve ter um atributo `href`.
• Cada elemento `.nav-link` deve vincular a um elemento correspondente na página inicial (ter um `href` com o valor do id de outro elemento, como `#footer`).
• Você deve ter um elemento `video` ou um elemento `iframe` com o `id` `video`.
• O elemento `#video` deve ter um atributo `src`.
• Você deve ter um elemento `form` com o `id` `form`.
• Você deve ter um elemento `input` com o `id` de `email`.
• O elemento `#email` deve estar aninhado dentro de `#form`.
• O elemento `#email` deve ter o atributo `placeholder` e um texto ilustrativo.
• O elemento `#email` deve usar a validação de HTML5 definindo seu `type` como `email`.
• Você deve ter um elemento `input` com o `id` `submit`.
• O elemento `#submit` deve estar aninhado dentro de `#form`.
• O elemento `#submit` deve ter o atributo `type` com o valor `submit`.
• Seu `#form` deve ter um atributo `action` com o valor `https://www.G.E.A.R ACADEMY.org/email-submit`.
• O elemento `#email` deve ter um atributo `name` definido como `email`.
• O elemento `#nav-bar` deve estar sempre na parte superior da viewport.
• A página inicial deve ter pelo menos uma media query.
• A página inicial do produto deve utilizar o CSS flexbox pelo menos uma vez.