Дмитрий Гапонов › Nautisss
Сайты руками, боты и парсеры на Python, чертежи в AutoCAD
Рейтинг
5 442
№ 268 в каталоге
Отзывы
Профессионализм
10/10
Коммуникация
10 /10
На сайте с
2025 года
Юридический статус
Самозанятый

Интернет-магазин аквариумистики «Тихий Риф»: шесть страниц, каталог, карточка товара и доставка живого товара

Описание

Нужен был не одностраничник-витрина, а полноценный магазин: главная, каталог с фильтрами, карточка товара, раздел про уход и запуск аквариума, доставка и контакты. Отдельная сложность в том, что товар живой. Покупатель до оплаты хочет понять, как рыбу довезут и что будет, если она погибнет в дороге, поэтому текст и структура должны снимать этот страх раньше, чем человек дойдёт до корзины.

Решение

Собрал шесть связанных страниц на чистых HTML, CSS и JS, без конструктора и без фреймворка, чтобы сайт грузился быстро и его можно было положить на любой хостинг. Палитру взял холодную, глубокая бирюза на молочном фоне, акцент коралловый: тёплые оттенки рядом с фотографиями воды выглядят грязно.

Главный экран сделал живым. Поверх фонового кадра лежит canvas, который рисует саму фотографию и преломляет её по поверхности воды: волна идёт за курсором, клик даёт всплеск, сверху плавает стайка рыб семи видов, и течение от волны сносит и рыб, и пузыри. Без JS страница не разваливается, кадр остаётся обычным фоном в CSS.

Каталог и карточку собрал так, чтобы цену, объём и условия доставки было видно без прокрутки. Раздел про запуск аквариума написал по шагам, с честным сроком в четыре недели и списком того, что нужно купить до рыбы.

Результат

Получился магазин, который одинаково читается на телефоне и на широком мониторе. Анимация воды останавливается, когда экран не виден или вкладка ушла в фон, а при системной настройке «меньше движения» рисуется один статичный кадр. Фоновый кадр героя весит 24 КБ при размере 1600 на 900, поэтому первый экран появляется сразу.

Оценили проект:

Другие проекты

Все проекты →
Дизайн и Брендинг Флаер А5 и буклет из сложенного А4 для сети автосервисов - что делать сразу после аварии
Флаер А5 и буклет из сложенного А4 для сети автосервисов - что делать сразу после аварии
11
Веб-разработка и IT Магазин электроники на 800 тысяч товаров - товарные фиды, фильтр по характеристикам, ускорение
Магазин электроники на 800 тысяч товаров - товарные фиды, фильтр по характеристикам, ускорение
5
Веб-разработка и IT Сводный отчёт по доставляемости писем на 400 доменов в Google Таблице - собирается сам каждое утро
Сводный отчёт по доставляемости писем на 400 доменов в Google Таблице - собирается сам каждое утро
9
Веб-разработка и IT Лендинг кухонь на заказ с квизом-расчётом: человек отвечает на пять вопросов и получает смету до замера
Лендинг кухонь на заказ с квизом-расчётом: человек отвечает на пять вопросов и получает смету до замера
8