0: Отлично, ребята, всем привет. Добрый вечер. Меня зовут Юрий Ключевский, школа веб академии. И мы начинаем наш сегодняшний большой практический стрим, на котором мы заверстаем вот такой замечательный макет, который вы сейчас видите на экранах. Вот

1: Дайте, пожалуйста, в чат плюсики, напишите привет. Ну, знак того, что меня хорошо видно, слышно, да. Ну и в целом вижу ваши уже приветы, да? Ну, пару плюсиков не помешает, и мы стартуем, да, вот вижу ребят, вижу наших постоянных зрителей.

2: Участников рад всех видеть. Здорово. Погнали. В общем, будем верстать вот такой макет, как я заявил, это будет этим css. Вот, честно говоря, уже в процессе подготовки, конечно, интереснее бы, ну, не enter.

3: Мне там с точки зрения деления на какие-то блоки было бы, наверное, удобнее его делать на препроцессорах, да, и много каких-то тут фишек интересных. Вот, ну, будем делать, как было заявлено, сисс. Вот, в общем,

4: Market доступен в моём telegram канале, который называется интенсив по разработке от веб кадеми, ссылку на telegram канал я отправил в чат и в описании под видео тоже её указал, если вы уже открывали там.

5: Трансляцию ранее обновите страницу с трансляцией, у вас там в описании появится ссылка по этой ссылке вы можете присоединиться к telegram каналу и там последний пост как раз с ссылкой на макет. Вот на макете вы в принципе видите, да, вот курсоры уже.

6: Пользователей тут мелькают, это уже ребята, кто уже зашёл и начал его смотреть, изучать. Вот после того, как вы зайдёте, откроете макет в фигме, скопируйте его к себе в черновики, чтобы работать уже с ним более удобно. То есть, чтобы вы могли там

7: Открывать какие-то слои, что-то копировать, перемещать, ну и так далее. Вот поэтому скопировать можно вверху, вот здесь нажав на нажав на название макета стрелочка вниз тут будет дубликейт, то есть сделать к себе

8: Дубликат и потом с главной страницы вы сможете открыть и в общем то, работать. Вот если вы зашли вот так, да, ну вообще нужно сделать себе дубликат. То есть это правильно, так будет удобно. Вот, чтобы не смущали вот эти курсоры, если вы по общей ссылк

9: Зашли, то вверху справа стрелочка вниз, там где масштаб. И здесь есть такой пункт мультиплеер курсорс. То есть вы можете отключить и тогда не будет видно курсора других пользователей. Да? Ну давайте включим

10: Посмотрим. Прикольно. Они, так как такие, как пчёлки здесь летают. Здорово. Вот. Окей. Да, вижу плюсики. Привет. Хорошо. Вот. В общем, погнали. Да, как я говорил, будем верстать этот макет будем делать.

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

12: M project. Вот откроем вижуал студио код, закинем её сюда и.

13: Погнали. Делаем все from scratch, что называется. То есть все.

14: С самого самого нуля. Вот так. Давайте здесь создадим папки для проекта, да, то есть у нас будут картинки имидж, потом у нас будет папка css стиля, потом будет папка джиэс, потом у нас будет

15: Папка либс для библиотек. Пока этого хватит, давайте создадим файл index, html энтер. В общем, ну, я так да, подразумеваю, что в целом у нас как бы с вёрсткой уже

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

17: Да, можно посмотреть, поэтому на каких-то таких моментах я останавливаться не буду. Ну, типа m это, да, думаю, тоже все знакомы. То есть восклицательный знак таб. И мы получили базовую разметку. Давайте здесь напишем тревел проджект, название в тайтле. Вот, давай.

18: Давайте теперь в css создадим 2 файла, 1 файл будет reset css и 2 файл будет ну main css вот в reset мы поместим сбросы стилей, то есть есть там 2 варианта есть, ну,

19: Есть 3 варианта. 1 вариант никак не сбрасывать, не нормализовать стили. 2 вариант применять нормалайз сисс. Вот. И 3 вариант сбрасывать все в 0. Вот 3 вариант это самый оптимальный, когда вы верстаете какие-то проекты с нуля, вот по дизайну, чтобы постоянно не обнулять.

20: Отступы у заголовков, у списков и так далее, чтобы вот время на это все не тратить и работать максимально эффективно, продуктивно. Да, мы будем сбрасывать стили, вот откуда я беру сброс стилей, я захожу в academy точка ру, слэш блок, и я возьму свой сброс стилей.

21: Который у меня есть, я уже как-то упоминал про него, по моему, да и в общем здесь у нас можно найти у нас в блоге по поиску резет, можно найти вот такую статью. Сброс стилей резет сиэсэс. Я вот в чат её тоже закинул. Вот.

22: И отсюда вот можете взять вот этот код, просто вот вверху копировать код и в reset css его вставить, то есть он обнуляет все отступы и так далее. Все оформление элементов, форм, списков, то есть очень удобно. Вот мы ему, мы его в reset.

23: Закинули и давайте его теперь подключим в main css импорт резет сиэсэс. Вот таким образом мы его подключили. Отлично. Дальше давайте в индексе этим подключим наш файл со стилями, напишем Телин.

24: Tap и пропишем путь css и main css отлично, мы его подключили вот давайте напишем эйч h1, напишем что-нибудь там hello, world и проверим, что все зарабо.

25: Да, откроем лайф сервер правый клик open this life сервер и проверим вот у меня live server открывается вот мы видим да hello world это так h1 но мы не видим никакого оформления, никаких отступов, ни толщины, ни размера потому что мы все.

26: Сбросили через reset css вот дальше давайте подключим необходимые шрифты, здесь шрифт, слава Богу 1 1 шрифтовое семейство. Вот мы видим, да, и для того, чтобы сразу понять, какие начертания у этого шрифта есть, я в фигме.

27: Использую плагин фонд фаски. Заходим вот в плагины фонд фаски, открываем его. То есть, ну, его нужно установить, либо можно просто прокликать весь текст на странице и составить список тех начертаний, которые есть. Вот начертания здесь.

28: Стандартные такие регулар, медиум, сами болт и болт вот давайте для того, чтобы это все дело подключить, зайдём на фон с google com, найдём данный шрифт, у меня, кстати уже найден ну в целом да, вводим название шрифт.

29: Enter клик по нему и дальше выбираем здесь там те шрифты, которые нам нужны. Регулар, вот так медиум, далее сми, болт и выбираем болт. Вот по итогу у нас появляется свой видео.

30: Теперь буду убирать да, по итогу у нас появляется вот код, который мы можем добавить на сайт, выберем эт импорт и скопируем вот эту директиву эт импорт, чтобы подключить этот файл со стилями в свой main css под reset css мы его контрол.

31: Подключаем, да, и вот так это по итогу выглядит. Вот. И также google фонс говорит нам, как этому шрифту обращаться? Скопируем эту строчку и пропишем здесь. Давайте боди, и для body добавим фон фэмили и укажем

32: Этот шрифт отлично. Вот.

33: Так, теперь давайте напишем какие-то базовые стили, которые нам тоже для body пригодятся. Вот, или, или, или можно картинки поэкспортировать. Давайте какие-то базовые вещи.

34: Пропишем, которые нам будут полезны. Вот, ну, давайте, давайте с графики начнём. То есть необходимо экспортировать всю графику, которую мы собираемся использовать. Вот давайте я, наверное, буду идти по шагам, не знаю, или все.

35: Сразу экспортировать. Ну её тут не так и много. Да? Короче, будем работать в таком формате. Сначала достаём всю графику, сохраняем, потом верстаем десктопную версию, потом настраиваем скрипты, потом делаем адаптивную версию.

36: Вот такой план. Вот, поэтому экспортируем графику, то есть смотрим, что у нас тут есть в шапке есть вот чик аккуратно в шапке есть у нас вот такая картинка с девушкой, вот контрол клик по ней справа выбираем формат.

37: Привьюшку можно посмотреть? Да, нажимаем экспорт, и он нас спрашивает, куда мы это хотим сохранить. Выбираем папку с проектом. Так.

38: Выбираю папку с проектом, выбираю папку image и давайте дадим какое-нибудь имя хедер. Image png дальше в шапке у нас есть ещё вот такие вот элементы, которые тоже нужно будет.

39: Разместить. К слову. Главное не забыть про них. Вот. Поэтому выбираем их. Кстати, можно выбрать, так как они в группах находятся, сгруппированы. Я могу с зажатым шифтом выбрать вот так вот несколько этих групп. Вот. И они все будут сохра.

40: Хранены как отдельные файлы внизу справа в экспорте выбираем svg экспортировать 4 слоя и в папку image давайте их закинем все, давайте им имена сразу нормальные дадим откроем папку с проектом.

41: Имидж. Вот. А в принципе, имена у них тоже нормальные. Л, 1, л, 2, л, 3, л, 4. Потому что группы названы аккуратно, да, поэтому отлично. Идём дальше. Дальше. У нас. Так, это что, это, это кто-то уже вы.

42: Brawl или так строк нет, да это не знаю, может быть почему он так выделяется дестинейшен да, может быть кто-то находится ну хотя да, мультиплеер курсорс немножко.

43: Подвис. Хотя. А, да, кто-то его выбрал. Вот.

44: Копируем вот эти картинки. Значит, каким образом мы это сделаем. Дело в том, что здесь вот этот слайдер карусель, да, и мы видим, что картинка, которая увеличена, ну, которая по центру, она увеличена, то есть она больше, чем другие. Вот, поэтому мы сделаем

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

46: Сделаю контрол д, продублирую и вынесу её сюда, вправо. Вот. Ну, эту тоже. Тогда вынесу вправо, хотя у неё размер такой же будет. И эту тоже. Я продублирую контрол д и вынесу её вправо. Вот теперь я их сохраню.

47: Но сначала поменяем размеры, то есть вот у большой высота 456. Поэтому выберу ту, которую поменьше, и тоже укажу такую высоту. Но когда я её буду указывать, нужно зажать вот эту замочек для того, чтобы ширина тоже пропорции

48: Онально изменилась, да, то есть вот, чтобы они вот одинаковые у нас были. И у 3 сделаю тоже самое замочек и 456. Вот. И также я уберу у них борда радиус, я их выберу через шифт, зажимаю шифт клик на 2 3.

49: И сразу у всех поменяю бордер радиус на 0. То есть border radius мы через css добавляем, да, зачем мы так делаем. То есть для того, чтобы, ну, то есть это, конечно, учебный проект, и мы не будем его как-то дорабатывать и потом куда-то там, да, это не будет реальным.

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

51: Brawl через шифт 3 вот мы видим и выбираю экспорт формат jpeg экспорт и давайте сохраним в папку image и сразу мы их проименуем давайте 0 1 0 2 как-то.

52: Нет, не так. Я начал именовать это 0 3. Должна быть 0 1, 0 2, короче, 0 1, 0 2 и 0 3. Дадим им такие названия. Вот. Окей, для карусели у нас готовы. Давайте поработаем с вот этой стрелочкой. То есть у этой карусели есть стрелочка.

53: Влево. Ну и логично, что где-то есть стрелочка вправо. Видите, такая интересная карусель, то есть она заходит за край экрана и нам правую часть не видно. Ну то есть если размер экрана будет больше, да, то правую часть будет видно и там будет эта стрелочка, ну то есть мы так подразумева.

54: Да, поэтому кружочек мы через css нарисуем, а вот эту стрелочку мы в него поставим. Давайте её экспортируем. Вот выбрали её svg экспорт, вот дадим сразу нормальное имя эрроу лэфт то.

55: Swg вот и давайте её контрол д. Продублирую, вынесу вправо вот и тут можно вот так зажать шифт и крутить её аккуратно вправо, то есть я её выкрутил, да, как бы превратил в стрелку вправ.

56: И давайте тоже это сохраним как отдельный файл error right. Вот. Ну, в принципе, можно было, конечно, 1 обойтись и просто её там через css повернуть, к примеру. Вот. Но мы сделали 2 отдельных стрелочки от

57: Отлично. Идём дальше. Какие у нас есть картинки? Вот эта есть картинка. Вот. И тут, кстати, интересно, то есть вот есть такая масс групп, ну, то есть это вот как было нарисовано, да, на самом деле, можно было её разместить по другому более удобнее, там в плане дизайна организа.

58: Файлов в фигме. Ну вот здесь дизайнер сделал. Так вот, поэтому давайте её сохраним. То есть есть вот сама картинка, но она опять же, она больше по размеру. Если мы будем сохранять, то мы увидим там всю картинку. То есть вот, да

59: Тут по художественной задумке мы должны видеть вот эту часть. Вот поэтому, что мы сделаем? Мы вот здесь, где ректангл, который является маской, у него радиус скругления 60. Мы пока поставим 0, потом выберем маску и

60: Храним, собственно, вот прямоугольную картинку экспорт и давайте кастомерс.

61: Дадим название кастомерс джипэг.

62: Вот, ну и потом на rectangle я опять верну радиус скругления 60, дальше сохраним вот эту аватарку пользователя, который отзыв оставил здесь сразу я выбираю маск групп, то есть сразу вот маск групп мы сохра.

63: Ням и здесь как раз сохранится вот такой фрагмент, собственно круг мы нарисуем сисс, поставим в этот блок вот этого вот этого юзера, да, этого путешественника, который скрыл своё лицо. Вот, и я его экспортирую как

64: Потому что он будет на фоне. Вот поэтому назовём юзер аватар точка png, мы его сохраним. Далее вот эти звёздочки давайте их сохраним, но на самом деле с этим звёздным рейтингом как бы можно там работать есть

65: Интересные, прикольные варианты. Вот. Но мы сегодня пойдём так, по более простому пути, и мы просто сохраним все это как 1 картинку. То есть я просто сохраню вот так вот 3 отмеченные, 2 неотмеченные. Вот так это будет, да, вот. Но там если делать

66: Работать с svg, то на самом деле можно очень прикольное решение написать вот, но мы пойдём по более простому пути, то есть просто выбираю старс рейтинг svg, экспорт и да, start рейтинг svg сохраняем, идём дальше.

67: Вот эта секция колтуэкшн. И здесь есть 2 вот таких элемента. Тоже через шифт их выбираю, они сгруппированы выбираю. Да, svg сохранить. Кстати, они называются уже группы нормальные. Цта л 0 1, 0 2 и просто их сохран.

68: Вот идём ниже. Ну, собственно, все так. Вроде бы ничего не пропустили. Если что-то пропустили, потом досохранить, вроде бы все на месте. Давайте теперь организуем эти картинки, давайте создадим папку хедер.

69: И закинем в неё все, что связано у нас с шапкой. Давайте сразу ещё папки создадим. Слайдер для слайдера цта, для блока колл ту экшен, то есть по-английски колл ту экшен это призыв к действию. И тот блок у нас будет называться так.

70: Далее у нас есть что у нас есть, давайте пораскидаем пока 3 картинки слайдера мы в slider закинем для хедера. Это вот эта фотография девушки в хедер и в хедере есть элементы вот эти, л. 1, 2, 3, 4.

71: Мы их тоже в хедер закинем эро лефт и error, рай, давайте закинем слайдер. Далее вот эти кружочки в Цета и кастомерс, то есть, собственно, все, что связано с блоком кастомерс.

72: С отзывами мы закинем в customers. Вот такой порядок у нас получился в картинках здорово, давайте так продолжать и, ну, сейчас посмотрим немножко на макет, то есть

73: Ну вот это можно убрать. Давайте посмотрим на контейнеры. То есть, ну, такая, как бы, стандартная, да, операция. Я определяю ширину контейнера для контента, сразу создаю под них классы и потом будем с этим работать. То есть, если мы посмотрим на шапку,

74: Посмотрим на контент в навигации. Вот, то мы можем определить ширину контейнера. То есть вот начиная от логотипа, заканчивая кнопкой логин выбрать через шифт, мы видим ширину 1240. То есть это ширина под контент. И, собственно, дальше если мы

75: Будем смотреть. Ну, здесь этого не заметно, потому что здесь размер меньше, да, тут не 1240. Но, к примеру, выбирая вот эту секцию, мы чётко видим тоже ширина 1240. И выбирая контент в подвале, опять же, от логотипа до Логина тоже 1243.

76: Ну, мы округлим, то есть тоже сразу скажу, я буду округлять какие-то значения, если где-то там по 1 пикселю, там где-то по 3 че то выходит. Ну да, мы это будем округлять до какого-то общего значения. Вот, если там, конечно, с вас требуют в макетах прям.

77: Pixel perfect идеально идеально, да, то, конечно, ну не округляйте тогда вот для сегодняшнего стрима это нормально, это приемлемо вот, но по контейнерам здесь не все так гладко то есть есть вот такой блок, да, который начинает

78: По по тому же ряду как и весь основной контент. То есть вот я специально выбрал логотип, выбрал контент в шапке и выбираю контент в блоке дестенейшене и мы видим, вот он идёт по 1 вертикаль.

79: Линии, да, то есть он как бы идёт по контейнеру, но в то же время эта карусель, она уходит вправо, то есть она уходит справа за горизонт. Вот. Соответственно, здесь будет такой контейнер, который должен начинаться так же, как и обычный контейнер, но вправо

80: Он должен уходить до конца, вот мы его тоже сделаем, вот давайте сразу создадим те контейнеры, которые нам пригодятся и добавим какие-то полезные вещи. Вот body on family.

81: Мы указали далее у всей страницы есть фон. Вот, да, вы можете заметить, и он не белый. То есть если выбрать весь фрейм дизайн, вот, то если его выбрать, кстати, а ну-ка сетка тут даже, тут даже присутствует сетка. Ну, собственно, да, вот по сетке.

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

83: Чтобы мы ширину контейнера по ней определили. Вот. И здесь есть Фил заливка, то есть цвет не белый у страницы, а вот такой вот. А кстати, 1 элемент я забыл сохранить у шапки. Вы видите такое завершение, то есть она не прямо

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

85: Его сохранять в png, чтобы с ним работать. Ну мы сделаем в svg. Это будет правильнее, потому что при масштабировании векторная графика не теряет в качестве. Вот. И это вектор. Поэтому выбираю svg экспорт и давайте его в шапку сохраним и назовём

86: Как-нибудь хедер.

87: Bottom, не знаю, ботом svg как такой нижний элемент. Вот, да. Ну и фон, да, я уже сказал, поэтому давайте phone пропишем к странице, добавим для Тега

88: Body, background, color, ф, 6, ф, 6, f6. Это вот тот, который на странице, и цвет текста. Он не чёрный, а в основном текст вот такой 0, ф, 1, ф, 1, ф, 1, ц. То есть тоже, если прокликать все заголовки. Вот они все такие вот.

89: 0 ф, 1 ф, 1 ц. Вот весь текст он вот такой, поэтому мы прописываем его. Далее добавлю классы, которые нам будут помогать периодически. Класс. None, display, none. Импортент, чтобы скрывать элементы, пригодится, когда мы будем по частям верстать, скрывать какие

90: Секции, чтобы они нас не отвлекали. Далее давайте пропишем стандартный контейнер, контейнер, который будет идти вот по, да, там, по необходимой ширине для нас. Вот. И, кстати, ну, из новшества я предлагаю, давайте начать, давайте

91: Использовать css переменные ну из новшества это в плане того, что я на стримах ещё такого не делал. Вот, поэтому давайте заведём переменные, которые будем использовать во время написания css. И это будет удобно. Вот, то есть 1 перемену.

92: Которую мы заведём. Это ширина контейнера, ширина контейнера, как мы уже посмотрели, 1240. Да, вот мы смотрим 1240, но нужно ещё помнить про поля слева и справа мы их сделаем по 15 пикселей. То есть это и того плюс.

93: То есть 1270. Поэтому давайте добавим сюда такую переменную контейнер уис 1270. Вот. И давайте сразу добавим поля контейнер паддинг по 15 пикселей. Вот. То есть, таким образом мы заводим переменные в css. Рут означает, что мы их заводим на

94: Самый верхний такой уровень, то есть на тег html, вот, и дальше, ну как бы, да, на селектор этим вот и дальше мы их можем использовать. Плюс css переменные можно переопределять на уровне какого-то селектора, их

95: Можно переопределить на какое-то другое значение. Вот, и что нам ещё будет полезно в этом макете здесь шрифт текст, который вот мы видим, да, он, ну тоже такой

96: Особого цвета. То есть вот, вот этот текст просто не заголовок, а текст. Да, если мы посмотрим, у него цвет, вроде бы похожий на основной 0 1 f1, c1, но он какой-то более прозрачный и можно увидеть, что у

97: Слое стоит прозрачность 50%, либо можно зайти в inspect и в инспекте, посмотреть css и тоже увидеть этот свет и увидеть опасити 0 5 вот, и он здесь довольно много где используется, то есть он, ну, практически вот любой текст.

98: Который не заголовок, он вот такой вот поэтому, чтобы тоже это по 10 раз не брать, не прописывать. Давайте сразу мы этот цвет заведём в переменную, создадим переменную секондари, заведём туда этот цвет, то есть я его скопирую. Вот.

99: И дадим прозрачность 0 5. То есть так держим на цвете, идём сюда, добавляем прозрачность, выбираем ргба, отлично. И теперь тут уже указываем 0 5. Вот, соответственно, необходимый цвет. Так, какой-то он, ну да, такой и должен быть.

100: Немножко зелёный. Вот отлично. На этом так, с переменными базовыми мы закончили. И давайте определим контейнер, который я начал писать. Да, то есть у контейнера будет ширина, я сразу буду писать max witt, то есть с прицелом на адапти.

101: И вот максимальная ширина контейнера это как раз то, что мы указали в container with для того, чтобы использовать css переменную, мы пишем var скобки, и в этих скобках мы указываем имя переменной. Вот так это выглядит. То есть вот так мы её обозначили, и вот так мы

102: Que используем вот теперь у нас есть контейнер с вот такой шириной для того чтобы он был по центру марджин 0 auto пропишем и давайте что нам нужно паддинги ещё да, указать давайте укажем паддинги па.

