---
id: bd7158d8c442eddfaeb5bd18
title: Build a Tribute Page
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: Construa uma página de homenagem
---
## Description
Objetivo: criar um aplicativo CodePen.io que seja funcionalmente semelhante a este: https://codepen.io/freeCodeCamp/full/zNqgVx . Cumpra as histórias de usuário abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! User Story # 1: Minha página de tributo deve ter um elemento com um id="main"
, que contém todos os outros elementos. User Story # 2: Eu deveria ver um elemento com um id="title"
, que contém uma string (ou seja, texto) que descreve o assunto da página do tributo (por exemplo, "Dr. Norman Borlaug"). User Story # 3: Eu deveria ver um elemento div
com um id="img-div"
. User Story # 4: Dentro do elemento img-div
, eu deveria ver um elemento img
com uma id="image"
. User Story # 5: Dentro do elemento img-div
, eu deveria ver um elemento com um id="img-caption"
que contém conteúdo textual descrevendo a imagem mostrada em img-div
. User Story # 6: Eu deveria ver um elemento com um correspondente id="tribute-info"
, que contém conteúdo textual descrevendo o assunto da página de tributo. User Story # 7: Eu deveria ver a
elemento com um id="tribute-link"
, que direciona para um site externo que contém informações adicionais sobre o assunto da página do tributo. DICA: Você deve dar ao seu elemento um atributo de target
e configurá-lo para _blank
para que seu link seja aberto em uma nova guia (ou seja, target="_blank"
). User Story # 8: O elemento img
deve redimensionar responsavelmente, em relação à largura de seu elemento pai, sem exceder seu tamanho original. User Story # 9: O elemento img
deve estar centrado dentro de seu elemento pai. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. Quando terminar, envie o URL para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o método Read-Search-Ask se você ficar preso.
## Instructions
## Tests
## Challenge Seed
## Solution
```js
// solution required
```