---
id: bd7158d8c442eddfaeb5bd18
title: Build a Tribute Page
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: Создайте страницу с датой
---
## Description
Цель: создать приложение CodePen.io , функционально подобное этому: https://codepen.io/freeCodeCamp/full/zNqgVx . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать простой CSS, потому что это то, что до сих пор изучали уроки, и вы должны получить некоторую практику с простым CSS. Вы можете использовать Bootstrap или SASS, если вы выберете. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, и использование их на свой страх и риск. Другие проекты дадут вам возможность работать с различными технологическими пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Моя страница с датой должна иметь элемент с соответствующим id="main"
, который содержит все остальные элементы. User Story # 2: Я должен увидеть элемент с соответствующим id="title"
, который содержит строку (то есть текст), которая описывает тему страницы дани (например, «Доктор Норман Борлауг»). User Story # 3: Мне нужно увидеть элемент div
с соответствующим id="img-div"
. User Story # 4: В элементе img-div
я должен увидеть элемент img
с соответствующим id="image"
. User Story # 5: В элементе img-div
я должен увидеть элемент с соответствующим id="img-caption"
который содержит текстовый контент, описывающий изображение, показанное в img-div
. User Story # 6: Я должен увидеть элемент с соответствующим id="tribute-info"
, который содержит текстовый контент, описывающий тему страницы дани. История Пользователь # 7: я должен увидеть a
элемент с соответствующим id="tribute-link"
, который связывает с внешним сайтом , который содержит дополнительную информацию о предмете страницы дани. СОВЕТ. Вы должны указать вашему элементу атрибут target
и установить его на _blank
чтобы ваша ссылка открылась на новой вкладке (т. target="_blank"
). User Story # 8: элемент img
должен изменяться по размеру относительно ширины его родительского элемента, не превышая его первоначальный размер. User Story # 9: Элемент img
должен быть центрирован в пределах его родительского элемента. Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, которая вам нравится: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. После того, как вы закончите, отправьте URL-адрес вашему рабочему проекту со всеми его прохождением тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
## Instructions
## Tests
## Challenge Seed
## Solution
```js
// solution required
```