/positioning

positioning task

Primary LanguageHTML

В этом задании нужно будет сверстать много всяких маленьких штук.

  1. В директории designs есть файлы разных логотипов, их названия начинаются с logo. Выбери из них 2 и сверстай их так, чтобы каждый из них вписывался в квадрат со стороной 100px. Верстать в файле index.html, стили писать в styles.css.

Для выполнения этого задания могут оказаться полезными свойства:

  1. Сверстай модальное окно (еще его называют лайтбокс).

Пример модального окна находится в директории designs в файле lightbox.jpg. Модальное окно должно быть таким:

  • у него должна быть фиксированная ширина (можешь выбрать сам, например, 640px — хороший размер),
  • высота должна подстраиваться под контент,
  • размещаться должно ровно посередине экрана,
  • под окном и над контентом страницы должен располагаться оверлей — затемненный полупрозрачный фон,
  • справа сверху в модальном окне должна быть кнопка с крестиком закрытия.
  1. Сверстай прогресс-бар.

Пример находится в директории designs, файл progress.jpg. Размести его в модальном окне.

Прогресс бар должен быть таким:

  • основной цвет прогресс-бара — серый (какой угодно серый), а цвет, показывающий прогресс — красный,
  • по центру должна быть надпись, например, "Loading...",
  • буквы надписи, которые на сером фоне, должны быть написаны черным, а те буквы, которые на красном фоне должны быть белыми.
  1. Оживи прогресс-бар при помощи js.

В файле index.js напиши скрипт, который будет заполнять в течении трех секунд этот прогресс-бар.

Для выбора элемента на странице используй метод document.querySelector(), в который можно передать любой селектор, такой же, как в CSS. Для изменения стилей у выбранного элемента, воспользуйся полем style у элемента, в котором можно описать новые стили. Пример использования обоих методов есть в файле index.js.

В течении трех секунд прогресс бар должен постепенно закрашиваться, переходя из состояния 0% красного цвета в состояние 100% красного цвета. Реши самостоятельно сколько нужно сделать кадров, чтобы это было плавно.

  1. * Сделай в модальном окне раскрывающиеся блоки, которые называются "аккордеон".

Это несколько блоков, при нажатии на которые открывается дополнительный блок с текстом.

Пример находится в файле designs/accordeon.png.

Сделай не меньше трех блоков, тексты для них можешь генерировать, например, на Яндекс.Рефератах.

Сделай так, чтобы открытие этих блоков работало без js. Только при помощи CSS.

Подсказка: для этого пригодится вот этот псевдокласс: :checked