0: Добрый день, друзья, с вами Лущенко Александр. И сегодня мы делаем карты оплаты банка. Урок состоит из 2 частей. 1 это вёрстка. 2, это оживление карты. Мы получим вот такую вот интересную деталь, что при вводе номера карты. Ну,

1: Допустим, сотру эту карточку и напишу вот такую вот 54, 0 6, 16. Карта будет меняться. Вы это можете использовать в своей вёрстке. То есть надо будет подключить библиотеку, я покажу какую, но в начале нужно

2: Верстать весь этот макет, откуда возникла эта задача? Это реальная практическая задача. Вы знаете, что у меня есть несколько курсов и 1 из курсов это вёрстка вот такого вот интернет магазина на ноджиэс. И в частности здесь следующий урок будет это подключение

3: Способов оплаты через карты и захотелось сделать это красиво не просто там, видите, номер, что-то ещё, а вот таким вот способом. Плюс ко всему изучим несколько библиотек. Итак, 1 урок, который посвящён вёрстке сегодня, 2 тоже сегодня, спустя 10 минут.

4: После этого видео будет вам доступен, вы сможете его скачать, посмотреть и обработать для своих нужд. Пример, который я показываю, ссылочка под видео будет. Посмотрите, скачаете, пощупаете, сможете использовать. Итак, верстаем.

5: Карты банка поехали. Для того, чтобы сверстать карту банка, нам понадобится определённая html разметка. Давайте мы её занесём. У нас будет общий блок, в который я все буду помещать.

6: Этот блок будет следующего вида. 1 это карт в рэпе.

7: Внутри него у меня будет 2 блока. 1 это карт back. То есть вот эта вот часть, вот эта вот часть и 2 карт фронт, вот эта вот часть. Давайте я так чуть смещу.

8: Чтобы было легко переключаться карт back.

9: И карт фронт.

10: На бэке у нас будет серая линия и окно ввода cvv кода, поэтому я здесь добавляю 2 блока кард дефис бэк дефис лайн.

11: И теперь инпут. Cvv инпут.

12: Id cvv все это задняя часть мы её потом просто оформим передняя часть здесь у нас будет несколько элементов логотип, логотип бренда оплаты, логотип банка, инпут для.

13: Ввода, соответственно, номера карты и input для ввода месяца и года.

14: Соответственно, добавляем, поехали 1, что у нас будет, это логотип и mg класс карт, дефис, имейдж.

15: Есть. Дальше 2 блок. У меня будет карт лого.

16: Дальше у меня будет несколько инпутов. 1 инпут это ввод номера карточки инпут, решётка карт намбе. И теперь просто дублирую и меняю айдишники.

17: Card to mans это для ввода месяца и карт ту я.

18: Сохраняю в принципе пока этого достаточно для начала вёрстки, для того, чтобы мне было легче, я сделаю вот такую вот хитрую вещь, скопирую все это вот она html, цсс супер, я её сохраняю, она

19: Вот такая вот есть и себе вот сюда вот вставляю этот код в цсс. Понятное дело, что это бред, но мне сейчас просто не хочется. Мне лень переключаться туда сюда, в уроки, и я буду рассказывать вам.

20: На примере вот этого вот закомментированного кусочка кода, я думаю, так будет даже нагляднее. То есть вам так будет удобнее ориентироваться для того, чтобы все это видеть в реальном времени я включу

21: Live server чтобы вы понимали, как происходит вёрстка супер, давайте начнём итак, поехали с классами, мы определились, переходим в цсс, идём в html, включаю режим live. Прилод. Вот.

22: Он go live у меня go в live.

23: И вот так сейчас выглядит моя карта, она выглядит очень печально, поскольку ни 1 цсс кода у меня просто ещё нет ничего страшного. Обычно так, вёрстка начинается. Итак, мы начнём с вами с работы с репером. Поехали, я специально вынес.

24: Чтобы было чуть легче карт дефис в репер.

25: Мне не нужно переключаться. Ширина 750. Я поставлю 1, поскольку я просто полез в интернет и нашёл сколько карточка реальная размером. В принципе, из этих размеров вы можете потом вынести соотношение для того, чтобы

26: Сделать мобильную карточку. Имеется ввиду адаптивную, извиняюсь, бордер 1 пиксель, солид грей. Я потом закомментирую это свойство.

27: И вот сейчас получаю вот такую вот обёртку красивую супер. Начнём с самих карточек, у них одинаковые свойства и размеры, поэтому карт back запятая карт дефис фронт я пропишу им одинаково

