Тёмный

Вёрстка карточки товара для начинающих | Верстаем вместе 

EduCatter — Канал о Веб-Программировании
Просмотров 21 тыс.
50% 1

Привет, друг!
Это новая тематика на канале - Верстаем вместе, где ты точно так же можешь повторять за мной шаг за шагом каждое действие, чтобы набраться опыта и в будущем верстать все более сложные сайты!
Этим видеоуроком вы сможете закрепить полученные знания в недавнем уроке по Позиционированию - • #14 HTML & CSS С НУЛЯ ...
Все ссылки:
Ссылка на шаблон: www.figma.com/file/VwBpbYr1Va...
Ссылка на проект: drive.google.com/file/d/1wDG9...
Ссылка на шрифты: fonts.google.com/
Социальные сети:
Телеграм канал: t.me/educatter
Инстаграм: / banderrolo
ВК: banderolo
Нужен сайт? Переходи: www.catter.ru/
Поддержать канал:
boosty.to/educatter
Разработка сайтов под ключ - sitesmatch.ru
Не забудь подписаться!

Опубликовано:

 

12 янв 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 43   
@user-tb2tj6ey8p
@user-tb2tj6ey8p Год назад
спасибо вам за уроки!!!!
@Naebuka
@Naebuka Год назад
замечательный урок
@user-kx9dd1sh9k
@user-kx9dd1sh9k Год назад
Спасибо за информацию 💓
@baktybekakmatov4330
@baktybekakmatov4330 2 года назад
очень классное видео! спасибо
@user-co7nl8pf4p
@user-co7nl8pf4p 2 месяца назад
Искал вёрстку на ЧИСТОМ html и css. Спасибо за ролик!!! А то у многих то JS используют, то Bootstrap подключают, задолбали...
@EduCatterOfficial
@EduCatterOfficial 2 месяца назад
А потому что ленивые))
@user-co7nl8pf4p
@user-co7nl8pf4p 2 месяца назад
@@EduCatterOfficial 100%
@user-rb5hu9sz5y
@user-rb5hu9sz5y 3 месяца назад
Огромное спасибо
@user-pc5sr2sg7x
@user-pc5sr2sg7x Год назад
спасибо!
@KaldorOfficial
@KaldorOfficial 6 месяцев назад
Замечательно, я искал кокрас, чтотто подобное
@uq6750
@uq6750 2 года назад
Топ
@EduCatterOfficial
@EduCatterOfficial 2 года назад
спасибо!
@Tomas2000ism
@Tomas2000ism 10 месяцев назад
Как выбрать номер карты при нажатии кнопки купить?
@Akezhan_T
@Akezhan_T Год назад
А как градиента анимировать?
@lidsea
@lidsea Год назад
@EduCatterOfficial Помогите как две такие картки разместить я все перепробивал они слипаютса
@Human-rg2kh
@Human-rg2kh Год назад
разве не надо использовать flex-box?
@krossvayz6500
@krossvayz6500 Год назад
Как разместить два таких блока в один ряд и чтобы они не слепались? Я разместил два таких блока в ряд, но не могу сделать растояния между ними. Питался в card написать padding, не работает
@user-fq5nw2qw2l
@user-fq5nw2qw2l Год назад
margin
@krossvayz6500
@krossvayz6500 Год назад
@@user-fq5nw2qw2l спасибо , еще в тот день исправил.
@HippoCrock
@HippoCrock Год назад
а как разместить рядом?
@krossvayz6500
@krossvayz6500 Год назад
@@HippoCrock display: flex попробуй
@Clowdyyy
@Clowdyyy Год назад
а как такую вторую добавить? я добавил они горизонтально ставятся
@Gl1de457
@Gl1de457 2 месяца назад
Display flex вроде
@tvhateoriginal
@tvhateoriginal Год назад
Почему не используете для заголовка тег h? А для текста в карточке тег р?
@EduCatterOfficial
@EduCatterOfficial Год назад
Можно использовать их, а можно div'ы вот и все) это влияет только на симантику
@tvhateoriginal
@tvhateoriginal Год назад
@@EduCatterOfficial согласен, вариантов много, каждый делает как нравится, но везде где смотрел обычно делали, через спец.теги
@Weids537
@Weids537 10 месяцев назад
Здравствуйте, почему-то у меня ширина 200 слишком широкая и картинка стоит неровно, поэтому чтобы было симметрично, нужно делать примерно 163, однако это странно ведь у картинки ширина 162, однако выглядит ровно, как у аас в видео. Не понимаю, почему так
@dimondimonov6417
@dimondimonov6417 7 месяцев назад
Наверно всё дело в обнуляющих стилях
@dmitrygoldsmish9998
@dmitrygoldsmish9998 2 месяца назад
дело в ошибке с размерами,в файле проекта автора картинка имеет правильные размеры,а вот в фигме словно сломали сурсы,странное явление@@dimondimonov6417
@dmitrygoldsmish9998
@dmitrygoldsmish9998 2 месяца назад
С шаблоном какой-то косяк при экспорте картинки. КАРТИНКУ ЛУЧШЕ СКАЧИВАТЬ С ССЫЛКИ НА ПРОЕКТ АВТОРА иначе размеры не те.
@lidsea
@lidsea Год назад
Помогите как две такие картки разместить я все перепробивал они слипаютса
@EvilYou
@EvilYou Год назад
Есть много вариантов, на самом деле. Мне нравится такой (создаешь контейнер для них): .container { display: flex; gap: 20px; }
@aristocrat7777
@aristocrat7777 Год назад
как мне добавить еще пару товаров и расположить их в ряд?
@VLAD-sv6oe
@VLAD-sv6oe Год назад
Узнал как?
@EvilYou
@EvilYou Год назад
легко. Создаешь div-контейнер, куда помещаешь карточку, копируешь код карточки еще несколько раз. И для контейнера задаешь display: flex
@lexxkrt
@lexxkrt 5 месяцев назад
@@EvilYou не флекс а грид, он тут больше подходит
@EvilYou
@EvilYou 5 месяцев назад
@@lexxkrt Интересно, чем же он лучше подходит?
@lexxkrt
@lexxkrt 5 месяцев назад
@@EvilYou всем. грид для грида
@Sayonara_Pigs
@Sayonara_Pigs Год назад
Сорь, но это халтура(
@EduCatterOfficial
@EduCatterOfficial Год назад
Давненько снимал, хотел такое сделать для тренировки)
@user-hc8to3xe7q
@user-hc8to3xe7q 3 месяца назад
ну так не смотри если не нравится
Далее
Gonna tell my kids this was Spider-Man
00:27
Просмотров 19 млн
КОРОЧЕ ГОВОРЯ, 100 ДНЕЙ В СССР 3
08:45
Telefon Narxlari bilan tanishamiz😱
8:52
Gonna tell my kids this was Spider-Man
00:27
Просмотров 19 млн