https://github.com/bagmang/sneakers-landing

Sneakers - современный интернет-магазин стильных кроссовок премиум-класса. Проект представляет собой одностраничное приложение (SPA) с акцентом на визуальную привлекательность и пользовательский опыт.
https://github.com/bagmang/sneakers-landing

bootstrap-css-framework bootstrap5 css frontend html js portfolio shop sneakers

Last synced: 11 months ago
JSON representation

Sneakers - современный интернет-магазин стильных кроссовок премиум-класса. Проект представляет собой одностраничное приложение (SPA) с акцентом на визуальную привлекательность и пользовательский опыт.

• Host: GitHub
• URL: https://github.com/bagmang/sneakers-landing
• Owner: BagmanG
• License: mit
• Created: 2025-06-30T21:27:50.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-06-30T21:30:09.000Z (12 months ago)
• Last Synced: 2025-06-30T22:29:44.688Z (12 months ago)
• Topics: bootstrap-css-framework, bootstrap5, css, frontend, html, js, portfolio, shop, sneakers
• Language: HTML
• Homepage:
• Size: 453 KB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# The Sneakers - Интернет-магазин кроссовок

![Главная](docs/img0.jpg)

## Описание проекта

The Sneakers - это современный интернет-магазин стильных кроссовок премиум-класса. Сайт предлагает удобный интерфейс для просмотра каталога, информации о компании и контактных данных. Основные особенности:

- Адаптивный дизайн для всех устройств

- Интерактивные элементы с анимациями

- Секции с популярными товарами, отзывами и статистикой

- Контактная форма и информация о компании

## Технологии

![О нас](docs/img1.jpg)

### Основные технологии:

- **HTML5** - семантическая разметка страницы

- **CSS3** - стилизация с использованием кастомных свойств (CSS Variables), анимаций и эффектов hover

- **Bootstrap 5** - адаптивная сетка и компоненты

- **Font Awesome 6** - иконки для UI элементов

### Особенности реализации:

![Популярные модели](docs/img2.jpg)

1. **Анимации и эффекты**:

   - Плавные переходы при наведении (hover-эффекты)

   - Анимация "плавающих" кроссовок в геро-секции

   - Анимация появления карточек при скролле

   - Анимация счетчиков статистики с использованием Intersection Observer API

2. **Адаптивность**:

   - Полностью отзывчивый дизайн с медиазапросами

   - Оптимизация для мобильных устройств

   - Гибкая сетка Bootstrap

3. **Оптимизация**:

   - Ленивая загрузка изображений (lazy loading)

   - Оптимизированные CSS-анимации

   - Минимизация перерисовок DOM

4. **Интерактивность**:

   - Плавная прокрутка к секциям

   - Кнопка "Наверх"

   - Интерактивные карточки товаров

![О Компании](docs/img3.jpg)

## Структура проекта

- Главная страница с hero-секцией

- Секция статистики с анимированными счетчиками

- Секция преимуществ с иконками

- Каталог популярных товаров

- Информация о компании

- Секция отзывов

- Контактная информация

- Футер с навигацией и подпиской

![Отзывы клиентов](docs/img4.jpg)

## Установка и запуск

Проект не требует серверной части и может быть запущен непосредственно в браузере:

1. Склонируйте репозиторий

2. Откройте файл `index.html` в браузере

![Контакты](docs/img5.jpg)

## Особенности дизайна

- Современный минималистичный дизайн

- Градиентные акценты

- Контрастные цветовые сочетания

- Четкая типографика (шрифт Poppins)

- Визуальная иерархия элементов

## Возможные улучшения

- Добавление функционала корзины

- Реализация фильтрации товаров

- Интеграция с платежной системой

- Добавление системы рейтинга товаров

- Реализация блога о новинках кроссовок

![Футер](docs/img6.jpg)