Интернет-магазин аквариумистики на шесть страниц с каталогом и карточкой товара

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

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

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

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

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