Задание:
Создать современный лендинг в стиле стимпанк для продажи товаров/атрибутики: адаптивность под все устройства, SEO-оптимизация, каталог с вариациями товаров, корзина и оформление заказа в Telegram с автозаполнением.
Что сделано (по факту реализации в данном проекте):
Полная верстка HTML/CSS/JS без посторонних библиотек (vanilla JS).
Стимпанк-стилизация: палитра латуни/патики, текстуры/тени, декоративные элементы.
HERO-блок с анимированными шестернями (SVG):
Зубцы (геометрия зубов, центральная ось), опционные градиенты и вращение в CSS.
Каталог с демо-наименованиями: карты с картинкой, ценой, бейджем, селекторами опций (цвет/размер/материал) и счетчиком количества.
Корзина (drawer): добавление/удаление товаров, изменение количества, результат; состояние сохраняется в localStorage; счетчик в шапке.
Оформление в Telegram: кнопка формирует структурированный текст заказа (позиции, вариации, количество, сумма) и открывает чат t.me/ с предварительно заполненным сообщением.
SEO и семантика:
мета-теги (title, description, Open Graph, Twitter Card);
JSON-LD для WebSite/Organization;
микроразметка Product/Offer в карточках;
корректные заголовки/навигация; canonical.
Производительность и UX:
responsive grid (mobile-first), lazy-loading изображений;
ARIA-атрибуты, класс visually-hidden;
форматирование валюты Intl.NumberFormat('uk-UA', 'UAH');
липкая шапка, плавные суслики, тени, компактный JS.
Технологии: HTML5, CSS3 (Flex/Grid), JavaScript (ES6), SVG, Schema.org (JSON-LD), Open Graph.
Результат для бизнеса:
Легкий и быстрый лендинг с удобным каталожным UX и минимальным трением при заказе: клиент формирует корзину и одним нажатием отправляет заказ в Telegram. Дизайн подчеркивает тематику стимпанк, а SEO-основа готова к индексации.
*Данная работа доступна к покупке, а также возможный индивидуальный заказ под ваши потребности и с вашим стилем.
Создать современный лендинг в стиле стимпанк для продажи товаров/атрибутики: адаптивность под все устройства, SEO-оптимизация, каталог с вариациями товаров, корзина и оформление заказа в Telegram с автозаполнением.
Что сделано (по факту реализации в данном проекте):
Полная верстка HTML/CSS/JS без посторонних библиотек (vanilla JS).
Стимпанк-стилизация: палитра латуни/патики, текстуры/тени, декоративные элементы.
HERO-блок с анимированными шестернями (SVG):
Зубцы (геометрия зубов, центральная ось), опционные градиенты и вращение в CSS.
Каталог с демо-наименованиями: карты с картинкой, ценой, бейджем, селекторами опций (цвет/размер/материал) и счетчиком количества.
Корзина (drawer): добавление/удаление товаров, изменение количества, результат; состояние сохраняется в localStorage; счетчик в шапке.
Оформление в Telegram: кнопка формирует структурированный текст заказа (позиции, вариации, количество, сумма) и открывает чат t.me/ с предварительно заполненным сообщением.
SEO и семантика:
мета-теги (title, description, Open Graph, Twitter Card);
JSON-LD для WebSite/Organization;
микроразметка Product/Offer в карточках;
корректные заголовки/навигация; canonical.
Производительность и UX:
responsive grid (mobile-first), lazy-loading изображений;
ARIA-атрибуты, класс visually-hidden;
форматирование валюты Intl.NumberFormat('uk-UA', 'UAH');
липкая шапка, плавные суслики, тени, компактный JS.
Технологии: HTML5, CSS3 (Flex/Grid), JavaScript (ES6), SVG, Schema.org (JSON-LD), Open Graph.
Результат для бизнеса:
Легкий и быстрый лендинг с удобным каталожным UX и минимальным трением при заказе: клиент формирует корзину и одним нажатием отправляет заказ в Telegram. Дизайн подчеркивает тематику стимпанк, а SEO-основа готова к индексации.
*Данная работа доступна к покупке, а также возможный индивидуальный заказ под ваши потребности и с вашим стилем.