UI-компоненты №1. Карточка товара с несколькими изображениями
Привет! Давно хотел сделать рубрику, где буду большое внимание уделять не целым страницам, а ее деталям. Так, как мне кажется, удобнее для восприятия и видно больше мелочей.
В связи с этим, сделал новую рубрику UI-компоненты, которая будет посвящена разным реализациям с различных сайтов, которые часто встречаются.
Здесь я буду стараться сделать универсальную верстку, чтоб данный компонент можно было внедрить на сайт без проблем. Также можно не беспокоиться и за сборщики/препроцессоры и прочие нюансы - здесь я пишу на чистых языках - html, css, js.
В первой части сделаем карточку товара для интернет-магазина, но не простую, а с несколькими изображениями. Такое сделано, например, на сайте ozon или . Очень удобная тема с просмотров превьюшек.
Давайте же разбираться, как сделать такое :)
Содержание:
00:00 - Вступление
01:10 - Базовые стили и html-разметка
08:50 - Стилизация карточки
27:50 - js-реализация для картинок
39:39 - Заключение
компоненты №0. Стартовый шаблон - стартовый шаблон для верстки
- макет в Figma
компоненты №1. Карточка товара с несколькими изображениями - готовая верстка на GitHub
Поддержать канал:
Сайт с макетами для верстки:
Мой блог:
Мой сайт:
Канал в телеграм:
Чат для верстальщиков:
Тема VS Code: One Monokai
Шрифт VS Code: Consolas, ’Courier New’, monospace
#maxgraph #ui_компоненты