В данном задании мы поработаем с flexbox и сделаем шапку для сайта.
Пример
### Релиз 0.У тебя уже есть два пустых файла 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.