Привет! Давно хотел сделать рубрику, где буду большое внимание уделять не целым страницам, а ее деталям. Так, как мне кажется, удобнее для восприятия и видно больше мелочей.
В связи с этим, сделал новую рубрику UI-компоненты, которая будет посвящена разным реализациям с различных сайтов, которые часто встречаются.
Здесь я буду стараться сделать универсальную верстку, чтоб данный компонент можно было внедрить на сайт без проблем. Также можно не беспокоиться и за сборщики/препроцессоры и прочие нюансы - здесь я пишу на чистых языках - html, css, js.
В первой части сделаем карточку товара для интернет-магазина, но не простую, а с несколькими изображениями. Такое сделано, например, на сайте ozon или auto.ru. Очень удобная тема с просмотров превьюшек.
Давайте же разбираться, как сделать такое :)
Содержание:
00:00 - Вступление
01:10 - Базовые стили и html-разметка
08:50 - Стилизация карточки
27:50 - js-реализация для картинок
39:39 - Заключение
github.com/maxdenaro/maxgraph... - стартовый шаблон для верстки
www.figma.com/file/28GCW0Pvfd... - макет в Figma
github.com/maxdenaro/maxgraph... - готовая верстка на GitHub
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#обучение #ui_компоненты #верстка
4 июн 2024