103: Сверху, снизу 0 слева справа паддинги. У нас здесь в этой переменной контейнер паддинг опять же пишем var скобки и переменные. Отлично то есть мы с вами сделали такой стандартный контейнер. Давайте разместим

104: Его на странице. Ну да, в целом так проверим, что все это дело работает контейнер и, ну я в него заголовок, например, помещу. Давайте, давайте даже не заголовок, просто какой-то блок создам и это сейчас тоже такой учебный момент идёт, который

105: Как бы к макету не совсем относится, да, но мы посмотрим, потому что я сейчас буду делать контейнер райд, да, и для этого я это все демонстрирую. Давайте создадим блок, у которого там будет высота 200, и какой-нибудь будет цвет фона, какой-нибудь такой.

106: Симпатичный. Вот сделали блок, поместили в контейнер. Переходим, смотрим на страницу. Ну давайте контрол 0. Да, вот, собственно, этот блок, вот он на странице размещён. Включим инструменты веб разработчика и посмотрим, да, вот, вот, на

107: Контейнер есть, поля есть место под контент, оно по центру. Здорово. Это просто обычный контейнер. И у нас ещё будет такой нестандартный контейнер, который должен с левой стороны начинаться так же, как и обычный, но должен уходить вправо до конца.

108: Вот, поэтому давайте напишем для нестандартного контейнера класс и тут нам и переменные пригодятся и так далее. Я дам ему название контейнер райт, то есть он уходит в правую сторону. Вот, и как мы зададим, как

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

110: Ширины, а будет такая небольшая хитрость. Мы определим место под контент с помощью паддингов. Вот давайте посмотрим, как это будет выглядеть. То есть, опять же, сейчас небольшой учебный момент. Давайте вот, к примеру, к этому контейнеру пропишем паддинг лэф 200

111: Паддинг райт 200, да, и я создам его тоже на странице, да, дам вот так контейнер райт. И давайте заголовки дадим. H1. Это у нас контейнер пошёл. И тут ещё 1.

112: H1. Это у нас пошёл контейнер райд. Вот, и мы сейчас с вами будем наблюдать, да, вот обычный контейнер определён. Вот определён контейнер райт, мы его определяем на основе паддингов. То есть мне нужно сделать слева такой же паддинг, чтобы он был равносилен.

113: Вот тому паддинга, который есть, ну, не паддинг, а тому отступу, который есть вверху. Вот, и каким образом мы это будем делать. Здесь нам поможет свойство кальк в css, которое помогает нам высчитывать какие-то значения там совмещая.

114: Мы можем совмещать проценты пиксели, там все что угодно и на основе этого высчитать какое-то значение. Вот поэтому пишем кальк, круглые скобки и то есть что мы будем делать? Смотрите, у нас есть 100% это ширина страницы.

115: Да, есть 100% ширина страницы. Дальше мы знаем с вами ширину контейнера 1270, то есть - 1270 пикселей. Вот. Да. Соответственно, если мы из 100% выч.

116: Ширину контейнера, то мы получим те отступы, которые должны быть по краям, то есть сейчас для container right я указал только паддинг слева, и он равен 100 процентам минус ширина контейнера, то есть таким образом отступ, который сейчас слева.

117: Это как раз вот тот отступ, который получится, если сложить у обычного контейнера отступы слева и справа, да, вот он получился, то есть он в 2 раза больше, чем вот 1. Отлично. Ну, нам нужна половина этого отступа, поэтому мы разделим это на 2, то есть мы

118: Обратно помещаем в скобки 100 - 1270 и делим на 2. Вот. И таким образом мы уже получаем отступ слева. Вот. Но вы видите, что все равно он не на 1 вертикальной линии. Почему? Потому что у верхнего контейнера есть

119: Ещее паддинг 15 пикселей да, поэтому нам нужно ещё 15 пикселей сюда добавить + 15 пикселей здесь очень важно внутри calc когда вы пишите делать пробелы вокруг арифметических знаков, то есть 100% пробел минус пробел.

120: Это важно. То есть, если вы пробел писать не будете, работать, он не будет. Вот. И, собственно, вот такой нехитрой формулой. Мы с вами создали контейнер райт, который начинается так же, как и обычный контейнер, да, использует 100% ширины страницы и

121: Использует то, что мы знаем ширину контейнера. Начинается Ровно также, но уходит вправо до конца. Отлично. Давайте скопируем эту строчку, которая у нас получилась, паддинг лэфт, и пропишем её к контейнер райт. То есть мы у него задаём только паддинг лефт, потому что отступ

122: Есть только слева. Вот. Ну и

123: Вдобавок я предлагаю сюда ещё добавить переменные. То есть, в принципе, ширина контейнера у нас в переменную записана, да, 1270, поэтому давайте вместо 1270 мы укажем контейнер вис, и вместо 15 пикселей мы укажем

124: Контейнер паддинг. Вот, вот таким образом это будет выглядеть, да, сейчас выглядит уже немножко страшновато. Если бы это сразу показал, да, были бы вопросы, да, наверное, откуда это почему? Но так как мы написали это по шагам, то я думаю, в принципе, все по

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

126: То есть, к примеру, у вас в проекте, там ширина контейнера будет другой, да, давайте вот я на уровень там html поднимусь, да, вот видите, поднимаюсь на уровень html и вижу вот эти переменные рут. И, к примеру, у вас будет проект, у вас там будет ширина там 1400.

127: Без проблем. Вы делаете контейнер уис, 1400. Отступы у вас будут там по 30 пикселей, например, меняете переменные. Все. У вас есть обычный контейнер, есть контейнер, который вправо уходит. Ну, аналогично можно сделать контейнер, который наоборот,

128: Идёт от левой стороны и заканчивается по основному, да, то есть, ну, дать дать такой же, такая же формула, только дать паддинг райд. Ну давайте, кстати, сделаем, че прикольно, прикольно будет, пусть остаётся здесь.

129: Давайте сделаем контейнер лефт и у него будет все тоже самое. Только это будет такой паддинг райт. Вот. И давайте его тоже пропишем и посмотрим, что все это. Мне, кстати, нравится. Контейнер, лефт, к примеру, да, и контейнер, лефт классом.

130: Вот и посмотрим. Да, вот отлично. Вот у нас есть вот 3 такие разные вариации контейнеров, причём, что круто все висит на переменах. Там нужно ширину поменять. 980, пожалуйста, нужно отступы поменять там по

131: В переменных поменяли и такая вот, ну, не сетка, да, но блоки из контейнеров у нас есть. Вот, собственно, как 1 2 из этих контейнера мы с вами будем использовать в вёрстке. Отлично. Давайте открою.

132: Код, который, ну вот, собственно, там контейнер, там, ну, переменные слишком выше написано. Ну вот, можно на него посмотреть. Окей, давайте посмотрю в чат, кстати, самое время, самое время.

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

134: Каких-то вот таких блоках, когда мы что-то завершили логическое и отвечать на вопросы, да, или просто смотреть чат, что что написали и следить за порядком. Вот.

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

136: Запись вебинара точно останется на несколько дней. Вот, а потом по факту я посмотрю, если нормально пройдёт, я её оставлю. Если мне что-то не понравится, я её удалю. Вот, поэтому сегодня она будет несколько дней, она повисит вот на

137: Долгий срок, пока не обещаю, кто хочет верстать на табличках, стучите по барабану. Так, здравствуйте. Насчёт курсов остек. Ну, у нас нету курсов, стек, у нас есть курсы по фронтенду. Вот.

138: Это, я так понял, запись урока по вёрстке. Ну, сипила, пишет, да, это запись, это запись. Я предвидел, что вы напишите комментарии, поэтому именно в этом тайминге я это и говорю. Так, этот стрим для опытных верстальщиков, ну, для начинающих, ну, для тех, кто

139: Уже, ну, редактор открывал html, писал и че то добавлял, вот хотел делать прям сильно для, ну, короче, я просто заявил сисс, да, поэтому я не буду сильно в какие-то такие дебри уходить. Будем делать все, максималь.

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

141: Давать. Вот поэтому рекомендую потихоньку внедрять это вот, вот в Москве ливень сильный, сильный. Да, сейчас у нас сезон, это грозы идут почти каждый день. Было бы здорово, если бы сделали отдельное видео по звёздному рейтингу.

142: Ну да, может быть, сделаю. То есть у меня есть там вообще крутое решение для него. Вот. Но сегодня мы максимально просто его сделаем. Хорошо, здорово. Да, всем спасибо. Да, вот пишу круто, вижу круто с контейнерами понравилось. Короче, переходим дальше на

143: Начинаем верстать шапку, верстаем шапку. Ну, 1, что мы делаем, это, кстати, сразу скажу, важное замечание. Я буду использовать, ну, такой компонентный подход. Ну то есть то, как я привык верстать и тот подход, который даёт максимальную

144: Гибкость. Единственный, единственная особенность у него это, ну, возможно, дополнительные блоки, да, то есть там бывает, кто-то раз в 100 лет напишет много обёрток и так далее. Вот. Поэтому, если вам много обёрток, можете все писать там, в

145: Не знаю, на одних дивах и не разбивать по компонентам, но я как-то привык делать такой компонентный подход. Собственно, дальше это будет видно. Поэтому, да, где-то мы будем создавать дополнительные обёртки, но в целом это удобно потом для того, чтобы

146: Управлять своей вёрсткой, вообще понимать там, как она строится и так далее. Вот. Поэтому такой большой дисклеймер, я сказал все внутри body я все удаляю и начнём описывать шапку, да, значит, что у нас будет

147: Давайте тоже видео я убираю, чтобы не отвлекало и погнали по шапке. Какая разметка у нас в ней будет находиться? Значит, ну, собственно, шапка, потом навигация, да, то есть шапка большой контейнер для всей шапки.

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

149: Наложим её поверх и у нас получится вот такое, ну как треугольник внизу шапки, вот. Потом по контенту будет вот такой блок с навигацией. К слову, мы его будем переиспользовать, потому что в подвале точно такая же навигация. То есть посмотрим, как переиспользовать как раз

150: Вот компоненты, да, когда мы так как бы, с таким подходом верстаем, ну и после будет вот такой блок с контентом, в принципе, здесь все стандартно. Бейджик, там текст и заголовок. Вот погнали, переходим.

151: Шапку хедер с классом хедер, шапку определили далее внутри шапки весь контент идёт внутри контейнера. Вот. Ну давайте как бы так, чтобы

152: Мы по шагам шли и не особо да, вперёд забегали, то есть чтобы у нас вёрстка шла в ногу вместе с css, поэтому буду верстать сразу так, по ходу, давайте вот хедер хедер мы определили, давайте перейдём в main css, так?

153: И дадим такой комментарий. Ага, не получится. Так, дадим такой комментарий, как хедер. Вот напишем хедер и что мы сделаем для шапки. Ну, во первых, у шапки у нас будет задан, задано будет many.

154: Минимальная высота. Вот, потому что есть картинка, чтобы она помещалась. Поэтому для хедера мы пропишем такую вещь, как минимальную высоту. Вот мы видим 940. Собственно, я для шапки укажу ми.

155: Weeds да, почти так, min hayat. Минимальная высота мин хайт 940 пикселей. Вот. Далее давайте зададим для шапки фон контрол клик кликаю куда-то по фону попадаю вот в этот ректангл смотрю, да, вот у

156: Него в заливке есть линейный градиент Иду в inspect и из сисс копирую вот этот бэкграунд с градиентом, вот скопировал и вставляю собственно градиент у нас есть, и теперь шапку уже можно посмотреть вот она такая, да, 940.

157: У неё, ну вот, да, видно, она заканчивается. Минимальная высота 940. Отлично. Далее давайте сделаем вот эту линию внизу, чтобы, да, она красиво заканчивалась. Это мы

158: Делаем с помощью псевдоэлемента before. То есть мы вот ту картинку, которую мы экспортировали в хедер хедер ботом, вот эта свгк, да, вот мы её прикрутим вниз шапки для

159: Напишем хедер.

160: Сейчас бифор или нет? Автор пусть это, пусть это автор у нас будет автор бифор, у нас будет картинка хедер, автор, ну и в принципе он как бы внизу, да, по логике подходит, чтобы псевдоэлементы отображались, нужно контент у них указать. Вот. Далее.

161: Мы его будем позиционировать абсолютно. Соответственно, шапка у него будет родителем, поэтому позишн релатив. Ну и этот автор, мы позиционируем, каким образом left 0 ботом 0. То есть в нижний левый угол ширина у него будет 100% и

162: И высота у него будет 96 пикселей, то есть это как раз высота вот этого svg элемента. Вот da 96. Далее давайте пропишем этот svg elements в background. Image пропишем бэкграунд.

163: Image url кавычки и укажем путь так да, путь относительно css там выйти на уровень вверх, зайти в имидж, зайти в хедер и выбрать хедер батм вот отлично мы его.

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

165: И чтобы он растянулся на всю ширину. Поэтому мы пропишем бэкграунд сайз 100%. Так, ну по идее это сработает и на ширину, и на высоту он вот так вот растянется. Но тут есть 1 момент, он растянулся с уче.

166: Там своих пропорций, да, то есть, вот, ну, аспект рейтио, то есть, аспект решио, да, там, то есть он пропорционально растянулся. Если у него вот ширина вот такая-то, и высота должна быть больше. А у нас высота 96. Вот, поэтому у нас будет, конечно,

167: Трансформироваться непропорционально вот, да, он у нас будет непропорционально трансформироваться, но, но все равно будет этот угол сохраняться, но чтобы svg трансформировался без учёта пропорций.

168: У svg нужно удалить 1 элемент, то есть нужно открыть этот svg elements и сейчас или удалить, или добавить так, view бокс и так далее.

169: Давайте.

170: Нет, нужно, значит, добавить 1 элемент. Сейчас я скажу какой. Да, нужно добавить атрибут, который звучит следующим образом. Презерв аспект рейшо равно no. Вот если мы добавляем

171: Этот атрибут, соответственно, свэг элемент будет трансформироваться не сохраняя пропорции. Давайте обновим момент истины. Так и пока пока это не работает давайте посмотрим, что здесь

172: Я удалю ширину и высоту тоже из svg она нам не нужна. Viewbox оставляем вот отлично и да собственно вот мы получили нужный результат ну кстати да, если хочется все-таки с

173: Оставить пропорции. Вот всегда меня тянет немножко поэкспериментировать на стримах. А если хочется оставить пропорции, можно, конечно, тогда, ну, через разметку сделать, то есть не через псевдоэлемент before, а просто через разметку эту картинку наложить, растянуть.

174: Да, тогда и высота подтянется, и, может быть, оно интереснее, кстати, будет. Ну, давайте оставим так, да, но в целом, как бы альтернативный вариант я озвучил. Вот. Окей. Ну, таким образом мы сделали то, что хотели. Давайте теперь

175: Заверстаем навигацию. Вот она в шапке. То есть что здесь блок с навигацией, логотип, потом вот эта менюшка и менюшка Сайна плагин. Как это будет выглядеть? Сразу пишем разметку под это дело перехожу.

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

177: То есть зачем это надо? Я как бы описываю всю шапку по отдельным блокам, а потом уже эти блоки ячейки, да, я их наполняю. То есть у меня как бы будет 1 вот такая 1 блок хедер топ, то есть внутри шапки, да, от хедер топа будет отступ вниз, и потом будет

178: Блок вот такой хедер content и где уже будет находиться контент. Соответственно у меня есть классы, завязанные на шапку, которые определяют как контент внутри шапки выстраивается, как он там отталкивается друг от друга и так далее. А внутри этих блоков я ставлю там навигацию.

179: Ещё что-то и навигация уже не будет там отталкиваться от чего-то, потому что вот эти марджины у нас будут написаны на вот этих ячейках для хедера. Вот поэтому создаём хедер топ вот таким образом и в

180: Top. Мы будем делать навигацию. Вот давайте дадим навигация, нав, ну или давайте схематично покажу, как это будет. Да, то есть вот у нас есть хедер топ, в нём навигация и под ним у нас будет контент.

181: То есть хедер content, хедер контент. Вот. И здесь, здесь у нас будет блок с контентом. Да, давайте мы эти классы опишем. Хедер, топ хедер content, то есть от верхней части, да.

182: У нас есть отступ вниз. Вот мы видим 86 пикселей марджин ботом, 86 хедер content, он у нас будет иметь ограничение по ширине. Если мы посмотрим, то вот максимальная ширина 500.

183: 92. Соответственно, для него мы пропишем Макс, Макс витс, 592 пикселя и ещё у хедера. Я забыл паддинг указать, если мы посмотрим от верхнего кра.

184: До контента 44 пикселя. Поэтому на весь хедер мы повесим Падин топ 44. Вот. То есть, да, вот такие блоки получились. И, кстати, у меня есть вот этот тег блок, который я делал, и он, кстати, будет поле.

185: Для того, чтобы схематично, опять же, показать, что у нас сейчас получилось. То есть мы выстроили такую структуру для шапки из ячеек. Вот, да, то есть вот у нас такая структура получилась. Да, почему, кстати, паддинг топ не сработал, потому что я его указал в

186: Автора надо было в хедер указать. Давайте в хедер укажем. Вот так, вот так вот так это будет позишн, мин, хай, Падин топ и background. Вот, вот, да, и вот такая структура у нас получилась. То есть вот это вот, ну да, такой подход, он очень удобный, потому что

187: Ну, потом легко управлять элементами, можно что-то переиспользовать. Кстати, например, навигация у нас в шапке и в подвале одинаковая. То есть мы её вообще прям полностью переиспользуем вместе с логотипом и просто напишем модификаторы по банем. Нгу и все будет.

188: Здорово, да, вот мы сделали шапку, сделали ячейки, и теперь эти ячейки мы с вами наполняем контентом. Вот теперь я занимаюсь навигацией. То есть вот этот блок навигейшн я удалю, конечно же, и нарисую здесь уже навигацию, которая должна быть

189: Собственно, что это у нас будет? Это будет нав тег nav с классом nav. То есть он будет содержать в себе всю навигацию. То есть вот вообще прям вся в навигации у нас есть 3 элемента, ну, базово, на самом деле, 4 у нас ещё потом будет кнопка для mobile.

190: Навигации. Ну вот базово мы видим 3, ну, основные, да, лога, вот эта менюшка 1 и 2 менюшка Сайнап. Соответственно, мы прописываем здесь на лога. То есть, опять же, да, отдельные такие ячейки, то

191: Есть ячейка под логотип, ячейка под нав лист. Ну, такая 1 навигация, её лист назову, a2 логин назову, то есть какой-то лист, какой-то список меню и какой-то логин, да, и, ну опять же, то есть там вот что у нас получилось.

192: Давайте там будем использовать этот блок, который у нас есть. Вот блок лога, потом блок, давайте там лист и блок для Логина. Вот будем использовать и посмотрим, да, то есть сейчас мы выстраи.

193: Структуру. Вот давайте скопируем эти стили, перейдём в css, дадим комментарий, что мы теперь с навом работаем с навигацией. Вот такие у нас классы и подумаем, что нам нужно сделать. То есть нам нужно эти ячейки разбросать.

194: Да, то есть, ну, сделать, ну, по флексу их разбросать, спейс, битвин дать, чтобы они в ряд выстроились, пустое пространство между ними было там и так далее. Вот, поэтому на naf мы указываем дисплей флекс, джесиа, контент спейс, битвин.

195: Дальше.

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

197: 80 пикселей, то есть отступ между ними будет по 80 пикселей. Ну, такой минимальный. То есть вот у меня получилось 3 блока в навигации под логотип, под 1 менюшку и под 2 отступ между ними по 80. Но мы на самом деле добавим ещё space between

198: И таким образом они вообще раскидаются, да, но когда мы будем уменьшать вот размер контейнеров, почему он дальше не идёт? Потому что браузер не позволяет. Вот. Но если я буду уменьшать через инструменты, да, вот я уменьшаю, и вот он

199: До 80 дойдёт и все. Дальше он не уменьшится. Вот для этого я колонн гэп задал. Вот. Ну окей, это мы убираем. То есть вот у нас теперь есть ячейки для, для блоков в навигации. Ну и, собственно, теперь мы их заполняем тем, что

200: Должно быть внутри. Давайте сделаем логотип, сделаем уже нормальный лого. Давайте сделаем логотип на самом деле тут по разному, там можно дивом, да, давайте тегом h2 сделаем. В принципе, тоже практика такая встречается.

201: Заголовок с классом лога внутри ссылка и внутри название go trap. У нас логотип, кстати сделан текстом и это такой же шрифт, как и у всего макета вот он go trap, это он просто набран текстом, вот поэтому.

202: Просто делаем h2 с классом лого, внутри ссылка и go trap вот давайте стилизуем логотип.

203: Переходим сюда вверху. У меня пока классы пустые остались. В общем, я их либо со временем удалю, либо они нам пригодятся, и мы как-то их заполним. Да, если нам это нужно будет, то есть мы посмотрим, если они нам будут полезны, мы их заполним.

204: Если, если нет, мы их пока не трогаем. Вот логотип у нас. Ну а потом мы удалим по финалу вот логотип, стилизуем его. Ну, в общем, контрол клик. Смотрим, что это, это фонсай 20 болт и белый. Ну,

205: По сути, тут больше ничего и нет, поэтому прописываем лого фон сайз 20, цвет белый. И вот насчёт белого цвета. Ну, для логотипа, в принципе, да, такая вещь важная, можно и указать, да, непосредственно.

206: Белый цвет, но в целом я бы белый цвет задал сразу на хедер. То есть смотрите, мы у хедера задаём градиентный Тёмный зелёный цвет, да, и то есть логично, что уже любой текст, который будет черным в нём появляться, он будет плохо виден. Да, он не контраст.

207: Вот, а в принципе, у нас весь текст в хедере белый по дизайну, поэтому мы сразу, то есть, как мы только задали Тёмный фон, мы тут же прописали белый цвет. Вот, ну, для логотипа пока вот такие свойства и

208: Толщину я не указал, это у нас болт, поэтому фонд Вейт 700. Вот перейдём, посмотрим. И, да, похоже, единственное, что он должен быть белым цветом. Опять же, да, мы можем прописать лого. Эй, то есть

