Нужно было создать современный сайт для кофейни с функциональностью интернет-магазина. Требования: премиум дизайн, галерея товаров с фильтрацией, система корзины покупок, форма оформления заказа с валидацией, адаптивность для мобильных устройств и анимации при загрузке. Сайт должен работать без внешних фреймворков и быть быстрым.
Разработал полнофункциональный одностраничный сайт на чистом HTML5, CSS3 и vanilla JavaScript. Реализовал:
• Премиум дизайн с градиентами, анимациями (fade-in, smooth scroll) и красивой типографикой
• Адаптивную галерею товаров с фильтрацией по категориям (теги: ХИТ, НОВОЕ, ВЕГЕТАРИАНСКОЕ)
• Интерактивную корзину с расчётом цены в реальном времени и сохранением в localStorage
• Многошаговую форму оформления заказа с валидацией всех полей
• Мобильную навигацию с hamburger-меню и настраиваемой позицией кнопки
• Lightbox для галереи фотографий
• Responsive дизайн для всех устройств (375px — 1440px+)
Использовал CSS-переменные для управления цветовой палитрой, медиа-запросы для адаптивности и современные техники верстки (grid, flexbox, backdrop-filter).
Получился готовый к использованию сайт кофейни, который работает без внешних зависимостей и требует только интеграции с бэкендом для сохранения заказов. Особенности:
✓ Премиум визуал с палитрой Navy/Gold/Cream/Rust
✓ Полностью функциональная корзина и оформление заказа
✓ Галерея с фильтрацией и lightbox
✓ Мобильная адаптация с кастомизируемым меню
✓ Быстрая загрузка (всё в одном файле 1.9MB)
✓ Smooth анимации и modern UX
✓ Подходит для других ресторанов и e-commerce проектов
Сайт прошёл проверку на всех разрешениях и готов к деплою.