44 lines
3.2 KiB
Markdown
44 lines
3.2 KiB
Markdown
---
|
|
id: bd7158d8c442eddfaeb5bd18
|
|
title: Criar uma página de homenagem
|
|
challengeType: 3
|
|
forumTopicId: 301147
|
|
dashedName: build-a-tribute-page
|
|
---
|
|
|
|
# --description--
|
|
|
|
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/zNqgVx>.
|
|
|
|
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
|
|
|
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação!
|
|
|
|
**Especificação de usuário nº 1:** a página de homenagem deve ter um elemento com um `id="main"` que envolva todos os demais elementos.
|
|
|
|
**Especificação de usuário nº 2:** deve haver um elemento com `id="title"`, que contenha um texto que descreva a pessoa a quem a página presta homenagem (por exemplo, "Dr. Norman Borlaug").
|
|
|
|
**Especificação de usuário nº 3:** deve haver uma `div` com um `id="img-div"`.
|
|
|
|
**Especificação de usuário nº 4:** dentro do elemento de id `img-div`, deve haver um elemento `img` com um `id="image"`.
|
|
|
|
**Especificação de usuário nº 5:** dentro do elemento de id `img-div`, deve haver um elemento com um `id="img-caption"` que contenha um conteúdo textual descrevendo a imagem mostrada em `img-div`.
|
|
|
|
**Especificação de usuário nº 6:** deve haver um elemento com `id="tribute-info"`, que contenha conteúdo textual descrevendo a pessoa a quem a página presta homenagem.
|
|
|
|
**Especificação de usuário nº 7:** deve haver um elemento `a` com um `id="tribute-link"`, que leve a um site externo que contenha informações adicionais sobre a pessoa a quem a página presta homenagem. DICA: você deve dar ao seu elemento um atributo `target` e definir o valor para `_blank` para que seu link possa ser aberto em uma nova aba (exemplo: `target="_blank"`).
|
|
|
|
**Especificação de usuário nº 8:** o elemento `img` deve redimensionar responsivamente com relação à largura de seu elemento pai, sem exceder o seu tamanho original.
|
|
|
|
**Especificação de usuário nº 9:** o elemento `img` deve ser centralizado dentro de seu elemento pai.
|
|
|
|
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
|
|
|
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
|
|
|
# --solutions--
|
|
|
|
```html
|
|
// solution required
|
|
```
|