209: Ссылка в логотипе, да, пусть будет белая. Ну, давайте пропишем. Ну и в целом, вообще можно сказать, что, к примеру, все ссылки в, можно сказать, что все ссылки в шапке, да, с вот этим темным фоном.

210: Они по умолчанию синие да, там посещённые, фиолетовые, их не видно, можно сказать, что все ссылки да, пошёл писать css вот хедер пробел. A можем сказать калор, можно сказать белый прям явно.

211: Указать да, могу сказать inherit то есть наследует тот цвет, который указан у родителя, у родителя указан белый ну давайте так, белый да, укажем вот отлично, сработает ли это, да, сработает то есть все ссылки в все ссыл.

212: У нас белые вот ну если тут прям от лога да лога я бы тоже ссылку бы ну на самом деле здесь уже не так это важно но если мы там color равно инхари вот в принципе.

213: Это можно было не указывать, она у нас и так белая, но так мы просто сказали, что ссылки внутри лога должны быть такого же цвета, как лога вот r лого у нас белый, окей, логотип готов, теперь идём к навигации, вот это.

214: Home сервисис прайсинг контакт. Делаем её с помощью списка, идём в index html, вот этот лист и делаем с помощью списка для этого создаём тег ul. Давайте так отступы добавим тег.

215: Он у нас будет идти, он у нас будет идти. Ну, на самом деле.

216: На самом деле я его совмещу с вот этим дивом, да, то есть, смотрите, вот этот div на лист, мы его превратим в ul, вот мы его превратим в ul и внутри будем создавать ли, эй, вот будем создавать такие ссылки и давайте вставим

217: Них нужный контент. Через шифт я выбираю несколько текстовых слоёв контрол ц контрол в и таким образом я их получил все текстовки, теперь просто их вставляю сюда. Вот и мы получили

218: Или список из ссылок. Далее давайте над ним поработаем потому что сейчас это выглядит, наверное как-то странно, да? Ну в принципе они уже все белые, да, почему белые, потому что мы сказали, там весь текст в шапке белый, все ссылки в шапке тоже белые.

219: Собственно да, нам уже не нужно как-то с ссылками определённо работать тоже обратите внимание нет ни маркеров, ни отступов никаких то есть потому что есть reset css, это очень удобно и нам нужно только выстроить их в 1 линию и задать отступы между ними. Вот все это висит на классе nav лист, давайте.

220: Поднимемся выше. Вот он у нас дисплей флекс, между ними есть отступы. Давайте посмотрим, какие это по 80 пикселей. То есть пропишем колум гэп 80 пикселей и, пожалуйста, отступы у нас готовы. Красота. Вот единственный, кстати, момент.

221: Я какой забыл вот в этой линии, да, логотип. 1 меню, 2 меню выровнять все по вертикали, по центру. То есть внутри nav добавить лайн айтемс центр. То есть обычно это как раз вот добавляю на том этапе, когда я

222: Начинаю видеть, что они не по центру на влога. Я думаю, нам не пригодится, да, поэтому мы его удалим отсюда. Нав лист выглядит вот так. И в целом, можно сказать, что с ним все в порядке. Да. Единственное, тут есть такой момент. Давайте

223: По тексту посмотрим фон сайз 15 и медиум. Давайте зададим эти свойства. То есть мы укажем на лист фон сайз 15 фонт Вейт 500, что означает медиум. Вот теперь да, теперь это точно тот шрифт, который надо вот также

224: У активной ссылки. Ну, я думаю, это, наверное, активная ссылка, да, вот на страница, на которой мы сейчас находимся. Ну, либо можно это ещё по ховеру добавить. Есть вот такое подчёркивание внизу, давайте его добавим. То есть я сделаю по активной и по ховеру, то есть я пропишу вот

225: К этой ссылке дам класс active класс active вот, то есть если есть у нас какая-то ссылка внутри nav лист и у неё есть класс актив, то будет вот это подчёркивание внизу, то есть есть на nav лист.

226: Давайте скажем на в лист ссылка, и у неё есть класс active вот таким образом, и это также будет работать для ссылок, которые находятся в ховере, то есть на в лист ссылка, которая находится в ховере. Вот мы пропишем

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

228: Display block давайте дадим ширину какую-нибудь там 50 высоту 10 бэкграунд калор ред. Я пока просто делаю, чтобы он как-то отобразился да, далее позишн абсолют, то есть он относительно этой ссылки будет размещён.

229: Значит, ссылка должна быть родителем. Значит, нужно эту ссылку описать и сказать, что она родитель. А это какая ссылка? Это ссылка эктив, запятая и ссылка, которая в ховере. Да, в принципе, можно просто сказать, да, что все ссылк.

230: Родители, да, и все вот так будет. Короче. Вот. То есть на лист a все ссылки являются родителем, но ссылка, у которой класс active или которая в ховере, у них будет псевдоэлемент, который будет рисовать вот такой блок 50 на 10.

231: Красного фона. Вот позишн абсолют, лефт, 0 ботом 0. Давайте посмотрим. Мы сейчас, собственно, вот этот блок увидим. И если я буду ховер добавлять этот блок появляется вот теперь осталось сделать так, чтобы это был не прямоугольник не красный

232: Прямоугольник, а то, что мы видим в дизайне. Вот, а в дизайне мы видим вот такой элемент, 35 на 4. Вот такой цвет и радиус скругления у него. Ну давайте пропишем 35, кстати, насчёт ширины то

233: Тоже есть 1 интересный момент, как это можно сделать? Border radius добавить border radius 50 пикселей, то есть такие максимальные углы, максимальное скругление, да, вот он получился. Давайте теперь его, правильно.

234: Разместим. То есть, если мы посмотрим, то он находится внизу, да, вот некий отступ от текста, вот некий отступ, отступ от текста. Когда я сделал батом 0, мы видим, что он идёт туда. Вот, ну прям тут 1

235: Pixel всего лишь вот. А на самом деле тут чуть отступ побольше. Я сделаю следующее. Я его прокопируйте просто вверх подниму. Вот так. Раз нет. 1, 2.

236: 1, 2, 3, 4, 5, 6. Вот 6. Ну, получается, на 6 пикселей. Мне его надо вниз сдвинуть, поэтому я дам ему батом - 6 пикселей, это сдвинет его вниз. Вот посмотрим, да, сдвинут и по ширине.

237: То есть можно оставить вот такую фиксированную ширину 35 пикселей. И, собственно, тогда давайте контрол 0, да, на все, которые элементы я буду наводить. Это будет вот такая чёрточка слева шириной 35. Ну, можно сделать так, в принципе, прикольно. Вот, может быть.

238: У дизайнера была задумка, чтобы это была линия, но не полная. Ну то есть такая линия, которая идёт с левого края, но не доходит до правого края какое-то определённое расстояние, да, то есть вот можно посмотреть, давайте нарисуем.

239: Какой-то прямоугольник. Опять же, для того, чтобы рисовать, вам нужно скопировать в дубликаты к себе. Да, давайте вот нарисуем такой прямоугольник. Вот. И мы можем сказать, что 10 на 19, то есть 10 пикселей до правого края, он не

240: Доходит. Вот. И тогда у него ширина будет разная. То есть мы укажем лефт 0, а мы укажем райт райт 10 пикселей, и тогда ширину я указывать не буду. Посмотрим.

241: Что получилось сейчас? То есть теперь эта линия, она разной ширины, но она всегда не доходит 10 пикселей до края. То есть, возможно, такая была задумка. Вот мы её реализовали. Отлично, готово. Теперь поработаем над логином.

242: В общем, это тоже 2 ссылки, которые тоже сделаем в виде списка. И там 1 из них будет такая в виде кнопки. То есть есть 2 ссылки Сайнап и логин. Давайте выберем их контрол ц, скопируем вот сюда логин, мы их вставим.

243: То есть, опять же, вот этот логин я тоже переделаю в юл, скажем, что это будет юл, вот ли, ну, в общем, в целом можно какую-то лишку отсюда скопировать. Вот, да, но 1 из них будет Сайнап.

244: A2 будет логином. Вот. Далее на логин тоже давайте стилизуем, как обычные ссылки должны выглядеть в nav логин, какой там размер шрифта, толщина и так далее. Ну вот Сайнап, это 15 и медиум, ну.

245: По сути, то, что мы уже прописывали фон сайз, 15, фонд Вейт 500. Вот дальше есть в налогине отступ, между ними 25. То есть, ну, сейчас это список, да, нужно в ряд, и между ними отступ 25, соответственно.

246: На display flex колом гэп 25 пикселей отлично переходим, смотрим вот да, они уже стоят в ряд и теперь логин надо превратить в кнопку для кнопки мы.

247: И опишем отдельный класс, который будет у нас описывать кнопки давайте для этой ссылки дадим класс, равно бтн такое сокращение от батон, вот и перейдём теперь в css, дадим.

248: Комментарий батон. И опишем эту кнопку. То есть как она у нас должна выглядеть, вот эта кнопка, мы будем основываться на паддинга. То есть ширину, высоту я не задаю, основываясь на паддинга контента. Может больше будет больше тогда

249: Она будет расти по размерам и есть у неё бэкграунд такой градиент, да, вот такой градиентный и радиус. Ну, в общем, давайте бэкграунд пока скопирую, да, потом давайте, что паддинги добавим посмо.

250: Смотрим по 13 и 43 44 ну то есть 13 и 44 вот паддинг 13 пикселей сверху, снизу 44 слева справа также дадим дисплей инлайн блок, то есть, по умолчанию ссылка это inline элемент, и у неё не.

251: Работают блочные свойства. У инлайн блока будет работать, и паддинг у нас заработает. Давайте поработаем с текстом. Это что, у нас 15 пикселей и 500, да, фон сайз 15 von твейт 500.

252: Проверим, как это отображается. Ну, в принципе, неплохо, отлично. Да, то есть сама кнопка у нас готова. Можно какое-то поведение по ховеру к ней добавить батон ховер, чтобы что-то происходило. Ну давайте цвет.

253: Менять, кстати, цвет я не указал. Давайте укажем. Ну, цвет она сейчас просто наследует, да, но мы для кнопки, как для отдельного блока, отдельно укажем цвет, и пусть цвет меняется на какой-нибудь, не знаю, жёлтый вот такой, например, вот, ну, какой-то.

254: Поведение по ховеру пусть будет. Вот. И если мы посмотрим, вот, да, цвет меняется, можно ещё плавное изменение цвета указать. Transition. Калор, 0 2 с из.

255: Вот, теперь он будет более плавно меняться. Вот. И можно ещё, кстати, добавить какой-нибудь эффект прожатия интересный. То есть когда мы будем нажимать, чтобы она чуть вниз утапливалась, батон эктив, когда она

256: Активно, то тогда мы будем делать позишн, релатив топ, 1 пиксель, вот, то есть, ну, как бы смещаем вниз на 1 пиксель относительно исходного. Вот. И она такой вот эффект прожатия у нас получается прикольно. Давайте выровня.

257: По вертикали Сайнап и логин. Они у нас лежат в в nav. Логин вот здесь, да, элайн айтемс центр пропишем, посмотрим. Здорово. Вот.

258: Собственно, шапочка у нас готова. Ну не шапка, а пока навигация шапке готова. Вот давайте сделаем паузу, отвечу, посмотрю чат, отвечу на комментарии, что у нас здесь так, так, в чате тихо.

259: Кто успевает? Спрашивает Иван. Я на работе просто смотрю видос. Если бы был дома, я бы не успел писать. Ну, на самом деле, лучше как бы, потом уже, да, смотреть там и, ну, повторять, я не уверен, что вот так в лайве можно успеть. Да, можно svg.

260: Написать контент с можно svg написать контент url svg ну не знаю, не уверен посмотрите по спецификации если можно, то можно если в фигме соединить все куски и залить 1 картинкой.

261: Немного не понял.

262: Ну, если вот эти мелкие элементы, которые мы экспортировали, да, их можно как 1 и экспортировать, в принципе, да, чтобы их не раскидывать по очереди, да, можно так как раз ищу профиль для большого проекта. Если вас интересует вёрстка за деньги, буду рад поработать.

263: Александр пишет ну напишите в личку вконтакте или на сайте веб кадеми, инфа веб кадеми, инфа, собака, веб кадеми точка ру. Вот и посмотрим только, что смотрел.

264: Более годичной давности. Прикольно. Так, все смотрят. Вот и тихо. Стрим пушечный удалять нельзя. Окей. Так сколько сайтов надо сверстать для статуса? Верстальщик? Ну да, портфолио собрать. В принципе, уже статус есть. Да, дальше расти можно бесконечно. Вот.

265: Потому что вёрстка то тоже развивается правильно, какие-то новые штуки появляются вот в telegram, потом скинете сам проект, финальный код посмотрим, вот стартовый проект с картинками скину, вот финальный посмотрим.

266: Всем привет всем. Да? Ну отлично. Хорошо. В общем, не забываем лайки ставить. Погнали тогда делаем контент для шапки. Здесь в принципе все попроще будет. То есть, если мы посмотрим на контент, то это вот такой бейджик заголовок.

267: Текст и кнопка вот и переходим к ним.

268: Переходим в index html и можно вот так это все дело сворачивать да, чтобы не отвлекало вот теперь хедер content, мы работаем с контентом.

269: Хедер content, значит там 1 идёт у нас. Давайте сразу контент набросаю. Мне, кстати, тоже так нравится делать. То есть вот так просто набрасываю контент.

270: Вот, да, вот, то есть вот такой контент у нас есть, и теперь мы пишем под него разметку. 1, это у нас бейдж хедер бейдж. Дальше после бейджа у нас будет тайтл заголовок после тайтла у нас будет блок

271: Для текста текст в нём будет абзац с текстом. И после этого у нас будет кнопка в принципе, ну давайте хедер батон, вот, собственно, разворачиваем 3 вот таких дива у нас получилось. Кнопка эта будет ссылкой, поэтому сразу в ссылку её пере.

272: Делаю эйч реф равно.

273: Так, тут с кавычками закидываем сюда текст в эти элементы.

274: Так это у нас текст пусть будет в теге p кнопка в этом макете кстати много опечаток эксплор нау, поэтому можете их по ходу фиксить.

275: Вот заголовок, вот такой, ну, заголовок можно превратить в заголовок в tech h1, да, и того у нас получится дифф для бейджа тег h1 хедер тайтл. Далее дифф для текста, где тег п и ссылка. Вот так.

276: Такая разметка у нас под контент вышла. Давайте её скопируем. Эти стили, классы. Вот это у нас пошёл хедер content.

277: Ну, он к хедеру относится, да, то есть я там хедер писал, потом кнопку начал писать, сейчас хедер content пошёл писать. То есть, конечно, в ссс это было бы все в отдельных файлах. Вот. Но так как мы просто идём вот так, по ходу, сверху вниз, поэтому я уже не буду там прыгать куда-то выше.

278: Вставлять. Пусть так будет. Вот хедер бейджик. Работаем над бейджиком, что у нас здесь есть текст и подложка. Давайте посмотрим на текст 500 и 18. Вот, поэтому зададим фонсай 18.

279: 500. Далее поработаем. Ну, цвет белый, в принципе, тут и так все белое. Да, и для шапки мы белый цвет прописали, поэтому его не нужно указывать. И поработаем с подложкой у подложки у нас бордер радиус 15 и заливка вот.

280: Такая белая с прозрачностью давайте мы из инспекта это достанем бордер, радиус и background. Я скопирую из вкладки инспект для того, чтобы сразу сюда вставить background. Бордер, радиус паддинги теперь осталось задать давайте.

281: Посмотрим вот то, о чем я говорил в начале. То есть я в этом макете, как такой учебный макет, да, я буду округлять какие-то моменты. То есть иногда бывает действительно важно разные отступы. То есть вот вы видите сверху 11 пикселей, снизу 12, иногда это реально.

282: Важно. То есть иногда дизайнер вот именно специально делает там сверху 10, а снизу 13, например. То есть, ну вот это нужно там для визуала. Вот. Ну, в данном случае, вот я сказал в этом макете я это буду округлять. То есть я буду считать, что 11 сверху и снизу.

283: Вот, но имейте ввиду, в рабочих проектах иногда это реально важно. Вот. И слева, и справа буду считать по 30, то есть 11 и 30. Поэтому укажу паддинг 11 пикселей сверху, снизу и 30 слева справа. Давайте

284: Так, проверим, что получится вот что получается. То есть вот такой бейдж нам нужно, чтобы он занимал Ровно столько контента, сколько в контенте. Поэтому дадим дисплей, инлайн, блок. Вот. И да, вот теперь нормально далее от хедер.

285: У нас есть отступ вниз, вот мы замерим его, тут он 7 пикселей равен. Вот тут, кстати, ну это хедер бейдж, да, то есть, опять же, я не делал сейчас этот бейдж как отдельный компонент, чтобы его потом где-то переиспользовать. Да, поэтому марджин

286: Висит на нём же, да? Ну, в целом, там, если прям сильно закомпанейским, то можно прям и beige в отдельный класс выделять, и класть внутрь хедер бейджа. То есть вот до такого

287: Далее смотрим на заголовок, что это у нас 55 и regular, соответственно, для заголовка фон сайз 55. Далее от заголовка отступ вниз 30, марджин ботум 30.

288: Далее, ограничение по ширине мы, кажется, уже давали, да, то есть 592. И такое же ограничение я уже давал на весь блок, поэтому в целом, да, вот все нормально. Стоит посмотреть, чтобы слова также переносились. То есть natural beauty визас, да, все переносится. Так.

289: Отступ вниз, мы дали теперь работаем над текстом. Блок для текста отступ вниз до кнопки 68, сразу начну с этого margin bottom 68 и теперь поработаю с текстом. То есть текст это, ну, в принципе, весь текст

290: Который здесь внутри лежит, да, то есть у него вот то, о чем мы говорили, у него такой, ну, цвет белый с прозрачностью. Мы там говорили про чёрный с прозрачностью, да, ну, здесь мы его пропишем, значит, фонсай 25 болт и

291: Зелёный цвет фон сайз 25 phone твейт болт это 700 и цвет белый с прозрачностью давайте инспект возьмём и опять это белый прозрачность 0 5 вот то есть можно, конечно опасити лупить, но немножко странновато это.

292: Давать опасити. Лучше все-таки там через ргба сделать нужную прозрачность. 0 5. Вот.

293: И перейдём проверим да, все как надо. Единственное ограничение по ширине хотя, в принципе смотрите, все также получается да, in a beautiful слово beautiful переносится, хотя вот здесь по ширине мы видим 519, то есть как бы ширина меньше чем

294: Там 592, но все равно переносится корректно. Окей? Вот. Ну то есть в целом, на самом деле, да, иногда можно ещё дополнительно Макс видс задать и для вот такого блока. Ну, в нашем случае тут порядок и теперь

295: Кнопка экспор нау хедер батон. Давайте её пропишем. В принципе, хедер батон. Она на самом деле во многом похожа с кнопкой Сайнап, которую мы делали, ой, с кнопкой логин. И в целом, конечно, у меня была задумка сделать какой-то компонент для кноп.

296: Ну вот кнопка экспор нау и get статет, они прям одинаковые, одинаковые по высоте. Все остальные немного разные. То есть это по высоте 91 в сабскрайбе 105 логин у нас будет дублироваться. Вот, поэтому 2 кнопки, которые

297: Прям похожи мы их одинаково сделаем вот а эту кнопку я все равно ну я сделаю как прям отдельную вот соответственно давайте с ней поработаем там над текстом текст это 25 и semi bold то есть

298: Фон сайз, 25, фонт Вейт 600 теперь поработаем над отступами давайте 20, 27 и 48 скажем, паддинг 27, пикселей 48, пикселей дисплей лайн блок. Далее.

299: Градиент, ну, на самом деле, можно было прям скопировать стили из той кнопки, которая уже есть. Вот, но я её просто перепропишу заново. Вот бэкграунд, борде радиус. Так, давайте, ну, вообще бэкграунд рядом.

300: Радиусом где-то ставлю вот так переходим проверяем что получилось в принципе неплохо тоже можно добавить и hover и active для этой кнопки давайте добавим хедер батон а вот тут

301: Я уже действительно, наверное прокопируйте т это button hover button active прокопируйте, просто это будет для header button hover калор транзишн, эктив тоже вниз, чтобы уходило вот прикольно и типа.

302: Нажимается отлично, теперь пришло время разместить картинку вот у меня есть на, скажем так, да, на заготовке 1 вариант, как это можно сделать там через псевдоэлемент поставить phone эту картинку и вот

303: Разместить её. Вот, ну, на самом деле, кстати, было бы даже интересно, если её просто как картинку поставить. То есть если её как tag image разместить, да, возможно, возможно.

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

305: И, ну, за пределы контейнера она не выходит, это хорошо. Ну, давайте попробуем сделать. То есть, вот у нас есть хедер content, да, это, скажем так, часть под контент и сделать блок хедер, имидж, это будет

306: Картинка. Вот, и для того, чтобы они стояли в ряд, мы их

307: Мы их объединим в ряд, создадим такой блок header роу, вот и все это будет находиться внутри header роу, то есть вот такая структура хедер роу контент имидж, тут будет картинка, имидж.

308: Указываем путь к картинке хедер и хедер имидж он называется

309: Вот, и сейчас сделаем хедер роу. Необходимо стилизовать хедер роу. Я уже опишу повыше там, где я начинал описывать контент, то есть там, где у меня вот эти ячейки, где-то у меня это было, вот

310: Топ пусть здесь будет хедер роу, потом идёт хедер content и потом идёт хедер имидж.

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

312: Будут. Вот, да, то есть вот так это получается, но картинка все равно должна, ну, определённые размеры занимать и должна даже заходить под контент. Мы сейчас это постараемся сделать. То есть мы выберем эту картинку каким-то, ну, напрямую, скажем, да, хедер.

313: Image image вот прям ту картинку, которая здесь лежит дадим ей те размеры, которые должны быть то есть мы прям чётко пропишем, чтобы она не ужималась размеры тут, кстати, можно взять размеры из изображения.

