Домашняя работа №4: вёрстка

В этом задании нужно сверстать весь этот текст так, чтобы он выглядел примерно как на этой картинке:

В свёрстанном тексте из списка требований ниже необходимо оставить только те пункты, которые выполняются для вашего решения.

Кроме того, в свёрстанном тексте задания должна быть вот такая кнопка: Нажми меня!, по нажатию на которую должно показаться всплывающее окно с копией этого текста (не браузерное окно, а реализованное средствами вёрстки), но с тем отличием, что вместо выполненных пунктов там должны будут оказаться не выполненные. Если же выполненны будут все, то можно придумать что было бы ещё здорово реализовать в рамках этого задания и не выполнять их.

В этом задании довольно много опциональных моментов — вёрстка и оживление всплывающих окон при помощи JS может быть очень объёмной задачей, так что выбирайте то, что хочется реализовать самостоятельно.

Требования

Обязательно

1. Сверстать текст так, чтобы результат был похож на картинку выше.
2. Сделать появляющийся по нажатию на кнопку всплывающее окно с копией текста.
3. Правильно распределить выполненные требования в основном тексте и внутри всплывающего окна.
4. Всплывающее окно должно закрываться по нажатию на крестик в его углу.

Опционально

• Максимальная ширина колонки с текстом — как на макете, на более узких ширинах окна браузера ширина колонки должна уменьшаться.
• Если для каких-то элементов на маленьком экране начинает не хватать места, они должны перескакивать на отдельную строку.
• Содержимое всплывающего окна всегда должно быть доступно, даже на маленьких экранах.
• Для всплывающего окна можно сделать альтрернативную цветовую схему, например, инвертировать все цвета.
• Можно сделать рекурсивное открытие всплывающих окон (то есть в сплывающем окне будет такая же кнопка, вызывающая такое же окно, и т.д.).
• Если сделать два предыдущих пункта, то у вложенных окон цветовые гаммы можно сделать чередующимися.
• Можно попробовать реализовать всё задание без использования JS, только на HTML и CSS.

---

Эту часть текста можно в задании не верстать

Для выполнения задания достаточно форкнуть этот репозиторий и создать в его корне файл index.html (и прилинкованные сопутствующие). Так как в репозитории единственная и основная ветка — gh-pages, то при пуше кода в него он автоматически станет доступен в вебе, по адресу вида https://username.github.io/part-1-task-4/.

После того, как задание будет готово — присылайте Pull Request с вашей версией, в описании которого дайте сразу ссылку на просмотр задания.