freeCodeCamp/curriculum/challenges/russian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.russian.md

id, title, isRequired, challengeType, videoUrl, localeTitle

id	title	isRequired	challengeType	videoUrl	localeTitle
bd7158d8c442eddfaeb5bd18	Build a Tribute Page	true	3		Разработать страницу посвящения

Description

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

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required