314: Хедер имидж вот 894 на 940 прописать vs 894 hayat так точно 940 да, vs 940 то есть ну.

315: Она по высоте, как шапка, прям 894 на 940.

316: Дальше. Ну, я сразу укажу обжект фит.

317: Кавер? Нет, cover не надо. Так, ну давайте посмотрим, размеры правильные? Нет, она сжалась. Почему она сжалась? Потому что на самом деле вот тот резет сисс, который мы подключали, в нём есть 1

318: 1 момент у всех картинок и svg элементов прописано такое свойство max witt 100% на самом деле это удобно, чтобы картинка контентная не выходила за пределы, но иногда это мешает, то есть в данном случае это мешает, и поэтому этой картинке стоит

319: Макс витс указать ансет, то есть не задано, вот, чтобы это её не ограничивало. Вот тогда вот она наша картинка, да, но мне нужно сделать так, чтобы она как бы была и в блоке, но прям так сильно не сжимала другие блоки.

320: Поэтому я её абсолютом вынесу позишн абсолют, а хедер имидж у неё будет позишн релатив, и она абсолютом будет топ 0 и white 0, то есть в верхний правый угол её загоню и посмотрю, что из этог.

321: Получится. Ага. Вот что, вот что из этого получается. Почему так получается? Потому что блок, который под картинку не имеет ширины, потому что картинка ушла в абсолют и, соответственно, она его не растягивает. То есть, если посмотреть, вот

322: Вот хедер, имидж, блок. И вы видите вот здесь вот где я сейчас курсором показываю, тут будет такая подсказка 0 на 571. Да, почему так происходит? То есть ширина у него 0, потому что контента нет, картинка в абсолюте, соответственно, она выпадает из его

323: Потока элементов. Вот, поэтому хедер имидж давайте, если мы ему пропишем какой-нибудь flex grow 1, да, чтобы он все равно растягивался вот отлично. Он растянулся. Флекс Гроу 1 ему дали он

324: Тянулся. Он получил какие-то размеры и картинка теперь в его верхнем правом углу. Ну в целом неплохо останется её только немножко поправить. Хедер имидж, флекс Гроу 1. Вот. И теперь, значит, мне нужно что

325: Чтобы картинка не выпадала за пределы шапки. То есть мы шапке хедеру пропишем, оверфлоу хидден, и она тогда не будет выпадать. Вот, да, то есть, ну все, вот её не видно. Ну и потом её останется немножко приподнять. Вот на head.

326: Повесим, где у нас хедер, дадим оверфлоу, хидден. Вот и теперь картинку мы немножко давайте так, сюда, вправо.

327: Чуть чуть мы её приподнимем, то есть сейчас у неё top 0, а мне, значит, нужно какое-то отрицательное значение дать - 100 пикселей ну, тут я уже буду на глаз примерно её как-то размещать, то есть смотреть примерно по макету там вот где волосы, да, где буквы.

328: То есть где вот край волос, тут буква a и буква эйч, вот как-то примерно так.

329: Значит, ага, и h.

330: То есть оно так должно быть выше и white тоже.

331: И правее.

332: Вот примерно вот так, мне кажется. Ну, по высоте тут момент, конечно.

333: На что тут ориентироваться? Ну, примерно так, да, может быть, там чуть чуть правее, чуть чуть выше. Ну, в целом, то есть, можно пиксель пефок наложить и прям точно эти

334: Точки прописать то pride у меня получились вот такие давайте укажем хедер, имидж, имидж у меня получилось топ - 181 и white - 87 вот такое позиционирование.

335: Для неё вот отлично вот дальше, конечно, так тут тоже есть момент, она не должна заходить на текст, да, то есть, ну пусть она на него заходит, но

336: Но она должна быть под ним, поэтому текст мы поднимем выше для этого для хедер content мы пропишем позишн релатив, чтобы работать с z индексом, и дадим ему z index ну там.

337: Единица, например, да, то есть, ну просто чуть выше, чем 0 для хедер контента. Это мы пропишем. Вот.

338: Вот так, отлично. Да, и в целом, ну, дальше мы уже будем делать адаптив, там, перестраивать элементы. Ну, в целом, вот так мы это так мы это сделали пока на десктопе. Все отлично. Вот давайте сделаем небольшую

339: Паузу посмотрю чат, че у нас тут происходит. Вот и погнали.

340: Так ты очень много крутых штук мне показал прикольно спасибо хедер через полигон можно сделать через полигон не знаю немножко не понял через clip path?

341: Через полигон. Не понял, какой полигон. Вот сколько за вашими плечами опыта в разработке вёрстки. Ну, в целом этим занимаюсь. Ну, больше 10 лет, да, гораздо больше, даже больше 15. Вот.

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

343: Спасибо. Так, это та грань перехода. Верстальщик фронтендер имха. Подскажите, пожалуйста, если возьму заказ на фрилансе, там будет что-то не смогу сверстать и не могу найти решение, как быть?

344: Иметь каких-нибудь, иметь вокруг себя окружение верстальщиков, не знаю, обратиться в наш чат верстальщиков за помощью. У нас есть чат верстальщиков. Вот сказать, ребята, помогите, есть такой блок, как его сделать и так далее. Ну у нас, собственно,

345: Есть чат выпускников. Те ребята, кто курсы проходят. Вот там часто ребята, вот, в принципе, с такими вопросами обращаются, потому что все макеты разные, да, и все равно там верстает, ты будешь сталкиваться с чем-то новым, а кто-то это уже решал.

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

347: Подскажите, почему кнопки, ну, уже ответил, а почему кнопками не задать модификаторы и далее их менять? Там можно сделать через модификаторы? Можно, вот можно сделать через модификаторы. Мы так сейчас более просто.

348: Путём пойдём. У нас будет 1 кнопка, которая в 2 местах используется. Ну да, в записи будет. Окей, погнали дальше.

349: Шапка у нас готова, я её скрываю. Как раз для этого у нас есть класс ноун, который мы описывали сисс, и мы вот так шапку скрываем и добавляем к ней класс ноун. То есть теперь она на странице не отображается, нам не мешает, и мы идём дальше, к следующему блоку. Следующий

350: Блок это чойс оф дестинейшн. Вот, значит, что по этому блоку, да, мы делаем секцию. Далее у секции будут определённые паддинги. То есть мы видим, вот есть отступ сверху, там 96 и вниз 200 тот, который 200 вниз, мы

351: Не знаю, разделим его, например, между 2 секциями. На 1 будет 100 и на другой 100. Вот. Ну, далее контейнер, контейнер, райд, который до этого мы делали. Далее будет такой левый блок под контент и правый блок под

352: Карусель. Вот погнали. Можно сделать main, можно сделать section.

353: Section с классом Десте, так как правильно пишется слово дестинейшен, дестинейшен.

354: Дестинейшен. Вот, к слову, тоже бесплатный совет. Если используете какие-то английские слова, используйте правильно. Если не уверены, проверяйте в словаре через google транслейт, переводите, потому что ваш код может быть написан там.

355: Хорошо, правильно, да, но там, если вы там трудоустраиваетесь, например, или кто-то ревьюит вашу работу, чтобы понять, какой вы разработчик и работать с вами или нет, то орфографические опечатки в названии английских слов в классах.

356: Очень сильно режут глаз. Вот. Поэтому не, ну не надо лениться, проверить себя в словаре, если вдруг какое-то слово там для вас неизвестное, там, или перевести его. Вот, и никогда не называйте классы трансли.

357: Там, типа, там, ну, транслитом, в общем, да, не надо. Окей, секция дестинейшен. Далее у нас контейнер райт, который мы сделали, и в этом контейнере у нас будет 2 секции. 1 под

358: Content другая под слайдер, поэтому делаем дестинейшен контент и дестинейшен слайдер. Раскрываем их. То есть опять же, да, у нас 2 такие ячейки получились. Вот. Ну, в принципе,

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

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

361: Ещё здесь это покажу, дальше уже не буду. Блок слайдер. То есть в чем прикол? В том, что у нас контейнер райт и у нас элемент будет уходить до так, content, slider, да, я их не выровнял в 1 линию, а чтобы их

362: Выровнять в 1 линию. Мне здесь ряд нужно добавить, я его пропустил. Давайте добавим дестинейшен роу. То есть вот такой ряд, мы его замыкаем, они лежат в ряду, а ряд лежит в контейнер, райд. Вот.

363: И сейчас пропишем классы и все станет на свои места. Идём вниз.

364: Дестинейшен.

365: Так, контейнер райд у нас уже есть на сам дестинейшн. Мы вешаем отступы сверху 96, снизу 100 Падин топ. Давайте паддинг, 96 пикселей 0 пикселей, 100 пикселей. Далее на ряд мы вешаем

366: Display flex есть некий отступ, если мы посмотрим, я беру отступ не до кружочка со стрелочкой, а до картинки 49, ну 50, да, колм гэп 50 пикселей, ну дальше.

367: Так, блок мы не описываем, контент и slider для контента у нас есть.

368: Определённая ширина. Вот.

369: Для контента.

370: Вот мы видим 456, то есть он ограничен по ширине, поэтому пропишем Макс уитс, 456 пикселей. Вот посмотрим, что сейчас происходит. Ну вот что произошло. Да, контент слайдер, на самом деле.

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

372: Дать какие-то свойства. Вот. И чтобы он там по ширине был, сколько нам нужно давайте посмотрим кстати ну это кстати необходимо будет задавать для того, чтобы карусель работала корректно. То есть давайте определим ширину для слайдера он ухо

373: Уходит за горизонт да, он у нас тоже будет уходить, но ширина нужна. Вот я выбрал 3 фотографии и вижу ширина 1110, поэтому на slider мы повесим ширину 1110 вот дальше, потом на мобилках мы

374: Это все будем обрабатывать. Вот, да, но пока вот так вот. И вот, собственно, наш слайдер теперь давайте проработаем вариант с тем, когда он уходит за горизонт. То есть я уменьшаю, уменьшаю, ну и он уходит. Нет, он

375: Нет, он остаётся. Нет. Блок, слайдер, слайдер. Видите? 1110. Вот.

376: Он уменьшился ну, в принципе, здесь можно задать флекс flex shrink 0, чтобы он не уменьшался, то есть чтобы он во flex box не уменьшался, оставался 1110, и мы увидим тогда горизонтальный скролл появляется и мы.

377: Сейчас от этого скролла тоже избавимся, то есть на slider мы повесим флекс шринг 0, он теперь не сжимается, есть горизонтальный слайдер, чтобы слайдера не было, мы на дестинейшен повесим.

378: Overflow x hidden, чтобы то что выходит за пределы не создавало скролл overflow x hidden добавим на секцию и таким образом слайде.

379: На самом деле уходит за горизонт да, но горизонтального скролла нет на destination.

380: Добавим это свойство. Отлично. Давайте теперь закинем сюда контент. Вот где у нас дестинейшен контент. Возвращаемся в фигму, копируем текст, вставляя

381: Что у нас здесь будет? Будет заголовок?

382: Далее блок для текста и ссылка кнопка, поэтому прописываем заголовок. Давайте тёк h2 с классом дестинейшен тайтл дестинейшен тайтл.

383: Куда мы закидываем этот текст? What choice of destination? No choice of он идёт размером меньше, поэтому мы поместим его в спам для того, чтобы отдельно стилизовать. Сделаем спан, запишем, чо?

384: А после опишем дестинейшен вот так это будет выглядеть далее блок для текста мы его назовём дестинейшен текст дифф дестинейшен, текст в нём тёк п. И да.

385: Текст. Вот.

386: И далее ссылка кнопка с классом.

387: Destination. Дестинейшен батон. Так я говорил о том, что эта кнопка на самом деле будет дублироваться, да, то есть она ещё внизу тоже встречается в блоке колтуэкшн, да, поэтому её

388: Можно сделать какой-то универсальной кнопкой. Давайте просто батен дадим. Вот просто такая кнопка. Окей, вот такой контент у нас получился. Теперь его нужно стилизовать. То есть вот дестенейшене т над ним сейчас работаю.

389: Копирую стили.

390: И title в тайтле будет spawn, поэтому можно сразу создать тайтл.

391: Спан вот далее текст ну и батон давайте поработаем над тайтлом сам по себе заголовок вот большой размер шрифта это 55 и semi bold фонсай 55 фонтей 6.

392: По спаму. Давайте посмотрим. Стоит вплотную 30 и 7 болт. Собственно, ну, спан будет наследовать 7 болт, да? Ну, фонсай, фонсай 30. Можем для него указать. Далее от заголовка отступ вниз 15 то ест.

393: Тайтла марджин ботом да 15, марджин ботом 15 далее от текста отступ вниз 60 можно сразу задать margin bottom 60 по самому тексту.

394: 25 медиум фон сайз 25, phone твейт 500 и по цвету то есть тут чёрный с прозрачностью и мы его выносили до этого в переменную, то есть можем прописать color war и указать здесь перемен.

395: Менную секондари, по моему, она у меня называется. Давайте посмотрим, может, ошибаюсь. Да нет, secondary вот переменная секондари, которая задаёт вот этот нужный нам цвет с прозрачностью, чтобы его там не копировать.

396: Rgb не переводить, мы его в переменную записали в начале стрима и вот так теперь используем отлично и то что касается кнопки давайте давайте продублирую я уже описывал где-то кнопку вот в хедер батон д.

397: Я продублирую её свойства. Ну, можно, конечно, модификатор делать в принципе.

398: Мы сегодня без модификаторов будем. Вот будет называться у нас эта кнопка батон. Ну я хедер батон прокопировал, просто назову её батон, батон, ховер, актив. Вот в целом она очень похожа, но что-то

399: И немножко другое. 27 болт фон сайз 20. Сами болт есть отступы 25 и 45. Опять же, да, я говорю, что я буду округлять, приводить к единым значениям. Ну и все. Дальше.

400: А, блок борде, радиус, может быть другой? Нет, такой же 27. Ну, короче, да, конечно, можно и модификатор, кстати, там сделать. Вот можно с таким поиграться. Вот давай я пока оставлю так, как есть и в принципе,

401: Вот у нас кнопка эксплор нау готова вот так дальше, что для нас важно. Кстати, почему-то я не вижу паддинга слева у этого контейнера. То есть вот здесь должен быть паддинг.

402: Слева.

403: Хотя плюс var контейнер паддинг. Почему мне его не заметно, а его незаметно на определённой ширине? То есть 1270 он есть. Вот, да, главное, что 1270, он есть меньше, мы потом

404: Через медиазапрос переопределим паддинг слева. Просто вот окей, слайдер остался у нас слайдер в целом можно его вынести на потом.

405: Ну или можно сделать сейчас, кстати, не знаю, успеем мы реально за весь стрим все сделать или нет. Да? Ну давайте, давайте слайдер сделаем, значит, по слайдеру какой у нас будет подход. Ну и тем более, это jazz, как бы, да.

406: Тоже интересно. Подход у нас будет следующий. Сейчас я все скрою то, что раньше было. Вот дестинейшен слайдер. Мы, значит, ну, сейчас мы просто разместим эти картинки, да, а потом мы прикрутим сюда, собственно,

407: Slider. Поэтому создам такой диф с классом слайдер, то есть это обёртка для нашего слайдера будет, вот и давайте пока картинки сюда закинем имидж сорс и укажем имидж слайдер 0 1 джи.

408: Да будет у нас 3 картинки.

409: У каждой картинки будет класс.

410: Slider, айтом вот что можно прописать для слайдера.

411: Так, ну.

412: Давайте скопирую.

413: Слайдер, слайдер айтом.

414: То есть, ну, мы их тут не выстраиваем в линию ещё что-то, потому что этим, собственно, сама карусель будет заниматься. Я просто сейчас, ну, предусмотрю тот вариант, что у нас какой то какая-то из картинок активная, да, та, которая по центру, вот она.

415: Активная должна быть и у неё размер будет чуть побольше. То есть если мы посмотрим у обычной картинки 335 на 402, мы пропишем и 335 хайт 402, то активная картинка, она чуть больше слайдер, а

416: Active у неё размер 380 на 456.

417: Хай 456, чтобы было корректное масштабирование. Да, мы пропишем обжект фит ховер, обжект фит кавер. Сразу картинки внутри тг имидж. Вот чтобы с этим проблем не было дальше.

418: Добавим скругление тут по 35 пикселей и у большой у маленькой, поэтому борда радиус 35 пикселей добавляем туда и сюда.

419: Вот. Ну, в целом на этом пока хватит. Давайте посмотрим, что у нас вышло так, что-то прям интересное. Где-то я мискликнул и высоту задал, да. 4, 1, 0, 2, 412 она должна

420: Должна быть или 402. Сейчас проверим. 402. Вот смотрю, что-то с высотой не то. Вот. Ну вот они, да, в принципе, есть картинки. Теперь давайте сделаем так, чтобы это было каруселью. Вот, чтобы это была каруселью, сидиэн.

421: И о карусель. Я по прежнему остаюсь верен о карусели, потому что она удобная, её быстро подключать, быстро настраивать для каких-то простых каруселей. Вот.

422: Поэтому давайте её подключим то есть можно зайти на сайт all карусель 2, можно зайти в доки и инсталейшн и здесь собственно все скопировать мы сейчас с вами все это сделаем 1 необходимо подключить джейквери, потому что она использует джейквери давайте.

423: Подключим джейквери. Сейчас я уже вангую, сейчас в чате кто-то обязательно напишет, что как же так что джейквери очень сильно грузит сайт, но я вам скажу, ребят.

424: Я вам скажу в стиле 1 блогера, что вы просто не видели реальные рабочие проекты, на которых используется столько скриптов и подгружается.

425: Столько различных ещё скриптов в тот момент, когда этот сайт у вас загружается. То есть помимо родных туда ещё столько всего навешивают, и все это работает, и вы ходите по этим сайтам и не замечаете этого, но почему-то, как только

426: Возникает вопрос подключения джейквери внутри вёрстки небольшой странички у многих сразу возникает. Ладно, какие-то у меня плохие слова идут, да, у многих возникает какое-то желание.

427: Что-то рвётся внутри, и они начинают кричать, а как же эти там, не знаю, несчастные 115 килобайт, которые мы подключим, или сколько тут даже 55 килобайт, которые ужасным образом затормозят сайт, но при этом люди не оптими.

428: Картинки не переводят форматы из png в jpeg не используют svg там, где надо, но зато знают, что джейквери каким-то образом сильно затормозит их сайт вот это все был сарказм, если что, вот библиотеку мы подключили. Давайте.

429: Тоже подключим тоже из cdn, чтобы это просто быстрее было то есть cdn джес пишем all вот all карусель 2 кликаю по названию, он покажет все что для неё есть мне нужно подключить джес сиэсэс и тему вот джесс, вот например 1 мин джес.

430: Копирую. Вот копиист крип, так вставляю. И вот он подключился, контрол с Претер, все выровнял. И дальше нужно стили и тему подключить. О, карусель мин сиэсэс. Это стили. Идём наверх и после своих

431: Вставляем. Так вот она и тему нужно подключить. Осим дефолт сисс тоже. Вот её копирую и тему тоже подключаю отдельным файлом. Вот подключили, теперь нужно

432: Написать разметку для карусели. Давайте заберём её отсюда. То есть о, карусель docx инсталейшн. И вот с этим вот такой пример. Давайте его скопируем.

433: И перейдём туда, где наша карусель должна быть. Я перед слайдером пока пример просто закину. То есть вот так это будет выглядеть ол карусели. И тут какие-то типа слайдики, да, вот все это мы подключаем, подключать будем в jazz давайте в jazz создадим файл main джес, давайте

434: Его подключим на страницу самым последним. Естественно, чтобы он работал скрипт сорс. Равно вот, и в нём вызовем карусель. Собственно, для

435: Для того чтобы её вызвать, собственно, вот этот код скопируем и в jazz его вставим. Здесь по классу ол. Карусель будет найдена обёртка, и внутри неё запустится карусель, так как я копировал исходный код карусели, ну, не исходный.

436: Какой-то пример из документации, да, тут этот класс уже есть. То есть, ну по идее, у меня сейчас карусель должна заработать с вот этим вот контентом. Давайте посмотрим, что произошло. Вот your контент мы видим. И смотрите, я могу его крутить влево, вправо.

437: И это круто работает. Вот так. Отлично. Теперь нам нужно сделать, чтобы у нас была своя карусель с картинками. Собственно, что мы сделаем? Мы сделаем следующий финт ушам.

438: Мы, у нас будет обёртка слайдер, а внутри будет находиться наша необходимая нам карусель. То есть смотрите вот эту карусель.

439: На самом деле можно было все заново написать, да, с учётом той разметки, которую мы уже написали, я все равно пытаюсь копировать, то есть у нас есть diff слайдер, вот он див, вот он, дифф слайдер внутри.

440: Его мы создаём диво карусель и наполняем его картинками. Ну то есть вот так это будет выглядеть.

441: Вот так выглядит разметка для карусели слайдер, потом all карусель, потом наши слайдеры атомы перейдём проверим как это выглядит ну вот так вот в принципе даже работает смотрите да даже что-то за край выходит ну прикольно вот теперь нам необходимо все это.

442: Дело настроить, чтобы это правильным образом работало вот за что мне нравится all карусель за то, что она очень простая как я не знаю как автомат Калашникова наверное или как молоток то есть здесь есть api опции и тут вот немного опций.

443: На самом деле, и когда, если с ней работать, то их все примерно уже плюс минус, знаешь, наизусть и можно сразу че то быстро настроить. Вот. То есть, что мы сделаем, давайте настроим опции, они передаются сюда в виде

444: Объекта. Вот нам нужно использовать такую опцию, как центр тру. То есть она нужна для того, чтобы центрировать элемент какой-то по центру и к тому элементу, который отцентрирован, будет применяться специальный класс. И по этому классу мы будем делать этот элемент больше, то есть

445: Сейчас я этот класс вручную прописал, да, но понятное дело, что он должен быть, ну, не вручную прописан, он будет меняться, потому что карусель будет крутиться. Вот, поэтому пропишем центр тру, то есть он будет добавлять

