Скачать "Марафон по верстке. Часть №3. Адаптивная верстка макета с нуля GULP SCSS JS"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FxK9g29AUzeQ%252Fmaxresdefault.jpg&w=1139&q=75)
Похожие ролики из нашего каталога
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FMfpo9TRZDwA%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FZzkcGpM7X2o%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252Fhp9djTkraMo%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FhuPi5XDwBlo%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252Fj0dEldPxB1E%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FwBj6TDc4M5o%252Fmaxresdefault.jpg&w=1139&q=75)
Теги видео
Субтитры
Английский
00:00:01
[музыка]00:03:02
эй привет ребята привет это у нас уже 300:03:05
часть марафона по верстке макете к00:03:10
одного интересного вот он такой вот00:03:13
пакетик00:03:14
значит такой красивый уже было 2 части00:03:17
ссылки на них в описании мы успели00:03:20
сверстать шапку слайдер00:03:22
еще один слайдер вот с такими а лотами00:03:25
тут много было деталей поэтому00:03:27
предыдущие части смотрите кто только что00:03:31
присоединился вот это фрилансер по жизни00:03:35
меня зовут же не андре к ней я абсолютно00:03:38
бесплатно учу вас всех собственно00:03:41
верстать и быть хорошими людьми00:03:44
вот поэтому кто в первый раз меня видит00:03:49
то приятно познакомиться подписывайтесь00:03:52
на канал там много интересного00:03:53
вот значит сегодня у нас естественная00:03:59
каждую часть пытаюсь этот макет00:04:01
закончить да вот но пока не удается вот00:04:07
и следующие два часа бы опять сделаем00:04:11
вот это у нас остаток вот такой вот дам00:04:13
мы донизу00:04:15
вот сколько успеем за плюс-минус 2 часа00:04:19
столько и сделаем впереди у нас много00:04:21
интересного например вот этот блок с00:04:23
категориями и с декором здесь до покажу00:04:27
как как его можно сделать реализовать ну и00:04:31
ниже у нас текстовый блок блок услуги00:04:36
а еще один слайдер с цитатами да да это00:04:39
слайдер дальше у нас блока с новостями00:04:43
формочка небольшая подписки и собственно00:04:45
footer кстати как у вас дела00:04:49
вы мне не ответили слышно ли меня все00:04:52
легкий00:04:59
ну что будем потихонечку начинать так00:05:05
вот у нас результат до который у нас уже00:05:09
на сегодняшний день готов вот и ниже мы00:05:12
будем собственно00:05:14
выдумывать вот этот вот блок вот я00:05:18
сделал вывод что это один блок на самом00:05:20
деле вместе с текстом можно делить на00:05:25
разные блоки можно нет данном в данном00:05:27
случае в данной ситуации это не имеет00:05:30
никакого структурного значения поэтому я00:05:33
это сделаю одним блоком категории до я00:05:36
замечаю что здесь по надписям я понимаю00:05:40
что это какие-то отдельные категории а00:05:42
вот это скорее всего некий села текст00:05:44
либо просто текст описание эти горе00:05:47
хорошо блоки интересный приступим значит00:05:52
html00:05:54
ок здесь я по сворачивал уже готовые00:05:57
блоки дам чтобы они не мешались нам00:06:00
здесь и значит я посмотрю тут у нас нет00:06:04
заголовков поэтому suction мы не будем00:06:07
использовать будем использовать div чик00:06:11
и что это у нас это у нас категории так00:06:14
и запишем категории с да да вот00:06:21
естественном оставим ограничивающий00:06:23
контейнер вот который будет ограничивать00:06:28
ширину вот00:06:30
так и вот здесь самое интересное00:06:33
начинается то есть опять мы атакуем этот00:06:35
блок поскольку мы решили до что это один00:06:38
блок значит нам нужно его делить делить00:06:42
мы будем его на 2 части собственно часть00:06:44
самими категориями да и а текстовая00:06:48
часть вот я уже говорил прошлый раз что00:06:50
всегда стоит именно так атаковать блоки00:06:53
то есть делить их от крупную часть00:06:55
большую и страшную шипами с зубами00:06:59
делить на мелкие части знаете такие00:07:02
новорожденные котята такие слепые00:07:04
махонький моих так 1 1 и сделали и вот00:07:08
из этих всех котят получается что-то00:07:10
зубастая большое что именно так нужно00:07:13
делать и ничего в этом страшного нет00:07:15
хорошо значит здесь я отбросив все00:07:20
сомнения разделил это на две части и00:07:22
верхняя часть у меня будет ссылками00:07:24
значит что это00:07:26
это собственно00:07:30
колонки до колонки с неким контентом00:07:35
просто тут пас toyota вопрос самый00:07:37
главный как мы будем эти колонки делать00:07:40
то есть вот это одна колонка это 2 а вот00:07:43
это третье или же как бы вот так колонка00:07:48
с содержимым 2 3 4 5 и так далее то есть00:07:53
в первую очередь нам нужно это решить00:07:55
чтобы нам нужно чтобы это решить нам00:07:58
нужно понять как мы будем делать здесь00:08:00
декор меня вот этот вот00:08:04
вот и я предполагаю что все-таки я буду00:08:09
это делать00:08:10
элементами то есть у меня вот это будет00:08:14
одна колонка вот одна колонка в которой00:08:18
будет контент и в которой будет вот этот00:08:21
вот декор по крайней мере я попробую00:08:24
сделать именно так а впоследствии мы00:08:27
если зайдем в какой-то тупик или поймем00:08:30
что это не очень не очень правильно не00:08:33
очень шустро получается то мы быстренько00:08:36
это все дело поменяем наш ход мыслей00:08:39
хорошо значит первым делом не нужно00:08:43
создать flex контейнер в принципе да00:08:47
наверное я его создам вот и создаю00:08:50
собственную одну колонку вот flex00:08:54
контейнер колонка как всегда любимые мои00:08:57
куча дивов которые так вам все нравится00:09:01
вот и внутри собственно я помещаю00:09:05
контент дам то будет у меня какой-то00:09:10
категории с сайтом могу его вынести в00:09:15
отдельный блок этом категорий пусть00:09:20
будет простой то почему бы и нет что еще00:09:24
хотелось бы отметить отметить хотелось00:09:28
бы то что это у нас наверняка ссылка00:09:31
правильно фамильным поэтому вот это дело00:09:36
нужно сразу предусмотреть00:09:44
вечера00:09:45
правда сделал ссылкой что у нас внутри00:09:48
этой ссылке есть у нас есть четыре00:09:51
объекта фон до иконка текст и некий00:09:57
декор который кстати здесь вот так вот00:10:00
реализован 1 одной картинкой поскольку я00:10:05
уже показывал в прошлый раз как делать00:10:07
такие декор и вручную чтобы00:10:10
потренироваться здесь чтобы не повторять00:10:13
просто практически те же действия я вы00:10:16
гружу это дело как и картинку проблему00:10:19
тут никакой нет это с фиджи поэтому я00:10:26
это дело в и гружу просто чтобы не00:10:28
повторять не повторяться до00:10:30
за этим не так интересно наблюдать как00:10:33
за чем-то новом прошел и поскольку у00:10:36
меня бы картинки вот эту фоновую и вот00:10:39
эти иконки я уже заранее подготовил да00:10:43
вот чтобы опять же не тратить ваше время00:10:47
хорошо значит теперь мне нужно создать00:10:53
фон дал просто назову бюджет добавлю00:10:57
туда картинку арес-1 пейджером есть и00:11:03
вешаю на него свой класс g чтобы00:11:08
картинка любая картинка была хорошо00:11:10
вписана в тот блок который мы сейчас00:11:12
будем создавать вот год дальше кстати00:11:19
многие из вас заметили что я пишу де00:11:22
внутри00:11:23
не обязательно дивана я пишу блочный так00:11:27
внутри строчного раньше так нельзя бы00:11:30
делать раньше валидатор на это все дело00:11:32
ругался но с недавнего времени точно не00:11:35
скажу с какого00:11:37
vec3 до консорциум разрешил использовать00:11:41
блочные теги внутри строчных вот такой00:11:44
вот прикол00:11:46
окей хорошо значит продолжим так00:11:55
иконочка дам айкан . у меня тоже есть00:12:08
так и дальше у нас текст назову вот00:12:12
тайтл текст у нас может быть00:12:18
однострочный двухстрочный мы видим00:12:21
соответственно он может быть и больше00:12:22
наверное в каких-то разумных пределах мы00:12:27
будем это дело предугадывать еще в00:12:31
результате у меня вот что то такое00:12:33
получилось я бы так и оставил почему не00:12:38
шутка будем делать как в макете00:12:41
хорошо я пока остановлюсь но вот этой00:12:44
одной колонке с одним с одним содержимым00:12:49
почему я привык делать так что я00:12:51
сверстал вот это все дело посмотрю как00:12:53
она все ли хорошо работает готовлю начну00:12:56
это дело дублировать до чтобы потом не00:12:59
переделывать00:13:00
большее количество кода перенес классы00:13:06
так ой там сразу отдельный блок я выношу00:13:10
в отдельный файл вот здесь у меня00:13:15
сверстан и так так скажем отдельные00:13:18
блоки которые можно да так выделить00:13:20
такие маленькие булочки вот00:13:24
и собственно тут я его и буду верстать00:13:27
позиция на релате00:13:30
он сразу абсолютный на всю ширину высоту00:13:34
родителя вот и вот здесь вот нужно нам00:13:38
будет а думать думать потому что тут могут00:13:41
быть нюансы00:13:43
часы объясню о чем идет речь00:13:45
для начала надо определиться с размерами00:13:48
я здесь уже показывал выше в прошлый раз00:13:51
как делать динамическую высоту до я00:13:54
использовал для этого padding процентный00:13:57
здесь посмотрим возможно тут и нет00:14:01
смысла этого делать ну я пока сделаю а00:14:06
там будет видно при адаптивен как нам00:14:09
лучше поступить так хорошо но для начала00:14:16
мы flexi мэтти элементы и центра нам не00:14:20
нужно нам нужно развернуть и и наверно00:14:25
сейчас мы посмотрим на макет да тут00:14:30
везде отступы разное быстро у нас не00:14:32
получится будем делать по деньгами00:14:35
значит хорошо 24 сверху 39 снизу и по00:14:41
бокам я сразу какие-то по денги заложу00:14:47
40 301000:14:55
война этом стенд и пробуем вот пока все00:15:01
как-то стрёмно выглядит ну это мы сейчас00:15:04
дело поправим значит с высотой теперь я00:15:07
хотел до понять вот здесь значит размера00:15:15
задающим у нас сейчас является контент00:15:18
который внутри вот поэтому поэтому00:15:24
поэтому нам все-таки придется здесь00:15:27
задать высоту потому что это в данном00:15:30
случае будет меньше ресурсозатратно во00:15:35
всех отношениях чем чем процентная00:15:40
высота до хорошо значит дальше еще также00:15:44
можно заметить что картинка здесь явно00:15:47
темнее да выглядит чем выгружается чем00:15:50
ее выгрузил все потому что здесь сверху00:15:52
наложен некий слой вот тут его даже00:15:58
сложно как то вычислить по крайней мере00:16:00
в вагоне вот поэтому я буду просто00:16:03
накладывать на глаз плюс-минус чтобы00:16:05
было похоже значит почему стоит делать00:16:08
именно так именно выгружать оригинальную00:16:12
картинку вот она да светлая а потом на00:16:15
кровати и вот таким фильтром до00:16:17
затемняющие потому что собственно00:16:19
заказчик будет скорее всего делать00:16:21
именно тогда картинка не будет круглой00:16:24
там вот такой вот прям уже стоном нам00:16:28
лучше сделать так чтобы туда можно было00:16:31
вставить абсолютно любую картинку любого00:16:33
размера цвета формы да и она будет00:16:37
выглядеть так как в макете круглое00:16:41
затемненное так далее именно так нужно00:16:43
поступать00:16:44
вот когда мы хотим сделать действительно00:16:47
качественную верстку вот я буду00:16:51
использовать псевдо-элементы автор я00:16:53
просто наложу его сверху вот черный цвет00:16:58
и сделаю ему прозрачность сейчас мы с00:17:03
прозрачностью поиграемся вот сейчас это00:17:06
все выглядит вот так у не очень как бы00:17:09
симпатично но это все поправит так00:17:12
теперь я хочу попробовать сделать00:17:14
круглую все это дело круглым вот и у00:17:19
меня с этим могут возникнуть проблемы00:17:22
потому что это круг вот точнее но потому00:17:27
что это ссылка и я сейчас объясню почему00:17:31
так00:17:32
ширину мы тоже зададим фиксированную00:17:35
данном случае вот вот о чём я говорил то00:17:39
есть за пределами за пределами как бы00:17:43
круга окружности сейчас я все равно могу00:17:45
нажимать вот это как бы не очень хорошо00:17:50
да то есть это нелогично если человек00:17:54
в где-то здесь водит мышкой у него00:17:57
появляется рука то есть ссылка00:17:59
он может здесь нажать это как бы не00:18:01
очень потому что рисунка самого еще нет00:18:05
вот поэтому нужно из этой ситуации00:18:07
выходить и я подозреваю что это00:18:11
происходит из-за того что это у нас00:18:13
ссылка вот и видимо какие то вот такие00:18:16
особенности происходят миль с ней вот00:18:21
поэтому я попробую эту ссылку перенести00:18:24
глубже ой там link00:18:34
вот а это у нас будет где он то есть я00:18:42
создал еще одну обертку теперь у нас00:18:46
ссылка внутри объекта который собственно00:18:50
и вот на него действуют вот эти стили00:18:55
закругление и так далее так с остальным00:18:59
мы сейчас разберемся и посмотрим у нас00:19:02
все равно вот они так будем разбираться00:19:08
это важно поэтому потому что это00:19:11
действительно может быть проблемой00:19:12
заказчик может требовать убрать ссылку с00:19:18
этого объекта поэтому тут нужно что-то00:19:22
делать с этим осмо что-то будем00:19:25
выдумывать копирую ссылку00:19:31
[музыка]00:19:37
большинство из вас наверно бы и не00:19:40
обращали внимание на вот это дело да ну00:19:43
есть там ссылка есть но но такая00:19:51
проблема может быть и а значит мы будем00:20:02
пробовать разные варианты первый вариант00:20:04
который напрашивается это естественно00:20:06
скруглить еще00:20:07
ссылку посмотрим возможно но помним да00:20:10
что когда объект у нас до этого был00:20:14
ссылкой только без диван да и завертки00:20:18
тогда у нас это не работало то есть мы00:20:21
ставили морда радиус 50 процентов аваров00:20:25
хидан это все и все равно не не работал00:20:27
все равно ссылка выглядывал посмотрим00:20:30
что у нас сейчас с этим значит вот я00:20:35
ссылку то ссылки тоже даю border-radius00:20:37
до дополнитель00:20:40
смотрим не помогает мы все равно видим00:20:47
что собственно ссылка здесь нажимаете00:20:55
вот пробуем дальше от не для начала00:20:59
здесь уберу flex он здесь не нужен его00:21:01
перенесу сразу суп ссылку ну что бы вас00:21:06
не путать не надо чтобы внутри ссылки00:21:11
флекси лись объекты00:21:13
айкон тайтл и так далее сейчас мы00:21:16
разбираемся с тем чтобы наша ссылка не00:21:19
выглядывала за края круга она все еще00:21:24
выглядывает вот хорошо так пробуем00:21:36
overflow федор хотя не очень то логично00:21:41
мы будем пробовать не работает хорошо00:21:47
значит посмотрим что мы можем изменить а00:21:51
здесь мы можем мы можем ссылкой сделать00:22:12
есть у меня пару идей но они не очень не00:22:16
нравятся00:22:20
теоретически можем наложить ссылку00:22:22
сверху на это дело все но говорю мне эта00:22:28
идея не очень нравится сейчас мы00:22:30
попробуем все таки что то другое сделать00:22:50
ок запись стрима00:22:51
будет не переживаете как и всех других00:22:54
стримов я сейчас проверю всё ли у меня00:23:03
на месте потому что мы сейчас будем00:23:06
долго мучаться у меня здесь где то что00:23:08
то не так как мне бы хотелось00:23:11
хорошо значит я начну сейчас пробовать00:23:13
разные варианты например можно ссылку00:23:19
переместить не оборачивать в нее объекты00:23:27
вот сначала хотя бы этого добьемся а00:23:32
потом я хочу чтобы было нагляднее я хочу00:23:35
вытащить00:23:37
почти на ее наверх00:23:54
ой компе тайком этой сумме их нужно00:23:58
достать наверх ссылкам и тогда пока00:24:01
подождем вот хорошо сейчас было лучше00:24:09
видно я сверстал текст песни цвет00:24:14
конечно loctite алтай то у00:24:30
5 белый цвет белый 2150000:24:37
таки запишем хорошо как мы разместим это00:24:50
дело по центру следующим образом хотя00:24:52
нет нет мэтт и увидели хорошо так значит00:24:57
наша ссылочка00:25:16
тоже будем пробовать нам ничего не00:25:20
остается делать так значит чистим все00:25:25
это делать ее отдельно мне не нравятся00:25:31
все таки все таки я буду добиваться того00:25:34
чтобы она была у меня здесь да вот но00:25:47
теоретически это может быть из-за час а00:25:57
слегка и что попробуем00:26:09
faq00:26:17
ну и нужно ее вытащить вверх под00:26:23
индексом00:26:24
так ссылка появилась и она не00:26:28
выглядывает за пределы00:26:29
вот это как бы первое решение то есть мы00:26:33
банально накрываем ссылкой весь блок вот00:26:37
не оборачиваем в ссылку а накрываем00:26:42
ссылкой абсолютной поверх всего контента00:26:46
вариант рабочий в принципе00:26:49
имеет право на существование но он не не00:26:52
очень честно говоря нравится потому что00:26:54
это00:26:55
к себе костылях вот задачу мы решили но00:27:02
говорю душа мне неспокойно мы пока00:27:05
продолжим00:27:06
а я процессе буду думать над еще00:27:10
каким-то вариантом и будет полезно найду00:27:12
еще вариант будет у вас всегда выбор да00:27:14
какой вариант использовать вот хорошо но00:27:17
пока мы можем это дело поставить по00:27:21
центру вот это хотя00:27:28
но если мы00:27:35
сейчас я кое-что все-таки попробую если00:27:38
здесь поменяю делал нас панель такое00:27:43
может быть теоретически так00:28:04
есть тут проблема почему вы выглядывают00:28:07
края выглядывают края потому что не сама00:28:10
ссылка не круг лица объекты внутри нее00:28:13
вот поэтому и создается такая проблема00:28:45
на полке00:28:47
оставляем пока как есть вот это я верну00:28:53
на место будет у нас такой вариант00:29:00
процессе может что-то и придумаем00:29:02
поинтереснее вот так я центру юмы и00:29:14
штуки по центру так на данный момент у00:29:19
нас за краями ссылочка скрывается вот00:29:25
прошел значит то мы можем продолжить00:29:28
по денги сверху снизу я поставил00:29:32
и иконка вот эта конка00:29:36
нас не по центру ну в смысле по00:29:40
вертикальному00:29:45
вот таким образом хорошо от иконки вниз00:29:51
у нас около 30 пикселей00:29:59
вот и у нас еще есть от декор внутри00:30:05
этой штуки я его ещё не сделал м л так00:30:42
появился декор00:30:44
я вижу что затемнять стоит сильнее00:30:51
вот по моему переборщил да да где-то 6 600:31:06
+ windows до может 7 вот так пусть будет00:31:16
нам главное чтобы у нас хорошо был виден00:31:19
текст и все элементы00:31:22
вот хорошо и следующее что я хочу00:31:25
сделать это собственно обеспечить00:31:27
нормальную работу двух строчных до type00:31:32
of extra00:31:33
то есть он может быть здесь однострочный00:31:35
двухстрочный00:31:36
и так далее для этого я позволю flex00:31:42
элементу тайтл00:31:43
увеличиваться у сколько у нас00:31:46
flex direction колонн у родителя00:31:51
вот мы можем позволить одному из00:31:55
элементов увеличиваться и он последний00:31:57
наш декор прижмет к низу00:32:00
объекта тем самым позволив00:32:03
получить отображение макет вот00:32:10
сейчас у нас все окей да да хорошо мы00:32:16
можем двигаться дальше и у нас здесь00:32:19
есть вот такой вот декор еще вот00:32:24
естественно его нужно привязывать00:32:26
колонки коне к элементу канкан уколим00:32:32
контентному элементу именно колонки00:32:35
нужно его привязывать каким образом00:32:37
значит здесь я вижу здесь у нас всего00:32:45
четыре объекта вот они 1 2 3 4 полоска .00:32:50
полоска и а квадрата ромба куб вот так00:32:55
же у нас есть еще . здесь и начальные00:32:59
объекты вот здесь вот сверху значит мы00:33:02
можем поступить двумя способами вот мы00:33:06
можем вот эти объекты сверху сверху00:33:10
сделать отдельными элементами либо00:33:14
нижние сделать отдельными элементами все00:33:17
равно нам где-то нужно будет их00:33:19
добавлять потому что так не получается00:33:22
по очереди вот я наверное сделаю00:33:28
наверное сделаю отдельный их верным00:33:31
верхними элементами сейчас я сейчас00:33:34
будет понятнее что им то и дело что я00:33:37
придумал вот значит для создания вот00:33:40
этой вот повторяющий повторяющегося00:33:43
декора я буду использовать еще один div вот00:33:46
здесь получается у меня 1 2 3 4 объекта00:33:50
4 объекта значит мне надо два объекта00:33:54
вычтем all чтобы присвоить им по 200:33:58
псевдо-элемент а значит вот наша колонка00:34:01
категория с калом вот наш контент00:34:05
categories on the block00:34:07
это все мы его не трогаем вот потому что00:34:10
это контент на ждал декор контент ней не00:34:14
относятся в данном случае по крайней00:34:16
мере00:34:17
вот поэтому я создаю здесь еще категория00:34:27
декор еще 1100:34:32
и-и-и-и-и внутри помещаю спал00:34:35
вот таким вот образом и получается вот00:34:39
эта штука00:34:40
сможет в себе нести 4 а псевдо-элемент а00:34:44
собственно четыре элемента нам здесь и00:34:48
нужны как я уже сказал вот этим мы00:34:50
сейчас сейчас либо позже мы добавим их00:34:54
вообще один ровно так же как и вот эти00:34:56
точки хорошо значит придумать придумал00:35:01
надо теперь это дело реализовывать так00:35:06
перенес классы и поехали значит00:35:13
общее наш flex контейнера ну общей наш00:35:17
блог почет flex контейнер и 1 3 размер00:35:23
колонки до колонок у нас три они00:35:26
одинаковые поэтому мы можем задать таким00:35:29
образом одна треть хорошо вот что00:35:32
получилось кстати вот колодка00:35:36
с объектов ок еще кстати вот с этими вот00:35:41
с этой центровкой тоже нужно нужно будет00:35:43
поиграться так 100 пикселей у них отступ00:35:48
контента от контакта и контентов00:35:50
попробуем так сделать вот раздвигаю00:35:55
коробочку нашим flex контейнер и сдвигаю00:35:58
колонки вот все у нас осталось на месте00:36:01
но теперь мы получили вот такую картину00:36:05
да хорошо для наглядности я просто00:36:09
сейчас скопирую еще одну колонку чтобы00:36:12
вы понимали что происходит потому что я00:36:14
это как бы вижу в голове у себя00:36:17
но вам наверняка сложно поэтому я00:36:20
поставлю две колонки чтобы мы сейчас00:36:23
когда делали декор чтобы это было все00:36:25
видно также я сейчас добавлю некоторые00:36:27
отступы чтобы восприятие было лучше вот00:36:30
во первых от колонки донизу00:36:32
меня здесь 50 пикселей padding вот00:36:38
почему padding в принципе все равно00:36:42
можно имиджем нужный margin привычный00:36:47
нам нужен вниз вот сейчас я думаю более00:36:55
наглядно00:36:57
окей значит декор сейчас я буду00:36:59
выстраивать вот этот вот декор00:37:03
вот следующим образом вот мой декор вот00:37:07
мой с панда обращаюсь к селектору тегом00:37:12
спа ну значит be for автор00:37:18
меня нет хотя зачем они у меня абсолютно00:37:23
имени абсолютно ланка у меня позиция на00:37:27
релате а весь декор у меня позиция00:37:31
абсолют и справа находится сверху00:37:34
правильно правильно ок из шириной он у00:37:39
меня двадцать четыре пикселя то есть я00:37:48
сейчас хочу здесь построить вот вот этот00:37:50
вот контейнер для декора вот здесь так00:37:55
так и запишем вы с 24 хоть сто процентов00:38:00
и вот здесь вот проблемка потому что вот00:38:07
потому что вот я хочу чтобы он у меня00:38:10
опустился00:38:17
поэтому у меня должен быть поэтому здесь00:38:20
мы сделаем вот так 25 пикселей вниз по 100:38:24
га major только 25 в итоге мы получим 5000:38:29
отступ как у нас и был но колонка здесь00:38:33
вот где же такое зеленого то это padding00:38:36
у нас да и таким образом я получу то что00:38:40
я хотел вот с декор вот это плашка с00:38:43
декором она у меня как раз на ту высоту00:38:46
которой она у меня в макете вот кстати00:38:51
здесь вот эти решения обдумывания вот00:38:54
это важно потому что вы сэкономите себе00:38:56
время сразу изначально правильно обдумав00:39:00
как вы будете это дело строит вот я не00:39:05
устаю повторять что вы можете знать все00:39:07
там теги все свойства css и так далее но00:39:11
вот это вот обдумывание и атака блока00:39:15
соответствующим образом чтобы сэкономить00:39:16
времени сидеть с этим год вот это важнее00:39:20
вот поэтому даже если вы сейчас вообще00:39:22
ничего не знаете это вы можете просто00:39:25
смотреть на то каким образом можно00:39:28
реализовывать те или иные вещи и еще00:39:32
естественно повторяю что у каждой00:39:34
реализации может быть абсолютно00:39:36
несколько вариантов они даже могут быть00:39:38
все00:39:39
равноправные правильные и хороши поэтому00:39:44
задача у нас но таких практических00:39:47
марафонах смотреть какие есть варианты00:39:49
реализации той или иной штуки в каких-то00:39:52
интересных момента окей хорошо и теперь00:39:57
я заметил что меня этот блочок стоит но00:39:59
не там где нужно то есть он справа его00:40:01
нужно подвинуть на 12 пикселей а точнее00:40:05
я его подвину на 50 процентов формам00:40:09
translate00:40:12
вот ну по-моему он по центру00:40:16
но скажите по центру вот между этими00:40:20
двумя колонками вот наш декор00:40:23
разместился уже там где нужно хорошо и00:40:26
мы теперь уже в него в этот пенал да00:40:29
будем помещать вот эти все элементы00:40:32
декора00:40:33
линия . линия и куба квадратов роб вот00:40:40
значит опять же я это буду делать по00:40:42
порядку значит у меня есть span в00:40:45
которой я поставлю вот эти 2 элемента и00:40:47
for и автор а для самого самой бы самой00:40:52
оболочки декора у меня будет вот эти 200:40:54
элемента be for и автор вот так и00:40:59
запишем значит да это мне здесь не нужно00:41:04
и for00:41:05
и for так сразу и делаю декор флег xbox00:41:14
flex direction калом вот и рисуем линию00:41:20
быть убит один пиксель на шириной и00:41:23
теперь тоже нужно подумать как мы можем00:41:27
сделать это так чтобы было интересней мы00:41:34
можем вот эти а высоты сделать00:41:37
динамическими на всякий случай00:41:41
сделаем потому что можем да вот хайд сто00:41:47
процентов00:41:52
ну тип того можно сделать вот так по00:41:58
идее00:41:59
идея можно сделать да так вот и покрасим00:42:06
мы это дело покрасим вот линии у нас00:42:18
появились линию у нас появились но они00:42:20
не по центру плошечки мы это дело00:42:22
исправим так лан этом вот хорошо00:42:29
линии мы нарисовали они в принципе мне00:42:32
нравится вот хорошо теперь чтобы было00:42:36
понятней и мне и вам я переметнусь в00:42:39
span и сделаю точку сделают точку вот эту00:42:51
10 на 10 пикселей ground color 10 на 1000:43:00
дополнительно я делаю flex размер 1000:43:04
естественно flex flex direction white00:43:08
центр вот типа .00:43:13
так типа .00:43:17
только она должна быть круглой и и00:43:20
и мир джен и 2000:43:38
так . у нас появилась но естественно она00:43:41
немного не там где нужно вот уточнена00:43:45
там где нужно но размер линии у нас еще00:43:48
не совсем корректен00:43:49
ну к этому мы подойдем позже вот дальше00:43:53
делаем автор для оболочки контейнера и а00:44:01
вот здесь вот как раз эти линии я в00:44:04
принципе да я могу их оставить каким00:44:06
образом вот что мы получим а уже лучше00:44:10
уже что то похоже на то что нам надо и а00:44:17
теперь я попробую внизу добавить спама00:44:24
автор и там сделать наш квадрат и ромб00:44:32
242400:44:42
вот танк стоит 4500:44:52
как только у меня неправильный порядок00:44:55
правильно то есть автор линия у меня00:44:57
должна быть здесь автор ромб у меня00:45:01
должен быть у нас декор шел по порядку00:45:06
все равно что-то не так сейчас00:45:08
разберемся так так так кромку меня00:45:17
должен быть в конце вот он автор линий00:45:28
аарон потом спам00:45:33
линия он и ром хорошо тогда тогда как мы00:45:47
можем это дело перестроить тогда мы00:45:49
можем это перестроить00:45:52
много по другому00:45:55
линию я поставлю в объект потом я00:46:07
поставлю точку потом я сделал span можно00:46:13
и так поступить нет для начала я закончу00:46:24
с ромбом00:46:28
а тут тоже ост пикселей 1520 и00:46:43
естественно уважаем на 072 чтобы размер00:46:49
нож был по макету а именно 70 процентов00:46:56
тут у нас опять проблему с этим мост вот00:47:15
так можно выйти из ситуации как вариант00:47:25
вот00:47:29
в принципе неплохо в принципе вот но00:47:37
есть еще варианты реализация этого00:47:40
декора00:47:47
которым в принципе можем попробовать00:47:53
сейчас он по идее динамичен если я буду00:47:56
увеличивать контент в с моим контентом00:48:06
что-то будет случаться то весь мой декор00:48:09
будет ну ничего страшного не произойдет00:48:12
до все будет адекватно отображаться вот00:48:17
поэтому в принципе этот вариант как00:48:20
таковой можно и оставлять00:48:32
да да окей хорошо00:48:37
раз решили оставлять чтобы долго на этом00:48:39
не засиживаться можно идти дальше но в00:48:43
целом я могу сказать что00:48:45
реализации здесь достаточно много то00:48:48
есть сейчас у меня как идет сейчас у00:48:51
меня div декор внутри span00:48:55
идет по порядку линию в конце квадрат00:49:00
это собственно псевдо-элементы самого00:49:02
декора00:49:03
испан посередине между ними со своими00:49:05
псевдо элементами с . если не это один00:49:07
вариант можно00:49:08
другому скомпоновать то есть спам00:49:12
поставить в конце псевдо-элементы00:49:15
пустить как линия .00:49:17
для декора и дальше span с линией и с00:49:23
объектом так что можно пробовать сейчас00:49:31
не имеет смысла это делать но вы для00:49:33
себя можете попробовать вот хорошо00:49:37
верхние вот эти элементы как я говорил00:49:39
мы будем доделывать они будут00:49:41
доделываться отдельно вот сейчас я пока00:49:46
поставлю здесь во второй колонке00:49:52
другой текст другую картинку вот кстати00:49:58
что то тут еще у меня слайдер spacing00:50:00
этих рук тайтлов00:50:11
вот и собственно padding можно пал под00:50:15
увеличить чтобы у нас все было клёво00:50:19
30-го так и мы обнаружили что у нас еще00:50:25
хорошо бы было это дело по центру00:50:27
поставить так и что-то я замечаю что00:50:30
здесь довольно высокий отступ00:50:32
с разберемся во первых line хай 25 у00:50:37
тайтлом ок и тогда нам нужно под00:50:44
уменьшить здесь вот про волка большой00:50:52
надо поменьше делать00:50:54
[музыка]00:51:02
вот теперь более или менее хорошо так00:51:06
[музыка]00:51:09
далее я добавляю третью колонку а к чему00:51:17
можем по сворачивать00:51:20
вот вам и еще иконку не заменил вторую00:51:26
ок так берем автотранспорт и чего ты там00:51:33
чего то вот третья колонка теперь мы00:51:40
можем сделать следующие мы можем00:51:44
добавить вот эти вот два объекта сверху00:51:47
и собственно точкой которая макете тоже00:51:50
присутствует естественно здесь за 300:51:53
колонкой у нас нет декора00:51:55
а здесь у нас есть тоже на это дело00:51:58
будем поправлять00:52:06
так ну поехали значит начнем с верхних с00:52:12
верхних двух вот этих объектов вот я их00:52:17
попробую сделать как псевдо-элементы для00:52:20
нашего flex контейнера попробую00:52:26
посмотрим что получится именно для00:52:28
категории срок00:52:36
вот он позиция нра мотив be for автор00:52:44
здесь он абсолют я сейчас просто на00:52:47
копирую вот этот вот00:52:50
квадрата рамки сюда под ноль лев 5000:52:56
процентов пока посмотрим вот он у нас00:53:00
появился да вот здесь появился00:53:05
естественно не там где нам нужно но не00:53:08
совсем там где нам нужно во-первых я00:53:10
сделаю отступ вот этот вот до 3700:53:15
пикселей 1 это 1 что рой что мне нужно00:53:25
сделать это собственно разместить их по00:53:28
назначению вот можно попробовать можно00:53:34
попробовать делать так но вот здесь вот00:53:40
будет нехорошо пытаюсь предугадать как я00:53:46
буду действовать надо бти we00:53:47
при адаптивен потом дальше но00:53:54
но это наверно будет ясно в процессе там00:53:59
есть нюансы с поведением объектов при00:54:08
адаптивен о собственно вот этого00:54:10
расположения в 33 33 процента я нужно00:54:15
будет прикидывать как это сделать лучше00:54:17
пока оставим пока оставим и посмотрим00:54:23
что мы можем сделать еще и for love 33а00:54:32
автор можно сделать так лев00:54:39
[музыка]00:54:42
он00:54:45
66 67 там чтобы сэкономить на одном00:54:53
свойстве transform и вот здесь вот минус00:54:57
50 процентов их вернуть назад в ну00:55:04
правильно00:55:07
мультитран for белым вот я вижу что там00:55:12
попал пикселя не канает принципе если00:55:16
она брэйк поинты буду уходить здесь а я00:55:19
буду здесь00:55:20
уходить на две колонки по идее у меня00:55:26
должно быть нормас по идее00:55:33
посмотрим00:55:39
работая сейчас со сборщиком gold я по00:55:42
нему уже готовлю выпуск00:55:44
вот так что будет интересно так но мне00:55:52
покоя не дает что там пол пикселя а00:55:54
значит не не канает я попробовала так00:55:58
написать но я крайне не уверен это00:56:00
получится делать думаю что нет вот как я00:56:05
могу еще это дело высчитать а что если я00:56:07
это дело в kalk завернул попробовать00:56:16
стоит все сломалось00:56:18
ok оставим как есть мы можем вот так же00:56:31
ну как вариант кстати внизу у нас вот00:56:36
эти штуки тоже00:56:41
хотя нет то муки вот значит вот такая у00:56:46
нас история до происходит и что а то что00:56:51
мне нужно убрать вот эту вот штуку опять00:56:55
чтобы и убрать скрыть существует00:56:58
несколько вариантов значит лаз child нам00:57:01
не подходит да потому что у нас это00:57:03
только три колонки а их будет дальше00:57:05
больше вот значит поэтому есть два00:57:11
варианта я называю его первый вариант00:57:13
это покрывало мы можем чем-то накрыть00:57:15
эту штуку и сделать ее невидимый да и и00:57:22
второй вариант который здесь более00:57:25
применим мы вспоминаем что у нас есть00:57:28
контейнер вот здесь до ограничивающие00:57:31
наши мы четко видим что вот этот дикорог00:57:33
выходит за края этого контейнера поэтому00:57:36
что правильно мы можем взять контейнер и00:57:40
написать ему о морковке и все наш лишний00:57:46
декора пропадет между прочим тут тоже00:57:48
немножко подрезала сейчас мы это00:57:50
подправим но00:57:52
целом ситуация произошла вот такая здесь00:57:59
подрезала потому что мы уже знаем что00:58:01
когда мы переворачиваем объект это они00:58:03
так чуть-чуть вылазит в ботинке могу00:58:07
дать значит мы будем здесь работать00:58:10
из-под мы поставим просто топ но00:58:18
так немножко про фиксе нашу штуку мы00:58:21
здесь спокойно можем это дело все да то00:58:24
что позиционировать как нам надо потому00:58:26
что это неизменяемый контент в этот00:58:28
декор сейчас мы строим конструкцию так00:58:31
что было окей так это мы сделали все у00:58:33
нас вроде бы как неплохо получается да00:58:37
вот но но у нас нет еще следующих00:58:41
объектов да и нету вот этих вот00:58:44
точек для того чтобы делать точки я00:58:47
собственно добавлю еще объектов так 4-500:59:01
есть часть00:59:18
ок и естественно у нас ничего не00:59:20
произойдет потому что мне вот здесь вот00:59:23
можно добавить яксу раб wrap чтобы мои00:59:27
колонки я позволяю своим колонкам00:59:30
собственно передвигаться вот теперь00:59:34
посмотрим что у нас тут плохо плохо у00:59:37
нас то что отступ от колонок вот здесь00:59:41
вот хорошо видно он не такой как нам00:59:45
надо здесь соответственно нам нужно00:59:54
немножко поменять вот это вот00:59:58
расположение нам нужно добиться того01:00:03
чтобы наш квадрат был вот так вот01:00:07
посередине отступом добиться мы можем01:00:11
это естественно несколькими способами01:00:14
вот например декор вот здесь поставить01:00:21
калк и добавить 12 пикселей высоте01:00:31
ну конечно же нам нужно сделать более01:00:35
плавно пикселей01:00:42
вот это первый вариант из за того что у01:00:53
нас не 2401:00:55
как я намерен 70 процентов от 24 поэтому01:00:59
нужно уменьшить есть поставить 9 вот01:01:08
теперь good то есть я увеличил ширину и01:01:10
высоту ложки с декором таким образом01:01:15
чтобы у меня все было по макету я01:01:18
напомню что несмотря на то что это01:01:21
выглядит странно то высота объектов01:01:27
может быть изменяем а то есть мой декор01:01:29
он привязан к элементам и типа более01:01:35
надежно все сделан естественно если мы01:01:41
будем менять ширину то у нас колонки01:01:43
будут изменять положение потому что мы01:01:47
позволили ему передвигаться01:01:50
но тем ни менее добавив немножко01:01:53
адекватности к отображению мы можем01:01:56
следующим образом разместить это по01:01:58
центру твой контент-центр01:02:02
вот то есть изначальном разницы не01:02:05
увидим она что-то там меняется и01:02:07
происходит вот следующие все равно не01:02:10
очень красиво но по крайней мере по01:02:13
крайней мере01:02:15
пользователь сможет как-то собственно01:02:20
этот контент получить вот хорошо ок с01:02:30
этим понятным можем идти дальше01:02:37
принципе мы можем закрепить здесь в01:02:40
колонках у хотя нет хотя01:02:47
а пусть будет нормально про . надо не01:02:53
забыть которые у нас вот здесь вот в01:02:56
макете существует а точке я буду01:02:59
привязывать к колонкам01:03:04
вот я уже . здесь есть ее скопирую и01:03:09
вставлю беру лишнее здесь он абсолютно01:03:15
50 процентов ботом -5 потом минут пять и01:03:28
transform translate у нас 50 процентов01:03:31
все точки у нас на месте вот то есть я01:03:35
взял и колонки к самой01:03:38
привязал собственно01:03:40
псевдо-элемент и форм и разместил там .01:03:46
вот вот в чем прикол всех этих оберток01:03:51
допустим что-то с контентом случается01:03:55
даже если его удалить то вся структура01:03:58
вместе с декором остается на месте то01:04:01
есть таким образом верстка довольно01:04:04
довольно надежно да вот прошло и теперь01:04:09
я вижу что возможно возможно возможно01:04:12
что-то я сделал не так потому что у меня01:04:15
точки снизу есть а их быть не должно вот01:04:20
каким образом можно избежать такой01:04:23
ситуации конечно же несколькими01:04:27
способами опять можно это все дело01:04:29
чем-то прикрыть01:04:31
второй способ это это это01:04:38
начать наш декор наоборот то есть начать01:04:47
с ромба01:04:49
что это мне даст но это даст мне да это01:04:52
не даст возможность здесь накрыть это01:04:56
дело хорошо сейчас попробуем значит как01:05:00
мы видим в макете точек нет вот этих вот01:05:03
последних элементов мы не знаем какое01:05:06
количество элементов будет поэтому мы не01:05:08
можем использовать не on this child и01:05:10
нее там лаз child вот это вот все мы не01:05:13
можем этого использовать вот в этом и01:05:15
хитрость всего что когда вы wear стоите01:05:18
нужно понимать что это не фиксированное01:05:21
число какое то к чему можно привязаться01:05:24
это очень важно нужно делать так чтобы01:05:27
любое количество объектов которые здесь01:05:29
будет либо не будет все выглядело01:05:33
адекватно да именно поэтому и так все и01:05:37
делается вот прошло сейчас я попробую01:05:41
что-нибудь с этим придумать значит01:05:47
вот мой ролл здесь у него же есть сверху01:05:53
элементы01:05:56
есть контейнер смог чему-то докопаемся01:06:00
и будем решать эту проблему вот у меня01:06:07
есть контейнер так у него не не01:06:10
задействована в принципе ничего из01:06:13
псевдо-элементов я могу к нему01:06:15
докопаться pozis евро латиф автор ок01:06:20
вершин абсолют потом 001:06:25
айт а 50 пикселей ground color белый uid01:06:34
сто процентов01:06:39
вот что я сделал я собственно взял01:06:42
контейнер и01:06:44
и придумал придумал ему плашку вот такую01:06:50
ложку которая накрывает01:06:52
собственно все что ниже но в то же время01:06:56
она накрыла01:06:57
и нужные нам элементы вот эти вот01:07:00
ромбики01:07:01
вот поэтому у меня и появилась мысль01:07:04
немножко декор переделать вот во-первых01:07:08
я заметил что можно здесь поставить чуть01:07:11
поменьше потому что залазит на линии01:07:26
так и01:07:31
такой вариант я здесь вижу один из01:07:34
вариантов который поможет нам и там вот01:07:38
эти ромбы01:07:40
ну собственно то что я сделал для верха01:07:43
до вот эти вот штуки сделать для низа ты01:07:46
таким образом я смогу управлять зад01:07:49
индексом и собственно наложить но также01:07:55
можно также можно например попробовать01:08:01
увеличить01:08:04
z-index у декор и это как бы нашу01:08:13
проблему тоже может решить почему нет01:08:19
там01:08:24
почему бы и нет01:08:33
принципе таки можно оставлять это01:08:36
довольно нормально вот то есть вот этим01:08:39
вот покрывалом его называю покрывало01:08:42
такие способы я убрал лишние точки и01:08:45
теперь в принципе не важно сколько у нас01:08:47
будет объектов нижние . и у них будут01:08:50
скрыты при этом зад индексом у нас01:08:54
декора повыше z-index у него и он как бы01:08:57
виден сверх от покрывала01:08:59
вот таким образом мы решили эту задачу01:09:04
хорошо теперь теперь мне нужно что то01:09:09
придумать адаптивном для начала конечно01:09:13
можно перенести весь контент01:09:25
soiree01:09:30
решимость01:09:34
ой так вот значит как и добавить еще01:09:47
один ряд берем три колонки копируем их01:09:59
так 78 меняем контент и последний01:10:21
девятый тоже меняем к01:10:32
вот соответственно как я уже говорил то01:10:41
есть сделано все так что мы можем01:10:45
допустим брать какой-то блок всю колонку01:10:49
и теперь нам нужно проверить ничего ли01:10:53
не сломается ок здесь этот центр нам01:11:01
нужно убрать у нас вот так вот была вот01:11:06
то есть когда исчезает какой-то объект у01:11:09
нас принципе нормально все будет01:11:11
смотреться до01:11:14
прошел вот так вот всегда нужно верстку01:11:17
проверять потому что при и каком-то01:11:22
макетных при каких-то значениях все окей01:11:25
но стоит нам что-то менять вот как я01:11:27
сейчас попробовал да я что-то увидел01:11:29
и собственно подправил код в01:11:33
соответствии то есть таким образом нужно01:11:35
свою верстку и тестером менять на ней01:11:38
контент она должна быть стресса01:11:40
устойчиво вот хорошо теперь нам01:11:43
быстренько нужно это дело с адаптивен01:11:46
значит 575 мы можем перейти уже на две01:11:54
колонки01:12:07
так01:12:13
переходим на две колонки и еще нам нужно01:12:16
будет подправить вот здесь вот декор ок01:12:19
ну естественно это все центровать для01:12:23
того чтобы нам все это отцентровать нам01:12:26
нужно вот здесь вот колонкам мы сразу01:12:31
можем задать дисплее лекс01:12:34
и чистой контент-центр контент-центр ок01:12:42
также проверяем все ли у нас ok01:12:45
изначально ок мы переходим на две01:12:50
колонки опять же у нас лишний декор01:12:52
скрывается да вот и а собственно нам01:12:57
нужно теперь разобраться вот здесь вот01:13:01
вот здесь вот нужно разобраться вот с01:13:04
этими элементами там ищем их где они у01:13:14
нас они у нас для робота be for01:13:16
автор значит 975 дисплей но для автора а01:13:25
для барби fora01:13:28
на 50 процентов вот так мы поставили эту01:13:35
штуку наверх и теперь у нас все выглядит01:13:37
очень даже ничего раз делали и теперь01:13:45
смотрим где нам делать следующий брик01:13:47
поэт ak ведем не даем возможность ему01:13:50
еще сломаться то есть берем запасом 65001:13:53
пикселей 150 пикселей делаем на всю01:14:03
ширину01:14:04
вот таким он этот декор мы можем убрать01:14:13
можем оставить это такое дело главное01:14:16
что у нас все очень неплохо смотрятся да01:14:20
вот лишний декор у нас убрался и01:14:23
получился вот такой вот интересный блог01:14:26
у нас активный вот конечно же тут какие01:14:34
много чего можно сделать абсолютно01:14:36
несколькими способами да как я уже01:14:39
говорил что можно просто взять и01:14:41
использовать о свага изображение ничего01:14:44
в этом плохого нет то есть способов01:14:48
может быть куча моя задача показать01:14:51
различные варианты которые могут быть01:14:54
полезны вам дальнейшем и вообще вы01:14:58
можете посмотреть как можно реализовать01:15:01
вот конкретный блок который не такой уж01:15:04
с виду и простой как кажется01:15:06
дополнительно мы еще можем немножко01:15:08
сделать интерактива поскольку это ссылки01:15:11
она ссылки принято вешать какой-то ховар01:15:15
вот01:15:18
а значит на весь наш объект мы повесим01:15:25
сейчас вешаем hover и я хочу чтобы мой01:15:28
бэкграунд немножко увеличивался для01:15:33
этого использую transform01:15:35
скл 11 мы видим что он там немножко01:15:39
увеличивается вот и осталась навесить на01:15:43
него собственно транзишен01:15:51
ок и и и и и и еще я бы хотел я бы хотел01:15:56
еще а хотя нет а будет плохо читаться и01:16:03
хотел было убрать немножко01:16:04
непрозрачности но текст перестанет так01:16:08
хорошо читаться поэтому это не нужно01:16:10
здесь сделать но вот так вот картинка01:16:12
сзади немного реагирует красиво плавно01:16:14
этого я думаю достаточно вполне для01:16:17
лучшего восприятия пользователям нашего01:16:21
блока01:16:22
хорошо мы можем двигаться дальше а01:16:25
дальше у нас вот 85 пикселей у нас01:16:32
отступ следующего блока а вот пока мне01:16:35
напишите что вы думаете по поводу вот01:16:40
этого блока предыдущего что тут еще01:16:43
можно было сделать01:16:45
мы сразу может быть отработали тот или01:16:49
иной вариант либо цикле и вода возможно01:16:54
есть были мысли пока я делал как можно01:16:56
было еще реализовать ту или иную штуку01:16:59
так что пишите мы можем очистить01:17:03
вот там мы идем дальше и смотрим но вот01:17:06
этот блок текстовый так откуда я01:17:16
отступал плохо я вступал нужно отступать01:17:19
от раваны только было восемь ну что мы01:17:32
договорились что у нас это все один блок01:17:37
будет категория с перст01:17:47
от копирую текст заворачиваю его01:17:53
параграфы01:17:57
на три параграфа01:17:59
вот так и запишем копирую прощаюсь к01:18:10
селектору того параграфу01:18:13
и работает значит беру вы цвет размер01:18:17
шрифта такое всякое line хайд 25 вот01:18:30
появился у нас текст также мне нужно01:18:32
прикинуть со стопом 25 наверно будет01:18:43
вот хорошо так то что то у меня было три01:18:47
параграфа стала 2 в чем дело где-то01:18:49
что-то не закрыта хорошо а вот что у нас01:19:20
случилось вот что плохо01:19:33
здесь у меня заняты плохо то что я01:19:36
работаю в том же контейнере01:19:38
которому я присваивал а псевдо-элемент01:19:41
который мне накрывал точки и сейчас я в01:19:44
него же в общем добавил текст и у меня01:19:47
все там съехала поэтому мне нужно01:19:51
отделить текст от отделить текст от01:19:57
контейнера верхнего быстренько это01:20:09
сделаю и все проблемы прямо исчезла вот01:20:16
вынес в отдельный блог и будем с ним01:20:18
работать себе спокойненько01:20:31
ну вот как-то так прошел хорошо только01:20:36
все равно у меня здесь вот я закрывается01:20:45
прайм правильно потому что я задал здесь01:20:49
отступ01:20:50
а вот здесь и должен быть он должен быть01:20:54
здесь а здесь он не может быть потому01:20:56
что там уже есть может этот класс01:21:01
контейнер и он в общем уже имеет морджим01:21:06
так да я закрою01:21:10
вот здесь вот вот так ой томс и решу01:21:17
этот вопрос вот мы один блок вот у меня01:21:20
второй блок пост и контейнеры у них01:21:23
будут тогда свои01:21:39
удалить один элемент из блока категории01:21:42
это в смысле вместе с колонкой или без01:21:48
колонки берем убираем внутри колонки01:21:57
смотрим вроде как ничего вроде как01:22:04
держатся берем удаляем вместе с колонкой01:22:13
вроде как тоже все ok01:22:20
я поэтому так все и делал чтобы было все01:22:24
окей я часто спрашивают зачем ты столько01:22:28
делаешь обзор так делаю для того чтобы01:22:31
было все окей если вкратце01:22:34
вот когда точно знаю что ты делаешь и01:22:38
это надежно тогда можно уменьшать01:22:40
конечно вложенность к этому стремится но01:22:42
в первую очередь верстка должна быть01:22:44
надежной не ломаться нужно заказчику01:22:48
абсолютно все равно есть у тебя там01:22:50
лишнее div и или нету но если у тебя при01:22:53
каких-то манипуляциях и которых ты не01:22:55
подозреваешь во время верстки у тебя01:22:59
что-то сломалось да то все то все твои01:23:03
весь твой кот с минимальным количеством01:23:05
дивов пойдет на фиг вот так что об этом01:23:09
тоже нужно всегда помнить при выборе01:23:13
варианта так по поводу вот этого декора01:23:18
я его выгрузил в принципе отдельно вот01:23:21
так как он есть и собственно его мы01:23:27
можем прикрутить там можно танцевать с01:23:30
бубном01:23:31
я как то пробовал танцевать bubble и в01:23:36
общем дело в том что там можно вырезать01:23:41
эту картинку вырезать и01:23:45
вот эту и множитель то есть сделать из01:23:48
него паттерн ну вот говорю вот эти вот01:23:54
вопросы как это скажется на продвижение01:23:57
в поисковиках потому что у тебя лишний01:23:59
геев все у тебя лишний геев твой сайт01:24:01
никак не появится поисковых системах для01:24:04
всех таких комментаторов я советую01:24:06
открыть сайт и которые в первых строчках01:24:10
выдачи индекс google и посмотреть там01:24:13
кей и не задавать глупых вопросов потому01:24:16
что самые топовые сайты они сделаны01:24:20
кое-как вот и тем не менее ничего им не01:24:23
будь не мешает отлично01:24:24
искаться вот поэтому еще раз повторяюсь01:24:29
надежность верстки в первую очередь а01:24:32
потом не теряя надежности вы можете01:24:35
уменьшать количество тегов и так далее01:24:39
это конечно же нужно делать но не в01:24:42
ущерб надежности вот если получается так01:24:45
делать супер но гнаться за минимальным01:24:50
количеством отвёрток в ущерб а качество01:24:54
в ущерб надежности стрессоустойчивости01:24:56
верстки но это просто глупо очень глупо01:24:59
и смешно вот больше мне нечего добавить01:25:04
[музыка]01:25:12
так значит смотрите что мы можем сделать01:25:16
мы можем естественно этот декор01:25:18
поставить там где надо это один вопрос01:25:21
другой вопрос в том собственно как мы01:25:25
это будем делать потому что я уже говорю01:25:28
что говорил что мы можем мы можем01:25:34
собственно эту картинку размножить для01:25:38
начала здесь я могу поменять вот так01:25:40
местами поменять вот01:26:00
вот01:26:01
так вот картинку01:26:08
эту можно нарезать таким образом чтобы01:26:11
она стала паттерном чтобы мы могли ее01:26:13
повторять в принципе01:26:15
боевых проектах так и стоит делать01:26:17
почему потому что текста здесь может01:26:20
быть неограниченное количество как01:26:21
меньше таки больше вот сейчас посмотрим01:26:24
что мы можем сделать так чтобы мы на не01:26:26
знает и не потратили целый день вот и01:26:30
что-нибудь придумаем но помнить стоит01:26:34
что в таких ситуациях нужно делать01:26:36
картинку таким образом или просить01:26:38
дизайнера доделать таким образом чтобы01:26:40
мы могли обеспечить динамическое01:26:44
количество текста чтобы заказчик мог01:26:47
спокойно здесь текст удалять менять и во01:26:51
все было окей01:26:56
вот то есть на данный момент это все01:26:59
выглядит вот так я просто прибил01:27:01
картинку кверху и она у меня без01:27:03
повторов идет вниз но я вот пробую01:27:09
добавлять текст вас мы найдем вариант01:27:12
такой который устроит нос добавила много01:27:16
текста картинка у нас тут закончилась01:27:19
закончилась естественно вы сейчас01:27:21
закричите так повторяешь повторяю01:27:27
повторяю и вот что получается вот здесь01:27:30
вот в этих местах у нас идет01:27:32
несостыковочка вот явно и несостыковочка01:27:35
и выглядит это мягко говоря не очень вот01:27:39
поэтому и говорил что здесь нужно01:27:42
подрезать картинку01:27:44
таким образом чтобы ее можно было01:27:48
повторять но при этом нужно тут еще01:27:50
лохматик бабушку и дорисовывать как01:27:53
минимум вот эти вот квадратики вот здесь01:27:56
вот поэтому мы можем конечно это сделать01:28:05
попробовать это сделать да заодно может01:28:09
будет полезная техника power надо01:28:11
все-таки решаю показать как это сделать01:28:14
ну собственно как добиться показать как01:28:19
моем понимании как бы я хотел чтобы она01:28:22
выглядела вот01:28:28
открою картинку в редакторе01:28:35
залью01:28:37
бурным цветом задницу было видно и так01:28:42
значит для того чтобы картинку повторять01:28:45
мне нужно ее вот так вот подрезать им01:28:52
образом01:29:04
ок пробуем что у нас будет получаться01:29:18
вот теперь она бесшовная да хорошо01:29:22
повторяется но поскольку мы и половине01:29:25
или вот так сверху то вот здесь вот01:29:27
такая вот история произошла не очень01:29:30
хорошая сверху но у нас подрезается вот01:29:34
еще конечно вариант есть просто сделать01:29:38
в фотошопе длинную картинку но опять же01:29:40
длину сколько 2000 пикселей там я не01:29:42
знаю это же это не очень также если у01:29:46
нас это дело01:29:47
сварочная получается выгрузить мы можем01:29:50
это тоже кодов дублировать в общем01:29:53
вариантов много факт в том что нужно01:29:57
делать так чтобы заказчик мог работать01:30:00
со своей версткой до менять там текст01:30:03
увеличивать и уменьшать его количество01:30:07
чтобы у нас все нормально смотрелось вот01:30:09
это вот главное не количество тегов01:30:12
вот значит хорошо что мы здесь можем01:30:17
придумать01:30:20
можем эти квадраты дорисовать например01:30:25
можем можем квадраты квадратами там еще01:30:30
вот этот вот полукруг01:30:34
есть это как минимум еще div надо01:30:37
создавать со спамом вот чтобы это делом01:30:41
делать так ну для начала нужно поставить01:30:45
здесь по денги01:30:46
сверху снизу снизу там кстати побольше01:31:01
было 2001:31:21
так вот хорошо значит чтобы в итоге01:31:26
будем делать с картинкой еще один01:31:35
вариант еще один вариант конечно01:31:37
изловчиться и собственно подложить01:31:44
картинку01:31:47
еще раз можно попробовать час час ну я01:31:58
попробую сейчас по здесь шины латиф be01:32:02
for мне нужен теперь не подрезанный01:32:10
декор01:32:26
ок декор хедер01:32:33
так я взял шапочку сейчас я попробую это01:32:36
дело наложить категория с так доход01:32:41
декор хайдар здесь он абсолют топ-мол01:32:46
love 0 таком не нужные размеры01:32:49
не нужны размеры 85 на 12 попробуем так01:33:03
вот я увеличил что было дней вот здесь01:33:09
значит я взял еще псевдо-элемент и01:33:12
наложил01:33:13
сюда сверху вот теперь попробую по01:33:20
догнаться01:33:21
-501:33:30
вот как-то так я вышел из ситуации вот01:33:39
пришлось немножко поработать фотошопе в01:33:42
общем такими нехитрыми манипуляциями я01:33:44
все-таки добился так что он смотрится01:33:46
более или менее нормально естественно01:33:48
снизу этого не сделать потому что там01:33:52
динамически изменяемая высота то есть01:33:55
текста чуть чуть меньше чуть чуть больше01:33:57
там этого не добьемся ну покрайней мере01:33:59
сверху год вот такие дела ребята до чего01:34:03
думали вот конечно можно тут еще01:34:06
докопаться01:34:07
и подрезать здесь вот эти ненужные линии01:34:13
поставить только то что нам нужно01:34:14
накрывать вот и в принципе photoshop я01:34:20
открываю во время верстки только вот в01:34:23
таких случаев когда нужно поработать вот01:34:26
с такими вот01:34:28
ситуациями их бывает довольными часто01:34:30
такие ситуации случаются вот поэтому как01:34:35
то так вот теперь вообще класс не01:34:41
отличишь от оригинал что я этим всем01:34:44
хочу показать включайте мозги выходить01:34:48
из ситуации если заказчик вам говорит01:34:50
что блин плохо да если тут у нас как01:34:53
было изначально до чтобы повторяем01:34:55
картинку она не повторяется плохо все01:34:57
выходить из ситуации вам нужно решить01:35:00
проблему заказчика не поднимают лапки ей01:35:03
все я ничего не могу сделать и так далее01:35:07
вариант еще один контактировать с01:35:10
дизайнером просить его это сделать носит01:35:12
вариант невозможен выходить из ситуации01:35:14
я бы даже никого не просил я бы взял бы01:35:16
сделала все01:35:17
заказчик бы получил бы уже готовый01:35:19
вариант ребята вы можете не знаю что01:35:23
думать себе планировать там рассуждать01:35:26
но поверьте мне наслово люди которые не01:35:29
думают они не01:35:30
зарабатывать вот вы можете много чего01:35:33
знать много умеет вы можете супер быть01:35:37
писать супер семантический код по всем01:35:40
правилам потому что вам так рассказывали01:35:42
о каких-то курсов если вы не способны01:35:44
думать тонул сожалению поэтому учитесь01:35:51
думать они01:35:53
докапывайтесь там какой то это какой-то01:35:56
вложенности там к чему-то такому01:35:59
что вообще 100 место там имеет хорошо01:36:05
значит поняли да на этом примере что как01:36:09
следует поступать чтобы быть мастером01:36:11
нужно решать задачу тем или иным01:36:13
способом изобретайте до анализируйте01:36:19
фантазируйте01:36:20
ну креатив ти здесь это нужно горстка01:36:24
это именно про это имею ввиду какие-то01:36:27
нестандартные ситуации да вот тут мы01:36:30
повсеместно это видим окей движемся01:36:35
дальше01:36:39
движемся дальше и у нас блок услуги01:36:46
так это довольно простой блок здесь три01:36:49
ну собственно шапка и01:36:52
flex контейнер с тремя колонками все01:36:55
больше тут ничего нет но тем не менее я01:36:59
сейчас продемонстрирую бмв действий да в01:37:03
прошлой части я сверстал вот эту вот01:37:06
шапку отдельно закрыл ее в отдельный01:37:10
блок до01:37:11
бабарский блок и теперь я хочу и здесь01:37:13
вот использовать заново не верстает вот01:37:18
отбросив все сомнения мы возвращаемся в01:37:22
блок выше берем вот этот вот блок хедер01:37:26
он сейчас является элементом лосс да но01:37:30
это мы поправим него сворачиваю копирую01:37:32
закрывая лоты01:37:34
для начала мы конечно стоит создать что01:37:37
это у нас сервис создан сервис01:37:45
контейнер ок и я здесь вот сразу01:37:52
вставляю собственно весь мой федор вот и01:37:56
меняю он теперь становится элементом уже01:37:59
сервиса01:38:00
смотрим вот он у нас уже сверстан и01:38:03
готов вот и нам остается только что01:38:08
немножко поменять текст вот так01:38:17
услуги и лярн и также поскольку у нас01:38:21
здесь есть заголовок мы можем применить01:38:23
attacks action вот и собственно вот01:38:34
здесь вот у меня есть модификатор для01:38:39
белого цвета заголовка сейчас он01:38:41
пропадет потому что он белый и01:38:43
собственно01:38:44
иконочку тоже нужно из заменить они у01:38:46
меня уже готовы томи просто меняю01:38:48
циферку на 2 вот вот она вот он только01:38:55
что говорил и опять человек спрашивает01:38:57
почему они используют так сексом так01:39:00
сексу это постоянные вопросы постоянные01:39:07
кошмар вот прошел значит самое интересно01:39:13
если я спрашивал почему ты использую что01:39:16
ответ наверное не будет верным никто не01:39:19
знает зачем это использовать частности01:39:22
кто-то говорит для поисковиков кто-то01:39:24
говорит потому что так на курсах нам01:39:26
говорили это говорит для доступности для01:39:31
sas ability и так далее вариантов много01:39:36
да будет урок по01:39:38
соберите по доступности там я попытаюсь01:39:41
как-то внятно объяснить где это стоит01:39:44
использовать где нет и также мы не01:39:46
являемся seo специалистами поверьте мне01:39:49
это довольно большая обширная тема01:39:52
посева и не стоит даже речи прописывать01:39:55
без указаний seo-специалиста но и говорю01:39:58
если мы говорим о серьезном проекте01:40:00
каком-то нормальным то всякие штуки что01:40:06
касаются seo должны01:40:08
давать нам рекомендации seo специалист01:40:11
они не должны писать это самим да01:40:13
допустим потому что все-таки это теги01:40:15
еще мал мы должны этим заниматься у нас01:40:17
должны быть инструкций потому что мы не01:40:19
являемся seo специалистами мы не можем01:40:22
взять на себя ответственность01:40:23
такую и пихать где-то h1 h2 где-то аж01:40:27
три даже ссылки и прописывание ссылкам01:40:31
определенных атрибутов да для того чтобы01:40:34
поисковый робот переходил по ним или нет01:40:36
это тоже дают наставление нам именно seo01:40:41
специалисты это отдельность эти вот как01:40:43
мы занимаемся только версткой так есть01:40:45
ребята которые занимаются сел и они01:40:48
анализируют конкретные сайты конкретно01:40:51
даже страницу под конкретную страницу01:40:53
прописываются все эти теги поймите вы01:40:56
наконец то все вот эти вопросы по поводу01:40:59
section of each of и так далее есть01:41:03
другое дело есть доступность и там опять01:41:06
же как и в01:41:08
как и в ситуации seo есть определенная01:41:11
задача по доступности до для незрячих01:41:14
людей для и так далее с ограниченными01:41:17
возможностями и под них под конкретную01:41:19
задачу тоже пишется семантика вот это01:41:22
поймите нельзя просто так средь всем чем01:41:25
угодно потому что вам так говорили на01:41:27
каких то там курсов даже с эти курсы01:41:29
очень дорогие вот это не значит что01:41:31
теперь вы шарите01:41:37
вот вот эта картинка эта картинка это01:41:41
плагин классный который показывает01:41:43
собственно подключена изображение01:41:45
посмотрите мой урок по вес код по ссылке01:41:49
в описании он есть я специально01:41:51
прикрепил там полностью вся настройка01:41:53
вес код рассказано показан окей мы01:41:56
продолжаем вот и собственно у нас тут01:42:02
что-то уже появилась и делаем здесь01:42:10
отступ 70 пикселей01:42:27
естественно нужно это дело покрасить01:42:29
просто у меня очень отличается стиль01:42:31
работы когда и верстак для кого-то то01:42:34
есть урок или stream и когда я верста01:42:36
you сомну боевой какой-то свою работу да01:42:39
то есть я бывать вот эту вот покраску бы01:42:42
делал в где-то в конце то есть я я не01:42:45
вижу визуально я вижу в коде ну для вас01:42:48
мне приходится перерыва ца и делать01:42:51
несвойственные для себя вещи там что-то01:42:54
за краше тому что я понимаю что выглядит01:42:57
она не очень да и вам чтобы лучше01:43:01
воспринимать информацию нужно как-то это01:43:03
дело подать поэтому я вот стараюсь это01:43:07
делать вот так есть покрасилась хорошо01:43:19
раз уж я здесь значит поставим вот ступа01:43:23
смотрите еще один лайфхак01:43:25
[музыка]01:43:26
как вариант да не не обязательно что01:43:29
нужно прям так делать но такой вот01:43:32
лайфхак допустим ну я часто говорю что01:43:34
надо идти от большого к малому и в01:43:37
написании стилях тоже то есть вот у нас01:43:39
есть бог темный дам и у него здесь есть01:43:41
padding и сверху 60 снизу сто-сто01:43:44
вот естественно логично эти по денги01:43:47
сразу задать и в принципе так и делал01:43:49
здесь вот например в это блоки вот01:43:53
естественно что вы мне скажете идешь01:43:56
ставишь padding сверху я уже забыл01:43:59
сколько 60 снизу 160 пикселей 10001:44:06
пикселей да и все и как бы красавчик да01:44:10
все правильно но как делаю я я думаю01:44:14
наперёд что я буду адаптивен вот эти01:44:18
блоки буду их адаптивен буду ставить один под01:44:21
другой так так и что получится что под01:44:25
ними между ними нужен будет отступ01:44:27
так так вот поэтому я могу сразу01:44:32
предположить что отступы тот будет01:44:34
могу прикинуть что где-то будет 3001:44:37
пикселей чтобы адекватно смотрелось01:44:39
может даже и 40 вот и поэтому я могу их01:44:44
сразу заложить здесь соответственно на01:44:46
этот размер сделать этот padding меньше01:44:49
то есть если я хочу чтобы у меня отступ01:44:50
между колонками был 40 вниз потом01:44:53
впоследствии на адаптивен то01:44:54
соответственно здесь вместо 100 пикселей01:44:56
а напишу 60 до вот и буду в памяти01:45:00
держать вот эти 40 пикселей для колонн01:45:03
вот такой вот лайфхак который ускоряет01:45:06
работу ну а собственно01:45:10
продемонстрирую то что я хотел01:45:12
продемонстрировать это копирование блока01:45:15
по баму на котором я полностью был готов01:45:17
его просто скопировал поменял там01:45:19
естественно текст картинки где-то01:45:21
модификатор где это нужно и получил01:45:23
полностью готовый блок вот так вот раз и01:45:26
все мне нужно его заново верстать что то01:45:29
с ним делать он у меня уже готов он01:45:31
используется уже на странице ранее вот01:45:33
поэтому бам это круто ну и вообще такой01:45:36
подход01:45:37
вы можете работать не по баму ну вот01:45:41
такой01:45:42
использовать стоит хорошо значит дальше01:45:46
у нас services are all services кол им01:45:52
сервисы сайта01:45:58
avoid ими у нас что картинка и вот здесь01:46:04
вот кстати штука следующие значит вот01:46:09
тут я уже показывал как с помощью flexo01:46:12
до прижимать элементы в книзу01:46:15
собственный тут я показывал много где01:46:17
показывал но это все работает только01:46:19
тогда когда у нас один изменяемый01:46:22
элемент из тут мы видим что у нас01:46:24
изменяемый элемент только тайтл да то01:46:27
есть он может быть одну строку до01:46:30
меньше может быть больше вот здесь у нас01:46:33
изменяемый элемент в принципе 2 и01:46:36
заголовок и01:46:38
и текст но в данном случае нам не с чем01:46:41
сравнивать у нас один слайд показывается01:46:44
здесь у нас сразу скопом у нас три01:46:48
слайда то есть сравнение идет мы должны01:46:52
по кнопку подробнее выровнять01:46:54
относительно всех но у нас два01:46:56
изменяемых элемента это тайтл и текст то01:46:58
есть текста может быть больше либо01:47:00
меньше этой там может быть больше либо01:47:02
меньше в этом случае мы никак не сможем01:47:04
добиться выравнивание кнопкой подробнее01:47:06
по крайней мере теми средствами по01:47:09
крайней мере средствами флекса до более01:47:12
или менее круз браузер нами средствами и01:47:13
без джаз поэтому это тоже стоит за01:47:18
хорошо значит поехали ой там здесь я01:47:22
могу сделать просто сервис ок сервис01:47:31
image01:47:32
добавляем картинку так опять же картинку01:47:40
стоит сделать вот ссылкой а дальше у нас01:47:56
идет заголовок текст и кнопка01:48:07
на головок тоже ссылкой теоретически01:48:10
можно закрыть одну ссылку но этого01:48:13
делать не стану01:48:17
все-таки текст и кнопка у нас тоже01:48:34
ссылкой а дробью01:48:36
кстати вот этот наверное один из тех01:48:39
редких случаев когда в принципе картинка01:48:42
может быть не ссылкой потому что здесь в01:48:45
отличие от вот этого блока да тут прям01:48:50
хочется на нее нажать до это типа как01:48:52
товара до какой то вот здесь вот нет тут01:48:54
другая компоновка но компоновка тоже как01:48:57
раз но посыл не могут другой здесь как01:49:00
раз вот вряд ли кому-то придет в голову01:49:03
нажимать на картинку чистого так01:49:05
интуитивно но дополнительно мы можем01:49:08
конечно усилить наши заберите01:49:12
и повысить точные на мы забили ти и01:49:16
ссылку все-таки оставить вообщем а я01:49:24
хочу чтобы вы наконец-то поняли что01:49:26
верстка это не только про теги и01:49:30
свойства горстка это что-то больше01:49:37
чтобы быть мастером нужно думать первую01:49:42
вот естественно в таких форматах в01:49:47
стримах и так далее сложно конечно01:49:50
сконцентрироваться принимать какие-то01:49:53
максимально правильные решения я01:49:55
стараюсь конечно но когда я работаю01:49:58
понятно не с боевым проектом я могу01:50:00
что-то сверстать потом понять что можно01:50:03
лучше вернуться переделать и так далее01:50:05
то есть это такой процесс улучшения01:50:06
верстки постоянным поэтому тоже имейте01:50:10
ввиду здесь задача я просто демонстрирую01:50:12
всякие всякие прием разные а вы для себя01:50:15
уже возможно для кого-то текущего01:50:18
проекта и вообще мотайте на ус смотрите01:50:20
как это вообще можно реализовать01:50:22
вот такая вот сегодня история ну и01:50:25
вообще вот с этими марафона my и с этими01:50:28
мастер-классами все примерно одинаково01:50:31
вот прошел значит отступ меня от вот01:50:36
этого блока01:50:37
уйдет 40 пикселей вот и я его задаю как01:50:42
раз вот этому элементу а вот здесь а01:50:48
переназначил элемент и именно его даю не01:50:52
а блоку01:50:56
вот хорошо значит будем отцентровать01:51:08
наши штуки так ширина 100 процентов01:51:53
есть хорошо с картинками мы сейчас01:52:01
разберемся они разного размера будем их01:52:03
тоже центровать вот но сначала я01:52:07
сверстал тех чтобы было понятнее все что01:52:09
там написано и все такое01:52:12
как это у меня в отдельном файле весь в01:52:24
принципе у меня по центру даже могу баку01:52:32
делать01:52:55
хорошо значит01:52:58
верстаем заголовок вот это все дело01:53:00
чтобы вам опять же было наглядней01:53:04
наблюдать за вот этим всем вот 1 50501:53:11
кстати заметил что вот эти заголовки01:53:14
можно было бы вынести в отдельный блок и01:53:17
везде использовать потому что они часто01:53:19
используются в заголовке01:53:33
так текст01:53:51
и отступы здесь пошел от стопами вверх01:54:04
потому что ну мало ли может у нас01:54:06
какого-то объекта не будет кнопочка01:54:20
кнопочка завернув span потому что потому01:54:24
что потому что здесь вот такие вот штуки01:54:27
присутствуют значит а как как как я01:54:29
такое дело делаю01:54:31
данной ситуации а значит делаю это01:54:35
следующим образом я навешиваю линию еще01:54:38
норматив be for позишн абсолют в ground01:54:43
color навешиваю линию на саму кнопку от01:54:48
50 процентов платно01:54:56
так вот вот то есть сейчас как бы она01:55:22
вот так вот перечеркнула дам дальше мы01:55:25
видим что эта кнопка на всю ширину01:55:32
поэтому мы можем вот здесь вот брать так01:55:38
чтобы у нас sunflex все по растягивал01:55:41
вот и и все так вот есть линия дам01:55:45
теперь я работаю со спадом который я01:55:48
добавил ему я задаю backgroundcolor вот01:55:52
этот вот общий которую этого блока так01:55:57
здесь жанра латиф z-index 2 делу его01:56:00
больше и ставлю padding слева справа по01:56:03
макету здесь по 15 пикселей01:56:21
и получаю собственно результат вот таким01:56:25
нехитрым способом такую штуку можно01:56:27
делать это один из вариантов самый мне01:56:29
кажется быстрый есть куча разных01:56:31
вариантов и всякое разное01:56:38
там и теперь мы можем сделать01:56:41
отступы как я говорил отступ и лучше01:56:44
здесь данном случае делать снизу вверх01:56:47
потому что могут не быть потом01:56:52
дальнейшем тех или иных объектов и чтобы01:56:54
у нас не висел в воздухе отступ мы01:56:57
делаем вверх вот только для текста это01:57:07
слишком много минус land ho detto 25 по01:57:14
галку я уже тысячу раз говорил что я01:57:16
готовлю выпуск пугал папа своей сборке01:57:19
могу сказать ещё пару раз01:57:29
вот хорошо значит есть от картинки вниз01:57:35
мы можем отступить и сейчас мы здесь01:57:38
построен у нас тут с картинками01:57:41
получается так попробуем 165 пикселей01:58:00
меня здесь нужно поставить01:58:07
165 пикселей дисплей flex и отцентровать01:58:13
вот01:58:17
да но картинки здесь явно больше то есть01:58:20
там тень и они аж 201 exim минимум 20501:58:28
ставим сейчас посмотрим а и картинкам01:58:33
отступе еще не задавал 35 из-за того что01:58:52
здесь тенью картинки то нужно подбирать01:58:56
отступ так ну конечно же можно01:58:58
пользоваться pixel perfect app я уже01:59:00
говорил что все очень долго поэтому01:59:05
как-нибудь уже так на глаз не не совсем01:59:11
на pixel perfect так скажем прочел01:59:17
плюс-минус так пока оставим потом01:59:20
подправим хорошо значит можно делать еще01:59:23
колоночки 301:59:32
23 кстати по колонкам если вам вдруг01:59:35
нужно кроссбраузерность в internet01:59:39
explore the здесь макс увидеть надо01:59:42
добавлять такой же для колонок что01:59:48
бывают варианты что в 11 explore они01:59:50
могут расползаться вот02:00:10
вот как раз мы видим ту ситуацию которой02:00:13
я говорил то есть у нас текст хотя он по02:00:16
макету как бы во всю ширину ну это02:00:19
скорее артефакта то есть треть она не02:00:23
помещается мы его можем уместить тут02:00:25
проблем нет но все равно текст может02:00:27
меняться да поэтому это абсолютно сейчас02:00:30
не важно важно то что мы не можем02:00:32
провернуть такую штуку как вы02:00:34
проворачивали здесь а вот так где тут02:00:37
все ровно почему мы не можем потому что02:00:39
у нас еще есть текст который тоже может02:00:41
меняться если мы сделаем такое для02:00:44
заголовка то при условии что будет02:00:48
меняться текст у вас все равно будет все02:00:50
миш маш вот так то есть представляем02:00:52
себе что здесь у нас пули на по линии да02:00:55
вот так вот идет все от заголовка но все02:00:59
равно из-за того что может меняться и02:01:00
текст когда тут такая ситуация будет02:01:04
выход есть можно закрыть весь блок с02:01:08
тайтлом и текстом в отдельный блок и его02:01:11
увеличивать как он случай в принципе02:01:15
кнопка будет на одной линии но текст02:01:18
внутри этих штук не будет никак может02:01:23
сейчас непонятно нужно визуализировать02:01:25
но даже то есть здесь мы можем выровнять02:01:28
кнопку но вот текст все равно может быть02:01:31
такая ситуация что текст будет вот так02:01:32
вот ломан как здесь вот показываю свою02:01:36
про вот это сейчас говорю один будет на02:01:38
этом уровне 1 будет на друга даже если02:01:40
кнопки будут все на одного02:01:41
поэтому как бы ну смысла нет сейчас что02:01:45
то делать я просто нужно понимать что02:01:49
когда есть два изменяемых объекта когда02:01:52
уже либо нужно прибегать каким-то02:01:56
скриптовом м там как то это дело02:01:59
вычислять выравнивать либо значит02:02:02
оставлять какие конечно же можно всегда02:02:05
ограничить высоту поставить макс02:02:07
хайтауэр флуг хидан и так далее типа и02:02:10
мы по решаем этот вопрос можно так02:02:13
сделать всегда02:02:18
прошел значит с этим понятно адаптив или02:02:25
хотя раз уж я уже заикнулся то давайте02:02:28
покажу собственно то о чем я говорил как02:02:31
нам все-таки сделать да вот это вот все02:02:34
значит показывал текст у нас 50 пикселей02:02:40
на берем за основу ночь делаем макс макс02:02:48
хай 50 пикселей делаем иограф лук хидан02:02:51
так так так так а тайтл02:02:56
тайтла паза позволяем увеличиваться вот02:03:03
что у нас теперь происходит сейчас мы02:03:05
имитируем это другой тайтл02:03:08
вот ну правильно потому что мне еще02:03:11
нужно айтемы02:03:13
сделать сто процентов я вечно про это02:03:15
забываем так вот сервису я должен быть02:03:19
по процентной высоты02:03:24
вот то есть мы видим что сейчас у нас02:03:27
выравнялись до заголовки ну вот один02:03:30
заголовок длинной другой короткий но у02:03:32
нас все ровно но вот мы увеличиваем02:03:35
текст вот сейчас он скрыт потому что02:03:39
здесь max high02:03:40
вот если уберу получается вот такая вот02:03:42
и ерундовина поэтому мы ограничиваем02:03:46
макс хайтам да вот так чтобы поместилось02:03:50
столько сколько мы хотим02:03:51
и дополнительно можно конечно там еще02:03:54
что то сделать02:03:55
точки в конце еще что то но тут опять же02:04:01
то есть если это делать каким-то02:04:04
градиентом например заполнять тогда нам02:04:06
нужно все равно через джейс определять02:04:08
что больше там текста чем надо или или02:04:12
столько же чтобы все-таки накладывать02:04:15
либо убирать градиент и так далее ну вот02:04:18
если нужно просто чтобы оно было ровно02:04:20
то можно себя вот так бы оградить02:04:23
вот таким образом еще я могу показать02:04:26
одну штуку у меня где-то было по поводу02:04:30
того как можно это еще сделать вот02:04:33
работать она может будет не везде но там02:04:37
где будет работать можно как бы решить02:04:40
определенную проблему вот следующим02:04:44
образом вот02:04:46
асв найду вот кусочек кода здесь вот для02:04:53
текста и оставлю дисплее в птиц бокс то02:04:58
есть понятно что это только для web02:05:00
китовых браузеров дальше у меня еще есть02:05:03
свойство которое нам показывает02:05:06
количество строк02:05:08
вот и посмотрим что чем он нам поможет02:05:12
это ничего нам не помог а еще02:05:15
обновляется ну вот собственно вот то02:05:18
есть он сам подрезал вот это вот откуда02:05:22
взялось ну вот так вот он работает02:05:25
как-то хитро я где-то в какой-то статье02:05:31
нашел толком не тестил о по моему эту02:05:37
штуку в фейсбук используют своих02:05:40
каких-то целях02:05:42
вот сейчас мы добавим нормально текста02:05:54
вот мы видим что она нам вешает только02:05:58
три строки и все02:06:00
и ставят 3 . далее мы добавляем overflow02:06:06
пхи дон и по идее оно должно скрыть вот02:06:08
так можно еще решить эту задачу02:06:16
а также все равно она ровно не будет так02:06:20
или иначе ему что вот здесь вот не три02:06:23
строчки да тут меньше текста в общем и02:06:26
так далее поэтому как вариант где-то02:06:28
можно использовать но самый надежный02:06:31
скрыть что-то02:06:33
если есть задача выровнять именно02:06:36
выровнять при любых ситуациях ok эти02:06:40
фишки показал можно адаптивен02:06:43
ок здесь сразу я уменьшу отступ02:06:49
или в принципе можно сразу переходить на02:06:52
две колонки вот wrap 975 и половине02:07:10
также потом02:07:13
ага ну вот из-за того что здесь макс02:07:16
видеть писал там надо будет каждый раз02:07:18
изменять02:07:22
так что они сюда куда-то wrap написал02:07:25
что как сура про долго думают так хорошо02:07:40
ага вот я вспомнил помните я тут когда02:07:43
начал верстать этот блок я здесь говорил02:07:46
что я предугадаю до адаптив и здесь я02:07:49
поставил только 60 пикселей место 10002:07:51
поэтому здесь я добавляю вот эти 4002:07:54
пикселей то есть изначально изначально у02:07:59
меня здесь будет 100 по baked вот 10002:08:03
пиксель но02:08:04
момент адаптивно у меня тут тут опять02:08:08
будет 100 но между колонками у меня уже02:08:10
будет доступ таким образом у меня как бы02:08:12
ускорил себе процесс также я могу здесь02:08:16
поставить жестокой контент-центр вот02:08:21
чтобы было так если нужен отступ больше02:08:23
ну делай больше значит делаем здесь 5002:08:28
здесь тогда делаем 40 вот02:08:35
и а движемся дальше и в какой то момент02:08:43
когда мы видим что уже пора и to get a02:08:47
640 пикселей можно переходить на всю02:08:55
ширину02:08:58
вот так02:09:08
собственно02:09:21
блок готов отлично можно поигрался с02:09:25
отступами еще здесь сверху снизу02:09:28
теоретически да потому что у нас там 4002:09:32
мы можем тут под уменьшить поставить 4002:09:37
и он будет у нас 40 40 вот сверху снизу02:09:49
нормально хорошо смотрится идем дальше02:09:58
дальше у нас02:09:59
цитаты новостной блок с формой и footer02:10:06
посмотрим как пойдет может и добьем02:10:09
сегодня этот пакетик также я потом02:10:13
напомните мне чтобы я прикрутил02:10:16
навигацию по меню я хочу прикрутить02:10:18
чтобы при нажатии у нас было прокрутка к02:10:21
нужному блоку02:10:22
вот просто я хочу уже все блоки02:10:26
сверстать чтобы нормально адекватно это02:10:29
так что обязательно мне напомните ошо02:10:33
так что я быстренько сейчас продолжаю ок02:10:37
значит лотос если мне не изменяет память02:10:44
до02:10:48
цитаты значит анализируем блок вот он02:10:51
опять здесь есть хайдар он у вас уже02:10:54
готов есть слайдер до в котором есть02:10:57
изображение текст есть контрольный блок02:11:00
при нажатии на эту кнопку слайду меня02:11:02
будет меняться думаю тут все понятно02:11:08
хорошо поехали значит делаем для всех02:11:24
для всех для всех комментаторов ставлю02:11:26
тут suction02:11:29
дальше интересное меня и так интересные02:11:33
цитаты цитаты меняем на 3 так02:11:41
убираем вот этот вот модификатор который02:11:44
отвечал у нас за белый цвет и получаем02:11:47
уже готовый блок мне нравится работать с02:11:50
бобом однозначно ну из к таким02:11:54
компонентным подходим так02:11:59
хорошо я сразу все это дело перенесу02:12:02
сюда лишние то что у нас сверстана02:12:10
набираю так и здесь сразу ставлю отступа02:12:19
6470 отлично дальше сразу я делаю вот02:12:43
здесь вот у нас такая история что даже02:12:47
немножко залазит вот на блок у нас этого02:12:51
часть вот посмотрим сначала сверстаем02:12:56
слайдер02:13:02
так сворачиваем федор так вот из слайдер02:13:12
лотос сразу перескочу на другой класс02:13:20
байдарка вот с будем буду использовать02:13:27
свой пир слайдер квот слайдов слайд 1 и02:13:34
значит внизу я сделаю контроль02:13:37
контрольную панель control принципе02:13:45
верно придется тут перейти02:13:52
в отдельный блок и здесь сделаю02:14:00
link да это вот этот круг и вот здесь02:14:05
опять у меня а некий декор02:14:10
кстати можно попробовать одну штуку да02:14:13
мне тоже в комментариях писали поэтому02:14:16
попробуем ее сделать здесь значит делаю02:14:21
клод с декор02:14:25
вот так эта линия с точкой линия с02:14:29
точкой между ними и между ними02:14:31
собственно вот этот круг который мы02:14:34
будем нажимать02:14:36
окей хорошо значит теперь сам слайд02:14:41
слайдер код имидж так пока так попробуем02:14:51
вот марк твоем так02:14:55
слайдер кводс воде слайдер квот сайтов02:15:00
на себе память не изменяет орал слайдер02:15:10
хвост02:15:11
info ок параграфов фактор так вот такая02:15:29
вот история так копируем02:15:46
так сразу можем сделать следующие ходе у02:15:54
меня вот этот слайдер курс02:15:56
воде здесь два раза использовал контент02:16:12
так так все поехали значит сам слайда02:16:17
люксовый02:16:21
дисплей flex картинка у нас02:16:28
320 ppi 120 но мы можем ее сделать02:16:35
отзывчивый отзывчивый отзывчивый02:16:38
отзывчивый 900 значит папа02:16:43
320 поделим на 950 и умножим на 10002:16:48
пикселей конечно же умножим на 10002:16:51
процентов контент у нас на всю ширину но02:16:58
в смысле позволим ему увеличиваться02:17:00
дальше чтобы было наглядней я сверстал02:17:03
текст02:17:06
25 пикселей02:17:14
вот он у нас что italic похоже на то02:17:23
похоже значит сейчас мы подключим еще и02:17:27
толик так02:17:42
отлично так и line хайд у нас 30 ван хой02:17:48
30 на 25 что-то похоже что-то похожее02:17:59
четкое ощущение что он чуть-чуть02:18:00
жирноватый но что-то в стилях я не вижу02:18:05
оставим так дальше марк твен ваш здесь02:18:10
цвет 15 пикселей02:18:16
до 950 это ширина контейнера то есть я02:18:22
высчитал вот получилось у меня 33 602:18:27
процента то есть это для чего сделал02:18:30
опять же для доп тиго то есть вот я02:18:32
начинаю мешать и она меня эти колонки02:18:35
отзывчиво уменьшаются поэтому я задавал02:18:40
я бы мог это вы считать на калькуляторе02:18:42
до открыл вычитал мне проблему просто02:18:45
можно это сделать сразу во все свои все02:18:49
счас можно через cold поэтому обычно я02:18:52
так делаю чему нет более чтобы вам02:18:56
продемонстрировать вот на практике02:19:01
хорошо значит дальше имидж дисплей flex02:19:08
по центру и padding слева справа 20 это02:19:13
как раз для того естественно картинки мы02:19:17
позволим уменьшаться02:19:19
раз для того чтобы когда ваши процентный02:19:21
контейнера уже был меньше чем картинка02:19:24
чтобы во-первых были отступы во вторых02:19:26
чтобы картинка уменьшало свой ну и в02:19:29
третьих если картинку сюда поставят02:19:31
какую-ту льва толстого да он не влезет02:19:35
это чтобы адекватно все смотрел02:19:39
вот так же я вижу что здесь как будто бы02:19:42
отцентрирована текст отцентровано02:19:45
относительно картинки ну по крайней мере02:19:47
так кажется вот можно также где сделать02:19:55
вот и также здесь какое-то ограничение02:20:02
вижу текста02:20:04
якобы тот 15 мы можем весь контент02:20:14
уменьшить принципе вот поставить ему по02:20:18
макету 515 на позволить ему уменьшаться02:20:22
вот помощью свойства flex вот дальше02:20:28
здесь02:20:29
отступ тридцать один пиксель тайтл и02:20:34
опять показывал лайфхак с относительными02:20:37
единицами 30 у нас отступ делим на02:20:40
размер шрифта умножаем на 1 м получаем02:20:43
динамически отступ динамически в каком02:20:46
плане то есть когда мы если мы будем02:20:48
уменьшать размер шрифта02:20:50
вот при адаптивен например to break02:20:53
point это будет уменьшаться и собственно02:20:57
отступ02:20:58
потому что он привязан к размеру шрифта02:21:01
ну я уже говорил во всех частях что не02:21:04
стоит этим злоупотреблять дождитесь02:21:06
урока по относительным единицами а там02:21:08
все расскажу02:21:12
так ну что здесь здесь02:21:14
online high там сделано но мы не будем02:21:16
делать олл-ин хайтам будем делать через02:21:19
вот ступу покупаем вот с минус можно02:21:31
чуть-чуть их увеличить наверное будет02:21:34
лучше02:21:59
хорошо и отлично теперь мы можем перейти02:22:05
к верстке как в управляющей части вот02:22:10
этой контрольной тут я хочу попробовать02:22:12
прошлый раз я переворачивал flex02:22:16
direction of data есть делал razer02:22:18
сейчас попробуем этот раз формам сделать02:22:21
вот тоже подписчики зрители мне писали02:22:24
об этом что можно попробовать это02:22:26
сделать зеркальный зеркальном02:22:29
отображении вот поэтому из тут для ради02:22:33
ради разнообразия мы можем попробовать02:22:36
сделать хорошо от дисплей flex центруем02:22:42
это все дело и здесь декор декор значит02:22:46
у нас состоит из двух элементов это02:22:50
собственная линия и .02:22:53
значит это нам не нужно тоже дисплей02:22:57
flexline а этом с центр вот ребята если02:23:01
вы считаете что вы новички ничего не02:23:06
понимаете зачем все это нужно у меня на02:23:08
канале есть абсолютно бесплатный курс я02:23:11
чувак который ничего не продает как это02:23:13
ни странно вот у меня есть бесплатный02:23:16
курс абсолютно который по вашим отзывам02:23:19
намного лучше чем платные курсы02:23:20
пожалуйста вперед идите смотрите02:23:23
обучайтесь вот эти мастер-классы стримы02:23:27
они дают намного больше чем знание02:23:29
свойств поверьте если вы от ну если вам02:23:31
еще этого не понятно то можете идти02:23:34
обучаться нам о бесплатном курсе а вот02:23:36
здесь вот рядом лежит по ссылке в02:23:38
описании02:23:45
так значит линия у нас будет она всю02:23:50
ширину до будет высотой в один пиксель и02:23:54
будет каким-то цветом сейчас мы этот02:23:56
цвет02:23:57
возьмем но этот цвет уже можно было бы02:23:59
закрыть где-то в переменную и всегда его02:24:02
использовать ну да ладно а автор у нас02:24:06
кружочек02:24:12
вот так02:24:27
хорошо смотрим что у нас тут получается02:24:30
. у нас появились ну нет у нас линий так02:24:44
линии у нас нет и значит мы можем02:24:50
поступить следующим образом мы можем02:24:53
первых мы можем задать здесь02:24:56
треть до всем этим объектом decor & link02:25:13
но как бы у нас все не такое широкое мы02:25:17
можем это дело ограничить вот 40002:25:34
пикселей02:25:51
отлично мне нравится хорошо а значит02:25:57
ссылка link02:25:58
дальше я поскольку я пошел этим путем я02:26:03
здесь добавлю еще02:26:08
принципе ну ладно я ещё добавлю внутри02:26:16
сам круг02:26:27
так ордер02:26:33
50 на 5002:26:51
так и собственно моего по центру02:26:54
поставим можно сделать его02:27:06
дисплей онлайн флеш young поставить по02:27:10
центру02:27:26
так хорошо и собственно мне нужно туда02:27:29
поместить иконочку вот иконочка у меня02:27:34
уже выгружены есть02:27:37
tight arrow по центру я ставлю и сразу02:27:42
делаю курсор по enter чтобы собственно02:27:48
нажималась у нас эта штука и что теперь02:27:53
здесь нужно развернуть собственно как по02:27:57
макету и проверить там либо больше 10 пикселей02:28:04
и надцать так вот 5 пикселей а у нас02:28:10
отступ от кружка02:28:25
так и значит последнюю часть вот этот02:28:31
вот декор глаз child можно сделать так и02:28:39
ну можно вот так kill -1 попробовать у02:28:45
нас получится собственно получится02:28:49
проблема трансформа вот в чем но типа02:28:52
чуть-чуть моет моет элемент вот так не02:28:57
видно но вот так вот видно что он02:28:58
чуть-чуть такой мыльный получается вот и02:29:02
это как бы не очень хорошо02:29:06
честно говоря можно попробовать что то02:29:13
можно попробовать но чем он его02:29:19
чуть-чуть мылит поэтому мне это не очень02:29:23
нравится02:29:28
но как вариант можно использовать что02:29:31
если я буду этого rover сделать то вот02:29:35
эта вот штука с мерлином она не очень02:29:38
хорошо получается поэтому здесь нужно02:29:43
дополнительно менять положение отступов02:29:46
вот так что было вообще хорошо прошлый02:29:49
раз и пытался избежать этого но02:29:52
показываю теперь сейчас что также нужно02:29:56
разворачивать имоджен и чтобы она была прям хорошо вот02:29:59
сейчас прям хорошего вот макет02:30:07
этот вы можете спокойно в свободном02:30:09
доступе скачать по ссылке в описании02:30:20
так и теперь мы можем собственно02:30:23
заканчивать с этим слайдером собственно02:30:25
сделать этот слайдер до слайдером вот02:30:28
значит копирую я слай теперь их у меня02:30:31
будет два вот идут джесс захватив с02:30:36
собой класс слайды работу вот у меня02:30:40
здесь слайдеры интересно интересно02:30:59
конечно люди делают пишут во время02:31:02
стрима типа и ждут что я сейчас все02:31:04
брошу и так хорошо02:31:18
так02:31:20
есть отлично значит слайдер мы02:31:23
подключили тут можно поменять квот с02:31:27
слайдер ок брэйк поинты мне не нужны02:31:40
значит по кругу показывать вам нужно02:31:43
один только слайд02:31:45
и здесь я хочу сделать эффект faith02:31:49
то есть он будет плавно перетекать не02:31:53
скользить как у нас предыдущие слайдер02:31:56
вот именно перетекать и значит вот02:32:01
следующий слайд next прав предыдущий нам02:32:05
не нужен а следующий пусть включается по02:32:07
вот этому классу по клике на вот этот02:32:10
вот класс нашего кружка02:32:12
вот она делали смотрим не очень что-то02:32:22
что-то происходит сейчас будем02:32:23
разбираться что у нас тут и к02:32:25
в принципе в принципе происходит просто02:32:30
языков что слайда одинаковое не видно02:32:33
сейчас я изменю текст было понятно что02:32:40
слайды все-таки меняются02:32:43
от и а собственно мне нужно сделать еще02:33:00
сам эффект так и по сити 002:33:12
посети они но тут opacity 0 он так02:33:47
хорошо и так значит для того чтобы он у02:33:51
нас переключался плавненько изменяем02:33:55
непрозрачность нужно естественно его тут02:33:57
немножко подрихтовать значит поскольку02:34:01
он у нас настроен на то чтобы02:34:07
переключаться как слайдер вот я так не02:34:12
хочу поэтому мы сейчас а вот утрехта ним02:34:32
да тут предыдущее следующее02:34:36
показано показывать так site preview02:34:41
один вы здесь мы ставим по сити 002:34:48
смотрим02:34:57
где-то он там свое навешивает сейчас мы02:34:59
проверим как а для актив так и а он по02:35:22
моему транзишен и добавляет сам по идее02:35:25
должен добавлять сам так он там02:35:38
устроился на деятельность какую-то02:35:40
ну вот как то так теперь при нажатии на02:35:46
вот этот вот стрелочку меняется цитата02:35:50
как-бы задумка в этом вот можно повысить02:35:56
немножко плавность скорость будет так02:36:01
естественно тут еще лицо должно меняться02:36:04
но лицо у нас одно данном макете02:36:08
окей а мы поедем дальше и сделаем вот02:36:12
эти вот события новости и формочку здесь02:36:16
внизу дам вот хорошо значит02:36:27
что у нас тут у нас тут три блоков раз02:36:31
два три вот02:36:37
находятся они в колонках так в принципе02:36:43
так их можно делать в случае с подпиской02:36:49
там еще из дополнительные колонки так02:36:53
как мы это дело назовем назовем это дело02:36:56
просто info02:36:59
да какая то информация будет у нас02:37:03
всякое разное02:37:07
так инфоблок02:37:15
принципе можно элит на секции02:37:23
python и 402:37:26
например только опять же здесь вот и02:37:29
нюансы наверное нет наверное здесь не02:37:32
будет это ссылкой весь блок будет вот02:37:34
так значит хорошо это и мы что мы можем02:37:40
поступить academy способами можем вешать02:37:43
модификатор для отображения иконки а02:37:45
можем верстать собственно флик сам вроде02:37:50
бы я уже модификаторы вешал сейчас02:37:53
покажу как текстом это можно как это02:37:56
флекса в мир 10002:37:58
просто здесь создав 2 спа ну вот02:38:11
вот таким образом да просто для02:38:15
разнообразия покажу как еще можно такие02:38:18
случаи сделать не бэкграундом а именно02:38:21
через html02:38:22
ок и здесь у меня блок в данном случае с02:38:25
новостями так info02:38:31
контент ой там дата дата потом заголовок02:38:49
фото tell наверняка есть пусть будет02:38:52
лейбл естественно он ссылкой02:38:57
иначе как мы попадем большую новость в02:39:00
полную новость02:39:02
текст02:39:10
вот так и собственно наш этом размножил02:39:14
и штуки есть да можно тут для02:39:21
наглядности поменять хотя бы в одном02:39:23
месте02:39:24
текст было понятно что это разные вещи02:39:34
хорошо следующая колонка в принципе02:39:37
копируется все02:39:39
вторая колонка здесь не новости а что у02:39:43
нас там статьи02:39:50
глянем где у нас та история вам вот флаг02:39:56
так руб rum pum события02:40:00
кита ивенты и тут нету02:40:03
дат чему-то событий не туда02:40:08
их только две тексте я уже не буду02:40:11
оставлять я думал поменять точнее думаю02:40:14
понятно итак так хорошо есть и02:40:17
собственно третья колонка третья колонка02:40:22
у нас02:40:23
инфо субскрайб02:40:27
я сразу перейду в отдельную скраб можно02:40:32
вообще сделать отдельный блок субскрайб02:40:34
вот так вы значит у него тоже есть тайтл02:40:39
только это та ну вот здесь здесь так не02:40:44
выйдет02:40:45
когда мне нужно сделать весь все эти02:40:50
заголовки инфо тайтл сделать отдельную02:40:53
тайтл02:40:56
инфу сделать отдельным блоком чтобы я02:41:00
мог их адекватно использовать02:41:05
так патил info02:41:09
и здесь тогда тоже могут теперь02:41:11
использовать тайцы лимфа и все будет02:41:14
о'кей02:41:28
ок и здесь у меня субскрайб02:41:31
иконочка события так есть хорошо а02:41:46
дальше у нас собственно две колонки02:41:55
субскрайб пусть будет body там будет две02:42:01
колонки субскрайб текст и субскрайб форм02:42:08
делаем форму сразу закрываю так форм и02:42:17
собственном вывожу в отдельную вывожу в02:42:22
отдельный блок и здесь у меня субскрайб02:42:26
форм input создаю так input вот input у02:42:38
меня здесь и здесь у меня кнопка такая02:42:40
всякое интересное02:42:48
как спам02:42:52
окей вот только здесь я меняю классы но02:42:57
нужно хорошо значит тут email введите02:43:05
email02:43:08
так у меня есть мои классы которые02:43:14
позволят мне проверять на правильности02:43:16
mail а вот стартом шаблоне все это есть02:43:21
уже будет работать хорошо02:43:25
принципе насколько я понимаю еще мал я02:43:28
построил и перми нужно это все дело02:43:32
заверстать02:43:44
почему я должен сделать02:43:45
input тай-бо там объясни пожалуйста02:43:55
[музыка]02:44:03
дисплей flex line на этом с центр02:44:08
так это будут тайтл тут делать хорошо02:44:19
так значит отступы02:44:21
22 плюс 2244 делаем нас 2222 значит02:44:32
ширины колонок у нас 50 процентов и02:44:36
естественно нужно сделать в ram вот вот02:44:42
так то есть у нас события почему это у02:44:46
меня называется события если тут02:44:47
подписка подписка02:44:54
она у меня стало снизу 3 колонки и для02:45:03
надежности я могу вот так вот сделать02:45:07
вот так точно все было как не надо02:45:12
лекс wrap для того чтобы колонок была02:45:15
возможность перескакивать на новую02:45:17
строку пожалуйста ребята у меня02:45:19
абсолютно бесплатный курс на канале его02:45:22
просто надо посмотреть и всех ничего за02:45:26
это не нужно платить и вы будете вот эти02:45:29
все вещи уже знать сразу также есть02:45:32
крутейшие шпаргалки02:45:33
которые я долго и нудно делал где все02:45:36
это дело рассказанные расписывал так что02:45:39
подписывайтесь на канал смотрите02:45:40
бесплатный курс и будете уметь верстать02:45:51
закончу с заголовком это тут его начал02:45:55
уже 35 font family02:46:01
путин02:46:08
значит ты просто так считаешь да то есть02:46:11
это все объяснение просто считаю что02:46:13
лучше делать не кнопку a input с типом02:46:17
кнопка да окей хорошо значит кекс02:46:31
transform upper кейс от и вот тут фигня02:46:38
в том что это вот как правило всегда так02:46:43
и случается у нас панаме текстовый центр02:46:49
и это все равно нам ничего не даёт02:46:59
выровнять это дело под центру там из-за02:47:15
этих кучей вложенности сейчас нужно02:47:17
танцевать с бубном общем top child02:47:20
дисплей flex02:47:23
центр актом наверно еще надо будет02:47:28
заходить02:47:29
picture да так как и говорил мой gulp02:47:44
создает сразу02:47:46
оптимизированы изображение в02:47:48
современного формата в.п.02:47:51
есть создает автоматически так picture02:47:54
куда засовывают оба формата02:47:57
разных браузеров вот это мега круто02:48:00
очень верстка становится шустрый так и у02:48:07
нас тут фон твой 50002:48:18
так и собственно отступ нужно сделать от02:48:22
иконочки двадцать два пикселя02:48:24
так мы можем это тут сделать 2202:48:34
как-то многовато02:48:37
ладно вот есть02:48:40
тайтл есть все равно мне нравится что02:48:43
очень много что-то не то намерен пусть02:48:47
будет 1502:48:49
вот и хорошо значит теперь вниз у меня02:48:59
тридцать с учетом land хайты большого02:49:02
текста так и и и и и и теперь собственно02:49:06
я могу заняться вот этим всем от колонок02:49:09
вниз мне нужно отступить02:49:15
5502:49:23
последний отберем отступ вниз потому что02:49:28
он там не нужен так а вот padding02:49:32
большого блока нужен 75 пикселей вот02:49:36
здесь пойдем вот он 7075 поставим02:49:48
маг кстати предыдущий блок мы вроде бы02:49:52
не закончили адаптив но мы еще сделаем02:49:55
оба адаптивном вместе с этим вот нет02:50:00
pixel perfect и я не делаю того что это02:50:02
было бы очень долго02:50:08
что значит текст текст текст по порядку02:50:15
идем начнем с даты02:50:24
функция из 12 можно сразу так чуть-чуть02:50:30
подправить дальше у нас идет заголовок02:50:35
вот он 700 так 700 как decoration02:50:50
underline02:50:51
с play line блог02:51:10
так и где это у нас дела все тут02:51:25
перестарался вот еще по моему размер02:51:29
шрифта мне бы хорошо бы было ясно взять02:51:40
так люблю когда дизайнера все в одну02:51:43
кучу набросано и поиметь эту отчего02:51:49
бывает всякое там при конвертации макета02:51:52
оно могло02:51:53
а съезжать хорошо так хорошо какой-то02:52:01
отступ мы сделаем позже текст на цикл02:52:08
отдыхать 21 на 15 стандартный текст02:52:15
так отступ а снизу02:52:19
30 пикселей02:52:33
и от лейбла вниз я бы тоже что-то02:52:39
отступил как-то так как то так все это02:52:50
дело нажимается прошел на дальше02:52:56
блок собственно с подпиской субскрайб02:53:00
кстати субскрайб на канал подпишитесь на02:53:03
канал02:53:04
и будет вам счастье вот будем02:53:10
помимо бесплатного курса который на02:53:13
канале есть еще классная рубрика как это02:53:16
сделать называется и там я показываю как02:53:18
сделать всякие прикольные штуки сразу02:53:20
побежала скриптом всякие разные также02:53:24
есть гайды по программам у меня пвс коду02:53:27
по сабле ему02:53:29
есть в плейлист как стартануть на02:53:31
фрилансе есть плейлист мотивации что02:53:34
очень важно вот как читать макет есть02:53:38
классный выпуск02:53:41
вот есть выпуск про весь процесс верстки02:53:45
да как оценивать и так далее все это02:53:48
тоже есть что подписывайтесь смотрите и02:53:52
я надеюсь что все это полезно02:54:00
также можно подписаться еще на02:54:03
телеграм-канал чтобы получать02:54:08
уведомления адекватно да потому что мы02:54:10
знаем что youtube и 3 он не всегда02:54:15
показывает не всем рассылает уведомлений02:54:18
и так далее в общем подпишитесь на02:54:21
телеграм-канал и будете в курсе выпало02:54:23
новых выпусках а всяких каких-то02:54:25
изменениях в общем у важных новостях02:54:28
канал так что советую все ссылки02:54:30
естественно в описании вот можете02:54:33
подписываться хорошо добрались мы до02:54:37
формочки вот раз мы будем ее делать для02:54:48
начала мне нужно тут закончить значит не02:54:54
нужно повторить вот ступы02:54:59
верхние верхнего флешек с контейнером и02:55:04
лодочек flex элемента вот отлично хорошо02:55:10
замечательно значит формочка02:55:17
так02:55:19
дисплей flex кнопку сейчас мы будем02:55:24
делать вот02:55:29
input у меня в отдельный отдельном файле02:55:35
если у меня где кнопки и wear стал тут у02:55:38
меня есть input уже с какими-то дорога наработками02:55:41
чтобы там на всяких айфонах все02:55:45
смотрелось нормально вот так и здесь я02:55:50
смогу задать стиль и input у02:55:56
так 15 пикселей02:55:59
от 12502:56:09
так при фокусе пусть будет черный и02:56:14
высота можно попробовать высоту задать02:56:21
стопроцентного не хорошо потому что02:56:26
границы блока не дают нам адекватно это02:56:30
сделали хотя петя02:56:35
армас так норм субскрайб02:56:39
теперь мы будем делать здесь для input а02:56:45
позволим ему действовать на всю ширину02:56:48
вот вот наш input хорошо и а собственно02:56:54
кнопочка папочка у нас хитрая поэтому я02:56:58
поставил спам02:57:09
так02:57:12
спал хорошо позиция нра латиф be for02:57:17
так это я буду делать вот эту вот02:57:20
полосочку которая здесь прям все можно02:57:26
скопировать вот так здесь02:57:30
абсолют нефть ай лав 002:57:34
топ 50 процентов transform минус 5002:57:40
процентов так а сама кнопочка у нас 9502:57:47
пикселей 9502:57:56
ок background color transparent02:58:00
можно ли транспаранты можно белый02:58:04
поставить вот хорошо теперь можно02:58:08
заняться с паном вот так все скопирую02:58:17
чтобы сейчас уберу лишнее ок pf din так02:58:23
это нужно это не нужно это нужно это не02:58:26
нужно вот он и собственно спа ну я здесь02:58:30
задаем иконку и кнопочки размещу с02:58:39
правой стороны и собственно padding райт02:58:42
попробуем угадать 20 пикселей вот и02:58:47
посмотрим сколько же на самом деле02:58:49
самом деле 32 почти почти угадал02:58:56
вот что-то вырисовывается так так значит02:59:02
мой скрипт уже настроен как я говорил на02:59:04
то чтобы проверять наличие правильно02:59:07
заполненного поля здесь появляется уже02:59:09
ошибка донаты что ошибка не правильно02:59:12
заполнены более это все у меня уже есть02:59:16
мы их доработках стартовым шаблоне вот и02:59:21
собственно мы можем эту ошибочку02:59:25
сверстать полу от вот топ-10 вот так она02:59:38
будет появляться таким образом поле у02:59:45
нас заполнена неверно02:59:47
хорошо это все хорошо сейчас мы02:59:50
быстренько адаптируем это все дело вот02:59:54
заодно и адаптируем верхний блок вот02:59:58
верхний блок стоит адоптировать вот аж03:00:00
тут можно 570 где-то вернусь ненадолго к03:00:06
нашему марку твой ну вот так вот здесь03:00:13
до 570 медиазапрос максимум ts 57003:00:19
и здесь дисплей хотя03:00:24
ну пусть будет дисплей блок а картинка у03:00:31
нас по центру должно по идее встать03:00:35
равно да вот так вот и собственно готово03:00:42
так на 570 мы можем кстати на этом03:00:48
размере включить где-то я тут включал03:00:53
уже авто хайд 570 авто хоть труб03:01:12
вам еще нужно будет вам еще нужно будет03:01:20
для вот этого вот слайдера нужно03:01:27
поставить03:01:28
изменить положение flex элементов так03:01:35
вот слайдер03:01:37
line art вас стричь нет black star03:01:46
conflict старте стоит по идее03:02:13
320 570 вот так разобрались там бубал03:02:19
force вот теперь вас это будет03:02:23
подстраиваться под высоту до прошел03:02:32
отлично только можно еще добавить там03:02:35
отступ03:02:38
так айдер колодцев 570 нужную more then03:02:47
both 30 так воде и здесь вот здесь03:03:14
вот так-то лучше хорошо дальше здесь03:03:24
а мы какой-то момент а именно 86703:03:30
тоже убираем flex03:03:38
167 дисплей блок вот и естественно здесь03:03:45
нам нужно так что и здесь нам нужно03:03:53
естественно по уменьшать вот эти отступы03:03:55
наверное хотя хотя адекватно вроде как03:04:07
кстати текстовый блок мы текстовый блок03:04:14
здесь мы и посмотрели на доп тебе сейчас03:04:18
мы посмотрим быстренько так просто в03:04:22
какой-то момент03:04:25
да от 67 дисплей но так беру03:04:50
ground хотел grown man03:05:17
[музыка]03:05:32
так хорошо здесь вот еще заметил что03:05:39
отступ тут очень большой сейчас мы это03:05:41
дело поправим горе сайтом03:05:47
вот 85 667 достаточно 40 будет вполне03:06:03
так что дал перестал щас03:06:17
подгрузится шрифты и продолжим вот что в03:06:22
этом не по за сына ли еще уже03:06:27
заканчиваем так что сейчас доделаю и03:06:34
поговорим немножко о том о сем03:06:40
так прошу мне нравится я уже так03:06:43
просматриваю уже идет к завершению нашей03:06:46
ворс . так и вот здесь у меня не хочет03:06:49
убираться background03:06:56
сейчас мы разберемся вот здесь body03:07:00
background03:07:34
также нужно убрать его пи background03:07:40
acne должно сработать03:07:59
наверняка он загружает в самый низ03:08:02
поэтому и проблему с вопи03:08:07
вот понятно хорошо так здесь смотрю03:08:13
отступ этот вообще мы можем от него03:08:15
отказаться раз уж я уже здесь то я03:08:18
запилю03:08:20
вот то что вижу чтобы у нас все было03:08:23
аккуратненько вот вот так-то лучше у нас03:08:29
не было больших пробел пробельных03:08:33
пробелов больших03:08:35
а вот здесь тоже отступ большой в03:08:39
категории до поменьше нужно делать так03:08:54
чтобы у нас было адекватно все чтобы03:08:56
человеку не пришлось там прокачать свой03:08:58
большой палец да да не знаю каких03:09:03
размеров так 353503:09:12
как добрались мы до наших новостей про03:09:17
чего здесь смотрю тоже просится чуть03:09:20
чуть поменьше все-таки размер отступ of03:09:25
и всего остального сейчас быстренько03:09:28
пробежимся значит total инфо вот здесь03:09:31
30 767 вполне хватит 15 вот так и между03:09:45
объектами03:09:52
[музыка]03:09:55
20 а так03:10:02
avanti колонки и туда написал вот здесь03:10:11
вот так-то лучше все-таки тоже стоит03:10:19
немножко под уменьшить 20 здесь 30 вот03:10:25
так вот теперь мне нравится хорошо03:10:32
заголовки пусть остаются большими а не03:10:34
влазят поэтому прошу значит вот здесь03:10:39
вот с подпиской разбираемся значит тоже03:10:42
на это уже разрешение можно вот здесь03:10:45
вот03:10:49
767 так тут же можно убирать03:10:53
ли акс делаем дисплей блок и собственно03:10:58
от верхней колонки можно вот так вот от03:11:02
текста отступить вниз на 25 точнее даже03:11:08
можно будет правильный вверх от можно03:11:13
вот так хватит топ-25 в форме для формы03:11:16
и и править забыл что я стилизовал форму03:11:22
поэтому отступать то мы ничего не будем03:11:25
вот так хорошо окей вот это у нас что-то03:11:32
у нас отступ info вот ступ инфо здесь03:11:54
хорошо03:11:55
есть мне нравится так значит не забудьте03:12:04
мне напомнить что я хотел сделать вот03:12:06
эту вот штуку перемещение по блокам03:12:09
сейчас быстренько верстаем footer и03:12:13
делаем перемещение по блокам так же03:12:16
зафиксируем шапочку вот хорошо footer03:12:21
тут все просто три колонки главная03:12:25
колонка с меню да и тут логотип телефона03:12:29
обратная связь хорошо все ясно так03:12:32
footer можно использовать это как flex03:12:38
кнр хотя нет put our body03:12:43
хотя да ладно калом future лагал их тему03:12:53
голову03:12:54
нет и footer logo03:12:58
так m&g логотип где-то у меня валялся03:13:06
валлотон логотип можно сделать ссылочкой03:13:10
таки случае так и снизу footer инфа03:13:14
такая штука типа все права защищены бла03:13:18
бла бла бла бла а дальше удар меню03:13:27
утро меню03:13:29
как это у нас будет догнав так он будет03:13:35
footer лист лист так это будет03:13:42
и собственно лишь келли и будет food or03:13:48
link03:13:50
ссылочка на копира03:13:55
вставляем будем пробовать03:14:00
мульти курсор на это дело закрывать так03:14:15
так так так в линию я клавишу вот так03:14:33
и конца не разобрался с тимурке курсором03:14:39
нормально уже в саблями она как-то лучше03:14:42
вставляет так хорошо тем не менее сделал03:14:45
так поехали put a phone кстати телефон и03:14:54
мы делаем ссылками дал бы человек мог03:15:02
сразу позвонить семерочку мы можем03:15:13
закрыть в так суп потом уже мы видим что03:15:17
он вот так вот маленьких тянет суп тут03:15:19
не подойдет можно смог безразницы03:15:24
есть и обратная связь ссылочка обратная03:15:28
связь03:15:30
колдакт назовем наверное как-то так03:15:34
предусмотрено03:15:38
так обратная связь03:15:46
отлично так кей для footer а у меня тоже03:15:51
есть отдельный файлик все создам я03:15:55
стараюсь разносить такие большие блоки у03:15:59
файликом так поехали03:16:05
дисплей flex03:16:07
так значит колонка сменю у меня на всю03:16:11
ширину добавляем модификатор фу так03:16:23
да ты не туда зашел здесь так вот это03:16:28
лишнее нужно по03:16:30
закрывать чтобы она не тут под ногами не03:16:32
путалась хорошо да у нас там получается03:16:38
так сейчас я покрашу это дело покрасил03:16:47
окей значит 45 45 45 пусть будет есть03:17:00
отлично и собственно и не шичко03:17:05
давайте пойдем по порядку info03:17:11
14 бла-бла-бла от логотипа03:17:20
так дисплей wine блок 1025 вообще-то так03:17:38
хорошо значит теперь обратная связь и03:17:41
телефон телефон дисплей блог потому что03:17:50
он ссылочкой да и здесь вот чем много03:17:54
всяких стилем и это дело скопируем а03:17:57
клешни и по убираем фоксман03:18:05
у меня там есть шрифт03:18:10
ohc вот этот брала регуляр есть03:18:15
нужен это не нужно это не нужно это03:18:21
нужно это отлично только мне нужно03:18:28
приподнять это все дело дисплей flex03:18:33
да по умолчанию по молчанию так голова03:18:37
этом светляк старт03:18:40
вот семерочка у нас улетела верху03:18:45
принципе адекватно смотрится можно03:18:49
немножко подправить два права 5 мы03:18:58
называем нажимаем и сразу звоним базу03:19:01
нас должен идти вызов отлично дальше03:19:06
обратная связь ссылочка там по дизайну03:19:14
границам даша да вот так еще я могу вот03:19:25
это все делалось шолто текст all right03:19:30
dam dam ну естественно нужно здесь03:19:35
добавить иконочку03:19:45
слева дышат спасибо теперь я стал03:19:55
намного лучше так03:20:04
немножко 12 есть хорошо окей отлично03:20:12
menu menu menu menu menu menu03:20:16
вот наше меню вот наше меню и как мы его03:20:18
будем атаковать для начала я хочу вот03:20:20
эти отступы сделать 30 пикселей03:20:25
теперь лист у нас дисплей flex так раб03:20:30
так и омар джон и вниз и влево вправо03:20:47
точнее точнее правильность ок так ну03:20:55
естественно нужно это все дело оси 1450003:21:03
он с 14 фунт white 500 белый опор кейс03:21:11
по моему там еще наверно есть лотор03:21:14
spacing донбассе que eu03:21:20
окей так все у нас поехала с телефоном03:21:24
не вне порядок myspace ну wrap был у нас03:21:33
не ломался мы там легко и просто можем03:21:36
так сделать нам позволительно так и03:21:38
здесь вот я вижу что какой то есть один03:21:42
q меню в 15 пикселей чтобы он так по03:21:44
макету нас показывался03:21:48
хотя тут уж можно вот так ход конем03:21:51
сделать да будет слишком большой сверху03:22:03
15 фото03:22:05
сразу двух зайцев прибили окей я смотрю03:22:12
телефон там уже 15 просит вверх до те же03:22:16
короче чёрти что тут с дизайном сейчас03:22:20
footer content03:22:23
проще это закрыть вот так чтобы не03:22:26
лохматик бабушку03:22:29
утро контакт здесь текст оnline03:22:35
райт что такое write03:22:39
я это я закрыл03:22:49
вот теперь лучше03:23:02
[музыка]03:23:05
вот прошло отлично по привычке ставлю на03:23:10
линкор03:23:12
текст decoration underline03:23:15
вот хорошо и так же у нас все права03:23:20
защищены там тоже у нас ломается она03:23:22
здесь текст может быть больше поэтому я03:23:25
тут сделаю а 180 пикселей для первой03:23:30
колонке 180 пикселей я сделаю03:23:35
ограничение вот так хорошо адаптируем03:23:40
footer03:23:50
ок здесь мы можем тянуть на же мы можем03:23:53
на 59203:23:59
991 уменьшит размер шрифта фон сайт 4003:24:07
funds 20 да да вот и в какой-то момент03:24:22
какой-то момент мы здесь flex уберем там03:24:26
до 767 display of blog а вот и я бы все03:24:34
это просто поставил бы по центру и не03:24:37
парился так здесь вот03:24:42
чувств и контент-центр вот так вот и03:24:53
естественно вот тут тоже самое03:25:14
так хорошо значит здесь впереди03:25:19
дисплей flex дисплей flex max direction03:25:25
and light and fix ой то есть часто фай03:25:29
контент ex oc немножко переделаю03:25:33
компоновку03:25:34
здесь изначально чтобы так но так не03:25:40
получится да если делаю калом значит03:25:49
почему у меня тут ступай контент если03:25:51
лайла этого суфле accent вот так его03:25:58
здесь и теперь хочу чтобы нам не было ни03:26:00
flex and a пациент вот а на замечательно03:26:09
отлично и кстати есть тут еще кто-то03:26:12
остался вот показываю еще раз03:26:15
динамический адаптив вот смотрите какая03:26:19
история вот этот вот текст все права03:26:21
защищены03:26:22
да он здесь явно не нужен ну типо вот03:26:25
когда я сложил flex вот конечно там03:26:28
можно было тут свадебном как ты это03:26:31
делать через ордер но показываю03:26:35
динамический адаптив еще раз то есть он03:26:37
уже был засвечен в первом уроке что это03:26:41
такое это моя такая идея моя наработка в03:26:46
которой я динамически java скриптов03:26:48
перебрасываю элементы прям внутри шлема03:26:50
то есть не скрываю показываю там или03:26:54
каким-то другим способом прямо меняю03:26:56
структуру на лету03:26:57
вот сейчас я это продемонстрирую все03:27:00
права защищены я хочу перекинуть в самый03:27:02
конец да вот здесь чтобы не были это03:27:04
было бы адекватно вот хорошо сделаем03:27:08
небольшую подготовку для этого для03:27:10
начала я03:27:13
подправлю немного стиле меню здесь джон03:27:17
болтон 20 вот вам и она этом же03:27:23
разрешение у логотипа я уберу margin а03:27:27
то сейчас все права защищены прилипли но03:27:31
мы знаем что это не надолго а для них03:27:35
вот как раз я на джим топ-25 сделаю03:27:39
сейчас мы их перебросим вот сюда в самый03:27:41
низ вот каким образом я буду это делать03:27:45
как я уже говорил у меня есть03:27:47
определенная заготовочка java script она03:27:50
называется на динамический адаптив вот и03:27:53
все что мне нужно здесь сделать это03:27:55
дописать вот такой вот атрибут да там у03:27:59
так и здесь я пишу куда я хочу поместить03:28:03
свой элемент куда я его хочу поставить03:28:07
поставить я его хочу в footer content03:28:12
pack каким по счету его хочу поставить03:28:15
то есть у меня идет изначально вот этот03:28:19
логотип потом ну вот колонка 1 2 303:28:22
значит начинаем с нуля значит 3 0 1 2 303:28:27
в самый конец и на каком разрешении на03:28:30
76703:28:33
все теперь вычтем эл коде вот этот вот03:28:39
футов он находится реально в самом конце03:28:42
вот он перекинулся он автоматически03:28:45
вернется назад я за пару секунд сделал03:28:49
вот такую штуку да круто по-моему круто03:28:53
я вот лично тащусь от этого понятно что03:28:56
этот пример простой но я думаю те кто03:28:58
смотрит и более или менее верстает они03:29:01
понимают и а не знаю что дизайнеры могут03:29:07
такого на дизайне что адаптировать очень03:29:09
сложно и перри перекидывать очень сложно03:29:12
по поэтому вот этот динамический адаптив03:29:14
который я придумал должен помочь в этом03:29:17
за пару секунд перебрасывать блоки03:29:20
совершенно в другие места как по мне это03:29:23
невероятно круто и молодцы те кто здесь03:29:27
досмотрел и теперь вы будете тоже об03:29:30
этом хорошо давайте взглянем на макет03:29:35
еще раз значит я помню что я должен03:29:37
сделать здесь вот эту вот штуку и03:29:39
быстренько мы это дело делаем значит03:29:42
первое что я хочу сделать это закрепить03:29:46
шапку сейчас она не ездит у нас с03:29:48
контентом да то есть вот с этого места я03:29:52
не смогу куда-то перейти у меня нету ни03:29:54
меню не шапки ничего поэтому нам нужно03:29:57
ее закрепить место позиция латиф позицию03:30:00
fixed выйти сто процентов топ 05003:30:05
шапка у нас теперь ездит но здесь мы03:30:09
потеряли высоту вот эти 75 пикселей03:30:11
шапки которые довели у нас на весь со03:30:14
страной контента не теперь повисли в03:30:16
воздухе и поэтому для того пэйдж03:30:19
вот для ну03:30:22
лассо пейдж вот у я эти 75 пикселей03:30:27
компенсирую все теперь у нас все как03:30:29
было но при этом шапка ездит и так и то03:30:33
есть дальше плавный переезд к разным03:30:38
блоком да вот у нас есть главное это03:30:40
вверх и сейчас мы будем это все делать03:30:44
значит я открываю footer нам не нужен03:30:46
честно в принципе не нужен так открываем03:30:50
хедер html03:30:51
вот наше меню значит я добавляю опять же03:30:55
свою наработку gold блок вот класс03:31:01
добавляю определенный и здесь вечеров я03:31:03
буду писать03:31:04
класс doc которому мне нужно ездить03:31:07
значит главное у нас сверху поэтому мы03:31:11
можем задать класс пэйдж и проверим03:31:13
сразу все ли я правильно помню ну вот03:31:17
вот вот и где-то я еще не подключил но03:31:23
мы сейчас это дело подключим так есть03:31:31
определенная мне библиотечки03:31:36
вот ак03:31:39
smooth scroll из такая библиотечка03:31:41
которая собственно помогает мне помогает03:31:45
мне это дело вот теперь при нажатии на03:31:51
главного я возвращаюсь на главную все03:31:53
работает поехали дальше аукцион это вот03:31:55
наверное вот этот блок03:31:59
я сейчас просто дождитесь я еще хочу03:32:02
показать в чем прикол03:32:04
именно то что она ездит это и не так03:32:07
сложно сделать самому и это все03:32:09
показывают но я немножко доработал эту03:32:12
тему я сейчас хотел бы показать в чем03:32:16
тут прикол03:32:18
вот секундочку хочу то03:32:23
лоты аукциона ты о проекте есть тут у03:32:30
нас о проекте03:32:33
наверно вот это и есть03:32:35
о проекте партнерам контакты03:32:41
может мы значит сделаем о проекте03:32:49
это будут у нас услуги а партнером будет03:32:53
у нас вот этот долг03:32:55
почему нет нам же главное показать как03:33:00
она работает так мечта проекте у нас03:33:03
будет по как сервис и со партнером у нас03:33:07
будет информация и контакты03:33:13
контакты тоже значит наверно партнером у03:33:19
нас будут цитаты03:33:21
вот инфа у нас будет кантерлота03:33:28
до расставил теперь я могу вот так вот03:33:32
по сайту ездить но мы видим что вот03:33:37
здесь вот у нас проблема да ну не03:33:41
докручиваем ну точнее где какой отступ и03:33:45
она так и показывает но этот скриптик03:33:47
он умеет03:33:51
учитывать шапку ок и я сейчас попробую03:33:55
это дело включить03:33:57
скриптик scroll и вот здесь я могу в сад03:34:07
хэдер включить и теперь должно быть03:34:12
лучше да бери он учитывает шапку и03:34:23
подъезжает как бы действительно к началу03:34:26
блока прошел и что я еще хотел показать03:34:35
это то что собственно что мне нравится03:34:40
моим скрипте вот здесь вот что он как бы03:34:46
должен включать тот определенный пункт03:34:49
меню03:34:50
вот который мы собственно сейчас03:34:56
прокручиваем до вот до03:35:09
все эти скрипты наработки естественно03:35:11
будут в доступе на патреоне в03:35:14
благодарность ребятам которые03:35:16
поддерживают собственно это все так что03:35:26
так прошел только вот здесь вот мне03:35:36
нужно на сейчас я еще сделаю так что03:35:40
вообще это было видно здесь вместо поишь03:35:42
просто печь это ваш со страницы я сделал03:35:44
мои не сладим так чтобы хорошо работала03:35:47
вот и собственно я как-то обозначу наш03:35:50
активный пункт до03:35:51
отменю вот линк на че тут при холере03:35:54
есть и с классом актив пусть у нас будет03:35:58
он пусть будет нашего вот этого03:36:00
фирменного золотого цвета да как вариант03:36:05
даже добавим ему какого-то транзишен on03:36:08
a color color03:36:13
[музыка]03:36:15
вот и смотрите значит что происходит03:36:17
значит теперь мы видим что мы на главной03:36:20
ну как бы наверху дальше мозг ролями03:36:22
когда мы про скроле ваем к нужному блоку03:36:24
вот та03:36:25
пункт меню у нас выделяется все это03:36:28
делается автоматически вот скриптом вот03:36:33
такую наработку я себе придумала мне она03:36:36
очень нравится потому что такое часто03:36:38
надо и это очень удобно для пользователя03:36:40
да он всегда видит где он находится вот03:36:44
и подсвечивается определённый пункт меню03:36:47
вот таким вот образом все это работает03:36:51
ребятам ну я вас поздравляю всех нас03:36:55
поздравляю мы наконец-то в три захода03:36:59
swear стали вот такой вот пакетик03:37:01
вот местами было интересно местами было03:37:04
непросто03:37:05
вот он напичкан всякими разными штуками03:37:08
где нужно посидеть попробовать разные03:37:11
варианты и так далее у нас получился03:37:14
один из вариантов он надежный хороший03:37:17
будет работать естественно все это можно03:37:20
сделать по другому да какие то применить03:37:24
другие способы и так далее но тем не03:37:28
менее у вас есть например вот такой вот03:37:32
верстки это вполне коммерческая верстка03:37:34
то есть это вполне может быть версткой03:37:37
которая может быть продано клиенту03:37:39
хорошо тут все тут можно пользоваться03:37:41
менять текст картинки и все будет хорошо03:37:44
работать при этом мы здесь разобрали03:37:47
много разных практик я очень надеюсь что03:37:51
было полезно те кто со мной только03:37:53
познакомился подписывайтесь на канал у03:37:56
меня абсолютно бесплатный курс03:37:58
структурированный с до мошками по03:38:00
верстке вот скоро будет сниматься03:38:03
плейлист по гайдам по java script у так03:38:06
что подписывайтесь будет интересно также03:38:09
вот подобные марафон и всякие интересные03:38:12
всякие интересные в пакетике мы будем03:38:17
верстать и дальше вот в подобных в03:38:20
подобном формате так что вы мне пишите03:38:22
если вам интересно и мы будем это дело03:38:25
все verso03:38:27
вот так что подписывайтесь на канал03:38:32
подписывайтесь на telegram чад у нас03:38:35
есть п в помощь по верстке все и ссылки03:38:37
есть в описании вот так что стараемся03:38:40
стараюсь делать хорошо стараюсь понятно03:38:44
объясняет чтобы вы тоже в будущем стали03:38:47
мастерами либо подсмотрели что-то03:38:50
интересное для себя что то новое в любом03:38:53
случае чтобы вы оставались свободными03:38:55
людьми и могли достойно зарабатывать03:38:59
такая я цель всего этого дела вот03:39:03
поэтому молодцы все да я надеюсь было03:39:08
полезно ставьте пожалуйста лайк чтобы я03:39:10
понимал что вам была полезна и чтобы я03:39:14
продолжал дальше делать что-то подобное03:39:16
подберем еще какой-то макет интересный и03:39:18
будем работать уже с ним в следующий раз03:39:23
за следите за анонсами стримов вот и03:39:29
обучайся развивайся и помни живи работой03:39:33
в свободное времяОписание:
Адаптивно с нуля сверстаем интересный макет. Я буду комментировать все свои действия. Использовать буду свою сборку GULP, наработки на чистом JS и SCSS. 🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle 👉 Первая часть марафона - https://www.youtube.com/watch?v=GNvcGNx5zgQ 👉 Вторая часть марафона - https://www.youtube.com/watch?v=j0dEldPxB1E ☝️ Во время мастер-классов и марафонов не обзательно все знать, важно смотреть на принимаемые решения и практики! 👉 Макет + шрифты (в открытом доступе) - https://www.patreon.com/posts/32690819 👉 Настройка редактора VS Code - https://www.youtube.com/watch?v=nxCLXMBl4e4&list=PLM6XATa8CAG5v6T2a0TTdwyK0nZrSRxFi&index=4 👉 БЕСПЛАТНЫЙ КУРС по верстке сайтов (Front End). Уроки HTML CSS JS: https://www.youtube.com/playlist?list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr 🤟 Результат верстки выложен для подписчиков на патреоне - https://www.patreon.com/posts/rezultat-36532582 🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle 🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat) 🔴 Facebook: https://www.facebook.com/unsupportedbrowser 🔴 Instagram: https://www.facebook.com/unsupportedbrowser 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle 🤟 Живи, а работай в свободное время! ©
Готовим варианты загрузки
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах
Вопросы о скачивании видео
Как можно скачать видео "Марафон по верстке. Часть №3. Адаптивная верстка макета с нуля GULP SCSS JS"?
Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.
Какой формат видео "Марафон по верстке. Часть №3. Адаптивная верстка макета с нуля GULP SCSS JS" выбрать?
Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.
Почему компьютер зависает при загрузке видео "Марафон по верстке. Часть №3. Адаптивная верстка макета с нуля GULP SCSS JS"?
Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.
Как скачать видео "Марафон по верстке. Часть №3. Адаптивная верстка макета с нуля GULP SCSS JS" на телефон?
Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.
Как скачать аудиодорожку (музыку) в MP3 "Марафон по верстке. Часть №3. Адаптивная верстка макета с нуля GULP SCSS JS"?
Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.
Как сохранить кадр из видео "Марафон по верстке. Часть №3. Адаптивная верстка макета с нуля GULP SCSS JS"?
Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.
Сколько это всё стоит?
Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.