Презентация ССР

1.

Главная страница - Структура и навигация
Техническая реализация:
Семантическая верстка: Использован HTML5 с четкой структурой header/main/footer
Адаптивная навигация:
Desktop-меню на Flexbox
Burger-меню для мобильных устройств с JavaScript-контролем
Плавные анимации открытия/закрытия
Поисковая строка: Кастомный input с иконкой поиска
Корзина: Иконка с ссылкой на страницу корзины
Ключевые технологии: HTML5, CSS3 (Flexbox), JavaScript (бургер-меню), Google Fonts (Inter + Great Vibes)

2.

3.

Блок "About Us" с галереей изображений
Техническая реализация:
Flexbox layout: Горизонтальное расположение текста и изображений
Сложная галерея: Композиция из 3 изображений с разными размерами
Список преимуществ: Иконки галочки через псевдоэлементы
Адаптивность: На мобильных переходит в вертикальную компоновку
Ключевые технологии: Flexbox, относительные единицы измерения

4.

5.

Карусель товаров (Food Category)
Техническая реализация:
Кастомный слайдер на чистом JavaScript:
Бесконечная прокрутка
Автоплей с паузой при наведении
Адаптивное количество видимых слайдов (4 на desktop, 2 на mobile)
CSS Transitions: Плавные анимации переключения
Декоративные элементы: Фоновая картинка с петрушкой
Ключевые технологии: JavaScript (карусель), CSS Transforms, Event Listeners

6.

7.

Секция "Why Choose Us" с мозаикой
изображений
Техническая реализация:
Сложная сетка изображений: Комбинация Flexbox и вложенных контейнеров
Карточки услуг: Иконки на оранжевом фоне с текстом
Ключевые технологии: CSS Flexbox, псевдоэлементы

8.

9.

Секция с статистикой
Техническая реализация:
Flex сетка для расположения элементов
Изображение и текст
Ключевые технологии: CSS Flexbox

10.

11.

Меню с фильтрацией по категориям
Техническая реализация:
Двухколоночный layout: Изображение блюда + детали
Ценовые карточки: Структура с изображением, названием, описанием и ценой
Акцентный цвет: Выделение выбранной категории
Ключевые технологии: CSS-селекторы, состояние active/hover

12.

13.

Команда шеф-поваров
Техническая реализация:
display: flex: Равномерное распределение карточек команды
Декоративный фон: Абсолютно позиционированное изображение
Кнопка "See More": Стилизованная кнопка с рамкой
Ключевые технологии: Flexbox, абсолютное позиционирование

14.

15.

Секция отзывов
Техническая реализация:
Центральная композиция: Аватар, цитата, звезды рейтинга
Декоративные элементы: Иконки кавычек, фоновые узоры
Типография: Различные размеры шрифтов для иерархии
Ключевые технологии: CSS positioning, z-index для наложения
элементов

16.

17.

Секция "Restaurant Active Process"
Техническая реализация:
Фоновое изображение: С затемнением для лучшей читаемости текста
Двойная кнопка: Комбинация текстовой кнопки и кнопки с иконкой
Выравнивание по правому краю: Нетипичное расположение контента
Ключевые технологии: CSS background-image, linear-gradient overlay

18.

19.

Блог с карточками постов
Техническая реализация:
CSS Flex для карточек: Равномерное распределение по 3 колонки
Карточки постов: Изображение, дата, заголовок, социальные иконки
Ключевые технологии: CSS Flex

20.

21.

Футер (подвал сайта)
Техническая реализация:
Техническая реализация:
Flexbox layout: Распределение текста и формы
Многоколоночный layout: 4 колонки на
Flexbox
Кастомная форма: Input + button с контрастными цветами
Разные типы контента: Текст, ссылки,
карточки постов
Разделительная линия: Декоративный элемент снизу
Социальные иконки: SVG-изображения
Ключевые технологии: Flexbox, кастомные стили формы
Копирайт: Отдельная секция с фоном
Ключевые технологии: Flexbox,
семантические HTML-теги

22.

23.

Страница магазина - фильтрация и сортировка
Техническая реализация:
JavaScript фильтрация: Динамическое отображение товаров по выбранным категориям
Кастомные селекты: Стилизованные dropdown-меню
Range-слайдер: Фильтр по цене с двумя ползунками
Пагинация: Интерактивная навигация по страницам
Ключевые технологии: JavaScript (фильтрация), CSS-стилизация форм

24.

25.

26.

27.

28.

29.

Интересные фишки
Все кнопки и все ссылки стилизованы псевдоклассами:
:hover
:active
При наведении/нажатии на кнопку или ссылку элемент меняет
свой цвет или background-color

30.

Адаптив страниц
Для двух страниц я сделал
адаптив под разные
разрешения

31.

Слайдер
Для блока Food Category я сделал
слайдер, который автоматически
прокручивает на одну карточку с
картинкой раз в одну секунду, а так
же есть кнопки позволяющие самому
перелистывать слайдер.

32.

Сортировка
Для второй страницы я сделал сортировку
товаров по типу товара

33.

Пагинация
Сделал пагинацию для скрола страниц

34.

Pixel Perfect
Так же все выполнял в точности с макетом

35.

Трудности
Трудности возникали в основном с макетом, потому что некоторые
решения дизайнера были не совсем понятны, но все же находились
способы повторить дизайн с помощью верстки.
Так же трудности были в понимаю div структуры(всей структуры), но
благодаря этому проекту я стал лучше понимать структуру
элементов в общем.
Спасибо за помощь при создании проекта :)