446: Специальный класс центр к центрированному элементу напишем луп тру, чтобы можно было циклить. И давайте, кстати я уберу свой класс active вот то есть сейчас все это просто слайдер айтемы. И я добавил луп. То есть видите, я могу перемещать вот

447: Но в чем прикол? В том, что тот элемент, который находится по центру, вот он.

448: В его обёртке есть класс active центр. Ну, эктив есть у всех активных, которые мы сейчас видим. А центр есть только у того, который по центру. Собственно, мы это будем использовать. Я там класс active прописывал, да, нужно поменять.

449: Его на центр, то есть slider. Ну, нужно правильно это поменять. То есть у нас поменять это нужно. Каким образом? Да, слайдер айтом лежит внутри, он лежит в центре, а center лежит в слайдере. Вот, поэтому у нас будет такой

450: Selector точка слайдер пробел точка точка центр пробел слайдер айтом

451: Вот так.

452: То есть внутри слайдера есть блок центр и там есть класс слайдер айтом. Вот, ну и вот таким образом мы будем увеличивать центральный элемент. Вот собственно, видите, что и происходит. Ну мы дальше сделаем так, чтобы все это красиво, плавно увеличивалось, но то есть в целом

453: Вот эта идея уже есть, она реализована. Вот какие сюда ещё настройки. Мы добавим меджис, чтобы пока далеко не уходить между слайдами, чтобы был отступ. Есть такое свойство margin 30. Это значит, 30 пикселей. Вот. Дальше, кстати,

454: Давайте луп закомментируем. Если я Луб закомментирую, и центр у меня включён. Ну, луп, это инфинит луп, бесконечная прокрутка, да, то он стартует с 1 слайдера, и он по центру. А в макете, если мы посмотрим, да, ну, какая картина по центру?

455: 2, a1 нет. Поэтому нам нужно, чтобы он стартовал вот так вот. Соответственно, мы можем прописать сюда.

456: Start position 1 ну наверное наверное это не будет иметь смысла после того, как мы включим луп, но все равно настройка полезная будете иметь ввиду, если вам где-то пригодится то есть я указал старт позишн 1 да, теперь он стартует с 1 ну как?

457: Это индекс. То есть индексы начинаются с нуля. Вот, собственно, вот, да, обновляю страницу. Вот он стартует, ну, со 2, но с индекса 1. Вот. И, ну, пока у меня loop нет, давайте сделаем луп тру и вот

458: Кстати, а если start index, если start position не прописывать ну в принципе да, то есть как бы тогда не суть, если у нас бесконечная прокрутка вот дальше ну давайте явно укажем айтемс 3, в принципе это значение по умолчанию 3 слайда за раз. Ну мы это.

459: Явно пропишем. Вот. И, ну, пока хватит. На самом деле у нас ещё будут настройки для адаптива, но в целом пока этого достаточно. Теперь давайте сделаем, чтобы плавно все это дело менялось, чтобы они плавно меняли свои размеры, картинки для этого

460: Картинки мы пропишем ну, транзишн транзишн 0 2 as is in. Вот, и теперь картинка будет менять свои размеры плавно отлично, да, но нам нужно сделать, чтобы вот эти другие карти

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

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

463: То лайтом, которая эктив паддинг, не задавать. Ну, в принципе, да, можно так сделать. Ну, я пойду немножко другим путём. То есть мы посмотрим, какой это отступ вот отсюда до верха.

464: Мне нужно понять, я нарисую такой прямоугольник.

465: Вот 27 пикселей, то есть мы видим, вот разница в высоте 27 пикселей, поэтому для слайдера айтем мы укажем марджин топ, 27 пикселей, но для той, которая активна, марджин топа, не будет. Margin top 0, вот.

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

467: Нужна была, как вы поняли, да, то есть мы от неё как бы идём к слайдер айтемам и в ней же у нас будут лежать кнопки переключения. Вот. И тут как раз вот все, кто спрашивают, почему там ссылка, не кнопка, настало ваше время. Твоё время, Валера.

468: Был когда-то такой сериал, в общем, делаем батон. Ну потому что здесь батон действительно уместно. Слайдер бтн. Вот, ребята, эта шутка была. Надеюсь, никого не обидел. Батон слайдер. Батон это

469: Будет у нас кнопка на ней мы нарисуем кружочек, внутри этого кружочка будет стрелочка которую мы уже сохраняли до этого image slider и air left вот и мы дадим сюда ещё такой класс кото

470: Будет говорить, что это pre, то есть кнопка назад.

471: И next кнопка вперёд.

472: Ну и в next будет error right, она у нас есть такая вот, вот такие кнопочки у нас получились. Ну, в целом, пока они там белый фон, вот левая видна правую я че то даже не наблюдаю.

473: А ну-ка.

474: Bad 0 на 25 нет, управа я.

475: Давайте пропишу лучше с путём, пусть он мне подскажет рай. Ну, может, я неправильно right написал? Не знаю, не вроде правильно. Вот и правая, да, тоже появилась. Теперь стилизуем их. То есть slider батон напишем.

476: Стиле.

477: Для кнопок вот они 68 на 68 круг.

478: This hide бордер радиус 50% так ну display block дальше стрелочка внутри будет по центру размещаться ну сделаем дисплей флекс я так размещу.

479: Фай контент центр элайн айтом центр дадим градиент из инспекта скопируем бэкграунд, лайнер градиент.

480: Ставим, перейдём, посмотрим, что получилось по итогу. Ну, неплохо, неплохо. Вот единственный есть момент, да, возможно, что здесь как бы реальный центр не совпадает с визуальным центром. Есть такая, есть такой дизайн момент. Вот если мы посмотрим

481: Да, на стрелочку сверху, снизу 27, а слева, справа, вы видите, да? 26, 31. Ну, потому что, как бы, как это визуальный центр тяжести у вот этой стрелочки, у этой фигуры, да, он, ну, не там, где, естественно.

482: Вот, поэтому 26, 31. Ну, в принципе, тогда можно через паддинги её отцентрировать. То есть джастифай не буду говорить, просто скажу. 26 слева.

483: 1 26, а у другой будет по другому. То есть здесь тогда нужно уже через

484: Через модификаторы работать. То есть у прев будет паддинг лефт 26 и контент. Давайте там джеста контент, флекс старт, да, к примеру, а у той, которая

485: Вперёд ну у неё другой паддинг слева, но я сделаю так flex end, то есть она по правой стороне будет выравниваться и у неё будет паддинг райт.

486: Вот. Ну и по идее это будет правильно. Нет, не получилось.

487: Так, есть батон флекс.

488: Justify content flex end.

489: Угу.

490: Slider, батон.

491: А я pre слаба, да, я не поменял на next, я смотрю на неё, не пойму. Вот отлично, да. Ну и теперь визуально, как все нормально. Окей, теперь нам нужно их разместить, мы их будем размещать.

492: По границам карусели. То есть вот мы видим, она идёт, ну, горизонтально, вертикально, она идёт по центру, но здесь вот мы видим вот 27 пикселей, да, она вылезает, ну, левая вылезает на 27 за левый край.

493: Соответственно, теперь мы их размещаем. То есть все они размещены абсолютом. То есть там давайте мы напишем код для 1, потом все это дело на 2 тоже перенесём позишн абсолют лефт - 27 пикселей.

494: Топ 50% и трансформ транслейт, игрек, транслейт, игрек, - 50% от своей высоты. Ну то есть чтобы она вертикально чётко была по центру. Это мы

495: Сейчас написали код, давайте его заберу и его напишу для преф. То есть это для кнопки назад. Вот слайдеру нужно дать позишн релатив. То есть наш слайдер, он родитель, потому что не абсолютом позишн.

496: Вот, переходим, проверяем. Да. Так, че то она. Сейчас посмотрим. Слайдер позишн релатив. Кнопка есть. Давайте зет индекс ей дадим зет индекс 9, например.

497: Set 9. Вот есть и вертикально. Ну, по моему она чуть ниже. Что-то я не дописал. Трансформ, транслейт, игрек. Ну, вроде бы все правильно, то 50%. Почему?

498: Не хочет.

499: Transform. Игрек. Ну да. Ну вроде бы как правильно. А сейчас момент просто у меня 2 кнопка внизу лежит, и она растягивает контейнер слайдера. Из за этого у него высота, боль.

500: Больше, чем высота картинок, поэтому все нормально, то есть кнопка назад она визуально по центру просто нужно правую тоже разместить, давайте правую тоже разместим, у правой будут такие же свойства, только у неё будет не left - 27, а white.

501: Rise - 27. Вот, вот, да, отлично. Вот теперь все хорошо. Кстати, правую не видно, но вот если я инструменты веб разработчика уберу, то она видна

502: Так.

503: А ну-ка давайте размер экрана побольше сделаем. Вот, да. Ну, если размер экрана сделать побольше, то вот, в принципе, вот он, наша карусель есть, так они горизонтально по центру стоят, знаете?

504: Удобный способ выравнивать, проверять линейкой это вот так можно, конечно, линейку к монитору прикладывать, но вот так удобнее да, то есть они нормально стоят, давайте вынесем какие-то общие свойства на общий уровень, то есть у этих обоих кнопок есть position absolute.

505: Топ трансформ зет индекс все что у них разное, это left и right, да, то есть вот лефт и райт это то, что их отличает вот поэтому давайте вот это общее мы вынесем на slider батон.

506: И оставим здесь только то, что их отличает. Вот тоже кто писал, что можно кнопки сделать через модификатор тоже можно поупражняться и сделать 1 класс и модификаторы на все кнопки, да.

507: Давайте теперь сделаем, чтобы они работали. Опять же, нам тут помогает документация оо карусель. Для этого мы заходим в ивенты. И здесь есть пример, где можно. Вот, собственно, где мы можем вешать

508: Свои события для того, чтобы контролировать оо карусель. То есть вот этот код давайте скопируем и используем его. Что здесь. Давайте я комментарии удалю. Какой здесь подход мы находим на странице тот элемент на

509: Который нужно повесить. Ол карусель. Вызываем на этом элементе метод ооо карусель. А далее мы находим какой-то элемент кнопку и говорим, что когда мы эту кнопку будем кликать, то вот переменная, да, этот элемент, который мы нашли

510: У него вызываем метод триггер и передаём название в виде строки next оо карусель, то есть и он, собственно карусель прокрутит вперёд, вот карусель мы и так находили на all карусель единственное вот объект с настройками, давайте отсюда заберём и.

511: Вот сюда вставим в вызов. Вот, вот это я удалю. Вот так у нас будет. Можно так написать. Вот нашли элемент, запустили карусель и далее кнопка, что тут сначала назад, потом нет сначала

512: Вперёд, потом назад. Давайте так сделаем. Я их местами просто поменяю. То есть сначала кнопка назад, слайдер батон преф. Находим эту кнопку по классу кнопка назад. Не надо нам параметры передавать. Кнопка

513: Назад будет обращаться к этому элементу ол, который мы нашли и будет вызывать метод назад и кнопку вперёд, находим кнопку вперёд по классу.

514: Next и крутит вперёд. Переходим, проверяем и все должно работать назад работает и кнопка вперёд она там за краешком вот она тоже работает красота то есть таким образом мы

515: Сделали. Есть 1 момент, да, вы видите, кнопки подпрыгивают в момент, когда идёт прокрутка. Почему? Потому что 1 слайд меняет свой размер, уменьшается, 2 увеличивается. И где-то вот в этом моменте весь, вся высота слайдера, она

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

517: Мы этого обычно не прописываем, но здесь мы пропишем. То есть вот высота по максимальной картинке 456, и мы слайдеру эту высоту пропишем, то есть найдём, где у нас слайдер хай 456 4 5 6. Прикольно? Вот.

518: Теперь высота у слайдера всегда фиксированная. И, собственно, вот так это вот так это работает. Вот. Ой, пардон, окей, всем привет, я здесь, я с вами. Так, давайте.

519: Почитаем комменты, посмотрим, что у нас здесь. Так, сколько так, ой, ну нормально. Прям чат оживился Иван, приветствую вопрос. Копирую свойства из плин. Объект получается больше, чем на макете.

520: Да, не совсем понятно. Ну, зеплин, знаю такую приложуху. Ну, здравствуйте. Так, это я, да, отвечал, да, имел ввиду хедер сделать через Клипас полигон. Ну, Клипас, полигон. Ну, нет, на самом деле, там дело в том, что

521: В полигоне нету опции для создания скруглённых Углов. То есть, ну, в полигоне, когда мы прописываем точки, у нас получаются острые углы. И если мы хотим сделать скруглённый угол,

522: Соответственно, ну, то есть, если мы вот треугольник делаем, да, делаем 3 точки, и получился острый треугольник, ну, там тупой, острый, ну, неважно, ну, там, нет, border радиуса, да, вот, а если мы хотим скруглённую точку получить, то нам нужно поставить там, ну, я не знаю.

523: Там точек 10, то есть, вот, ну или, ну, вы поняли, не знаю, может, точек 40, 50. То есть нам нужно самим нарисовать вот это скругление в полигоне. Вот я находил, есть решение, там на css различные миксины пишут, которые как раз генерируют.

524: Там, вот, но треугольника там не нашёл, в принципе, можно, наверное, придумать какую-нибудь формулу сделать, но вот реально svg проще вот все редакторы по зависят от редактора. Ну вот, да, Иван тут отвечает, ну там, ну.

525: Это по работе с макетами. Ну почему он другие отдаёт? Странно.

526: Сколько нужно учиться, чтобы начать с нуля и реально ли обучение совмещать с основной работой? Ну, у нас многие ученики совмещают обучение с основной работой. То есть, да, реально. Ну и причём многие уже, как бы, мы обучаем там много

527: Лет, скажем так, то есть лет 5 точно, да, и вот многие обучают, ну, многие совмещают обучение с работой. Сколько времени нужно, чтобы научиться, ну, всегда будет что-то новое, да? Ну, вот в целом, там 2, 3 меся.

528: Для того, чтобы освоить базу и верстать, этого хватает. Дальше вопрос практики и наработки практики. То есть, ну, там, повышение скилла, повышение скорости вёрстки, да, но в целом 2, 3 месяца, вот как у нас идёт

529: Curse этого хватает для того, чтобы базу получить, попрактиковать, сверстать несколько макетов, понять, что как работает. Ну а дальше уже повышение скилла и какие-то фишки, то есть там какие-то нюансы, моменты, потому что там, там тех же плагинов, да, там вариантов.

530: Карусели, их огромное множество, там 1 слайпер джес. Чего стоит? Сколько там вообще вариантов его использования? То есть, ну и никто не говорит, что нужно сидеть и весь его прорабатывать и только потом что-то верстать. То есть нет, мы как бы базу освоили, умеем верстать, когда нам

531: Что-то нестандартное нужно мы идём и разбираемся с этим, как с этим, ну мы разбираемся там или с плагином, или ещё с чем-то, но за счёт того, что есть база, уже с этим можно разобраться и понять, как это работает. Вот.

532: Да, пошёл тут, да, пошли тут комментарии по поводу этих программ. Так, гудмонинг, спасибо. Так, а я думал, должно быть так. Ладно.

533: Это прямой эфир, спрашивает дисс. Нет, это, это, это все, это эфир из будущего, это запись. Так где же фреймворк?

534: Почему джейквери? Да, я ждал. Я ждал. Нам нужно было подключить реакт сюда обязательно, да, нужно было подключить реакт для, для этой карусели из 3 слайдов. И, да, нужно было сделать ещё.

535: Состояние и там, не знаю, редакт тулкит, сюда ещё подрубить. И вот чтобы сделать карусель из 3 элементов, да, вот.

536: Так, в именовании классов 2 нижних подчёркивания, для чего? Ну, это по бэм неймингу, это означает, что это элемент, что по slick слайдеру можно ещё использовать. Ну, конечно, можно многие

537: Использует и slick, и свайпе. Вот многие на свайпе перешли. Я вот как-то, я на карусели, в принципе, работаю. Ну там, если какие-то, если она чего-то не умеет, чего умеет вайпер, я тогда сайпер буду подключать. Ну, слик.

538: Тоже прикольный там тоже прикольные штуки есть он умеет эту пагинацию делать из картинок внизу вот на карусели такого нет по моему на слике есть то есть ну как бы просто da, используем инструмент под свою задачу вот.

539: Самый жир это сайпер джис. Ну да, добрый. Всем опоздал. Простите. Да, Татьяна, приветствую всем добра. Если нет задачи пиксель, возможно незначительное отступление. Да, да. Если нету задачи. Пиксель, пефок, да, возможно. Причём зачастую сам дизайнер.

540: Иногда бывает там не соблюдает. То есть иногда дизайнер, может там где-то контейнер 1240, а где-то 1243 сделать. Ну то есть, то есть даже дизайнеры не заморачиваются. Ну вот бывает с этим. Поэтому, да, можно округлять, как называется.

541: Тема вискод, ай, игрек ю, вот так называется. Ну, он отдаёт свой ещё какие-нибудь курсы, то, да, Иван у нас был Иван, у нас был, учился, многие курсы, несколько курсов прошёл, поэтому.

542: Все проверено. Я в шутку. Ну, я понял, хорошая шутка. Я ж как бы тоже её дополнил. Вот. Да, вообще некс же. Ну, вообще, да, по хорошему, конечно, надо было сразу на нексте писать. Я согласен. Вот, конечно.

543: Надо было сразу вот тоже, да, такое, шутка. Окей, погнали дальше. Блин, ребят, на самом деле, мне кажется, по хорошему надо бы уже остановиться. Вот. То есть там верстать ещё дофига всего. Вот.

544: Ну ладно, давайте, давайте сделаем по быстрому. Давайте десктоп. Ну, короче, посмотрим, как пойдёт по настроению. У нас ещё 3 элемента и подвал, подвал будет переиспользован, потом ещее адаптив, но скрипты мы уже сделали. Вот, погнали.

545: Давайте вот эту секцию, вот до customer, сей эбаут ас индекс html находим нашу секцию дестинейшен, скрываем её, добавляем к ней класс no и делаем новую секцию секшн дот кастомерс вот.

546: Дальше. Ну, контейнер, понятное дело. Далее у нас идёт контент в customers х, и там контент идёт, слева картинка справа контент, да, то есть делаем кастомерс, ролл. Вот.

547: Это тоже такой мой подход. То есть я делаю ряд и потом делаю 2 блока кастомерс, там имидж, как мы в шапке называли. Кстати, давайте, чтобы все одинаково было. Имидж да, кастомерс имидж это

548: Для картинки имидж и у нас будет кастомерс контент под контент. Давайте сразу сюда картинку, закинем, имидж.

549: Амджи, вот меня ещё тоже часто спрашивают в комментах, вот прям пишут. Так, Юрий, почему вы пишите точка слэш? Никто нигде никогда не пишет точка слэш, а вы пишите, докажите, что вы пишите, что

550: Скажите, что вы пишите правильно, типа вдруг вы учите неправильно точка слэш это просто такой, ну, как бы такое хорошее правило, да, на самом деле вы можете просто писать.

551: Имидж и все вот просто многие пишут слэш и это ошибка, потому что слэш это означает корень домена и пока у вас все под live сервером все работает отлично, но как только вы куда-то в папку помещаете свой проект, там на тот же github pages закидываете все.

552: Слэши сыпятся, потому что слэш это корень домена. Вот, поэтому слэш писать не надо. Вот. А возможно у меня где то когда-то давно я где-то со слэшем писал слэш, писать не надо. Вот, а почему точка слэш? Ну точка слэш это обозна.

553: Значение текущей папки, на самом деле можно её не писать, но я просто так себя приучил, это удобно. Плюс дальше, если вы пойдёте писать джес скрипты и так далее. Вот в джесе, там, ну, по умолчанию как бы нужно ука.

554: Текущую директорию, то есть откуда у вас идёт путь. То есть эта вам привычка пригодится. Вот, поэтому просто рекомендую так, поэтому я тоже так пишу. Картинка у нас кастомерс, кастомерс, джипек, да, че-нибудь напишем сюда касто.

555: На кастомерс контент. Давайте скопируем контент отсюда опять же зажатым шифт. Просто все прокопируйте им. Такой контент у нас получился. Теперь придумаем сюда классы.

556: Для customer контент у нас есть тайтл, потом блок под клиента, потом описание и рейтинг. Да. Ну давайте, давайте мы это оформим как отдельный блок ревью у нас будет ревью, то есть это

557: Будет у нас отдельный блок ревью, который, точнее, знаете как.

558: Как бы это сделать? Да, кастомерс тайтл, это у нас будет отдельно кастомерс тайтл, то есть отдельно у нас будет заголовок здесь кастомерс тайтл. Ну, пусть это будет tech h2. Вот, а далее будет блок ревью и

559: View это будет как раз отзыв, то есть отзыв включает в себя информацию о клиенте, его отзыв и звёздочки. Вот это у нас будет ревью. Вот. И теперь мы работаем внутри ревью, думаем, что здесь значит

560: Ревью клаент. Наш клиент здесь будет client, здесь будет информация о клиенте, там вот это, да, потом будет ревью текст.

561: Ревью текст и review. Ну, рейтинг, рейтинг, вот такие блоки, да, ну и ревью текст тёк п. И мы сюда текст закидываем ревью. Рейтинг здесь у нас будет

562: Картинка с рейтингом имидж.

563: Customers стар рейтинг.

564: Вот, а в клиенте тут у нас получается, ну, мы сделаем тоже флексбокс, то есть будет, будет ряд, будет колонка слева колонка справа тут.

565: Картинка, а тут описание, да, ревью клаент. Давайте так. Ревью клаент имидж, ну или аватар.

566: Ревью клайнт аватар а справа у нас будет ревью клайнт деск ну описание клиента вот в аватаре давайте картинку поставим у нас есть image кастом.

567: User, аватар, user аватар.

568: Вот, а в клайн дес как раз у нас будет описание клиента.

