elenasergienko2023 / task_fe-css-flexbox-header-cinema Goto Github PK

В данном задании мы поработаем с flexbox и сделаем шапку для сайта.

Пример

У тебя уже есть два пустых файла index.html и style.css.

Ты также можешь найти изображения: logo.png - это надпись Кино и поиск и oscar.svg- значек осскара, play.svg - значек play, - внутри папки проекта.

В релизе 0 требуется добавить картинку баннера и несколько надписей. Подумай, какой задать position у картинки.

Подсказка: иногда одни элементы не видно из под других. Чтобы управлять тем, какие видны слои - есть свойство z-index: 0;. Элементы с большим z-index находятся поверх элементов с меньшим z-index. В конце релиза сделай commit.

Теперь следует использовать flexbox, подумай, какие свойства лучше подойдут. Все надписи навбара должны быть посередине в нижней части шапки.

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

В конце релиза сделай commit.

Постарайся добиться еще большего визуального сходства с оригиналом. Убери границы у поля инпут, закругли края. Добавь марджины и падинги элементам navbar.

Сделай ховер эффект, для того чтобы сделать элементы полупрозрачными, можно воспользоваться свойством opacity: 1; 1 - это полностью непрозрачный элемент, 0.8 - на 80% не прозрачный и т.д.

В конце релиза сделай commit, push и pull request.

Размести проект на pages github.