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_компоненты
Back to Top