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

39 lines
5.9 KiB
Markdown
Raw Normal View History

---
id: bd7158d8c442eddfaeb5bd18
title: Build a Tribute Page
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: Разработать страницу посвящения
---
## Description
<section id="description"> <strong>Цель:</strong> создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально подобное этому: <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank">https://codepen.io/freeCodeCamp/full/zNqgVx</a> . Выполните приведенные ниже <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B5_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B8" target="_blank">пользовательские истории</a> и пройдите все тесты. Сделайте приложение в своем стиле. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать чистый CSS, потому что он использовался в упражнениях, и вы должны получить некоторую практику работы с чистым CSS. Вы можете использовать Bootstrap или SASS, если хотите. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, но вы можете рискнуть их использовать. Другие проекты дадут вам возможность работать с различными пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах по предлагаемому стеку технологий. Счастливого кодирования! <strong>Пользовательская история # 1:</strong> Моя страница посвящения должна иметь элемент с соответствующим <code>id=&quot;main&quot;</code> , который содержит все остальные элементы. <strong>Пользовательская история # 2:</strong> Я должен увидеть элемент с соответствующим <code>id=&quot;title&quot;</code> , который содержит строку (то есть текст), с описанием темы страницы (например, «Доктор Норман Борлауг»). <strong>Пользовательская история # 3:</strong> Мне нужно увидеть элемент <code>div</code> с соответствующим <code>id=&quot;img-div&quot;</code> . <strong>Пользовательская история # 4:</strong> В элементе <code>img-div</code> я должен увидеть элемент <code>img</code> с соответствующим <code>id=&quot;image&quot;</code> . <strong>Пользовательская история # 5:</strong> В элементе <code>img-div</code> я должен увидеть элемент с соответствующим <code>id=&quot;img-caption&quot;</code> , который содержит текст, описывающий изображение в <code>img-div</code> . <strong>Пользовательская история # 6:</strong> Я должен увидеть элемент с соответствующим <code>id=&quot;tribute-info&quot;</code> , который содержит текст, описывающий тему страницы посвящения. <strong>Пользовательская история # 7:</strong> Я должен увидеть элемент <code>a</code> с соответствующим <code>id=&quot;tribute-link&quot;</code> , который ссылается на внешний сайт с дополнительной информацией о предмете страницы. ПОДСКАЗКА. Вы должны указать вашему элементу атрибут <code>target</code> и установить
## Instructions
<section id="instructions">
</section>
## Tests
<section id='tests'>
```yml
tests: []
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>