Задание

Сверстать макет. Ваша задача - именно сверстать макет, без подключения динамических элементов.

Технические требования к верстке:

• Нужно сделать верстку только под широкоформатные мониторы, с шириной экрана 1200 пикселей или более (то есть ширина контента фиксированная в пикселях). Максимальная ширина контейнера с контентом - 1160 пикселей (кроме второго блока с квадратами).
• Фоновое изображение в шапке должно занимать всю доступную ширину экрана и не двигаться при скролле вниз.
• Адаптивная верстка под разные разрешения экрана НЕ требуется.
• Карточки в секции Breaking news должны быть кликабельными ссылками.
• Верстка должна быть выполнена без использования CSS библиотек типа Bootstrap или Materialize.
• Сверстать Секцию Gallery of best images с помощью Flexbox или Grid;
• Секцию What People Say About theHam верстать не нужно
• Добавить плавный переход всех эффектов, которые происходят по наведению мыши
• Добавить анимацию перед кнопками Load more. Нужно просто добавить элемент-индикатор загрузки. Показывать-прятать - уже при подключении динамических элементов.
• Сверстать Accept cookies баннер. Баннер должен быть фиксированным внизу экрана и не двигаться при скролле. Занимать всю ширину экрана, и процентов 10 высоты экрана. По тексту должен быть текст о том, что Вы согласны на хранение cookies. Походите по сайтам и посмотрите, что на таких баннерах пишут (они есть практически на каждом современном сайте). У баннера должны быть стили, подходящие под общую стилистику сайта. Стили на усмотрение разработчика, но они должны вписываться.
• Добавить кнопку Scroll to top. Она должна быть фиксированной в нижнем правом углу экрана. По клику на нее будет происходить скролл в начало экрана (нужно будет реализовать потом).

Для удобства все картинки с макета размещены в архиве.

Динамические элементы на странице:

• Вкладки в секции Our services должны переключаться при нажатии мышью. Текст и картинки для других вкладок вставить любые.
• Кнопка Load more в секции Our amazing work имитирует подгрузку с сервера новых картинок. При ее нажатии в секции снизу должно добавиться еще 12 картинок (изображения можно взять любые). После этого кнопка исчезает.
• Кнопки на вкладке Our amazing work являются "фильтрами продукции". Предварительно каждой из картинок нужно присвоить одну из четырех категорий, на ваше усмотрение (на макете это Graphic design, Web design, Landing pages, Wordpress). При нажатии на кнопку категории необходимо показать только те картинки, которые относятся к данной категории. All показывает картинки из всех категорий. Категории можно переименовать, картинки для категорий взять любые.
• Карусель на вкладке What people say about theHam должна быть рабочей, по клику как на иконку фотографии внизу, так и на стрелки вправо-влево. В карусели должна меняться как картинка, так и текст. Карусель обязательно должна быть с анимацией.
• Для подключения динамических элементов можно использовать любые библиотеки - как jQuery/его плагины, так и чистый Javascript код.

Не обязательные задания продвинутой сложности:

• Кнопку Load more в секции Our amazing work можно нажать два раза, каждое нажатие добавляет 12 картинок снизу. То есть максимум в этой секции может быть расположено 36 картинок. После второго нажатия кнопка исчезает.

• Сверстать также секцию Gallery of best images, расположить картинки внутри блока с помощью плагина Masonry.

• Кнопка Load more в секции Gallery of best images также должна быть рабочей и добавлять порцию новых картинок на страницу.

• При клике на каждую из кнопок Load more имитировать загрузку картинок с сервера. Показывать вместо кнопки или над ней две секунды CSS анимацию загрузки (можно написать самому или взять любой пример из интернета, например здесь или здесь), и только после этого добавлять картинки на страницу.

• Разместить проект в интернете с помощью Github pages или Gitlab pages (не забудьте потом добавить ссылку в резюме).

• Добавить возможность переключения другой темы. Как вариант - изменить салатовый цвет - на красный. Реализовать с помощью css-переменных. (https://habr.com/ru/post/466587/) Для удобства все картинки с макета размещены в архиве.

Удачи!