Neste laboratório, você utilizará os elementos semânticos HTML para criar a estrutura de uma página web. Você adicionará conteúdo e imagens para que pareça um hub de eventos real. 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. 1. Dentro do elemento header, você deve ter um elemento h1 que contenha o texto Event Hub, e um elemento nav. 1. Dentro do elemento nav, você deve ter uma lista não ordenada com dois itens contendo links para diferentes seções da página. O primeiro item deve ter o texto Upcoming Events, e o segundo item deve ter o texto Past Events. 1. Cada link deve ser representado por um elemento a com um atributo href que aponte para a seção correspondente da página, #upcoming-events e #past-events, respectivamente. 1. Você deve ter um elemento main que contenha as diferentes seções da página. 1. Dentro do elemento main, você deve ter dois elementos section. 1. O primeiro elemento section deve ter um atributo id com o valor upcoming-events 1. Dentro da seção #upcoming-events, você deve ter:

• Um elemento h2 com o texto Upcoming Events.
• Dois elementos article. Cada artigo deve representar um evento e deve ter :
• Um elemento h3 para o título do evento.
• Um elemento p para a descrição do evento. Você pode adicionar uma data na parte inferior se desejar.

1. O segundo elemento section deve ter um atributo id com o valor past-events. 1. Dentro da seção #past-events, você deve ter:

• Um elemento h2 com o texto Past Events.
• Dois elementos article. Cada elemento article deve representar um evento passado e deve ter:
• Um elemento h3 para o título do evento,
• Um elemento p para a descrição do evento. Você pode adicionar uma data na parte inferior se desejar.
• Um elemento de imagem com o atributo src apontando para um arquivo de imagem e o atributo alt com uma descrição da imagem.

Nota: Você pode usar qualquer texto para as descrições dos eventos e datas. Você pode usar as seguintes URLs de imagem para as imagens, se desejar:

• https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/past-event1.jpg.
• https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/past-event2.jpg.

Testes:

• Você deve ter um elemento `header`.
• Seu elemento `header` deve vir após a tag de abertura `body`.
• Dentro do elemento `header`, você deve ter um elemento `h1` que contenha o texto `Event Hub`.
• Dentro do elemento `header`, após o elemento `h1`, você deve ter um elemento `nav`.
• Seu elemento `nav` deve conter uma lista não ordenada com dois itens.
• O primeiro item na lista não ordenada deve ser um link.
• O segundo item na lista não ordenada deve ser um link.
• O texto do primeiro item na lista não ordenada deve ser `Upcoming Events`.
• O primeiro item na lista não ordenada deve ter o `href` definido como `#upcoming-events`.
• O texto do segundo item na lista não ordenada deve ser `Past Events`.
• O segundo item na lista não ordenada deve ter o `href` definido como `#past-events`.
• Você deve ter um elemento `main` após a tag de fechamento do elemento `header`.
• Dentro do elemento `main`, você deve ter dois elementos `section`.
• Seu primeiro elemento `section` deve ter um atributo `id` com o valor `upcoming-events`.
• Seu segundo elemento `section` deve ter um atributo `id` com o valor `past-events`.
• Dentro da seção `#upcoming-events`, você deve ter um elemento `h2` com o texto `Upcoming Events`.
• Dentro da seção `#upcoming-events`, você deve ter dois elementos `article` abaixo do elemento `h2`.
• Ambos os elementos `article` dentro da seção `#upcoming-events` devem conter um elemento `h3` para o título do evento.
• Ambos os elementos `article` dentro da seção `#upcoming-events` devem conter um elemento de parágrafo para a descrição do evento.
• Dentro da seção `#past-events`, você deve ter um elemento `h2` com o texto `Past Events`.
• Dentro da seção `#past-events`, você deve ter dois elementos `article` abaixo do elemento `h2`.
• Ambos os elementos `article` dentro da seção `#past-events` devem ter um elemento `h3` para o título do evento.
• Ambos os elementos `article` dentro da seção `#past-events` devem conter um elemento de parágrafo para a descrição do evento.
• Ambos os elementos `article` dentro da seção `#past-events` devem conter um elemento de imagem.
• Ambos os elementos de imagem dentro da seção `#past-events` devem ter o atributo `src` apontando para um arquivo de imagem.
• Ambos os elementos de imagem dentro da seção `#past-events` devem ter o atributo `alt` com uma descrição da imagem.
• Cada elemento `h3` deve conter o título do evento.
• Cada elemento `p` deve conter a descrição do evento.