569: А вот он, кстати, я чуть чуть его не туда скопировал, этот текст. Вот здесь будет, ну, как бы, да, имя и откуда он? Вот давайте сделаем там h3 поместим сюда.

570: Имя и откуда он тёк п. Поместим сюда описание.

571: Вот как получается.

572: Поместим сюда описание вообще это тоже, да, на классы можно повесить, дать сюда.

573: Класс client деск тайтл нейм. Такие длинные, правда получаются.

574: Не очень мне это нравится ну ладно, ну и это каунтри кантри как country пишется рассказывал всем.

575: Кантри, ну, по моему, кантри рассказывал, что нужно заходить в google транслей, да?

576: Ну да, каунтри, да, правильно.

577: Страна. Вот окей. Ну вот так у нас получилось. Он довольно насыщенный на элементы

578: Давайте, погнали его стилизовать. Я всю секцию записал. Да, кастомерс. Так вот, момент, где она начинается, где заканчивается секшн, кастомерс. Вот она, мы её все выбираем. Контрол, шифт, икс и

579: Даём комментарии кастомерс.

580: Customers. Вставляем все это дело и погнали. Ну, кастомерс это у нас в общая обёртка, у неё есть паддинги, там сверху помним, мы 100 оставляли и до следующего 233. Давайте сделаем 133 и 100 оставим на

581: Следующую. Паддинг, 100 пикселей сверху слева, справа 133 снизу. Ну то есть я как бы делю отступы между секциями на 2 секции. Вот это секция есть. Дальше ряд тут, понятное дело, дисплей флекс, там, ну, джесиа.

582: Content space between, но это даже не суть. Все равно между ними отступ есть. Вот 68 видим, поэтому все равно огэ.

583: Мы задаём колом гэп 68 пикселей вот дальше 1 секции 478 имидж. Давайте, Макс vs 478 пикселей посмо.

584: Смотрим там насчёт, как они будут сжиматься, не будут сжиматься контент. Ну, по контенту пока, наверное, ничего не буду прописывать. Давайте тайтл, поработаем над тем, что внутри вообще можно посмотреть, что получается. Ну, в целом неплохо. Да, картинку нужно скруглить. Смотрим.

585: У неё радиус скругления по, поскольку здесь она в маске, нужно смотреть на слой маску по 60.

586: Поэтому прописываем мы выберем картинку и укажем скругление по 60 имидж бордер радиус по 60 пикселей. Перейдём, проверим. Отлично. Вот.

587: Ну да, вот видим вот этот блок, но здесь пока контента немного. Кстати, наверное, space between я поспешил. Не надо его задавать, потому что здесь контент не доходит до правого края. Тут он

588: Сейчас видна, не видна сетка. Вот, да, он не доходит до правого края, поэтому тут контента не так много. То есть он тут ограничен по ширине, вот видно, вот.

589: Поработаем над заголовками медиум 45 вот у нас тайтл фонсай 45.

590: Такое чувство, что весь текст на странице медиум, по моему, где тут вообще регила? Ну вот бывает, региор встречается, да, отступ вниз 35 от тайтла мб 35. Далее вообще хороший макет.

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

592: Вот, в принципе, его можно как отдельным комментарием сделать ревью в блоке ревью сам по себе блок, там нет никаких у него каких-то свойств отступов. Дальше у нас идёт ревью клаент.

593: Ревью клайнт ревью текст. То есть это клиент, потом текст, потом рейтинг от клиента до текста вниз, отступ 60 от клиента до текста марджин ботом 60 от текста вниз отступ 30. То есть это вот от текста марджин.

594: Он 30. Вот что ещё. Ну, можно с текстом пока поработать. Давайте текст калор. Здесь, кстати, секондари калор, который мы указывали, секондари 2.

595: 22 medium, фонсай, 22 фонтей, 500. Так, для звёздочек. Ну, пока пусть так будут, да, потом мы, может, поправим их. Сейчас надо посмотреть. 327, чтобы

596: Размеру, они тоже были корректные, да, 327. Все верно. Да, потом здесь есть ограничения по ширине нужно посмотреть. Вот мы видим 491. Ну, можно сказать, что это все ограничение, вот все, всего отзыва, да.

597: 491. Ну, 490. Поэтому это можно на это ограничение мы можем дать на весь ревью, а вот ревью и пригодился. Я его удалил.

598: Макс витс. 490 пикселей.

599: Вот, перейдём, проверим. Да, отлично. Ну и теперь вот эту центральную часть нужно сделать. Собственно, здесь у нас есть ряд, что у нас является рядом ревью клаент. Вот у нас есть ревью клаент, вот он, да, то есть это

600: Ряд в нём 2 элемента и там так далее, поэтому ревью, клайнт, дисплей, флекс колом, гэп посмотрим, какой отступ между колонками 33 com.

601: 33 пикселя, да, в целом уже неплохо. Теперь аватарку можно сделать. Вот аватарка. Аватарка у нас там круглая, 134 на 134. И у неё есть заливка некоторая. Давай.

602: Давайте пропишем витс 134 hayat 134. Бордер радиус 50% и заливку нам нужно отсюда достать. Давайте посмотрим. Вот масс групп. Вот.

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

604: Если этот масс групп отключить, то останется ещё какой-то круг, который очень сильно ниже, где-то зарисован. И вот у этого круга уже Нужная заливка, вот она, поэтому я из неё скопирую бэкграунд калор и

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

606: Я, кстати, не ворфлоу, хиден, я ворфлоу хиден не прописывал, поэтому проблемы никакой нет, но проблемы нет, потому что тут картинка то с прозрачностью, да, но лучше прописать ворфлоу хиден, чтобы если картинка там как-то будет выходить, чтобы она не выходила.

607: Поэтому лучше добавить.

608: Так вот так будет лучше. И теперь работаем над заголовками 33 медиум и отступ вниз 10 это деск нейм фон сайз 33 фон.

609: 500 и margin bottom 10 это name и теперь для страны это 25. Регулар фон сайз, 25 и color secondary вар.

610: Secondary и дальше, так как это у нас так это все в деске лежит, да, так как это все здесь выстраивается по флексу, должен быть ееще элайн айтемс центра, чтобы они горизонтально, вертикально были.

611: По центру вот так. Контрол 0. Да? Ну, теперь это похоже на то, что на макете. Отлично. Этот блок готов. Теперь нужно переходить к следующему. Давайте.

612: Я, наверное, сразу перейду к следующему кастомерс ноу и, ну, давайте чат, гляну, как бы по традиции надо че то сейчас надо что-то надо что-то включать, делать какие-то паузы, чтоб

613: То на фоне было. Вот, да, всем здорово, всем привет новоприбывшим. Вот давайте сделаю небольшую небольшую рекламную паузу. Расскажу, что у меня есть моя авторская школа веб

614: Academia, собственно, так как и канал называется, или канал, так как школа, где мы обучаем вёрстке сайтов фронтенд разработки и разработке сайтов на php, вот обучаем с нуля, то есть у нас есть бесплатный курс.

615: Создание 1 сайта на 5 ссс 3 есть на главной странице. Можно там перейти его пройти. И, собственно, давайте в чат скину. Ну, ссылка на школу есть в описании под видео.

616: Вот есть курс по созданию вёрстки сайтов, который называется профессия. Имел верстальщик, где можно с нуля обучиться вёрстке сайтов. Вот то как раз, что спрашивали, да, вот как там, за сколько можно обучиться. То есть вот он у нас идёт от 2 до 3 месяцев, есть 2 формата, 3.

617: Месяц больше практики. Вот. 2 месяца, в принципе, вся основная база выдаётся. Мы там и многостраничный сайт делаем, и landing делаем, много упражнений делаем. И по итогу вы можете уже самостоятельно верстать вот сайты там такого уровня. Вот, и

618: Скрипты к ним тоже подключать, настраивать и, собственно, выполнять заказы на фрилансе, да, или работать верстальщиком, там, вносить правки в существующую вёрстку, разрабатывать вёрстку с нуля. Вот, кстати, у нас ближайший старт состоится 18 июля, это там чуть меньше.

619: Чем через 2 недели. Вот. Поэтому, если интересно, просто перейдите на страницу курса, ознакомьтесь с программой. То есть тут там все технологии, изучаем все, что нужно знать верстальщику, мы на css верстаем там с

620: Неймингом, с адаптивом все как надо. Вот можно ознакомиться там как бы со всем, что мы проходим на курсе, ознакомиться со всей программой. Вот с учебные макеты, которые у нас есть. Обучение у нас происходит там по видеоурокам.

621: Есть учебный чат с группой, поддержка куратора, преподавателя, обратная связь, проверки домашек и так далее. Вот, пройдя курс, вы уже становитесь верстальщиком сайтов, то есть можете верстать, да, применять эти знания. Вот. Ну и, собственно, потом можно двигаться дальше уже

622: Уже в frontend разработку, например, вот, да, там, или в backend разработку, или прокачивать свой скилл вёрстки и продолжать верстать, вот, и для тех, кто уже, скажем так, не с нуля, для тех, кто уже умеет верстать, у нас есть курс.

623: По джаваскрипт фронтенд разработки, где мы изучаем javascript и react кстати, нужно обновить технологии, потому что у нас появился новый тариф с реактом 2 месяца учим javascript, 3 месяц учим реакт, вот и за этот курс мы.

624: Собственно, ну вы научитесь писать фронтент приложение на java script, single page application в объектно ориентированном подходе с модулями, со сборкой на вебпаке и так далее вот такие замечательные проекты делаем и в конце делаем вот этот проект ещё.

625: Переписываем на реакт, ну и другие проекты на реакте тоже есть вот этот курс у нас стартует 1 августа, то есть, ну, как бы, да, почти через месяц, но сейчас идёт набор в группу, то есть можно тоже записаться. Вот если

626: Интересуют какие-то вопросы. Вы на любом из этих сайтов можете оставить заявку на консультацию и получить ответ на свой вопрос. Там по обучению. Вот, поэтому небольшая рекламная пауза.

627: Вот, и сейчас посмотрю тогда чат так, ну чат у нас немножко подутих, да, web dev плюс да, вот Иван пишет, да, веб дэф плюс java script да, я помню на веб деве помню и на джейсе тоже web dev это у нас был такой большой

628: Фуллстак курс там где мы и верстали и командную работу делали и че мы там только не делали и java script был в сжатые сроки и php был вот такой курс фуллстак разработки за 3 месяца вот.

629: Потом мы этот веб деф расформировали на отдельные курсы отдельно по отдельно, по продвинутой отдельно по php, отдельно по джаваскрипт, ну и уже более углублённые, естественно, вот не надо лучше на 2 стрима разделить, пиши.

630: Да, и так торопишься, хрен уследишь. Ну, я и на старте тоже с хорошей скоростью работал. Сейчас я просто чувствую, что у меня скорость падает. Я такой думаю, блин, надо, может быть, разделить на 2 стрима, скорость падает, запись будет, да, останется. Когда пишем, то точка, можно.

631: Опускать и добавлять на сервере точка слэш. Кстати, да, хороший совет от ивана. Угу. Ну да. С, да, можно опускать, не обязательно использовать. Это, я говорю, это просто привычка. Код на

632: Гид будете выкладывать? Не знаю, посмотрим. У меня есть идея так, хитро потирая руки, как какой-то персонаж из симпсонов там был у них такой, у меня есть идея. Не знаю, насколько она зайдёт. Хочу проверить.

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

634: Которые мы пишем там всех мастер классов, которые есть и так далее. Хочу попробовать вот сейчас, конечно, в чате напишут. Нет, не надо, мы не будем тебе донатить и все такое, но может кто-то напишет, что будет, но хочу попробовать сделать такой эксперимент. Вот.

635: Вот посмотрим, как зайдёт джес. Будет Егор спрашивает, джес, где будет сегодня на стриме уже был. То есть мы уже карусельку подключили в таком формате. Ну, у нас ещё там мобильная навигация по плану, вот в плане

636: Тяжело найти стажировку сейчас на рынке. Ну, ну, стажировка это как бы, ну, такое, особый спрос, да, то есть, ну, не все компании готовы брать стажёров. И, в принципе, и раньше было немного, и сейчас.

637: Сейчас тоже, то есть, ну, периодически какие-то компании открывают где-то стажировки. Ну, в целом, наверное, да, наверное, тяжело, если вот, ну, просто брать по вакансиям, то есть сейчас по вакансиям больше всего.

638: Там, да, там, ну, как, короче, если про фронтенд говорить, да, мидлы востребованы. Вот, джунов большая конкуренция. Ну, стажировка это тоже, да, это трейни, это уровень до джуна, вот, поэтому.

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

640: Это не то, что там запустилась новая профессия, и когда-то будут перспективы, это перспективы, которые есть здесь и сейчас. Ну, понятное дело, как бы, да, есть конкуренция, вот это нормально.

641: Давайте дальше доделаем так, следующий блок, вот этот call to action, он такой у нас несложный, смотрите, что здесь определяем секцию, делаем контейнер, потом рисуем плашку внутри плашки, контент выстраиваем в колонку, заголовок описание и делаем.

642: Ссылку в виде кнопки и на плашку также через псевдоэлементы before и авторы вешаем вот эти точечки. Погнали. Итак, переходим в index html кастомерс я уже скрыл и делаем секцию кол.

643: Так камеру тоже убираю. И погнали.

644: Section с классом ситиэй, далее контейнер. Далее плашку делаем. Ситиэй плейд. Далее в плашке у нас давайте контент.

645: Сразу скопируем.

646: Контрол ц.

647: Вставляем и создаём здесь обёртки. Давайте тег h2 с классом ситиэй тайтл.

648: И вставляем сюда вот этот заголовок. Он идёт на 2 строки. Тут нам брейк лайн нужно будет ставить, потому что 2 строка сильно, ну, по дизайну это же видно, она

649: Хотя можно просто ограничить по ширине, можно break line прописать ну start тут если вот смотреть по ограничению, я бы break line написал нормально, далее див ситиэй.

650: Текст тёк п. Помещаем сюда этот абзац и кнопка city батон и.

651: Ну, кнопка это в виде ссылки у нас будет гет стартет, пусть она ведёт на какую-то страницу регистрации. Конечно, это и модальное окно может быть, да. Ну, не суть. Можно переименовать в батон просто за счёт того, что у нас

652: Подключён резет сиэсэс, мы можем писать стили и вообще не задумываясь о том, там батен это или эй, потому что у батен там есть рамка фон паддинги в нашем резет это все сброшено, поэтому

653: Класс может висеть как на ссылке так на батоне и не надо будет ничего там дописывать особого ну вот вообще ничего не надо будет менять можно просто менять тег и все будет работать за счёт того, что у нас есть reset css вот.

654: Вот такой код мы написали, давайте контрол с выровняем его и так выбираю. Так, выбрал контрол шифт икс, если что, я использую плагин её css трактор, видео по которому есть у меня на канале.

655: Который позволяет быстро копировать вот таким образом селекторы. Вот по ситиэй, да, значит, отступ там, я вот секции выше, там давал какой-то отступ, там 233, я там какой давал.

656: Это у нас была секция кастомерс 133 я 100 сюда оставил да паддинг 100 пикселей сверху слева справа 0 снизу до сабскрайба у нас 135 давайте я сделаю 100 а на subscribe 35 повешу тогда будет вот.

657: Так, 100 сверху, снизу, потом 0, теперь рисуем саму плашку белый фон, 60 пикселей скругления бэкграунд кала белый фон.

658: Border radius 60 пикселей внутри плашки, контент идёт по центру, то есть это display flex flex direction идёт в колонку, я хотел сказать идёт в колонку, ну и по центру, конечно.

659: Не line items, а сейчас, да, элайн айтом, все правильно. Лайн айтемс центр. Вот дальше можно зайти глянуть, как это, что получается в принципе неплохо. Паддинги нужно добавить у плашки 116 и

660: 115. Ну, тут, тут как бы 2 момента, да, может быть, у неё высота, на самом деле, в принципе, можно и высоту сделать, да, если прям так очень гибко её пытаться описать. 581, давайте 580, да.

661: Min min hayat 580 пикселей, а контент по центру у неё расположен или нет, тут 116, а тут 115 ну да, можно сказать по центру вот я все равно какие-то поля задам, то есть ну если там вдруг.

662: Все-таки контента будет много, да, мы так подразумеваем, да, можно все равно поля задать. Там сверху, снизу по 40 пикселей, слева, справа по 15 пикселей, к примеру, слева, справа маленькие, но зато на мобилке они нам пригодятся. Вот и по центру все.

663: Это сделать, то есть лайт центр и джеста контент центр. Вот таким образом. Вот, пожалуйста контент у нас по центру плашки осталось теперь поработать с этим контентом. Заголовок у нас 45, медиум вниз 30 собственно заголовок

664: 45 фонтей 500, марджин ботом 30. Далее Цета текст у нас 60 30, регулар фон сайз 30, марджин ботом 60 и

665: И цвет у него вот этот секондари. Каждый раз его буду вспоминать, потому что, потому что у нас через переменную есть и цвета батон. Ну да, кнопку опять.

666: Да, а кстати, эта кнопка у нас это универсальная батон. Вот. Поэтому, в принципе, сам цта батон, если даже ячейку делать, тут никаких ни отступов, ничего нет, поэтому можно, в принципе, просто у нас есть кнопка класс бтн и все.

667: Мы его просто вешаем и он у нас уже описан. Кнопочка уже готова. Таким образом теперь осталось псевдоэлементы раскидать бифор автор создать, поставить вот эти кругляшки. Давайте сделаем это на Цета плейт, они будут висет

668: Опишем цвета плейт бифор, опять же там какие-то совместные стили будут на самом деле и на авторе, и на бифоре. Мы их потом вынесем бифор автор пока я просто опишу, но я создам

669: Такую заготовку, что на самом деле там будут какие-то общие стили, которые можно будет вынести. Вот цвета плейт, будет позишн релатив, понятное дело, потому что эти вещи будут абсолютом. Ну я сразу на них пропишу позишн, абсолют для всех.

670: Дальше размеры их нужно указать размеры 63 на 83 63 на 83 они прям одинаковые, они там просто повёрнуты да, vs 63 хайт на 83.

671: Дальше размещение. Давайте. Вот 1. Я че то Иду слева направо, хотя можно сверху вниз идти, да, но я слева направо. 74, 56. Значит, left, пока переключался. Забыл?

672: Мне просто в чат пишут тут уже вопросы ученики. Нотификацию посмотрел. 74 56 лефт 74 ботом 56. Это для которая слева, и та, которая справа.

673: У неё top 74, white 80 топ, 74, white 80 ну вот так так, сейчас проверим контент я не прописал, поэтому они не отображаются.

674: Да.

675: Так все равно не отображаются почему position absolute Витта контент ну да это я уже чувствую, что начинаю уставать просто position relative да позишн абсолют ну что ну display block н.

676: Ну нет display block так-то что в абсолюте так является блоком контент есть left bottom есть ну ладно, будем смотреть почему не отображаются так может ошибка где-то цвета плей бифор автор будем смотреть так вот, before.

677: А, ну я фон не прописал, я не дописал. Да, понятное дело. Бэкграунд, бэкграунд, имидж url.

678: Имидж цвета л 0 1 svg и л. 0 2 svg вот отлично разместили красота.

679: Прикольно. Эта секция готова. Давайте сразу перейду к следующей. Ну, кстати, следующая интересная такая будет с емейлом. Это no, давайте на неё посмотрим дальше. Емейл, вот этот сабскрайб, ту, а, ньюслеттер и так далее. Сабскрайб ту, а.

680: Вот в принципе, секция контейнер, заголовок и блок для формы, блок для формы. Каким образом тёк форм это вот то, что я сейчас выделил, это будет плашка далее внутри этой плашки.

681: Тут вот здесь будет внутри и кнопка. Вот погнали переходим и делаем секцию сабскрайб секшн класс сабскрайб контей.

682: Далее.

683: Так далее. Запускаем контент. Вообще, я, ну, это у нас стрим, да, поэтому это живое общение. Если у нас есть верстальщики, кто на ладно, кто на постоянке.

684: Короче, используют сниппеты так чисто интересно. Ну, какие-то сниппеты, типа прям заготовки под универсальные секции, например, и так далее. Вот.

685: Типа че-нибудь вот такого типа, когда вы пишите секшн, разворачиваете, и у вас там сразу типа секция, там, хедер, ряд контент, пикчер. Сейчас я на это посмотрел и понимаю, что я мог использовать его для каких-то секций, которые сейчас верста

686: Че то подзабыл, вот кто, типа такой фишки использует типа такого.

687: Section сиэсэс и сразу какая-то секция у вас там секция хедер роу контент пикчер. Все это можно описывать. Прикольная штука. Вот давайте пойдём дальше.

688: Но тут у нас немножко по другому, да? Так, сабскрайб, сейчас, подождите, че то я начинаю путаться. Есть сабскрайб, есть контейнер. Далее у нас идёт контент, который идёт в колонку, да, то есть, ну, в принципе,

689: Ну, его выстраивать надо, поэтому, да, тут ряда не будет, но некий сабскрайб контент я сделаю.

690: Некий сабскрайб контент я сделаю, в котором уже у меня будет идти тайтл сабскрайб тайтл и потом будет идти форма сабскрайб. Форму я прям отдельно сделаю вот так, как будто это отдельный блок.

691: Subscribe форм и у него будет тег form вот ну и все title tag h2 понятное дело, сейчас где-нибудь tag h2 пропустишь, потом напишут в комментариях, что как это так вы не сделали тег h2 для Тега сёк.

692: Вот. Ну, бывает, если я сейчас че то пропущу, конечно, но не, пока не пропускал, да, то просто уже Шёл 2 час стрима или даже 3. Вот. Окей, так прописали. Давайте формой потом займёмся, да, сначала вот.

693: Стилизуем как бы саму секцию сабскрайб.

694: Subscribe.

695: Так, у секции посмотрим на отступы там, да, 35, я говорил, сверху оставлю Падин. 35 пикселей сверху слева, справа 0 снизу до футера у нас остаётся 106. Не знаю, давайте 50 повесим.

