Адаптив: Настільний / Планшет / Мобільний

Це базовий макет сайту фотографа. Зроблена плавна анімація, підказуючі спливаючі елементи, що фокусують увагу на на головних деталях. Чорний мінімалістичний дизайн сайту дає можливість зосередитися на фото та проникнути в суть.

Цей сайт є портфоліо фотографа та та відеооператора під назвою Aperture Studios.

Головна сторінка сайту містить інформацію про фотографа та відеооператора, а також опис робіт.

У шапці сайту є меню, яке дозволяє переходити до різних розділів, наприклад як «Сфери діяльності», «Вибрані зображення», «Спорядження», «Контакт».

Сайт також пропонує можливість завантажити шаблон.

У розділі «Що ми робимо» представлені сфери, в яких спеціалізуються фотограф і відеооператор, наприклад, фотографія продуктів, фотографія архітектури, фотографія дроном і фотографія дикої природи.

На сайті також є розділи з фотодемонстраціями, інформацією про обладнання, що використовується, інформацією про минулих клієнтів, можливістю зв'язатися з фотографом та відеооператором.

У фундаменті сайту розміщено логотип, навігаційні посилання, форму підписки на розсилку, інформацію про автора сайту.

JavaScript
Скрипт містить кілька функцій, які виконують різні дії при прокручуванні сторінки і зміні розмірів вікна браузера.

Функція «Header bg parallax» відповідає за створення ефекту паралакса для фону заголовка. Він вибирає всі елементи з класом "main-container__bg" та під час прокручування сторінки змінює їх фонове положення в залежності від швидкості, зазначеної в атрибуті "data-speed".

Функція "Header on top" відповідає за зміну положення заголовка при прокручуванні сторінки. Якщо прокрутка досягає або перевищує 100 пікселів, заголовок переміщується вгору, а анімація вимикається. Якщо прокрутка менше 100 пікселів, заголовок повертається на стартове положення та анімація вмикається. Це відбувається лише тоді, коли ширина екрана перевищує 768 пікселів.

Функція "AOS OFF MOBILE" відповідає за вимкнення німування на мобільних пристроях. Вона виділяє всі елементи з атрибутом "data-aos" і при зміні розміру вікна браузера прибирає цей атрибут для елементів з шириною екрана менше або дорівнює 768 пікселів. Коли ширина екрану перевищує 768 пікселів, атрибути "data-aos", "data-aos-offset" і "data-aos-easing" відновлюються для елементів. Таким чином, цей скрипт використовується для створення ефекту паралакса для фону заголовка, зміни положення заголовка при прокручуванні і вимкнення анімації на мобільних пристроях.