28: Свойства поехали. Ширина 535 тоже. Я просто полез в интернет, нашёл карточки и перевёл. Высота 343 пикселя. Дальше, чтобы их видеть, я ввёл бордер.

29: 1 пиксель солит. Это граница грей и нажал сохранить. Вот у меня появились 2, 2 прямоугольных блока в блоке, который отвечает за

30: Back. У меня появился инпут для cvv, а здесь у меня номер месяц, год супер для всех этих карточек я сделаю бордер радиус сокращённо Бор. Спасибо читателям, которые подсказали, я запомнил на

31: Конец 15 пикселей. Появились границы. Отлично. Теперь мы переходим к карт back, то есть оформляем заднюю часть карты картэк.

32: Для неё я задам следующее. Отступ справа 0, отступ снизу 0. Она сместится у меня вот этот вот угол и давайте зальём её цветом бэкграунд. Пусть будет у меня.

33: E c e c e c. Вот такой вот серый цвет есть, обращаю ваше внимание, она не сместилась, поскольку свойство позишн я для карточек не задал поса тап и произошло.

34: Смещение супер. Она сместилась и теперь для того, чтобы видеть верхнюю карточку, я задам точка карт фронт.

35: Background пока просто белый.

36: Отлично, можно отключить вот эту вот обводку, она мне уже в принципе не понадобится, поэтому я комментирую строку с бордером у карт в rapper есть. После этого я могу сделать линию. Напомню у нас есть вот такая вот

37: Вот линия на карточке магнитная, она чёрного цвета, я её сделаю сероватой, поскольку мне так легче, она у меня вот такого вот вида карт бэклайн я копирую, почему бы и нет?

38: E. Поехали, ширина 100%, почему бы и нет дальше высота 80 можно не ставить пиксель, нажимать tab, они автоматически выставятся бэкграунд, решётка си 0 c 0 si 0 серый, Тёмный.

39: Мы его подправим позишн абсолют поса, отступ сверху 50 пикселей.

40: Появилась вот такая вот линия в принципе её не видно, но она идёт на всю ширину экрана дальше у меня есть айдишник cvv это input куда надо вводить cvv код копирую его, поскольку.

41: То айдишник. Начинаю с решётки. Поехали. Позишн абсолют, отступ справа 40 пикселей. Вот он появился дальше, отступ снизу 112 пикселей.

42: Star на нужное место, ширина 100 пикселей.

43: Отступ 5 пикселей внутренний, вот он полез фон сайз 40 пикселей.

44: И выравнивание текста text align center пробуем ввести что-то отлично как раз под 3 цифры то что нельзя вводить больше там и так далее это все уже задачи java script вёрстки они не касаются наша задач.

45: Сделать макет.

46: Итак, у нас есть cvv, осталось оформить 1 часть, то есть добавить логотип, добавить вот эти блоки и добавить логотип бренда, но для этого мне вот эти штуки нужны, поэтому я пока их сохраню сейв имейдж эс я сохраню.

47: Соответственно, себе в то, что я верстаю, где тут у меня html карт, вот он свгк сохранил 1 свгк и туда же сохраняю 2 свгк. Вот они 2 залетели. Отлично, значит.

48: Я их пропишу для того, чтобы видеть у меня белый цвет. В принципе, я закрашу все красным цветом, давайте посмотрим, какой здесь цвет. Вот здесь цвет в формате rgb, но вы знаете, что можно

49: Кликнуть на квадратик и переключиться между различными цветами. В частности, выбрать хекс цвет копии. И мне этого будет достаточно. Возвращаюсь к своим баранам, к своей карточке. У меня сейчас карт

50: Front. Вот такой вот белый. Я сейчас его продублирую. Почему продублирую? Потому что в реальной для вёрстки мне он понадобится белый. Его надо будет менять. И вставлю цвет, который я скопировал. Вот буду показывать на примере МТС. Платили б за рекламу. Было бы неплохо.

51: Ну, никто не платит. Итак, который раз обратился от крупной конторы, забыл заплатить. И вообще, как только я сделал видео, просто молодец. Итак, вот такая вот у меня карта.

52: А тот товарищ исчез.

53: Ну, никто не платит. Итак, а тот товарищ который раз обратился от крупной конторы, забыл заплатить. И вообще, как только я сделал видео, просто исчез. Молодец. Итак, вот такая вот у меня карта.

54: Есть 3 поля и давайте с ними разбираться во первых, в начале вернёмся в html, напомню у меня здесь есть вот такая вот штука, в частности 2 2 картинки в 1 картинку, которая карт имейдж я помещу.

55: Mages. Вот такой вот свгк.

