Instruções

Criar uma página de homenagem

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 de homenagem deve ter um elemento main com o id main correspondente, que envolva todos os demais elementos. 1. Deve haver um elemento com id title, que contenha uma string (ou seja, um texto) que descreva a pessoa a quem a página presta homenagem (por exemplo, "Dr. Norman Borlaug"). 1. Você deve ver um elemento figure ou um elemento div com um id de img-div. 1. Dentro do elemento #img-div, deve haver um elemento img com um id="image" correspondente. 1. Dentro do elemento #img-div, deve haver um elemento com um id="img-caption" correspondente que contenha um conteúdo textual descrevendo a imagem mostrada em #img-div. 1. Deve haver um elemento com id="tribute-info", que contenha conteúdo textual descrevendo a pessoa a quem a página presta homenagem. 1. Você deve ver um elemento a com um correspondente id="tribute-link", que linka para um site externo, contendo informações adicionais sobre o assunto da página de homenagem. DICA: Você deve dar ao seu elemento um atributo target e configurá-lo como _blank para que seu link abra em uma nova aba. 1. O elemento #image deve usar max-width e height para redimensionar de forma responsiva, em relação à largura de seu elemento pai, sem exceder seu tamanho original. 1. O elemento img deve ser centralizado dentro de 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 `main` com o `id` `main`.
  • Os elementos `#img-div`, `#image`, `#img-caption`, `#tribute-info` e `#tribute-link` devem estar aninhados dentro de `#main`.
  • Você deve ter um elemento com o `id` `title`.
  • O elemento `#title` não deve estar vazio.
  • Você deve ter um elemento `figure` ou um elemento `div` com o `id` `img-div`.
  • Você deve ter um elemento `img` com o `id` `image`.
  • O elemento `#image` deve estar aninhado dentro de `#img-div`.
  • Você deve ter um elemento `figcaption` ou um elemento `div` com o `id` `img-caption`.
  • O elemento `#img-caption` deve estar aninhado dentro de `#img-div`.
  • O elemento `#img-caption` não deve estar vazio.
  • Você deve ter um elemento com o `id` `tribute-info`.
  • O elemento `#tribute-info` não deve estar vazio.
  • Você deve ter um elemento `a` com o `id` `tribute-link`.
  • O elemento `#tribute-link` deve ter o atributo `href` e um valor.
  • O elemento `#tribute-link` deve ter um atributo `target` definido como `_blank`.
  • O elemento `img` deve ter o atributo `display` com o valor `block`.
  • O elemento `#image` deve ter o atributo `max-width` com o valor `100%`.
  • O elemento `#image` deve ter o atributo `height` com o valor `auto`.
  • O elemento `#image` deve ser centralizado dentro de seu elemento pai.

Preview