HTML & CSS практика | Карточка товара
Vložit
- čas přidán 13. 03. 2021
- Дружище, я помог тебе? Подари мне кофе ➡☕ yoomoney.ru/to/4100118065342340
Как сверстать карточку товара? - вот так, к примеру :)
Простое использование HTML с CSS. Помимо этого, мы будем использовать иконки. В конце видео рекомендую потом самим поиграться с этим, и преобразить вид карточки.
❗ Шаблон для старта из видео: github.com/avis-academy/pract...
Иконки, которые использовали: ionicons.com/
Не понял какой-то CSS свойство? - ищи его в справочнике и читай о нём: webref.ru/css
========================================
avis-agency.ru - создание сайтов под ключ
rah-emil.ru - мой сайт и соц. сети
ТЫ ПРОСТО ЛУЧШИЙ!!!
ОГРОМНАЯ БЛАГОДАРНОСТЬ ЗА СТАРАНИЯ!!!!
Спасибо тебе, за такие понятные уроки
Привет, вот ты 2 года назад смотрел видосы о том как делать карточки товаров, если не секрет за эти 2 года много чего нового изучил?
Супер видос! И с юмором)))
Первый урок, который был полезен по карточкам из магазина, а с иконками, ты ловко придумал
посмотрел твоё видео первый раз. и решил пересмотреть второй раз но + ещё повторить весь код у себя.
это очень полезный канал, респект тебе
А как добиться адаптива с конкретно заданными значениями высоты и ширины ?
спасибо тебе, но у меня проблема когда я копирую и вставляю новую карточку то она появляется внизу а не сбоку что делать.
а где посмотреть стили contaner, row, col-md-4?
Привет интересный урок! и приятный голос, го еще видео как сделать админ панель под магазины
После дизайна, кнопка стала не кликабельна, подскажите пожалуйста что делать
а как сделать чтобы по нажатию кнопки корзины выходила вся инфа о товаре , характеристики и тд ?
До просмотра твоего видео, у меня было конченное настроение. Но ты мне его вырав.. выров.. бл.ТЬ!. вырва... вырыва... * уф*
Настроение стало на порядок лучше. Спасибо, автор:)
подскажите, как поставить цену вверх, а то она стоит справа напротив скидки и обычная
смотрю твой каждый ролик ты топ жалко так мало полписчиков
Такой вопросЮу меня почему-то не работают кнопки на картинках почему ето может быть?
Привет круто делаешь не мог подсказать как сделать на проекте так что если пользователь загружает музыку на мой сайт чтобы сайт проверил зарегистрирован пользователь или нет?
спасибо огромное)
Капец, спасибо за урок!
Реально помогло, хоть и помучалась с "карточки не в линию". Как оказалось, вся проблема была в хештеге div, который закрывал первую карточку после второй. В общем, горе невнимательность х)
@@AVISTV Ещё мнёго мнёго верстки) .
@@AVISTV хочу идей узнать по больше) и это хочу на гридах сделать и ) найти способ манипулировать с помощью js в моём) фреимворке на php+js+html. оказывается html очень большой помошник для js. )
@@AVISTV наконец-то есть место где можно использовать иконочки, потому что много платных сделали
у меня между заголовком и рейтингом отступ откуда то берётся, хотя я вроде margin-bottom 0; указывал у заголовка
А как потом добавить фон не касаясь шапки?
как сделать так, чтобы все блоки стояли в ряд, а не в колонку?
у меня на верху слайд и я не понимаю как разместить их по ниже
Ну что это за гений!!
спасибо
очень помог
прикольно, запишу на будущее
почему у меня какая-то точка вместо знака корзины?
здравствуйте, а можно использовать этот способ для создания 10+ таких карточек товара или есть способ проще
@@AVISTV спасибо
Видео крутое , но вот не проще ли использовать опенкарт к примеру ?
Спасибо.
Эмодзи откуда вышло?
почему у тебя когда ты добавил их несколько штук то у тебя их было все 4 шт в ряд а остальное на новой строке, а у меня все в ряд
Музыка хороша!)
у меня проблема, карточки дублируются в низ, а не в бок
Не, ну действительно как сделать так, чтобы все блоки стояли в ряд, а не в колонку?
Сделай див, в котором будут все эти карточки. Потом добавь к этому диву стиль flex-wrap: wrap;
Этот стиль работает так:
Ечсли содержимое (карточки) выходит за рамки дива, то это содержимое переносится на новую строку
Если не понял, то можешь просто почитать про flex-wrap
а почему корзина переместилась в самый край правой стороны?
так как нужно указать ширину карточки , которую можно указать в классе product
Можно использовать space-around вместо space-between
Мне тоже зашло
Эх,жаль что не добавили анимацию на кнопку) Спасибо за полезное видео! Планируете ли видео про слайдер ?
@@AVISTV Пожелание ,про Swiper,а если еще и на мобильных устройствах будет работать))
@76nasX Начинающий,для меня пока не очень просто.
@76nasX Спасибо большое!Пока вот изучаю HTML CSS ,для меня это пока не просто ,в дальнейшем планирую начать изучать JS и посадку верстки на смс ,но это в будущем.
@@AVISTV можно вопрос, как сделать анимацию что бы по нажатию кнопки на корзину можно было переместиться в корзину, как например в гугл диске? Помогите пожалуйста)))
Если название товара будет на две строки,то измениться высота только одного элемента?тогда весь ряд будет кривой?
@@AVISTV что делать если не работают иконки?
Объясните мне пожалуйста момент с карточками в ряд, почему они у меня одним столбцом выходят
Да вроде все правильно
Поясните пожалуйста, зачем мы в начале создаём 3 div'а?
Я вообще не выкупаю, понятно только то, что после этого мы делаем обёртку ддя карточки и саму карточку.
И добавление к вопросу об блочности карточек. У меня .row стоит в нужном месте, писал код строго с видео, но почему-то все карточки идут столбцом
@@yanaslh у тебя опечатка) не col-mid-4, а col-md-4
А к вопросу о вложенности. Бывает, нам нужна ещё более глубокая вложенность. Сам я в начале своего пути тоже задавался этим вопросом. Не понимал зачем такая вложенность нужна.
Твой вопрос настолько хороший, что я на этой неделе сниму отдельное видео на эту тему) Ожидай
@@rah_emil Аа, понял, спасибо тебе огромное. Буду ждать видоса про вложенность
Прошу прощения, может и есть ответ на этот вопрос, но у проблема, когда прописываю команду justify-content:space-between; где info-price, у меня в линию не хочет встать, а только за пределы. Таймкод 9:14
у вас display: flex стоит?
Здравствуйте, вы смогли как-то решить эту проблему?
@@annnamerk возможно вместо flex flow: row nowrap, прописать: flex-direction: column, flex-wrap: nowrap
@@blchk07 К сожалению не помогло, но спасибо за ответ!
@@blchk07 В принципе оно сместилось, но сместилась также и цена.Теперь она сверху иконки с корзиной :(
помогите пожалуйста у меня карточки не встали в ряд а встали друг под другом
что делать
@@AVISTV У меня всё равно вниз идёт:(
Можешь как то помочь?
что делать если карточки стоят в столбик,а в сточку не встают,какую комнаду надо написать??
@@AVISTV спасибо большое
помогите пожалуйста у меня карточки не встали в ряд а встали друг под другом
что делать
но все они под дивом row
.col-md-4 {
display: inline-block;
}
Вставь в css
@@avaifia3760 не робит
У меня почему то все карточки не идут друг за другом, каждая переносится на след строку, как это решить?
@@AVISTV так у меня все карточки в классе .row
@@AVISTV я разобрался, спасибо
@@boostofbest2283 подскажи, пожалуйста, как решил проблему?)) если помнишь конечно
@@boostofbest2283подскажи как
Как поставил символ рубля?
₽
верстка классная но вот проблем будет js разработчику конечно когда он будет получать данные с сервера)
Автор, видео топ но есть момент. В вкладке дай пожалуйста ссылку которую картинку 300 на 400 ты вставлял scr
@@AVISTV Друг, я понимаю что суть не в ней, прикол в том что у меня иконку корзины отбрасывает в другую сторону страницы, я хоте решить проблему этой картинкой.
@@AVISTV Ну я так понимаю проблема не в этом
@AVISTV у меня проблема с отбрасыванием иконки корзины влево не фиксится, хотя написал как в видео, странно
Вот учусь но у меня они не в линию а в ряд уходят почему? Кто-нибудь помогите
@@AVISTV спасибо забыл сделать так
@@i_am__xyuloкак сделать
а почему я пишу rating li , но у меня не работает
хахах все нормально, я забыл подключить css
@@mr.gvolttic9642 такая жиза бро
Я не пойму, у тебя, бутстрап подключен что-ли?
@@AVISTV Ну ясно, не обратил внимание на ссылку...Но непонятно зачем подключать бутстрап, а не верстать на флексах..
@@AVISTV Так можно самому создать свой шаблон обнуления стилей типа reset, а нормалайз то херня конечно, но и бутстрап тот еще костыль, а привычка на то и есть чтобы от нее избавляться...Не в упрек, хозяин- барин..
И надо подключать платёжную систему в html
как решить вопрос с картинкой без object-fit? Ведь долбанный IE не в курсе что это такое :D
Нахрена тебе IE, все уже давно в Гуглятине работают, трудно установить что-ли?!
@@_Fantom_. Я где-то написал, что работаю в IE? Просто прочитай что такое кроссбраузерность.
@@denisk9194 Я знаю что такое кроссбраузерность, я не пойму нах IE тебе нужно, им уже никто не пользуется?
почему у меня карточки товара не в ряд
.col-md-4 {
display: inline-block;
}
Сделай так и будет работать. В гайде этого нету ну у него ебать как-то работает
спасибо
@@avaifia3760
Спасибо мне тоже помогло, но возникла другая проблема карточки товара уменьшились в размерах, как с этим быть
урок то крутой но я всё равно не понял как сделать карточки в линию. Если кто сможет обясните тупому
\
тупым*
я тож не врубился
Почему нельзя помедленнее все это показывать
А дальше что? параша
У меня корзина ушла в правый угол экрана. Я не могу понять почему?
Ваш урок мне не помог. Спасибо
@@AVISTV нет, Уважаемый, не указывал