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