696: На самом деле, честно говоря, ну, на реальном проекте это имеет смысл делать, как бы заморачиваться над паддингами, потому что в реальной работе, когда ты делаешь там сайт под клиента, такое часто бывает. Он говорит, давайте эти блоки местами поменяем ещё чего-то. Вот, вот это можно заморочиться.

697: В принципе, в учебном проекте, да, можно просто margin вниз поставить. Ну, не марджин, ну, паддинги можно как-то паддинги поставить, там не разбивать, это прям вот как я делаю. Ну, я все равно предпочитаю разбивать, потому что, ну, знаете, это как на машине ты привыкаешь включать поворотники всегда, когда

698: Ты поворачиваешь, и потом, где бы, где бы ты не поворачивал, даже если ты на просёлочной дороге едешь, у тебя автоматом, просто ты его включаешь. То есть ты не думаешь включать, тебе не включать, ты всегда его включаешь, и в какой-то там, ну, в какой-то экстренной ситуации ты его тоже вклю.

699: Ну или просто, если там ты будешь ехать по городу, тебя заболтают, ты все равно его включишь, потому что ты его всегда включаешь, ты об этом не думаешь. А если ты постоянно делаешь выбор, включить, не включить, включить, не включить. В какой-то момент ты где-то забудешь, а это будет важно. Вот, поэтому.

700: В принципе у меня такой же подход и к вёрстке каким-то таким мелочам да лучше просто что-то делать на автомате вот сабскрайб контент это у нас будет выстраивать все в колонку дисплей flex flex direction Колу.

701: И line items центр так готово ну далее тут ограничение по ширине будет 494 да max витс 494 пикселя ну txt line центр можно в принцип.

702: В принципе задать, потому что во всем этом контенте текста по центру идёт сабскрайб тайтл на тайтле у нас 55 sammy болт фон сейс 55 phone твейт 600 тайтла, отступ вниз 60 мб.

703: 60 в принципе, все title по идее готов. Давайте посмотрим. Красота. Вот, кстати, да, тоже 1 из параметров скорости вёрстки. Это то как редко ты загляды?

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

705: Нужно точнее верстать, вот и subscribe форм, давайте теперь опишем форму, значит в форме как я уже сказал у нас будет сама форма, это плашка, внутри неё в ряд через флексбокс будет выстроена кнопка и инпут.

706: Вот, поэтому давайте сделаем инпут с классом.

707: Subscribe форм.

708: Input. Опять же, кнопку я тут тоже сделаю такую уникальную. Хотя, да, конечно. И, конечно тег button тег button сабскрайб форм бтм. Вот. Вот такая у нас форма полу.

709: Получается, и мы её сейчас, мы её будем стилизовать. Сасай форм. Ну это прям как отдельный блок такой.

710: Значит это у нас плашка белый фон 35 12 12 ну пусть 15 будет да, белый phone border radius 35 пикселей бэкграунд.

711: Background color white паддинги паддинги тут у нас 12, 12, 15, 12 пикселей, сверху, снизу 15 пикселей, слева, справа, но на самом деле вот этот инпут да, мы видим у него слева 46 дату.

712: 15. Тут слева 46. Ну, можно в инпут, на самом деле, это повесить, да, можно 46, сказать. 12 пикселей. 46 пикселей. Вот слева 46. Вот давайте перейдём, проверим. Ну, пока вот так получается. Ну, в целом, вот он.

713: Вот она форма, вот он put ну button пока без текста, давайте в place holder поместим этот текст.

714: Плейсхолдер равно.

715: И для кнопки subscribe тоже поместим текст в кнопку далее давайте кнопку стилизуем сабскрайб батон опять же да, я наверное батен.

716: Да, может быть я все-таки, может я все-таки потом переделаю все кнопки в какую-то 1 кнопку, да? Ну, ну пока я пока я буду сопротивляться и сделаю и сделаю эту кнопку тоже отдельно. Ну хотя.

717: Может быть, может по финалу имеет смысл переделать все в 1 кнопку с модификатором, да? Так, ну вот такая кнопка. Чем она у нас отличается? 25 сиболд фон сайз.

718: 25 sammy. Болт 600 и отступы 34 и 86, 34 и 86. Вот перейдём, проверим. Так.

719: Radius только другой должен быть борда радиус должен быть 35.

720: 35. Вот. Ну, все остальное, кстати, ну вот, да, вот чисто из за вот этих ховеров и активов хочется все внести в 1 класс, чтобы они постоянно не дублировались. Вот, вот. Че получается. Кстати, они уже стали в 1 линию.

721: Прикольно да, даже flux не надо делать, но мы все равно флекс сделаем почему? Потому что через него можно отступ задать, а там сейчас просто пробел какой-то непонятный висит, вот display flex колом.

722: Gap, пусть будет 20 пикселей между ними.

723: Вот, да, вот теперь че то мы набираем, набираем, набираем, надо над инпутом поработать. То есть это 24 медиум, и он такой полупрозрачный у инпута.

724: Фон сайз, 24, фонд Вейт 500 и полупрозрачный калар. Ну, на самом деле, тут уже дальше, как вы видите, да, все, плюс минус у нас повторяется то, что мы верстали, че то ничего особо нового, но сейчас будет футер, мы переиспользуем навига.

725: Из хедера. Вот это будет прикольно.

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

727: Из холдер.

728: Вот нужно вешать цвет именно на на place holder давайте посмотрим вот так я пишу чёрный а так нет кстати я не знаю в чате уже написали или нет, что нужно input type мейл тайп емейл сделать, потому что тут

729: Сейчас проверим тоже про этот момент забыл. Так, окей, вот, отлично. Прикольно. Эту штучку мы сделали. Давайте пойдём дальше и осталась нижняя.

730: Полоска с футером, давайте её реализуем.

731: Да, ну, формы отправки, формы у нас не будет. Кстати, это вот реально то, что ещё, наверное, можно добавить было. Я просто думал, че ещё добавить. Вот. Ну, окей. Отправлять форму мы уже не будем. Давайте сделаем футер, футер, контейнер.

732: И в футере мы будем переиспользовать навигацию, которая была в шапке, потому что она точно такая же, то есть логотип, те же пункты, те же пункты. И здесь тоже логотип, те же пункты, те же пункты, есть небольшое отличие, то есть

733: Здесь по 80, в менюшке в 1 и в футере тоже по 80, но в логине, в хедере у нас отступ 25, а в футере у нас отступ 66, немножко другой и логотип чуть.

734: Другой там белый, тут оранжевый. Вот, вот это, собственно, и вся разница. Давайте переиспользуем. То есть мы идём в хедер, забираем отсюда, копируем нав, то есть в наве у нас как раз лога ав лист, нав логин, мы

735: Его копируем, переносим в футер контейнер, вот выравниваем аккуратно и у нас есть разные какие-то элементы, да ну что-то где то отличается поэтому давайте на лого повесим лого футер.

736: Такой модификатор лого футер. Соответственно, этот модификатор будет давать другой цвет. Давайте в стилях найдём лого, где мы с ним работали, и добавим модификатор лого футер, у которого мы

737: Укажем другой цвет. Вот такой оранжевый калор.

738: Оранжевый цвет вот перейдём проверим отлично да, кстати он тоже оранжевый да почему потому что у нас лого эй калор inherit наследовать цвет, а в лого футере оранжевый и ссылка наследует и она наследует оранжевый вот дальше нужно

739: Избавиться от вот этих подчёркиваний и цвет вот этих элементов, да, давайте над вот этим поработаем. Это у нас нав лист. Вот давайте на в лист найдём, где мы писали на, в лист и на, в лист мы тоже добавим футер модифи.

740: Футер, вот, и поработаем. То есть, на, в лист футер, что у нас должно отличаться. Ну, во первых, кстати, да, нав лист должен, ну, ссылки должны быть другого цвета. Они тут фиолетовые. Почему в х?

741: Они наследовали цвет ссылок от хедера. А в футере я цвет ссылок не прописал. Давайте пропишем то есть в футере цвет ссылок, вот этот секонде, да, поэтому можно его просто прописать как бы по умолчанию. Давайте футер футер, я даже

742: Не перенёс пока ничего для футера. Футер сам по себе футер там какие-то паддинги будет иметь. Вот и футер. Эй, меня интересует футер. Эй, пропишем калор и пропишем цвет для.

743: Для ссылок в футере. Вот раз уж мы в футор залезли, давайте посмотрим, тут какой-то отступ должен быть, там 106, там я делал 50, значит тут 56 делаю. Да, в сабскрайбе я делал.

744: 50, да. Значит, тут я сделаю сверху 56 пикселей, слева, справа 0. Ну и снизу 74, 74 пикселя. На самой секции ссылки мы прописали. Теперь ссылки верные. Нужно убрать вот это.

745: Ну, подчёркивание, опять же, если хочется, можно оставить. Но я не думаю, что оно должно быть в футере. Мне кажется, это фишка хедера должна быть, а не футера. Поэтому я уберу это, наоборот, на, в лист футер мы лучшее что-нибудь другое придумаем для него.

746: На лист футер, на блист футер ссылки, которые находятся в нём, у них не должно быть. То есть в их автор элементе, ну и когда они в ховере, или когда они

747: Ну, когда они в ховере да, в принципе, класс active, можно отсюда удалить.

748: Вот из футера на футер. Эй, сейчас мне как-то нужно это все дело. Давайте мы его ниже разместим. Вот так логично будет после этих ссылок здесь на в лист, а тут у нас будет

749: Как бы это написать вот так просто в css ты берёшь и и просто пишешь вложенные селекторы, так что у нас за монстр получился нав лист.

750: На в лист футер, а, active, акт, ну и так далее. Да, отлично, собственно, дисплей нон и все. Вот никаких подчёркиваний вот там, да, даже для активной, в принципе кстати, активную.

751: Может и имеет смысл оставлять, в этом нет ничего плохого да, там, в футере, подсветить активную, но мы сделаем по другому, то есть мы активные, будем цветом выделять, то есть на лист, на лист футер а. Active и просто а. Hover.

752: Просто будем менять им цвет на оранжевый, кстати, цвет в логотипе, который оранжевый, прикольно, его тоже будет вынести в переменную. Давайте так и сделаем. Да, я обозначу переменную, которая пока не существует. Орендж.

753: То есть у нас будет некая переменная орендж.

754: Которая будет равна цвету логотипа в подвале. Вот она и мы его тоже на эту переменную повесим. Вот, соответственно.

755: Давайте его найдём, лого футер.

756: Лого, лого, футер вар орендж. Вот теперь у нас этот оранжевый цвет, вот он висит на переменной. Так тут перестал работать. Почему?

757: Лого футер вар орендж.

758: Не понял.

759: Orange.

760: Logo.

761: А потому что там ссылка, а ссылки я прописал, да, я прописал ссылки в подвале, это перебивает, получается, да, футер. Эй, он перебивает лого. Эй.

762: Ну.

763: Тогда мы сделаем импортент, вот, чтобы не чтобы лога, эй, не перебивался внешними, ну, какими-то от контейнера. Вот так. Отлично. Кнопка, кстати, да, вот кнопку тоже перебивает, это у нас

764: И она как-то по другому отображается.

765: Что-то с ней не так.

766: На логин.

767: Что с ней не так? Почему? У неё такие большие размеры? Потому что батон, да, а потом я батон сделал универсальную, а эти батон я оставил. Я понял. Когда я верстал шапку, я сделал кнопку button, а потом я ба,

768: Повесил на универсальную и забыл про этот класс. Вот. Угу. Угу. Ну окей. Значит, все-таки быть тогда этим.

769: Универсальным кнопкам. Давайте найдём по классу батн. То есть, по идее, у меня сейчас даже, наверное, где-то в 2 местах это описано 169.

770: И 277, да, то есть давайте возьмём за основу кнопки вот эти.

771: Так, ну если я с ними буду работать, я их ниже просто все опишу, чтобы удобно было. То есть.

772: Buttons за основу возьмём большие кнопки и для кнопок Сайнап мы сделаем модификатор кнопки сайн апа они описаны чуть выше, были на 171 вот они я их.

773: Отсюда заберу и это просто будет модификатор типа батон Сайнап. Ну я просто сейчас по дизайну посмотрю, чем они отличаются. И пропишу. Я не буду, наверное, там копировать особо. Давайте так, батон.

774: Sein апп или логин? Логин, да.

775: Батон, логин и чем она отличается, опять же будем смотреть исходя из макета.

776: 15 медиум фон сайз, 15 von тейт медиум радиус скругления, у неё другой 100 пикселей.

777: И паддинги у неё другие 13, 13, 44, 44.

778: Вот это батон, логин. Вот и мы, я, я, мы батон, логин повесим, это все сюда вот так. Батон, батон, логин, это в подвале и тоже самое в шапке.

779: Я мы вёрстка я мы java script почему не делали такие постеры я мы java script это же актуально да вот и у этой кнопки нужно прописать что у неё цвет че?

780: Белый, потому что кнопка, видите, такой компонент, который много где используется, и он не должен зависеть от того места, куда мы его ставим. Поэтому обязательно нужно прописать белый цвет и сказать, что это важно.

781: Так, тут теперь кстати так по ховеру да, че не работает color теперь как только ты начал говорить, что это важно это нужно повторять вот так. Ну прикольно давайте теперь раскомменти?

782: То есть отобразим все, что мы верстали до этого, уберу класс ноун и посмотрим, чтобы ничего не сломалось, потому что

783: Такое может быть.

784: Ну, на самом деле, ничего особо не сломается. Ну, вот так, ну, выглядит нормально эксплор, нау, нормально. Эта кнопка тоже живёт, тоже живёт, тоже живёт. Ну, единственное, да, если прям кнопки универсальные сделать, вот эту можно хедера тоже модифи.

785: Фикатор к ней добавить. Давайте доделаем, давайте добавим модификатор в хедере. Конечно. Я знаю, кто сейчас, если реально повторяет, такой, думает, блин, все переделывать. Вот, ребят можете не переделывать, да?

786: В принципе, это не, ну, ну, если хотите попрактиковаться, это прикольно. Но если прям проблема, ну, не обязательно, оставьте как есть батон бат, но лучше хороший верстальщик переделает. Вот батон, батон хедер, я назову её, так не затеяли.

787: Чтобы понятно было, да и пропишем, чем там батон хедер отличается от от обычной кнопки.

788: Сейчас посмотрим. Обычно это эксплор нау, то есть у неё 20 самиболее ера 25 самбол, то есть фон сайз 25, Семиболотняя, радиус скругления 27, у хедера тоже 27 остаётся паддинги 25.

789: 45 а здесь?

790: Плюс все тоже, ну, 27 и 48. Окей, 27 пикселей, 48 пикселей. Н не сильно, уж не сильно она. Ну, конечно, высота разная. 79 91 по итогу, давайте проверим по высоте.

791: 92 у меня получилось, но я округлил, а тут 80. Опа. Почему так, 80? А, ну тут 79. Ну, потому что я округляю, да, там 25, и там, не знаю, 25 и 24. Я там пишу по 25 оба.

792: Поэтому на 1 пиксель разница. Ну все, вот хедер я сделал, соответственно, её нужно из батон хедер там, где я хедер описывал, её нужно удалить где-то вот здесь нав хедер хедер, текст хедер, батон, да, и как раз

793: Header button active какие-то строчки кода мы сэкономили вот это по поводу оптимизации тоже, знаете, как-то было несколько лет назад, че то прям так типа очень сильно.

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

795: С десяток библиотек, которые он вообще, ну, не использует, ну, не знаю, там, в проект библиотек 20 подключить, а 10 из них он не использует. Ну, они остались как из шаблона, да, то есть, ну, да, конечно, их нужно убирать. Вот, но просто иногда там

796: Доходит вот там прям не знаю, что считают эти килобайты там, типа там тот же джейквери не будем подключать или ещё что-то. Вот. Ну зачем вот я просто вспомнил исследование, там переписывали какой-то фронт.

797: Я не помню, то ли в фейсбуке, да, то ли где-то, ну, цель переписания фронтенда была в том, чтобы просто структурировать все для того, чтобы с этим дальше удобно работать, ну, то есть, там разделить на блоки, компоненты, там, на атомы и так далее. Ну, есть там атомарный подход, вот.

798: Цель первична, она в этом была, то есть, чтобы просто рефакторить, ну, отрефакторить фронтент в плане вёрстки, чтобы потом с этим было удобно работать и дальше развивать проект, да, вот как мы сейчас с кнопками сделали, да, и то есть у нас кнопки были описаны там в 10 местах, ну,

799: Условно говоря, то есть, ну, не в 10, в 3 у нас были описаны, теперь они все кнопки описаны в 1 месте и дальше, ну, удобнее развивать это, да, согласитесь. Вот, но как бы это делается, ну, с целью отрефакторить код для удобства его развития.

800: Вот, но в процессе мы получили какой-то профит, что мы удалили какие-то строчки кода, да, какие-то там байты сэкономили, но это так, это вторичная выгода. Вот. А просто некоторые, как бы услышав это, потом выда,

801: Дают вторичную выгоду за первичную. Вот поэтому не стоит этого делать.

802: Subscribe батон ну вот сабскрайб форм батон, кстати, тоже можно переделать, да на ней в принципе никаких каких-то стилей от формы не висит сабскрайб форм.

803: Батон можно переделать, да, можно переделать в кнопку можно переделать батон, батон, батон, батон, сабскрайб.

804: Вот создать такой, создать такой модификатор, это 453 строка. Я сейчас нахожусь 453 и

805: Все отсюда заберу и в чем там разница от обычной кнопки ховер актив такой же разница ну в паддинга наверное да, phone сайзе хотя может он такой же кстати ну и все. Color.

806: Size. Бордер радиус может быть другой. Сейчас мы посмотрим более детально, чем сабскрайб отличается от обычной. Вот. То есть у обычной 27 болт здесь 25. Sammy болт. Ну то есть сембол остаетс.

807: Паддинги, ну, паддинги другие, понятное дело. Да, и радиус скругления был 27, стал 35, да, тоже другой. Ну, вот, собственно, да, батон сабскрайб, вот так.

808: Пойдём посмотрим, да. Ну, в целом, это как упражнение. Я понимаю, что это сейчас нереально. Ну, там, да, типа, пытаться там уловить, откуда я скопировал, какой class стиль и перенёс, и какой модификатор я создал. Я понимаю, что это, ну, из за

809: Того, как я сейчас перемещаюсь по макету, это, ну, очень тяжело повторить, если пытаться отсматривать это, да, то есть это нужно просто проделать как упражнение, ну как, как логическое такое вот на курсах у нас все очень подробно, пошагово, там, там, я так между

810: Макетом не прыгаю. Вот, но просто в рамках стрима не хочется его до 2 утра там до 2 ночи проводить, поэтому, поэтому мы так спешим. Вот. Ну прикольно, прикольно получилось. Тут есть момент, что картинка у нас сейчас идёт поверх

811: Вообще всего, вы видите, я даже ссылки не могу прокликать, поэтому нужно сделать, чтобы картинка не перекрывала это все дело. Давайте мы найдём картинку и пропишем для неё поинтер вент сноу, чтобы её вообще нельзя было выбрать. Потом кто-то будет.

812: Пытаться сохранить картинку с сайта. И такой я не могу это сделать. Почему? Потому что мы так сделали, да, хедер, имидж хедер, имидж, имидж. Вот это, собственно, картинка. Давайте пропишем поинтер ивен ноу.

813: То есть она будет вот все, да, все, как все клики сквозь неё. То есть она такая прозрачная. Вот, отлично. Вот. Ну, на самом деле, адаптив, да, я обещал адаптивна.

814: Надо, наверное, делать. Надо, наверное, сделать. Но мы с вами реализовали. Это все прикольно работает. Давайте в чате пообщаемся. Так, всем привет. Я ещё здесь. Так, кто с нами ещё живой? Давайте посмотрим.

815: Так, на курс. Вот дон кихот спрашивает, на курс по джаваскрипт обязательно новый поезд поток новый ожидать или можно в идущий поезд между прибытия на платформу подать и запрыгнуть? Так можно? Нет, смотрите на курс по джаваскрипт можно присоединиться.

816: В 1 неделю курса, максимум, если идёт 2 неделя курса, вот максимум, если идёт 2 неделя, можно присоединиться. У нас сейчас идёт уже 3 неделя.

817: Вот скажу по плану курсов, то есть у нас идёт 3 неделя, если сильно хочется.

818: То можно это обсудить, да, но как бы у вас, ну вы все равно будете идти с группой, то есть там не будет дополнительно чего-то. То есть, ну, вы просто запрыгнете на 3 неделе, вот, если хочется, можно это обсудить, но, но это

819: 3 неделя, это будет - 2 недели. Вот, вот так или заходить на следующий, там ближе к старту потока или в 1 неделе. Вот. Но у нас ещё действует такая система, тающая скидка.

820: То есть для тех, кто записывается сильно зараньше, цена ниже вот сейчас у нас очень низкие цены на javascript, и на html, с каждой неделей цена повышается на 2000 и доходит до своей реальной стоимости. Вот.

821: Зачем это мы делаем, чтобы набирать группу заранее? То есть для тех, кто записывается за месяц, с 1 стороны, неохота, да, вроде бы оплачивать половина курса и ждать месяц, но, с другой стороны, там можно сэкономить до 8 000 ₽ при записи. Вот.

822: Вот, заплатить половину, зафиксировать за собой стоимость и потом 2 часть до 5 недели обучения вы платите, и вы зашли по самой низкой цене. Вот. То есть такой у нас механизм формирования группы заранее. Ну вот сейчас.

823: Он работает так на текущий момент, как в белоруссии. Сейчас по трудоустройству, без опыта, ребят, кто в белоруссии, напишите? Ну, я думаю, наверное, как и везде. Ну, на самом деле, в принципе, потому что рынок разработки, да, вот он

824: Ну, плюс минус там, зарплаты, они, ну, не сильно отличаются там, ну, если брать там, Россию, Украину, к примеру, там, то, что я знаю, там, ну, в переводе на доллары, то есть, вот когда я как-то смотрел, сравнивал, там, плюс минус можете

