Заказчик — сервис get-stock.org, который позволяет скачивать изображения с Shutterstock дешевле, чем напрямую.
Что нужно было сверстать:
Мне прислали макеты всех ключевых страниц:
- Главная с формой ввода ссылки или ID изображения
- Личный кабинет (баланс, история заказов, личные данные)
- Партнёрская программа (рефералы, статистика по дням и месяцам, условия)
- Страница скачивания с описанием изображения
- Формы регистрации/авторизации (по скринам видно)
Задача: Сверстать чистый, адаптивный сайт, подготовить к натяжке на бэкенд (логика покупки, баланса, рефералов уже шла от заказчика).
Я взял все макеты (главная, личный кабинет, партнёрка, история заказов, страница изображения) и сверстал их с нуля.
Что сделал:
Полностью свёрстал главную страницу с формой ввода ссылки или ID изображения с Shutterstock, блоком «Как это работает?».
Свёрстал личный кабинет со всеми вкладками:
Баланс (отображается 0.00$ или 0.005)
История заказов (список ID изображений, даты, кнопка скачивания архива)
Личные данные (e-mail, фамилия/имя, телефон, реферальная ссылка, кнопка «Изменить пароль»)
Партнёрская программа (заработано средств, количество рефералов, таблица по дням и месяцам, реферальная ссылка, условия 15% от пополнений, вывод от 50 USD на Яндекс.Деньги или карту)
Свёрстал страницу скачивания с превью изображения, описанием и предупреждением: «Get-stock.org предоставляет изображения в ознакомительных целях. Сервис не предоставляет лицензий на использование». Кнопка «Скачать» появляется после регистрации/авторизации.
Сделал адаптив — все страницы корректно отображаются на телефонах, планшетах и десктопах.
Настроил все состояния интерфейса по дизайну:
Сообщения: «Изображения успешно куплены», «На вашем счету недостаточно средств», «Пароли не совпадают», «Корзина пуста», «Добавлено», «Сохранено», «Скопировано».
Прелоадер: «Идет покупка изображений, пожалуйста подождите...»
Подготовил вёрстку к натяжке на PHP/бэкенд — все блоки вынесены логически, формы имеют правильные атрибуты, данные подставляются через переменные.
Сайт свёрстан полностью — главная, личный кабинет (баланс, история заказов, личные данные, партнёрка), страница скачивания.
Адаптив работает на всех устройствах — никаких развалов.
Все сообщения и состояния (успех, ошибка, загрузка) реализованы строго по макету.
Вёрстка чистая, без нейросетевого мусора — подходит для дальнейшей разработки.
Сайт запущен и работает по адресу get-stock.org — заказчик получил готовый продукт.
Пользователи могут регистрироваться, пополнять баланс, скачивать изображения с Shutterstock через сервис.
Пожаловаться