56: Во 2 картинку я помещу имеджес и 2 свик, что тут у меня есть мастеркард, по моему, вот так вот отлично. Вот у меня вот такой вот блок мне теперь, ну,

57: Нужно все это выровнять, поскольку свики загрузились в том размере, в котором они есть, возвращаемся на место и начинаем приводить в порядок вёрстку. После cvv я в начале оформлю 2 вот этих вот картинки. Поехали.

58: Точка карт имейдж.

59: Высота 60.

60: Сохранил дальше позишн, абсолют сохранил.

61: Bottom 40 сохранил и white 30 сохранил. Что-то у меня отработало, что я не совсем понимаю вот у меня МТС встало на место супер, теперь идём в карт лога.

62: Высота 50.

63: Дальше позишн абсолют.

64: Bottom 40.

65: И высота 30. Мне кажется, я что-то не то сделал, я запутался в этих картинках, они друг на друга налезли. Итак, высота 60, тут 50. Есть. Дальше лефт вот здесь вот я не

66: Правильно прописал позиции я просто на одни и те же картинки задумался и леф 30 top 40.

67: Вот такое вот получаю размещение отлично осталось 3 импута, которые нужно позиционировать поехали, начнём с card number. Здесь все очень просто.

68: Card number, позишн, абсолют, ширина можно в принципе 90%. Вот здесь вот буковку п добавляем, есть бэкграунд, чтобы отличалось от фона. Вот так.

69: Так вот, есть то, что мы имеем дальше. Фон сайз, 40 пикселей, пединг 5.

70: Смотрите, у меня есть border, я его сейчас уберу. Бордер нон.

71: И теперь мне нужно поставить где-то его, разместить топ 145 пикселей нормально и я сделаю следующее. В принципе здесь можно было и процентами задать. То есть, а я

72: Процентами ширину и задавал. Вот она 90. Поэтому я пишу маджин 0 пробел 5%. То есть в сумме с каждой стороны по 5 даст 10. Вот вам 100% ширины. Отлично с этим справились дальше.

73: Что ещё осталось? На всякий случай аутлайн ставлю none, чтобы при клике не подсвечивалось синим. Вот так вот. И у меня получается опять же, задача можно ограничить введение цифр. Это все уже задача джаваскрипта. Нас

74: Не очень пока интересует наша задача сделать вот такую вот красоту. Ну и 2 последних карточки, они, в принципе, будут очень похожи. Решётка карт, ту, еа.

75: Давайте, наверное, вместе их и пропишем. Решётка карт ту манс, что у них общего будет? Поса, позишн, абсолют. Дальше бэкграунд такой же, в принципе, можно было для 3 вот так.

76: Вот делать без всяких проблем.

77: Есть position absolute есть дальше фон сайз точно такой же 40 пикселей вот здесь вот, кстати, задача оптимизации очень интересно, можно свернуть достаточно серьёзно вот этот вот код есть дальше Педин.

78: 5 одинаковый кстати, почему-то hard to year card to mans для этого срабатывает, для этого нет, а ну-ка давайте посмотрим, что мы написали в вёрстке.

79: Car two months карт ту е.

80: Hard to её. Вот тут вот ошибка, буква д, вот теперь все срабатывает 5 пикселей аутлайн, но мне кажется, его просто даже выше отключал бордер, но

81: Ширина 60 пикселей тексталайн сенте ну и теперь выравнивание ботом 40 пикселей left 5%.

82: И теперь для года отдельно дописываем вот такую вот штуку.

83: Left 20% и получаем вот такой вот код, допустим, 12, допустим, год 23. Итак, мы сверстали карточку, здесь уже вылетает

84: Предупреждение, что это карт номер его сохранять небезопасно и можем теперь оживлять с помощью библиотеки если вам понравилось видео лайк и комментарий можно просто lykke, можно просто комментарий, а лучше и то и то вместе верстайте учитесь осваи.

85: Давайте, как я уже сказал, ссылочка по вёрстке будет у меня в следующем видео. Зайдите, посмотрите, видео будет через 10 минут после вот этой загрузки. То есть вы просмотрите, можно переходить на следующее видео. И, соответственно, в следующем видео мы оживим так, чтобы вот здесь вот номера у меня отрабаты.

86: То есть 40, 25, 32. Вот таким вот образом с вами был Лущенко Александр, канал вебдев с нуля. Если вам понравилась вёрстка, заходите на мой курс. Практическая вёрстка, ссылочка под видео.

87: Присоединяйтесь, это курс с домашками, которые очень интересны, реально помогут вам выучить вёрстку.