825: Там, ну это ладно, Украина доу юа Беларусь тоже есть, да, порталы с вакансиями тоже у вас есть айтишный портал какой-то забыл. Ну, просто не заходил туда, но есть какой-то, и там тоже пишут, кто аналитика, можно посмотреть.

826: Почему флекс флоу не юзаешь, как по мне удобнее. Привычка.

827: Flex flow.

828: Concrete Митя пишет Митя, конкретизируй, пожалуйста, потому что я не совсем понимаю флекс флоу, флекс флоу.

829: А flex fleur теперь понял.

830: Ну, типа вместо.

831: Вместо flex direction писать flex flow.

832: Я, кстати, сокращение и на флексе тоже не использую, то есть ну, типа типа просто flex там flex flex ринг флекс Гроу флекс безис, я, кстати, тоже прописываю по отдельности, как-то так удобнее, хотя.

833: Может и можно перейти. Запись сохранится, кто знает. Ну, думаю, сохранится несколько дней, точно повисит. Вот там, не знаю, посмотрю, как по настроению будет. Ну, то есть я посмотрю, как стрим, в принципе, прошёл нормально. Вот пару.

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

835: Так, да, после сисс писать на обычном css маленько некомфортно ну да, то есть охота как-то все разделять вложенность делать, как ввести отступ margin с 2 значениями, как ввести отступ margin с 2 значениями. Ну, марджин сокращённый.

836: Там может быть 2 или 3 значения. Если 2, то 1 это вверх, вниз. 2 лево право. Если 3 значения это верх, лево, право и низ.

837: Если я знаю теорию ссс, но без практики будет полезно просто повторять подобные стримы. Я понимаю, что вы делаете, но самостоятельно не могу сделать макет. Пройдёт ли понимание, да, будет смысл повторять. Но единственный момент этот стрим я верстаю очень быстро.

838: Потому что stream. То есть я бы мог его, ну типа верстать медленно, это бы заняло где-то 3 стрима ну вот реально это бы заняло 3 урока таких по 3 часа. И как правило там 2 стрим уже меньше людей на 3.

839: Стрим вообще приходит человек 20. Вот. Поэтому мне не охота растягивать на 3 стрима. Ну вот просто, просто из за типа контента. Вот если смотреть те видео, которые есть у меня на канале, где я просто загружал, как видео.

840: С объяснениями. Это вот, например, там вёрстка вот этого сайта, по моему, да, вот адаптивная вёрстка, тут 2 видео. Ну да, по моему, это не стрим, нет, трансляция, блин, тоже стрим, да, но есть

841: Где-то видео. А вот оливия, да, я про неё думал. Или оливия, вот, вот 1 урок я его записал, да, вот он 5 часов занял в записи, и я там подробно, пошагово, вот там реально повторять, вот адапти.

842: Вёрстка, нам можно скопировать как-нибудь ссылку на него дать, да?

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

844: Ну, в целом, так, зато можно так поверхностно посмотреть, в принципе, да, что к чему там, как верстаем отсюда берём сюда, добавляем вот так вот так вот так, да, и сесть, и там самостоятельно попробовать проработать. Начинай.

845: Практиковаться? Да, пишет. Так, на макет есть. Линк есть, да, в описании под видео ссылка на telegram канал, да, в telegram канале, там заяц, потом утка, потом яйцо, потом игла. Короче, вы поняли, да.

846: В telegram канале есть ссылка. Запись останется. Да. Так, ладно, спасибо за урок. Сертификат реальный, школа аккредитованная. Тут все очень интересно с точки зрения законодательства. Ре.

847: Сертификат, любой сертификат реальный. С точки зрения законодательства вы можете открыть, вы можете выдавать любые сертификаты, это будут, и это будет сертификат того, что вы выдали сертификат. Если вы просто пишите слово сертификат. Вот

848: У нас сертификаты, я всегда открыто говорю, это просто бумага о том, что вы были у нас на курсе. Все это не переквалификация, это не повышение квалификации, это просто, да, просто бумага от нашей.

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

850: Вот. Здравствуйте. Реально, я прорабатывал тему с аккредитацией. Просто если аккредитовываться, да? Ну, в принципе, если сейчас взять, там, сделать, например, получить аккредитацию и

851: Делать сертификаты с аккредитацией. Программа у меня останется та же. Ну, ну, по факту, да, как бы, да, вот реально. То есть, ну, как бы, курс программы останется тот же, но за счёт смены сферы деятельности, да, то есть это уже будет

852: А не ип, это уже будет другая система налогообложения, это уже будут другие расходы, другие затраты. Стоимость курса просто на ровном месте вырастет там на 20 000 ₽. Просто за счёт вот этого

853: И это, ну, как бы, вот, вот, примерно так вот, ну, да, тогда будет аккредитованный сертификат. Ну, в принципе, если для вас это важно, да, стоит посмотреть там, где аккредитованный, тогда, если просто важно получить знания, научиться это делать, вот то, что

854: В принципе, ну, сейчас, как бы, это не особо там, да, имеет значение, есть сертификат или нет. Более важно, что есть портфолио, что умеешь, как отвечаешь на вопросы, как тестовое, проходишь там, как тестовый период на работе пройдёшь и так далее. Вот. Ну, короче,

855: Отвечаю прямо как есть. Здравствуйте. Реально ли сделать слайдер карусель на ванильном джис? Да, реально. Ну, я не вижу смысла просто зачем? Ну, можно, ну, то есть переключалку можно сделать вообще? Да, не сложно там.

856: В принципе, чтобы они листались, тоже можно сделать. Вот можно в качестве практики как упражнение, это прикольно. То есть, но для проектов проще брать готовый просто

857: Слайдере, там много нюансов, да, там ты напишешь, ну, напишешь 1 слайдер, а потом ты захочешь там какое-то управление к нему там добавить, да, стрелочки вперёд, назад. Захочешь пагинацию сделать, захочешь свайпы сделать, потом захочешь какую-то настройку, типа центр до

858: А потом бесконечно, а потом ещё че то, ещё, че то и по факту ты поймёшь, что ты переизобретаешь, да, что-то вот поэтому в учебных целях это здорово, круто. Вот попробовать можно сделать, написать. Ну а дальше уже в принципе.

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

860: Стоит ли иметь навыки дизайна для вёрстки сайтов? Ну это будет полезно, это будет полезно. Если у вас будут навыки дизайна, вы будете, у вас будет глаз намётан. Да, вы будете понимать там, что откуда вы взяли

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

862: Да, вот постоянно за всем этим следить, да, и поэтому приходится это развивать в процессе. Вот если есть здорово, если нет, это не обязательно. То есть не нужно. Вёрстку изучают без, ну, как бы, да, нет такого, что нужно

863: Изучить дизайн, потом вёрстку там или дизайн, потом фронтенд такого нет, сразу идут и учат уже конкретную технологию. Вот поэтому будет стрим со сложными эффектами.

864: Пока в планах не было.

865: Именно стрим может какое-нибудь просто видео с прикольными эффектами, там, анимации, трансформации на лендинге, да, но вот есть же записи и паузы. Спасибо за ответ. Ну да, есть, да, можете, да.

866: Можете паузу ставить. Да, доброволец пишет доброволец. Спасибо за разъяснение. Спасибо. Отлично, ребят, что ж, я предлагаю на этом. Давайте, наверное, остановимся. То есть, как всегда, мы сделали без

867: Адаптива. Вот, вот мы сделали макет, но без адаптива. Если вы заверстали макет, но он у вас без адаптива, то знаете, что нужно сделать? Нужно удалить или закомментировать вот эту строчку? Вьюпорт виз, девайс, виз. То есть если у вас адаптив

868: Его нет, вы эту строку комментируете и он будет просто пропорционально уменьшаться, по идее, но это не точно. Вот, да, и он будет просто пропорционально уменьшаться. Ну, конечно, как бы

869: От всех каких-то багов это не спасёт. Ну, ну в целом ним можно будет пользоваться, да, вот он просто пропорционально уменьшился. То есть, смотрите, 320 человек откроет на кто-нибудь, на айфон, 5 откроет. Вот. И во

870: Вот такую картинку увидит и будет просто так свайпить. Ну и все равно сможет как-то ним попользоваться этим. Так, не, на самом деле не так будет. У меня камера включена, да?

871: Да, я просто угораю. Нет, ну, сможет попользоваться. Масштаб просто будет другой. Это мы увеличили. А как уменьшить? А, ну вот так, да, двойной тап, вот тройной тап. Вот. Да нет, попользоваться сможет. Просто вот тапы надо делать 1, 2. Вот.

872: 1, 2. Вот попользоваться сможет. Вот. То есть, если вы там сделали сайт адаптив не делали, то просто просто не добавляйте вот эту строчку, я её закомментировал и в целом у вас будет рабочий сайт.

873: У вас будет рабочий сайт.

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

875: Все, все хорошее должно когда-то заканчиваться я надеюсь этот стрим был хороший вот окей да у вас есть уроки по gap спрашивают по gap у меня есть уроки по

876: Гридам и там есть gap ну в принципе ролл гэп колом гэп во flex box это тоже самое то есть 2 свойства там по ним урок делать не знаю нет, есть урок где это разбирается вот css grid флексбокс флот тут я.

877: Показывал на flex box с гэпами, а есть урок по гридам, вот css grid полная инструкция и css grid флексбокс фло тут я прям сравнил 3 технологии, как это делать ну флот это уже как бы устаревшие вчерашний день, но все равно.

878: Но вы можете на это попасть вот и это я записывал урок ещё год назад, когда call гэп только был и его ещё не было в каком-то сафари я про это сказал, но на сегодняшний день call гэп можно смело использовать и вот.

879: Я тут использую, показываю, что это удобно. Классно. Ну, сегодня мы уже, собственно, с этим, со всем верстаем, вот обещали, да, я знаю, обещал. Но, блин, вот оскар, сейчас я спрошу, оскар скажет, да, я скажу, оскар, вот.

880: Реально готов. Вот, братуха, братуха, готов сидеть 2 часа со мной, пока я буду делать адаптив и не уходить со стрима. Будем с тобой до последнего, пока не допилим адаптив. А я знаю, что

881: Скажешь, готов, но я, я не готов. Ну реально, просто это уже будет очень тухло. Давайте просто пообщаемся там, если есть вопросы, вот.

882: О, прикольный человек, даже пишет очень хорошо. Я не знаю русский язык, пишу через google переводчик, но я очень хорошо учу то, что вы объяснили. Желаю вам удачи, наверное. Да, круто, приятно. Вот готов.

883: Хоть до утра. Вот. Да, не, да, да. Запись останется. Да, давайте адаптив, да, в другой раз я просто стрим как-нибудь сделаю на канале, он останется висеть, и мы там просто адаптив добавим. Вот.

884: Просто там много чего перестраивать, переделывать. Я могу днём как-нибудь просто стрим стартануть объявление, потом будет, что типа стрим с адаптивом. Такая же обложка будет, типа вёрстка сайтов, адаптив. Вот.

885: И как раз 2 чисто с адаптивом, с навигацией и так далее. Вот да, зачем тебе YouTube канал, какова выгода?

886: Это ко мне вопрос, что ли? Я не понял, у кого спрашивают в другой раз. Да, точно будет точно. Сделаем так сильно далеко не откладывая. Я боюсь сказать завтра, но может,

887: Днём. Ну, это я так, я просто днём стрим начну, тогда и днём проведу, и на канале останется. Уведомлялки везде будут. Можно будет зайти, посмотреть. Вот. Окей. Хорошо, ребят, всем большое спасибо.

888: Спасибо за внимание. Вот реально приятно было с вами пообщаться и на протяжении стрима. Вот особенно сейчас тоже вот реально классно настроение отличное. Надеюсь, у вас тоже, в общем, в общем,

889: Код я скину в telegram канал того, что мы сделали. Вот я говорил, что хочу бусти сделать, бусти сделаю. Когда я сделаю бусти, может быть, весь код переместится на бусти и будет доступен.

890: Только по подписке. Вот когда я сделаю бусти, а я его сделаю, мне интересно попробовать. Вот пока вот то, что мы сейчас сделали, я добавляю в архив, и я сейчас закину в telegram канал, ссылка на telegram канал есть.

891: Описании под видео telegram канал приватный. То есть вам нужно, ну, приватный, чтобы там спама не было. Хотя это же канал, это же не чат. Ну, все равно вот суть такая, он приватный и прям.

892: Не знаю, у меня тут, из, у меня тут из чата вроде ничего такого нет этого.

893: Вот, поэтому можно вот так даже у вас на глазах это сделать и давайте закинем и напишем код с стрима.

894: Макета, как market назывался? Гоу, трип, гоу трип. Так, ну, в принципе, там дата написана, да, что 7 августа, ой, июля.

895: Давайте вот код со стрима готовый.

896: Вот, поэтому переходите, вступайте, у вас должен быть telegram канал telegram просто как-то установлен, да и так далее. Вот переходите, тогда вы сможете вступить и сможете скачать.

897: Вот то, что мы сделали сегодня на стриме. Вот, но в будущем я хочу попробовать, я все-таки сделаю подписку, ну типа небольшую, там, 290 ₽, что-то такое. Вот, и тогда уже как-то все это

898: Пакую, отсортирую там, не знаю, может какую-нибудь схему сделаю, где какие коды лежат и так далее. Ну, пока буду просто в канал скидывать.

899: Вот, окей. Вот, ну и все, кто хочет обучиться вёрстке, или javascript, или фронтенду, или реакту,

900: Заходим на веб кадеми точка рф веб кадеми точка ру есть бесплатный курс по вёрстке вот для начинающих самое то вот вот этот бесплатный курс по вёрстке он есть на YouTube, но если вы тут будете проходить, то здесь будет код к каждому уроку макет.

901: Ну, это удобно, да, вот поэтому вот рекомендую вот этот бесплатный курс, вот как раз для тех, вот писали теорию, изучил сам сверстать не могу, вот с чего бы начать вот это вот прям идеально там мы делаем прикольный сайт портфолио, там мы видео на сайт добавляем видеофон там

902: Верстаем это не сложно, просто флексбоксы. Вот я рекомендую его, ну вот реально классный вот, вот такой сайт портфолио мы делаем

903: Вот. И ну и собственно кто уже хочет профессионально обучиться вместе с нами есть курсы вот по вёрстке по продвинутой вёрстке по gs с реактом и по разработке сайтов на php ссылочка на школу есть в описании под видео вот.

904: Давайте смотрю ещё чат. Я думал, сейчас будет летсплей по тетрису. Ну, это прикольно, кстати, да, такое настроение. Самое то. Вот хорошенько, помаленьку. Юрий, большое спасибо. Спасибо за то. Делаете доступ. Очень помогает новичка.

905: Спасибо, спасибо, спасибо за пожелание у тебя, у тебя, не ты же на меня смотришь. Call солдат пишет да, Коля, Николай, я вообще на вы общаюсь, ну и

906: Как бы привык. Для меня это комфортно, в принципе, нормально, как бы, да, вот если ко мне идёт обращение в чате на ты, тогда я тоже обращаюсь на ты, вот, ну или просто вот чисто, ну, ради прикола.

907: Сказал 1 раз вот с оскаром мы пообщались, да. Так, в целом, конечно, я общаюсь на вы и тоже как бы нормально к этому отношусь. Поэтому, ну, а если, но бывает у человека, ну вот, типа, в имени написано Коля, да, ну вот.

908: Же написано, вот, но обычно я как бы всегда на вы.

909: Спасибо за стрим. Много нового узнал на вашем канале. Спасибо. Я думал, сейчас будет так, да. А вот можно ли верстать сайт вообще без грида только на флексах? Будет ли это правильно? Можно? Мы сейчас вообще без грида сделали только на флексах. Ну а зачем, как бы у нас

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

911: Есть урок адаптивная вёрстка на css grid и тут вот прям идеальный пример я привёл показал почему грид почему не флексы, то есть я показал да вот тут прям отдель отдельный такой раздел, почему не надо?

912: Использовать флексбокс. То есть я показал, сколько разметки у вас на флексах выйдет, и потом показал, сколько разметки выйдет на грядах. Ну просто в разы меньше. Вот, а макет как выглядит. Вот, да, то есть, ну вот, если у вас вот примерно такая раскладка,

913: Конечно, гриды лучше использовать. Вот. Поэтому да, все, все просто зависит от макета, от того, что мы делаем.

914: Да, спокойной ночи, братан. Спокойной ночи. Так, на тг канал можете ссылочку скинуть. Ссылка на тг канал в описании под видео. Если её там нет, обновите страницу. Если вы с начала стрима, я добавил во время

915: Во время старта, да, короче, все мы с оскаром уже все задружились. Так, ладно, спасибо огромное за контент. Можете сделать мастер класс по сайту на 2 языках. Английский и русский.

916: На 2 языках английский и русский.

917: Тут все зависит от того, на чем вы делаете сайт. Понимаете? Если у вас он просто на вёрстке, вы можете сделать 1 страницу русской, 2 английской и просто ссылки разместить, перейти на ту, на ту версию и все. Если это вопрос по вёрстке, да, если у вас сайт на какой-то

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

919: Какой-то её плагин, да, или это чистая вёрстка, тогда вы просто страницы добавляете, там другие. Если это там фронтент, то, ну у вас, вы тогда с сервера получаете английскую версию, да, и просто

920: Там перестраиваете контент. Ну, короче, это такой вопрос. Он очень сильно зависит от того, что лежит в основе сайта, да, как бы, на чем он построен. Если это на php, просто вы пишите самопис, то, ну, может

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

922: Очень узкая задача. Ну, то есть, когда начинаешь решать эту узкоспециализированную задачу, там ещё несколько вариантов. Вот. Поэтому, даже если в рамках 1 смски работаешь, вот не есть, конечно, вариант поставить кнопку google транслейт, которая будет прос.

923: Просто все переводить. Есть такой вариант. Ну, ну, для меня это не решение задачи, да, то есть, типа google, транслейт и так встроен в браузер. Ну, есть такие расширения, типа, там, для вашего вордпресса плагин, у тебя просто кнопка google транслейт, и все.

924: Есть такое, да, но, как бы, я не считаю это решением. Вот, пожалуйста, вам просто google транслейт перевести, это же не проблема. Ну вот, а так, ну, я не буду делать такой мастер класс, потому что это прям, ну, сильно большая.

925: Это, ну, как мне кажется, на мой взгляд, это слишком много всего нужно, там сайт должен быть готовый, да, и там че то все добавлять, не знаю, там в рамках типа, в рамках курса по php, да, мы

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

927: Там роутер переделать, доделать, ну или ещё что-то, как мы будем там язык передавать или мы через параметры будем передавать? То есть, ну, в рамках курса по php на мастер классе мы можем такое рассмотреть, то есть там у нас есть уже проект, написанный на самопис.

928: Смски и вот как конкретно к ней добавить мультиязычность да, такое может быть сейчас кто-то с курсов по php услышит и напишет и будем рассматривать. Вот, и тогда посмотрим. Вот от души все объяснили. Спа.

929: Спасибо. Расставил по полочкам, получил на свои ответы вопрос. Все, спасибо. Спасибо. Спасибо. Спасибо, Маратов. Вот такой вариант с google не подойдёт, не успел на начало запись. Да, да. Остаётся. Можно ли самостоятельно?

930: Профессиональной вёрстки без курсов можно, можно обучиться самостоятельно любой профессии. То есть, ну, как бы, нету же цели, да, там, то есть, нету же цели там тащить человека на курсы, там, типа, у всех, да? Ну, нет, конечно, можно изучить самосто.

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

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

933: Делать. Вот, то есть, ну просто курс это как ускорение, там есть помощь, обратная связь, там, проверка домашек и так далее. Ну, как бы, многие учат самостоятельно, кто-то, кто хочет это, ну, пройти с чьей то помощью, ну, как бы, есть самолечение, да.

934: Да, есть лечение там у доктора, то есть тут точно также, поэтому, как бы, и то, и то нормально, и учиться все равно придётся самостоятельно. То есть, да, но просто там на курсе есть программы, есть уроки, помощь, это происходит несколько быстрее, чем самостоятельно. Ну,

935: В целом, конечно, возможно. Ну то есть и да, вот.

936: Спасибо за ответ. Удачи. У меня показывает файле reset, показывает файле reset css, что скоппировал вас на сайте 2 ошибки, как их можно удалить. Там просто есть пустые селекторы, которые вы просто можете удалить, то есть просто вот reset css, да, тут просто есть

937: Фокус эктив, аутлайн ноун типа, ну, сбросить аутлайн с фокусных элементов.

938: Почему это так написано? Тут, наверное, звёздочка пропала. Просто удалите вот этот пустой селектор и вот этот, ну, то есть селектор есть, а кода внутри нет, да, просто удалите его. Вот и все, и ошибок не будет. Он вот просто из за этого ругаетс.

939: Тут я на ссылке вешал аутлайн, но, ну, типа, если хочется убрать аутлайн и здесь, ну, блин, почему здесь, по моему, звёздочка должна быть или нет, а, или просто, ну, короче, просто удалить эти селекторы и все. Вот там была

940: Это у меня задумка. Вот не, они уйдут. Хорошо, ребят, на этом все. Всем большое спасибо за внимание. Не забываем ставить лайк, подписываться на канал. Если вы у нас впервые ещё этого почему-то не сделали, обязательно вступайте в чат по ссылке, там вы найдёте

941: Ссылку на макет. Там вы найдёте готовый код с сегодняшнего стрима. Вот за 0 7, 0 7, 2022, если вы это делаете когда-то позднее, просто отмотайте до 7 июля 22 года, и вы это найдёте. Вот на этом все.

942: Вот можете написать потом позитивный комментарий к этому стриму. Мне будет приятно, я почитаю и улыбнусь. Вот стрим по адаптиву сделаю на него уже просто будет анонс, когда он будет проведён, и когда-то днём мы его проведём, и он также останется в записях на

943: Канале. На этом все. Всем желаю хорошего вечера. Успехов в изучении вёрстки. С вами был Юрий Ключевский. Вэб кадеми. Пока