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. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! 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

tests: []

Challenge Seed

Solution

// solution required