44 lines
5.2 KiB
Markdown
44 lines
5.2 KiB
Markdown
|
---
|
|||
|
|
id: bd7158d8c442eddfaeb5bd18
|
|||
|
|
title: Створіть пам'ятну сторінку
|
|||
|
|
challengeType: 3
|
|||
|
|
forumTopicId: 301147
|
|||
|
|
dashedName: build-a-tribute-page
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
**Завдання:** Створіть [CodePen.io](https://codepen.io) застосунок, який схожий за функціями на:<https://codepen.io/freeCodeCamp/full/zNqgVx>.
|
|||
|
|
|
|||
|
|
Нижче заповніть [ історії користувачів ](https://en.wikipedia.org/wiki/User_story) і отримайте доступ до тестів, котрі потрібно пройти. Виконайте завдання у власному стилі.
|
|||
|
|
|
|||
|
|
Ви можете використати HTML, JavaScript, and CSS для завершення цього проєкту. Рекомендується використовувати звичайну CSS, тому що саме цю мову ви розглядали на уроках раніше і вам потрібно більше попрактикуватися. Якщо ви оберете Bootstrap або SASS, то можете користуватися ними. Не бажано використовувати додаткові технології (наприклад: jQuery, React, Angular або Vue), в іншому разі, це лише під вашу власну відповідальність. Під час роботи над іншими проєктами ви зможете попрацювати з різними технологічними стеками, як-от React. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Вдалого програмування!
|
|||
|
|
|
|||
|
|
** Історія користувача #1:** Моя пам'ятна сторінка повинна містити елемент з відповідним `id="main"`, котрий містить усі інші елементи.
|
|||
|
|
|
|||
|
|
** Історія користувача #2: ** Мені потрібно бачити елемент з відповідним `id="title"`, котрий містить рядок (наприклад текст) і описує тему пам'ятної сторінки. (наприклад "Лікар Норман Борлау").
|
|||
|
|
|
|||
|
|
** Історія користувача #3:** Мені потрібно бачити або `figure`, або `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` повинен знаходитись у центрі в межах його початкового елементу.
|
|||
|
|
|
|||
|
|
Ви можете створити проєкт за допомогою <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> й натиснути `Save` для створення власного фрагмента. Або ж ви можете скористатися цим CDN посиланням для проходження тестів у будь-якому комфортному для вас середовищі:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
|||
|
|
|
|||
|
|
Після того як ви завершили, прикріпіть URL до вашому проєкту, над яким ви працюєте, з усіма пройденими тестами.
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
// solution required
|
|||
|
|
```
|