Скачать "Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи"

"videoThumbnail Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи

0:00

Знакомство с макетом и старт проекта

3:38

Сброс стилей

18:02

Базовые стили, контейнер, шрифты

29:57

Контейнер

33:40

Верстка шапки с навигацией

1:10:30

Верстка верхней секции

1:47:35

Секция How It Works - заголовок

2:04:48

Секция How It Works - колонки

2:32:34

Секция Story

2:56:56

Секция Our Product

3:27:54

Подвал

3:34:16

Правка багов

3:37:37

Читкод для отображения десктопной версии на смартфонах

3:41:58

Адаптивная верстка шапки и навигации

3:50:20

Адаптация первой секции

3:56:10

Адаптивная верстка секции How It Works - заголовок

4:00:30

Адаптивная верстка секции How It Works - колонки

4:07:42

Адаптивная верстка Story

4:12:51

Адаптив для секции Product

4:38:05

Адаптив для подвала

4:43:02

Мобильная навигация, скрипты

5:06:24

Видео в секции Story, Скрипты

Адаптивная верстка сайта с объяснением действий. Добавление товара в корзину, AJAX подгрузка из JSON

Адаптивная верстка сайта с объяснением действий. Добавление товара в корзину, AJAX подгрузка из JSON

Канал: Фрілансер по життю

Адаптивная верстка сайта "Фрилансер по жизни". HTML SCSS JS FIGMA GULP WEBPACK. Часть №2

Адаптивная верстка сайта "Фрилансер по жизни". HTML SCSS JS FIGMA GULP WEBPACK. Часть №2

Канал: Фрілансер по життю

Адаптивна верстка сайту на базі шаблону ЧФ3. Пояснення дій. HTML CSS JS FIGMA. Частина №1

Адаптивна верстка сайту на базі шаблону ЧФ3. Пояснення дій. HTML CSS JS FIGMA. Частина №1

Канал: Фрілансер по життю

Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS

Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS

Канал: Фрілансер по життю

HTML

CSS

WebCademy

ВебКадеми

Юрий Ключевский

адаптивная верстка сайта

адаптивная верстка сайта html css

адаптивная верстка сайта flexbox

адаптивная верстка шапки сайта

верстка макета

верстка макета figma

верстка макета html css

верстка макета с нуля

верстка макета для новичков

верстка макета из фигмы

адаптивная верстка

верстка практика

верстка сайта

верстка сайтов уроки

адаптивная верстка макета

обучение верстке

html css

javascript

00:00:01

кричевский школа веб к диме и в этом

00:00:04

видеоролике мы с вами с нуля от и до для

00:00:07

начинающих за верстаем вот такой

00:00:10

замечательный макет который находится в

00:00:12

фильме верстать мы будем на html и css

00:00:16

завершаем десктопную и мобильные версии

00:00:19

то есть это все будет сделано с

00:00:21

адаптивным вот поэтому присоединяйтесь и

00:00:26

начинаем с макетом уже с вами вскользь

00:00:30

познакомились в общем вот такой

00:00:32

замечательный лендинг есть верхняя

00:00:34

панель с навигацией есть вот такая шапка

00:00:37

верху карточки секция с

00:00:42

видео-блог с контентом и подвал верстать

00:00:46

я буду с объяснениями для новичков то

00:00:49

есть будем идти пошагово от и до и

00:00:51

поэтому стартуя тоже полностью с пустого

00:00:55

проекта у меня есть вот такая папка

00:00:57

olive html project которая абсолютно

00:00:59

пустая на данный момент и

00:01:03

так я открываю редактор кода visual

00:01:06

studio код и иду вот прям по шагам от и

00:01:10

dot закидываю сюда данную папку давайте

00:01:14

сразу создадим здесь внутри подпапки

00:01:16

имидж под картинки далее также в корне

00:01:20

сделаем папку css

00:01:21

под стиль и и в корне файл индекс точка

00:01:26

html далее давайте создадим стартовую

00:01:31

структуру разметку страницы ! нажимают

00:01:35

ap м от все это разворачивает вот так

00:01:37

вот в стартовую заготовку здесь напишем

00:01:40

в тайтель и оливию ищем его project

00:01:43

пусть так называется наш проект далее

00:01:46

создаем файл со стилями в css файле

00:01:51

создаю новый файл и назову его main .

00:01:54

css то есть наш файл с основными стилями

00:01:59

здесь же я предлагаю так как это видео

00:02:02

учебная и для того чтобы нам было

00:02:04

удобней работать в частности мне так

00:02:08

удобнее работать и в последующем когда

00:02:10

будете изучать препроцессоры очень

00:02:13

удобно разделять файлы точнее разделять

00:02:16

стиле по отдельным файлом то есть

00:02:18

конечно можно писать вообще весь код в

00:02:21

файле main css да и по итогу он так и

00:02:23

должен быть в одном файле вот но чтобы

00:02:26

нам разграничить ответственность у нас

00:02:29

будут какие-то стили отвечающие за сброс

00:02:31

стиле для первой секции для второй для

00:02:34

шапки для подвала вот и чтобы удобнее со

00:02:36

всем этим работать а не прыгать по

00:02:38

одному файлу на тысячу строк вверх-вниз

00:02:41

я предлагаю все-таки создать отдельный

00:02:44

файл и поэтому давайте создадим еще один

00:02:45

файл которую назову rosette css вот это

00:02:49

будет полезно

00:02:52

то пока есть мы до дальше посмотрим вот

00:02:55

и

00:02:56

подключим их на страницу даже давайте

00:03:00

сделаем ними и на так как у нас

00:03:02

отдельные файлы то я сделаю такое bass

00:03:05

bass css вот так пусть пока это будет

00:03:09

yandex xml зайдем сюда напишем tek link

00:03:14

tab e и f подключим css rosette css и

00:03:19

также подключим bass если что я быстро

00:03:23

копирую просто зажимая shift и alt и

00:03:25

нажимая стрелочку вниз происходит

00:03:27

быстрое копирование

00:03:29

выбранной строки разит так resort &

00:03:34

bass подключил теперь давайте напишем

00:03:38

базовые стили для сброса открываем файл

00:03:41

и z и что здесь будет мы сбросим отступ

00:03:45

и размеры шрифтов и элементов на

00:03:48

странице потому что в процессе верстки

00:03:51

когда мы будем с вами верстать ну

00:03:55

например заголовки когда мы будем

00:03:56

выделять тегом h1 и h2 и так далее у них

00:04:00

будут о ступы сверху снизу у них будет

00:04:02

определенная толщина шрифта фонд weight

00:04:05

которая возможно нам будет не нужна

00:04:07

у них будет определённый размер а у нас

00:04:10

он будет явно другим вот поэтому эти

00:04:12

сбросы необходимо также мы сделаем

00:04:15

сбросу тфп потому что тоже о ступу

00:04:18

абзацев не всегда таки в макете не

00:04:22

всегда такие как их дает браузер по

00:04:24

стандарту возможно где то мы будем

00:04:26

использовать списки и

00:04:28

списке например часто используется для

00:04:30

навигации и у списков тоже всегда

00:04:34

убирают отступы padding и

00:04:37

буллиты вот эти вот маркеры которые

00:04:40

стоят слева от элементов списка не не

00:04:42

нужны когда мы например верстаем

00:04:44

навигацию вот для этого нужны сбросы и я

00:04:47

рекомендую делать его прям полный сброс

00:04:49

в ноль можно использовать библиотеку

00:04:51

резец css можно написать сброс

00:04:54

самостоятельно чтобы лучше понимать

00:04:55

вообще что мы сбросили для чего я сейчас

00:04:58

просто ставлю коды прокомментирую что он

00:05:01

делает и так что мы делаем мы написали

00:05:04

вот такой селектор то есть выбирают

00:05:06

через звездочку абсолютно все элементы

00:05:08

на странице а потом так же выбираю

00:05:09

абсолютно все before все автор то есть и

00:05:12

псевдо-элементы тоже и вот таким вот

00:05:14

образом проходить вообще по всему чему

00:05:16

возможно мы убиваем убираем по денги

00:05:19

марджан и ставя их в ноль делаем border

00:05:22

но он чтобы его тоже не было то есть

00:05:25

элементы формы если встречаются то

00:05:27

зачастую все равно их нужно дизайне

00:05:29

по-своему задавать свою рамку а иногда и

00:05:32

она отсутствует вот поэтому это лучше

00:05:34

сбросить сразу и устанавливаем значение

00:05:36

богсайде на border бог стоит чтобы то

00:05:39

ширина и высота который мы пропишем она

00:05:41

уже была финальная для элемента то есть

00:05:45

она уже включала в себя и рангу и по

00:05:47

денги и контент то есть это очень удобно

00:05:50

есть нюанс есть момент возможно кто то

00:05:53

скажет да вот а можно ли вот так вот

00:05:55

просто братья все это выделять через

00:05:58

звездочку почему бы не выделять отдельно

00:06:00

каждый элемент принципе можно можно

00:06:02

выделить каждый элемент описать через

00:06:04

selector и сбросить только там где нужно

00:06:06

но по факту ничего

00:06:09

страшного вот в этом нет то есть не

00:06:11

какой-то там падение производительности

00:06:13

ли ещё чего-то у вас не произойдет то

00:06:16

есть вас всем от работает нормально

00:06:18

стандартные хорошо вот поэтому бояться

00:06:20

этого нужно сбрасываем вот таким образом

00:06:23

что здесь еще у нас будет я выбираю

00:06:25

ссылки и посещенные ссылки говорю что

00:06:27

цвет у них будет ин-грид то есть они

00:06:30

никак не выделяются по цвету наследует

00:06:32

тот цвет который будет в теге body то

00:06:34

есть он будет черный все ссылки будут

00:06:36

просто черными вот потому что зачастую

00:06:38

мы тоже с ними отдельно работаем убираем

00:06:41

подчёркивание дисплей онлайн блок в

00:06:44

принципе давайте не будем писать

00:06:46

далее по hover а также можно прописать

00:06:51

что тоже цвет injured текст decoration

00:06:54

но он то есть никак ничего нигде не

00:06:57

добавляется также можно и по фокусу

00:07:01

убрать поведению ссылок а фокус а актив

00:07:04

то есть когда ссылка активно обычно

00:07:06

браузер добавляет фокус и но довольно

00:07:10

часто он очень сильно отличается от того

00:07:12

что есть по дизайну поэтому я бы вот

00:07:13

такое тоже сделал далее следующие блоки

00:07:17

по сбросом что у нас будет кстати вот по

00:07:21

ссылкам здесь у меня такой комментарий

00:07:22

как links что мы работаем со ссылками

00:07:26

потом комментарий команд а есть какие-то

00:07:28

общие вещи давайте их опишу и поясню

00:07:31

здесь мы выбираем все теги

00:07:34

из чем опять семантические теги и ставим

00:07:37

для них дисплей блок в принципе для

00:07:39

современных браузеров это уже

00:07:41

не нужно потому что они и так знают все

00:07:44

эти теги в принципе корректно с ними

00:07:46

работаю до на если какой-то друг старый

00:07:48

браузер он будет знать как это

00:07:50

отображаете отображать как блоки вот то

00:07:52

есть целом эту инструкцию можно и

00:07:53

опускать далее сброс и размеров для

00:07:58

заголовков и абзацев выбираем все теги

00:08:01

заголовка и т.п. и говорим функция

00:08:04

синклит то есть тот же что и в body то

00:08:06

есть он будет 16 значит тоже 16 фонд

00:08:09

weight такой же как будет из стандартный

00:08:11

нежирные фанту и 400 это обычно то есть

00:08:14

он наследует ингрид это значит

00:08:16

наследовать но она следует в данном

00:08:18

случае он будет наследовать от того

00:08:19

блока в котором он расположен да то есть

00:08:22

если

00:08:24

этот текст будет расположен в блоке где

00:08:27

фон сайт 20 то у него будет та же funds

00:08:30

20 вот так это работает и line хит

00:08:33

ингрид то есть тоже на следуем далее а

00:08:36

что еще это уже не совсем относится к

00:08:39

сбросу дано тем не менее она мне здесь

00:08:41

будет p + p марджан топ 1 м что это

00:08:44

такое то есть мы выбираем т.п. абзац и

00:08:47

смотрим на абзац который идет после него

00:08:49

то есть это любой абзац кроме 1 2 3 4 5

00:08:53

и мы делаем отступ сверху в 1-м 1 м это

00:08:58

относительная единицы величины то есть

00:09:00

если фонд says у этого абзаца был 16

00:09:03

значит отступ сверху будет 16 если

00:09:06

размер шрифта у этого абзаца был 20

00:09:09

значит отступ сверху будет 20 то есть

00:09:11

таким образом мы уже заранее прописываем

00:09:14

корректные отступы между абзацами это

00:09:16

очень важно потому что верстка это не

00:09:19

полиграфия да это не что-то статическое

00:09:22

что мы за дизайне ли там распечатали все

00:09:24

до верстка это это живой макет то есть

00:09:28

он может правится добавляться контент

00:09:30

убираться соответственно везде где есть

00:09:32

какой-то текст видео абзацев его может

00:09:34

стать больше его может стать меньше

00:09:36

поэтому крайне важно всегда текст в виде

00:09:39

абзацев помещать именно в т.п. они

00:09:42

просто их кидать в дивы вот и также

00:09:45

предусматривать тот вариант что на месте

00:09:47

где у вас один абзац может появиться 2

00:09:49

может появиться 3 вот таким вот образом

00:09:51

мы это предусмотрели ну естественно

00:09:53

верстать даже будем корректно далее что

00:09:56

мы сделаем еще для тега ю л мы сделаем

00:09:59

ли стоял ну то есть сбросим те самые

00:10:01

кружочки маркеры у т г л я не сбрасываю

00:10:04

их для тега о л потому что о л это ордер

00:10:07

клейста есть список который имеет

00:10:10

последовательности 1 2 3 4 5 и так далее

00:10:13

и у как бы само название говорит что это

00:10:17

о л то есть список с номерами

00:10:21

и зачем их сбрасывать но если нам нужны

00:10:23

номера мы будем использовать о.л. если

00:10:25

какие-то другие номера нам нужны нам

00:10:27

римские цифры дамы потом через с из это

00:10:29

стилизуем но вот ю л а на лед лист он

00:10:33

как раз таки используется для списков в

00:10:35

навигации для любых других перечислений

00:10:37

которые не являются текстовым списком на

00:10:40

но верстки мы делаем как перечисление

00:10:42

поэтому здесь мы сбрасываем ли стоуном

00:10:44

margin и padding и у него уже сбросились

00:10:46

потому что мы делали вот здесь margin и

00:10:49

padding 0 пикселей

00:10:51

отлично что мы сделаем еще

00:10:54

значит я выбираю теги имидж и svg то

00:10:59

есть нашу графику говорю vertical line

00:11:01

top то есть это нужно для имиджа потому

00:11:05

что по умолчанию у него есть некий такой

00:11:07

отступ снизу вот такой скажем небольшой

00:11:11

баг то есть он присутствует всегда везде

00:11:13

одну или особенность вот и чтобы этого

00:11:16

лишнего уступа не было нужно задать

00:11:18

vertical line top можно бороться этим

00:11:21

через задание дисплей блок но тогда если

00:11:25

вам где-то нужно будет картинка как

00:11:27

онлайн элемент то есть где-то в строке

00:11:29

то вам придется делать переопределение

00:11:32

вот то в таком случае его делать не надо

00:11:34

будет и так же задаю макс вид сто

00:11:36

процентов то есть это тоже такая

00:11:38

настройка по усмотрению то есть нужно

00:11:40

думать прежде чем ее давать и я ее даю

00:11:44

им не это удобно то есть делать так

00:11:47

чтобы картинка не выходила за размера

00:11:49

контейнера то есть ну вот вдруг да так

00:11:51

получается что где-то мы большую

00:11:52

картинку разместили задали большой

00:11:54

размер но вот и она прям вылазит из

00:11:56

контейнера в котором находится в

00:11:58

горизонтальный scroll появляется и так

00:12:00

далее да то благодаря этому свойству

00:12:02

этого не будет то есть у него

00:12:03

максимальная ширина будет по контейнеру

00:12:05

иногда конечно нужно как чтобы картинка

00:12:08

вот прям вышла за пределы ну тогда мы

00:12:09

это отменим вот но это свойство я

00:12:11

прописываю я всегда знаю что она у меня

00:12:14

есть и бы полагаюсь на него знаю эту

00:12:17

особенность

00:12:18

далее еще сбросы для форм конкретно в

00:12:22

этом макете у нас форм не будет но

00:12:26

до раз уж мы затеяли данный резерв

00:12:28

давайте полностью его напишем к слову

00:12:31

под видео будет ссылка на весь этот файл

00:12:35

и за css то есть вы в принципе можете

00:12:37

зайти и этот как сниппет кода как

00:12:40

заготовку просто взять его скопировать и

00:12:44

использовать и вот то есть на не набираю

00:12:46

input textarea bath and select phone 7

00:12:49

link with fans айсин харит в общем для

00:12:51

элементов форм по умолчанию они не

00:12:53

наследуют font-family у них свой вот но

00:12:56

зачастую им тоже должен быть другим

00:12:58

поэтому мы пропишем это свойство чтобы

00:13:01

наследовали input им с клэр дисплей но

00:13:03

он в интернет эксплорере когда мы что-то

00:13:05

вводим input появляется такой крестик

00:13:07

вот его дает сам браузер чтобы его не

00:13:10

было мы тоже его сбросим далее батон и

00:13:14

input type сабмит то есть это наши

00:13:17

кнопки что мы делаем мы делаем display

00:13:20

inline блок тыс для того чтобы их можно

00:13:22

было вот просто заверстать и они стали в

00:13:24

одну линию отображались как онлайн блоки

00:13:26

курсор pointer очень важно то есть чтобы

00:13:29

курсор у нас реагировал на них появлялся

00:13:31

указательный палец и пользователь

00:13:33

понимал что с ними можно

00:13:34

взаимодействовать ну и также сбрасываем

00:13:37

фон делаем прозрачный цвет фона и

00:13:39

сбрасываем бук хи ду borders у нас уже

00:13:43

все сброшены в звездочка для чего это

00:13:46

было сделано для кнопок да для того

00:13:48

чтобы полностью отменить любое вот

00:13:50

стандартная стилизацию кнопок который

00:13:53

дает браузер потому что зачастую все

00:13:55

равно по дизайну они выглядят по другому

00:13:57

далее также работаем с кнопками со всеми

00:14:01

input amiibo тонами сбрасываем outline

00:14:03

потому что зачастую он опять же не

00:14:05

вписывается в дизайн и его нужно

00:14:08

прописывать самостоятельно лучше

00:14:10

прописать самостоятельно поэтому

00:14:11

сбросили далее mozilla

00:14:15

тоже может добавлять там определенные по

00:14:18

денги и borders это можно сбросить через

00:14:20

мост фокус inner далее выбираем лейблы

00:14:24

то есть лейбл это тоже элементы форм и

00:14:26

зачастую наши лейблы по-хорошему они

00:14:29

всегда должны быть связаны с элементами

00:14:31

форм то есть есть какой-то input и

00:14:34

название до имя введите имя и input и

00:14:37

всегда должна быть возможность вот мы

00:14:39

кликаем на введите имя и у нас сразу

00:14:42

активировался input и мы можем вводить

00:14:44

то есть всегда нужно связывать input и

00:14:46

точнее лейблы с in путами к которым они

00:14:50

принадлежат обычно это так либо внутрь

00:14:54

помещают либо связывают вот и из-за того

00:14:56

что по клику по лейблу у нас будет

00:14:58

происходить действия поэтому тут курсор

00:15:00

по enter тоже поменяю есть еще такое

00:15:03

т.к. форма как легенд и тоже для

00:15:06

удобства работы с ним его лучше

00:15:07

перевести в дисплей блок вот такой вот

00:15:10

розетту нас получился дату здесь как бы

00:15:12

и сбросы и добавления каких то стилей

00:15:15

вот вот такой вот полезный файл на с

00:15:18

вами теперь имеется

00:15:19

[музыка]

00:15:20

[аплодисменты]

00:15:21

сейчас не много важной информации хочу

00:15:24

пригласить всех интересующихся на наш

00:15:26

курс профессии чтимого верстальщик если

00:15:28

вы задумываетесь об удаленной работе

00:15:30

чтобы стать фрилансером верстальщикам

00:15:33

верстать сайты на удаленке зарабатывать

00:15:35

на этом деньги либо трудоустроиться в

00:15:37

веб-студию или а идти компанию как

00:15:40

верстальщик сайтов и начать свой путь

00:15:43

программиста ай-ти специалист и дальше

00:15:45

расти и развиваться в сфере фронт-энд

00:15:47

разработки то профессии чем он доставщик

00:15:50

сайтов это отличный курс с которого

00:15:53

стоит начать приходить на него можно

00:15:56

абсолютно с нуля либо с уже какими-то

00:15:59

базовыми знаниями мы здесь самого нуля

00:16:02

начинаем изучать все что должен знать

00:16:04

верстальщик и проходимся по всем

00:16:05

основным темам это и верстка html css

00:16:09

графические редакторы препроцессоры

00:16:11

фреймворке дымные минг основы языков

00:16:14

программирования мобильная версткой

00:16:16

адаптация работа с cms wordpress за курс

00:16:20

делаем три проекта для вашего портфолио

00:16:22

и осваиваем все необходимые программы

00:16:25

которые потребуются в будущем вам для

00:16:28

работы я являюсь преподавателем на этом

00:16:30

курсе то есть все уроки записаны

00:16:32

непосредственно мной и виду обучающие

00:16:35

вебинары во время обучения

00:16:38

за курс мы пройдем довольно большую

00:16:41

программу у нас есть версия курса

00:16:44

стандартно 8 недель и более расширенная

00:16:47

версия на 12 недель сделаем как я уже

00:16:49

сказал три проекта для портфолио это

00:16:52

многостраничный сайт форекс travel это

00:16:54

лэндинг unit и это ваш личный сайт

00:16:57

портфолио который вы сделаете на премиум

00:17:00

программе курс проходит полностью онлайн

00:17:03

с проверкой домашних работ кураторами с

00:17:07

ответами на вопросы в чате со звонами с

00:17:09

кураторами и преподавателями для того

00:17:11

чтобы разобраться в вопросах которые

00:17:13

будут возникать с вебинарами в конце

00:17:16

каждой недели

00:17:17

данный курс стартует уже совсем скоро

00:17:21

поэтому можно перейти по ссылочке в

00:17:24

описании посмотреть программу

00:17:26

ознакомиться с форматом участие с

00:17:28

условиями и присоединиться к обучению

00:17:32

если есть какие то вопросы то на

00:17:34

странице курса всегда можете заполнить

00:17:36

форму для получения онлайн консультаций

00:17:39

и мы проконсультируем вас лично

00:17:42

подскажем что стоит на что стоит

00:17:46

обратить внимание какой путь обучение

00:17:48

вам выбрать если вы хотите стартовать

00:17:50

войти сфере хотите стартовать на

00:17:52

фрилансе и вам интересно разработка

00:17:55

сайтов и веб-разработка всем спасибо за

00:17:57

внимание ну а мы возвращаемся к верстке

00:17:59

проект

00:18:00

[музыка]

00:18:02

переходим в bass в базу и вот здесь вот

00:18:06

мы уже с вами напишем базовые стили

00:18:07

нашей странице то есть мы можем body

00:18:09

обратиться можем указать семейства

00:18:13

шрифта который у нас будет на странице

00:18:14

его размер толщину и так далее но и для

00:18:17

этого я перехожу в фильму скажу что

00:18:20

данный макет вы также сможете скачать по

00:18:22

ссылкам в описании вот давайте перейдём

00:18:25

сюда и посмотрим какие же шрифты здесь

00:18:28

используется для того чтобы быстро

00:18:29

понять какие здесь шрифты

00:18:31

ну можно их про кликать вручную можно

00:18:34

просто включить плагин фонд фаски он все

00:18:37

покажет если мы хотим про кликать то в

00:18:39

правой панели мы выбираем дизайн и далее

00:18:42

вот элементом стрелочка зажимая control

00:18:45

зажимаем контрл я могу окликать сразу на

00:18:48

нужный элемент то есть если я буду по

00:18:50

другому кликать на элементы будет

00:18:52

сначала выбираться группа да потом

00:18:55

двойной клик там еще одна группа

00:18:57

подгруппа в данном случае компонент и

00:18:59

уже потом какой-то элемент через control

00:19:02

клики сразу могу дотягиваться до нужного

00:19:04

мне текста в общем можно вот так все

00:19:06

прокликивать и смотреть вот здесь в

00:19:08

правой панели на вкладке дизайн мы видим

00:19:11

текст вот видим джорджей болт 65 мы

00:19:14

видим лотар ягуар микст ну и так далее

00:19:16

то есть можем смотреть все шрифты либо в

00:19:19

фильме я запущу плагин который

00:19:21

называется фонд фаски вот он его можно

00:19:24

установить фильму и он сразу выдаст вам

00:19:26

список тех шрифтов которые вас

00:19:28

используется здесь у нас используются

00:19:30

следующие шрифты лотта ригер сами

00:19:33

болтами идем и джорджа болт и регион

00:19:36

шрифт платил нестандартные его нужно

00:19:39

подключать как web-шрифт шрифт georgia

00:19:41

считается стандартным то есть он есть по

00:19:43

умолчанию в windows но в других

00:19:46

операционных системах его нет но есть

00:19:48

какие-то аналоги очень близкие по замене

00:19:51

вот но если мы

00:19:54

верстаем да то есть вот если я верста

00:19:56

этот макет дизайнер его нарисовал

00:19:58

продумал здесь именно такие шрифты то но

00:20:01

я как верстальщик мы просто но я просто

00:20:03

обязан сделать так чтобы был именно этот

00:20:06

шрифт у пользователя да вот при

00:20:07

максимально постараться поэтому джорджу

00:20:10

вон тоже подключим как web-шрифт вот

00:20:13

таким вот образом отлично теперь давайте

00:20:16

перейдем с вами

00:20:18

shift и зайдем с вами в фонд google.com

00:20:23

ну вот но да отсюда я не буду ничего

00:20:26

скачивать я просто сюда зашел показать

00:20:28

что здесь есть шрифт плата но он нам не

00:20:30

подходит

00:20:32

или подходит давайте посмотрим сын light

00:20:36

regular болт да сын light regular и болт

00:20:40

но то что у нас используется у нас есть

00:20:43

7 и болт и у нас есть медиум то есть в

00:20:46

дизайне и то есть но google фон с нету

00:20:49

данных начертаний да вот именно поэтому

00:20:52

нам этот вариант не подойдет и мы будем

00:20:55

искать web-шрифт для того чтобы найти

00:20:58

web-шрифт я просто захожу в яндекс спешу

00:21:01

латы в фонд и есть вот на данный момент

00:21:04

такой сайт как в фонд . про откуда все

00:21:07

это можно замечательно скачать вот

00:21:09

переходим сюда находим здесь шериф плата

00:21:12

смотрим что здесь есть давайте вот

00:21:15

показывать все начертания здесь есть все

00:21:17

начертания которые нам нужны есть medium

00:21:20

есть сами ball то есть да все отлично

00:21:22

вот нажимаем скачать латы zip далее он

00:21:26

предлагает нам сделать донат мы можем

00:21:28

кликнуть вот здесь вот не хочу мне

00:21:29

трудно и скачать лотта zip и таким

00:21:33

образом данный архив у нас будет скачен

00:21:36

плюс у нас есть еще shift джорджа и на

00:21:39

этом сайте тоже можно его скачать

00:21:41

поэтому давайте

00:21:43

перейдем обратно в яндекс и напишем

00:21:49

джорджи веб фонд также находим тоже нам

00:21:53

phones . про переходим вот джорджия

00:21:56

пожалуйста тоже клик и скачать джорджа

00:21:58

кликаем ссылочку что мы не хотим

00:22:01

донатить

00:22:02

[музыка]

00:22:03

вот и скачиваем но в целом конечно

00:22:06

задавать их можно проект хороший вот да

00:22:09

но и на каждом же скачивание шрифта

00:22:11

отличным нужный шрифт и мы скачали

00:22:14

давайте теперь добавим их в проект то

00:22:17

есть вот у меня появился архив джорджия

00:22:19

и лату

00:22:21

соответственно я открываю папку с

00:22:24

проектом и

00:22:26

в эту папку мы

00:22:29

их разархивируем давайте зайдем с с в

00:22:32

папки css и создам папку fonts потому

00:22:35

что наши шрифт и они в основном через

00:22:38

тесту как в основном это часть все сада

00:22:41

не часть css но сердце своих подключаем

00:22:43

поэтому разумные сюда поместить вот

00:22:46

теперь берем папку джорджа так тут у нас

00:22:49

сразу идет сразу файлы влад а то же они

00:22:53

сразу идут поэтому принципе могу эти две

00:22:55

папки сюда закинуть и

00:22:58

разархивировать их

00:23:00

в текущей папки

00:23:05

так немножко неправильно сделал

00:23:13

удалю и

00:23:15

разархивируем каждый архив в отдельную

00:23:18

папку

00:23:19

вот таким вот образом отлично все архивы

00:23:22

не нужны есть две папки джорджа и лотта

00:23:25

и оставлю их название так как есть и

00:23:29

в них мы наблюдаем нужные нам файлы

00:23:33

далее что я предлагаю сделать а теперь

00:23:36

их нужно подключить до

00:23:38

но мы будем подключать не все начертания

00:23:42

да потому что смотрите в лоток примеру у

00:23:44

нас довольно много файлов то есть вот

00:23:46

реально все начертание этого шрифта и

00:23:49

если мы это все подключим у нас с вами

00:23:52

получится ни много ни мало 28 мегабайт

00:23:56

до довольно много вот поэтому нам

00:24:00

конечно такое не надо мы подключим

00:24:02

только те начертания которые нам нужны

00:24:04

вот поэтому что я сделал я скопирую

00:24:08

например старше css но так можно

00:24:10

скопировать чисто для себя на случай

00:24:12

если вдруг вам кода начертания

00:24:13

понадобится если вы делаете какой-то

00:24:15

большой проект и и да вдруг это

00:24:17

начертание будет нужна можно сделать

00:24:20

такой ставил щит сейчас его покажу вот

00:24:24

такой достал щит бы capsis с то есть для

00:24:26

лотта и для джорджа зачем я это делаю

00:24:29

потому что я потом из того файла который

00:24:31

мы будем подключать я удалю все вот я

00:24:34

удалю все начертания кроме тех которые

00:24:36

нам нужны вот можно это сделать в

00:24:39

принципе как вы видите не трудно это все

00:24:41

скачать заново вот поэтому-то тоже можно

00:24:44

не заморачиваться и так переходим в

00:24:46

яндексе чтим л и подключаем все

00:24:49

необходимые шрифты

00:24:50

пишем tek link нажимаем тab . flash

00:24:54

выбираем папку css фонд хоть и джорджа и

00:24:58

находим здесь файл style.css

00:25:01

копирую данную строчку

00:25:04

частью стираю и далее подключаюсь с

00:25:07

phones лотта старше css отлично

00:25:10

подключили теперь откроем стиле шрифта

00:25:14

джорджия de ses файл где происходит

00:25:18

подключение

00:25:19

посмотрим какие начертания нам нужны нам

00:25:22

необходимо джорджа болт и regular то

00:25:24

есть все остальное нам не нужно поэтому

00:25:26

вот например bold italic его просто

00:25:28

удаляю далее просто italic тоже удаляю

00:25:31

джорджа болт нам нужен и регион вот у

00:25:35

нас есть болт у нас есть обычный то есть

00:25:38

подразумевается регион здесь не указана

00:25:40

фонд weight normal фон style normal все

00:25:43

больше здесь ничего нет есть таким

00:25:44

образом мы оставили на подключение

00:25:47

только то что нам необходимо

00:25:51

отлично и

00:25:53

так же мы поступаем и с шифтом лотта

00:25:56

control клик шрифт лассо

00:26:00

теперь

00:26:01

смотрим какие здесь начертания регион

00:26:05

medium и эту по нарастающей потом сами

00:26:08

болт и все регион медиум и сами болт 3

00:26:14

начертания вот оплата здесь очень много

00:26:17

начертаний поэтому я оставлю только то

00:26:20

что нам нужно hairline удаляем heavy

00:26:23

удаляем heavy толик удаляем

00:26:26

регион оставляем блик удаляю сэмми bold

00:26:32

italic виталик нам не нужен black italic тоже

00:26:35

нет опять italic medium italic сын

00:26:40

italic просто сын тоже не нужен медиа

00:26:43

нам нужен то есть medium feeder medium и

00:26:46

сами ball так и толик удаляем вот просто

00:26:49

сами болт фон стал normal его мы

00:26:51

оставляем все все что дальше я кручу и

00:26:54

удаляю потому что у нас

00:26:56

в дизайне только три начертания которые

00:26:59

мы уже подключили регион medium и сами

00:27:03

болт сверимся да это так отлично кислоты

00:27:08

мы тоже подключили здорово

00:27:09

теперь давайте зададим для body she вот

00:27:14

в общем-то у нас весь текст вот просто

00:27:16

обычный текст набран нам с помощью лотта

00:27:19

а посмотрим вот здесь здесь здесь в

00:27:21

кнопках там и так далее поэтому это

00:27:24

будет шрифт который

00:27:26

базовый и то есть он

00:27:29

используется на странице вот в теге body

00:27:31

он задан как основной собственно

00:27:33

копировать font-family лотта перехожу в

00:27:37

давайте здесь закроем перехожу в bass и

00:27:40

в боди укажу font-family лотта напишу

00:27:43

запятую и добавлю sans-serif то есть

00:27:46

семейства без засечек на всякий случай

00:27:49

вдруг по каким-то причинам файл не

00:27:51

подгрузится со шрифтом чтобы send serif

00:27:54

тогда был чтобы был тоже прямой шрифт

00:27:56

отличным далее что мы еще добавим в боди

00:27:59

для боди у нас еще будет фонд в 400 то

00:28:04

есть по молчанию у нас шрифт без толщины

00:28:07

то есть но как бы обычный и размер

00:28:10

текста у нас 20 пикселей то есть вот

00:28:12

если сюда кликну мы видим 20 дальше вот

00:28:16

здесь вот просто вот просто обычный

00:28:17

текст да не заголовки не навигация а вот

00:28:21

просто текст как он есть на странице в

00:28:22

основном это 20 пикселей вот поэтому

00:28:24

можно сразу указать фон сайт 20 для боди

00:28:28

чтобы потом для каждого элемента

00:28:30

постоянно это не дублировать это есть в

00:28:32

базе по умолчанию это 20 отличным

00:28:36

сделали далее у нас есть еще шире

00:28:39

джорджия но мы к нему обратимся потом

00:28:41

вот когда мы будем верстать заголовки на

00:28:44

и нам нужно будет применить этот шрифт

00:28:47

тогда мы обратимся посмотрим какое у

00:28:49

него фонд млн тонн просто джорджия тогда

00:28:51

используем

00:28:54

отлично теперь переходим к базе и чтобы

00:28:59

в базе я бы еще добавил давайте добавим

00:29:02

такие utility то есть утилитарные классы

00:29:04

которые полезны что-то мы будем во время

00:29:07

разработки использует что то у нас

00:29:09

останется в макете есть такой класс как

00:29:11

но он который просто будет делать

00:29:13

дисплей новым и импорта чтобы его нельзя

00:29:15

было перебить вот чтобы у него приоритет

00:29:18

был выше и вижу алехиным что такое

00:29:20

visually hidden он делает элемент

00:29:21

скрытым на странице то есть элемент

00:29:24

по-прежнему остается в разметке его

00:29:27

по-прежнему считывают различные

00:29:29

устройства

00:29:31

которые screen лидеры до устройства

00:29:35

которые обеспечивают доступность сайтов

00:29:40

для людей с ограниченными возможностями

00:29:41

там и так далее вот то есть поисковые

00:29:44

системы также увидят этот т.к. этот

00:29:46

текст как будто бы он есть но мы его

00:29:48

визуально скрываем вот нам это в

00:29:50

дальнейшем пригодится и

00:29:52

далее давайте еще такие вот базовые

00:29:56

стили grid ну то есть сетка но это

00:29:59

имеется ввиду не смысле css grid а в

00:30:02

смысле элементы сетки на странице вот и

00:30:05

здесь мы уже немножко подходим с вами

00:30:06

немножко начинаем подходить к верстке

00:30:09

вот и первым делом давайте определим

00:30:11

здесь ширину контейнеры то есть мы видим

00:30:13

что наш контент на вот например в

00:30:15

заголовка то есть вот навигации если мы

00:30:17

посмотрим вот контент да и у нее есть

00:30:20

отступ и слева и справа но это не

00:30:23

отступы слева и справа это просто он

00:30:24

находится внутри контейнера есть такое

00:30:26

понятие горский как контейнер который

00:30:28

имеет ограниченную ширину располагается

00:30:30

по центру вот и мы видим ширина 1369 но

00:30:34

получается 1370 если мы практикуем

00:30:37

дальше другие элементы вот например

00:30:38

здесь в этой секции но тут уже 1413 но

00:30:42

обратите внимание вот мы видим на

00:30:43

неаккуратно выбралась на в данном случае

00:30:46

тут лучше выбрать вот например да видим

00:30:51

1391

00:30:52

вот то есть тут получится контейнер

00:30:55

побольше но

00:30:56

давайте выберем первую вторую колонку и

00:31:01

как-то я хочу выбрать

00:31:04

хочу выбрать аккуратно вот так вот вот

00:31:08

выбиру группу 29 на вот как оно идет

00:31:11

хоть этот хоть этот блок побольше

00:31:13

давайте вот так группа 29 и 1 и 2 вот

00:31:17

1368 то есть тоже 1370 да увидим тут

00:31:21

хотя бы тут хоть текст немножко выходит

00:31:23

за пределы картинки но здесь например он

00:31:25

не сильно выходит тут он почти по

00:31:27

картинке то есть иногда в дизайне тоже

00:31:29

бывают какие-то вот такие нюансы моменты

00:31:31

когда дизайнер ну не совсем что-то

00:31:33

аккуратно сделал да как здесь мы видим

00:31:36

текст и

00:31:38

вот только что было видно уже не видно

00:31:41

как ты кликал было видно что что текст

00:31:46

вот что он идет на но чуть левее чем

00:31:49

картинка хотя здесь вот все сделано

00:31:52

аккуратно мы видим они идут по одной

00:31:54

линии и здесь по одной то есть вот такие

00:31:56

вот артефакты в дизайне бывают до

00:31:58

дизайнеры тоже люди не всегда прям все

00:32:01

идеально выстраивают но мы должны это

00:32:03

понимать видите фиксить уже по ходу вот

00:32:06

то есть это было к чему к тому что

00:32:08

размер вот этого контейнера вот

00:32:10

следующего нашего вот он тоже 368 то

00:32:13

есть тоже 370 пикселя у нас будет вот то

00:32:17

есть это наш контейнер на страниц

00:32:19

который

00:32:21

оборачивает контент вот поэтому давайте

00:32:23

пропишем стиле для контейнера .

00:32:25

контейнер и

00:32:27

укажем здесь следующие значения мы с

00:32:30

вами будем делать адаптив но это будет

00:32:33

следующим этапом то есть я обычно всегда

00:32:36

сначала верста your desktop потом

00:32:39

перехожу к адаптеру вот поэтому сейчас в

00:32:43

данном случае мы для контейнера задаем

00:32:44

фиксированную ширину

00:32:46

тысячи 400 пикселей почему 1400 но

00:32:49

смотрите мы с вами определили что он

00:32:51

1370 но у контейнера у нас будут поля по

00:32:56

15 пикселей чтобы контент не прилегал к

00:32:58

краям экрана то есть когда вот экран

00:33:01

максимально тоже размера 1370 да и

00:33:06

контент еще 370 он будет прилегать к

00:33:08

краям это не будь это некрасиво это

00:33:10

плохо поэтому у нас будет по 1 год 15 и

00:33:13

padding райт 15 отступы слева справа по

00:33:15

15 соответственно для контента уже

00:33:18

меньше места он должен быть 1370 поэтому

00:33:21

мы увеличиваем ширину на 30 пикселей

00:33:23

получаем 1400 вот и естественно марджан

00:33:27

лифта утаим arjan right out у

00:33:29

выстраиваем контейнер по центру отличным

00:33:33

это сделали такие пока базовые стили для

00:33:36

контейнера прописали ну и теперь уже

00:33:38

точно можно перейти к верстке и начинаем

00:33:41

мы с вами

00:33:42

свертки навигации верху шапки к слову

00:33:46

также замечу до что по ходу работы

00:33:48

возможно у нас какой-то контент будет

00:33:50

занимать больше места чем

00:33:53

стандартный контейнер да то есть мы с

00:33:55

вами посмотрели что контент верху вот в

00:33:59

этой секции на 1370 но например в секции

00:34:03

про секс с stories мы видим ширина 1500

00:34:06

вот ничего страшного мы создадим

00:34:09

дополнительный класс контейнер white то

00:34:11

есть такая широкая версия контейнера

00:34:13

которая будет больше по размерам вот еще

00:34:16

возможно да ну встречается такая версия

00:34:20

как контейнер fluid то есть вот тут

00:34:22

strappy он есть и в других фреймворков

00:34:24

то есть контейнер который идет просто на

00:34:26

сто процентов всего экрана или секции

00:34:28

где он находится да это опять же к там

00:34:31

где у мужчин но в нашем случае это

00:34:32

всегда 1370 и только лишь в одном блоке

00:34:35

у нас контейнер вот действительно чуть

00:34:37

больше тут будет контейнер white окей

00:34:39

ладно переходим теперь к навигации верху

00:34:42

вот оно то есть навигация она же шапка у

00:34:45

нас вот оливия

00:34:47

логотип название и кнопки

00:34:50

[музыка]

00:34:53

в общем что мы делаем давайте напишем

00:34:55

стартовую разметку для этой секции

00:34:57

переходим в боге и в body я напишу

00:35:01

следующее следующее теги пишу так хедер

00:35:06

нажимают об разворачиваю его неделя

00:35:08

поспешил федор . хедер то есть и

00:35:11

стилизуем все по классам это хорошая

00:35:13

практика очень удобно и

00:35:15

все стили всегда делаем по классам да и

00:35:19

тогда мы можем любой класс повесить на

00:35:21

любой так и наш стиль сработает а если

00:35:23

мы стилизуем по тегу там по ходу руда и

00:35:25

так далее то везде где у нас будет этот

00:35:28

тег потянутся эти стили который когда-то

00:35:30

мы где-то к нему написали вот поэтому

00:35:32

это непрактично создаем хедер с классом

00:35:36

хедер внутреннего создаем контейнер

00:35:40

ну вот внутри контейнера создаем ряд для

00:35:44

того чтобы выровнять элементы в ряд и

00:35:47

наполним элементами здесь давайте я

00:35:49

наверно вернусь к макету немножко до

00:35:51

сделаем такого пояснительную заметку то

00:35:53

есть что и как у нас будет происходить

00:35:55

вот мы с вами видим дизайн я нажму

00:35:58

printscreen и

00:35:59

порисую здесь немножко такие

00:36:02

прямоугольники для того чтобы лучше мы с

00:36:06

вами определились что у нас как будет

00:36:08

расположен значит мы сначала создаем с

00:36:11

вами т.к. хедер это вот такой вот те

00:36:14

который содержит себе всю эту секцию вот

00:36:16

первый далее внутреннего мы определяем

00:36:19

контейнер давайте синим его нарисую вот

00:36:21

он контейнер то есть у контейнера у

00:36:24

федора своя задача обозначить что это

00:36:26

хедер возможно там дать белый фон дать

00:36:29

рамку снизу вот мы видим там есть такая

00:36:31

полоска дать рамку снизу далее контейнер

00:36:33

у контейнера своя задача ограничить

00:36:36

ширину

00:36:37

выстроить по центру далее внутри

00:36:40

контейнера нам надо выстроить элементы в

00:36:42

один ряд в принципе мы могли бы повесить

00:36:44

вот этот flex там например на контейнер

00:36:48

но это все равно разной ответственность

00:36:50

лучше это разграничивать и стоит это

00:36:52

разграничивать потому что где-то в

00:36:54

контейнере там нужен flex в ряд где-то в

00:36:57

колонку да все это по разному поэтому

00:36:59

здесь принцип такой раздельной

00:37:01

ответственности контейнер он играет

00:37:03

только свою роль нужно внутри нам

00:37:05

выстроить ряд давайте я опять возьму

00:37:07

красный цвет и мы делаем еще один div

00:37:10

который будет выстраивать ряд пав лексу

00:37:13

назовем его хедер ролл вот далее внутри

00:37:17

этого ряда мы уже будем помещать ячейки

00:37:20

для элементов нашей шапке то есть первое

00:37:23

это у нас логотип соответственно давайте

00:37:26

например зеленым нарисую да вот пример

00:37:30

вот так первое у нас будет ячейка под

00:37:32

логотип ней будет logo потом будет див

00:37:35

под навигацию это будет текстов и там

00:37:39

будет ю л ли ссылки

00:37:41

список для навигации и будет еще один

00:37:44

вот такой вот блок кода логин кнопки он

00:37:48

будет расположен справа то есть вот так

00:37:50

вот мы с вами сделаем но уже до внутри

00:37:52

здесь будет картинка с логотипом здесь

00:37:54

ел ли ссылки

00:37:56

но здесь будет одна ссылка и одна кнопка

00:37:58

вот акт реализуем

00:38:01

что же переходим и теперь уже напишем

00:38:04

разметку на когда обозначили что и как

00:38:07

будет происходить создаю здесь ряд

00:38:09

хедера дефис ролл вот в данном уроке я

00:38:15

не буду использовать bay wing для того

00:38:17

чтобы но не усложнять его то то есть

00:38:20

такой у нас лайтовый простой вариант

00:38:23

пока бездомные минга я считаю что

00:38:25

сначала стоит научиться верстки вообще

00:38:28

понять вот что как зачем абонемент он

00:38:31

просто будет еще ряд определенных

00:38:33

понятий правил вот это методология да

00:38:36

где блог где элемент как это правильно

00:38:39

писать я знаю что новички часто вы там

00:38:41

путаются поэтому в этом макете мы

00:38:43

опустим дам нейминг бездымный минга

00:38:46

можно тоже сделать довольно понятные

00:38:48

класс и вот что мы собственно и увидим

00:38:51

этом макете есть хэдер есть контейнер

00:38:53

есть хода ролл и создаем далее внутри

00:38:55

блоки значит то какие у меня будут блоки

00:38:58

меня будет блок logo вот опять же да я

00:39:01

могу сделать вот так типа хедер logo

00:39:04

давайте так и сделаем то есть логотип

00:39:06

который у нас лежит в хедере

00:39:09

вот далее у

00:39:11

нас будет идти следующий блок с

00:39:14

навигацией сделаем вот так хэдер дефис

00:39:17

на

00:39:18

точнее я пишу . хедер на вы нажимают up

00:39:22

and все это у нас так разворачивает и

00:39:25

будет блок для логина . хедер логин

00:39:30

отлично давайте здесь напишем вот так

00:39:32

например logo на и

00:39:36

лагин естественному потом поместим сюда

00:39:38

то что необходимо но пока поработаем вот

00:39:40

с тем что есть у нас получились с вами

00:39:43

вот такие классы давайте это сейчас

00:39:44

завершаем чтобы увидеть результаты потом

00:39:46

пойдем уже дальше вглубь следующей

00:39:48

секции мы будем делать естественно

00:39:50

быстрее так как уже разгонимся в этой

00:39:53

вот да ну то есть я просто поясняю по

00:39:57

шагам что и как у нас происходит но

00:39:58

когда мы второй раз будем делать

00:40:00

контейнеры ряд естественно мы так на это

00:40:02

отвлекаться не будем и так все сессии да

00:40:05

как я говорил то есть я буду делать вот

00:40:06

прям отдельные

00:40:08

отдельные файлы под каждую секцию от

00:40:12

поэтому давайте в папке с с

00:40:14

я создам папку blogs я думаю так будет

00:40:18

удобно и в папке blogs уже буду

00:40:20

создавать файлы хода css вот опять же

00:40:24

это чисто такая учебная тема чтобы мы с

00:40:26

вами вот распределяли код до но по факту

00:40:29

потом уже когда вообще собирается

00:40:31

полностью готовый сайт весь css код

00:40:34

собирается в один файл еще имени

00:40:35

фиксируется чтобы это вообще там меньше

00:40:37

место занимала но для текущего учебного

00:40:41

урока нам это не нужно нам наоборот сами

00:40:44

важно удобство для того чтобы мы

00:40:45

понимали что где у нас написано они

00:40:48

прыгали по одному файлу на тысячу

00:40:49

строчек вот поэтому создали file header

00:40:52

css единственное нужно его подключить

00:40:54

на здесь вот можно кстати такие

00:40:56

комментарии сделать что это у нас типа

00:40:58

розетты здесь у нас font шрифт и и перед

00:41:03

шрифтами и сделала так blocks экшн то

00:41:06

есть блоки секции не суть пишем tickling

00:41:09

вечеров . слышь css blogs feed rss вот

00:41:14

подключили файл

00:41:15

далее

00:41:17

переносим все эти классы в ходе css я то

00:41:21

есть вы можете просто вот так вот так

00:41:22

переносить там классах и др . хоть раз и

00:41:25

написали да я буду использовать плагин

00:41:28

есть я счас трактор если что инструкция

00:41:30

по нему есть на канале для этого я

00:41:32

просто вот так выделяю все это нажимаю

00:41:34

kontrol shift x он мне это быстро

00:41:36

копирует здесь control v и мы видим до

00:41:39

что все необходимые стиле я сюда получил

00:41:42

вот контейнер у нас записан с вами в

00:41:44

базе поэтому я его удаляю он у нас уже

00:41:46

описаны отсюда его убираю все остальное

00:41:49

мы сейчас с вами стилизуем и так по ходу

00:41:51

давайте посмотрим что ж у него какие

00:41:54

здесь значения значит хедер будет иметь

00:41:57

по денги отступы сверху и снизу то есть

00:41:59

мы видим контент не прилегает в краям

00:42:01

есть некие отступ и мы выбираем самый

00:42:03

большой элемент в нашем случае это вот

00:42:06

кнопка самый высокий смотрим отступ

00:42:08

вверх и вниз по 17 пикселя отлично

00:42:11

значит мы с вами делаем у федора по 1

00:42:14

таб 17

00:42:15

ipv17 по 1 ботом 17 здорово далее у

00:42:19

федора также есть рамка то есть вот вы

00:42:22

видите такая серая рамка нарисована

00:42:23

давайте опять control обратный слеш

00:42:26

включая все панели вот он б-г а вот он

00:42:30

де veider есть в слоях и

00:42:32

таракан к тогда но моё видео не сильно

00:42:35

перекрывает вот есть панель строк то

00:42:38

есть

00:42:39

нарисованная обводка и мы видим толщина

00:42:43

1 пиксель цвет в общем пропишем данный

00:42:48

border пропишем вот сюда

00:42:50

border ботом один пиксель solid

00:42:55

решетка и данный цвет перейдем проверим

00:42:59

так я даже ещё не открывал наш сайт

00:43:03

давайте зайдем в яндекс еще мал правый

00:43:06

клик внутрь yandex xml либо по файлу

00:43:08

выбираем open везла их сервер это плагин

00:43:12

который должен быть установлен visual

00:43:13

studio код если что урок по вес коду

00:43:16

тоже есть на канале вот что мы с вами

00:43:18

получили да мы получили шапку давайте

00:43:20

нажмем f12 то есть инструменты панели

00:43:23

разработчика давайте вот так так я буду

00:43:26

закрывать я по-любому буду закрывать

00:43:29

да только если водка вот такой

00:43:32

нестандартный вариант но тут самому даже

00:43:34

неудобно

00:43:35

вот поэтому поэтому я свой видео делаю

00:43:40

поменьше то есть я здесь все еще с вами

00:43:42

но вот так чтобы мы наблюдали стиля вот

00:43:46

мы видим хедер мы видим по денги сверху

00:43:48

и снизу и border ботан да то есть вот

00:43:50

отлично он есть так по ширине да у нас

00:43:54

контейнер здесь дает ширину 1400

00:43:58

[музыка]

00:44:00

правильно от 1000

00:44:03

до 1370 до 1400 ну тогда вот так вот

00:44:08

правда да вот

00:44:12

короче говоря а так то да окей и

00:44:16

работаем тогда здесь

00:44:19

так как бы сделать так чтобы все было

00:44:23

видно вот так и могут сделать до выйти

00:44:25

из ситуации

00:44:28

вот так как бы мы и вида составим

00:44:33

то есть я камеру оставлю и и

00:44:36

здесь код тоже будет виден отлично вот

00:44:39

видим контейнер видим его там размеры

00:44:41

ширину вот видим хэдер то что

00:44:43

стилизовали теперь выстраиваем элементы

00:44:46

в линию то есть header ролл для которого

00:44:49

мы задаем дисплей flex чтобы элементы

00:44:51

выстроились в одну линию вот они

00:44:53

выстраиваются по умолчанию по левой

00:44:55

стороне и есть еще один момент что стоит

00:44:58

прописать то есть вот здесь у нас

00:45:00

элементы будут разные высоты но чтобы

00:45:03

они все были одинаково на одном уровне

00:45:05

красивые им стоит также сдать line ой

00:45:09

там с центр то есть вертикальное

00:45:10

выравнивание но это по поперечной оси по

00:45:13

центру вот таким образом отличным хедер

00:45:18

роу мы прописали вот так же для х даров

00:45:23

я бы сдал 6 фай контент space between то

00:45:26

есть раскидать элементы по краям первые

00:45:29

вначале последний в конце а потому что

00:45:31

логотип вначале последний элемент в

00:45:33

конце ну а вот вот этот например элемент

00:45:36

то есть здесь если отступ неравномерный

00:45:38

но его можно будет задать ну или можно

00:45:40

оставить равномерным вот нокий так

00:45:44

переходим смотрим вот что получилось ну

00:45:47

теперь собственно стилизуем дальше

00:45:50

логотип клика по логотипу это у нас вот

00:45:53

такой векторной элемент то есть мы его

00:45:55

экспортируем как svg элемент вот для

00:45:58

этого

00:45:59

я выбираю его вот выбрал слой на вкладке

00:46:03

дизайн экспорт он вас будет закрыть

00:46:06

нажимаем на плюсик здесь выбираем формат

00:46:08

svg можно на превью нажать посмотреть

00:46:11

что будет экспортирована и нажимаем

00:46:13

экспорт logo вот он спрашивает куда все

00:46:17

это экспортировать вот у меня папка

00:46:18

нашего проекта и в папку image давайте

00:46:23

назову вот-так хеда я назову просто logo

00:46:27

у нас будет еще логотип в подвале но

00:46:28

будет немножко другой назову его logo

00:46:31

так svg там по идее потянется при

00:46:34

сохранении вот logo.svg отличный

00:46:37

переходим в index.htm этому диалогу

00:46:38

пишем так имидж tab source решетка

00:46:42

точнее . слышь имидж logo.svg и здесь

00:46:46

альт напишем logo отличный логотипчик у

00:46:50

нас готов далее

00:46:52

навигация стираем nav и напишем разметку

00:46:55

под навигацию значит будет догнав на но

00:46:58

ну смотрите то есть мы как бы создаем

00:47:00

так на авто потом делаем ел ли и создаем

00:47:04

ссылку и какой-то текст ссылки вот так

00:47:07

это выглядит link вот но так как у нас с

00:47:09

вами в принципе здесь div и здесь нафта

00:47:13

это можно совместить можно сделать вот

00:47:15

так на на а то есть вот этот div с

00:47:19

классом хэдер на фон и будет на вам вот

00:47:21

то есть чтобы на одну обертку меньше

00:47:24

было

00:47:25

вот так у нас с вами это получается

00:47:27

далее вот ссылки наши навигации как это

00:47:31

будет выглядеть естественно там их стоит

00:47:34

по копировать из макета так по

00:47:38

переносить

00:47:42

kontrol ц фильме просто достаточно

00:47:44

control клик по текстовому слою kontrol

00:47:47

ц и это быстро копируется вот так и

00:47:51

вставляете отлично далее какой подход то

00:47:54

есть мы можем давать сюда дополнительные

00:47:57

классы но не дополнительные а класса то

00:47:59

есть я могу прописать сюда класс хедер

00:48:01

на блист дано лишь кидать хедер на в

00:48:04

лист ой там на ссылки дать хедер на в

00:48:08

ленка лихо дорна в рестлинг ну короче

00:48:10

говоря мы можем вешать эти

00:48:12

дополнительные классы но

00:48:14

вот как в данном случае да если это меню

00:48:17

у нас одноуровневая то здесь не будет 2

00:48:19

уровня выпадающего меню еще что то то но

00:48:22

в этом нет смысла не то чтобы нет смысла

00:48:25

а этим можно пренебречь на скажем так то

00:48:29

есть мы можем просто стилизовать там по

00:48:30

каскаду там хадер nov ю.л. ну по цепочке

00:48:34

хэдер на ли хедер на и то есть мы можем

00:48:37

просто так выбрать потому что мы знаем

00:48:39

что структура этой навигации она вот

00:48:41

такая простая одноуровневая и она не

00:48:43

будет меняться поэтому вполне себе мы

00:48:46

можем это сделать поэтому в хедере вот

00:48:49

хедер на fm и именно таким образом мы

00:48:51

поработаем переходим в разметку смотрим

00:48:54

на текст внутри холерного твой оливия

00:48:56

смотрим размер

00:48:58

2020 в принципе это стандартный у нас

00:49:01

размер medium and weight медиум то есть

00:49:03

это уже немножко другой это фонд 500 это

00:49:05

не 400 далее цвет мы видим фонд 2929 тут

00:49:09

кстати тоже интересный момент по цвету

00:49:12

текста иногда такое часто бывает что в

00:49:15

макете текст не черные а немножко другой

00:49:18

то есть вот если мы кликнем здесь на

00:49:20

текст видим 48 48 тут 42 42 42 42 42 42

00:49:26

он не чёрный да он такой 48 48 ну что

00:49:31

тут дизайнер там 42 там 48 дело хотя по

00:49:34

моему

00:49:35

разницы не особо вот что 48 что 42 там

00:49:40

это даже

00:49:41

в пределах особо

00:49:44

не ощущается в общем идея в чем мы

00:49:48

выбираем базовый цвет текста на странице

00:49:51

вот именно текста на не заголовков не

00:49:53

навигации текста вот 42 я его копирую и

00:49:56

задаем его в базу то есть вот bss где мы

00:50:00

в боди прописывали свойства тут мы пишем

00:50:03

color чтобы потом это опять же по десять

00:50:05

раз не указывать просто указали все

00:50:07

базовые текст вот такой 4240

00:50:10

но здесь навигации мы видим что все-таки

00:50:13

другой 2929 поэтому это нужно взять то

00:50:17

есть это уже но он прям сильно

00:50:18

отличается на года поэтому тут лучше до

00:50:21

такой момент уж если вас цветами не

00:50:23

очень лучше вот прям следовать по макету

00:50:25

то есть да не не делать такое что вот

00:50:28

там плюс минус черная везде бахнул

00:50:31

черный нет так не надо вот лучше

00:50:33

все-таки смотреть а в общем я скопировал

00:50:35

тот цвет который у нас навигации вот для

00:50:37

фидерного и задаю его сюда color вот 29

00:50:43

29 29 далее что еще мы из навигации сюда

00:50:48

можем вытянуть но значит смотрите сам

00:50:51

ю.л. мы у него уже отменили вообще все

00:50:54

что возможно да то есть если

00:50:56

мы посмотрим раскроем хадер на вот ю.л.

00:51:00

у него все отменены все что возможно

00:51:01

единственная нам нужно элементы

00:51:03

внутреннего выстроить в линию то есть

00:51:05

опять же flex боксом мы дадим ему

00:51:06

дисплее flex и или жки станут в одну

00:51:08

линию поэтому давайте так и поступим для

00:51:11

этого

00:51:12

хедер на ввел вот так выбираю хадер на

00:51:16

пробел ел и делают дисплее flex вот

00:51:19

теперь элементы выстроятся в одну линию

00:51:24

далее между ними должен быть отступ

00:51:27

некие до чтобы все это было красиво

00:51:29

аккуратно смотрим отступ между ними вот

00:51:32

видим

00:51:33

7270 172 ну короче он немножко разный в

00:51:37

целом в данном случае округляем до 70

00:51:42

даем отступ и как это можно сделать

00:51:44

можем сказать хедер на вёл ли да ну или

00:51:48

просто хадыр навле то есть это тоже лишь

00:51:50

к будет вот тут других leshik нет можем

00:51:53

задать марджи нравится 70 но это будет

00:51:56

для всех элементов и для последнего но

00:52:00

последнего уступа справа быть не должно

00:52:02

то есть вот лишь к 1 остов право 2 3 но

00:52:06

последний он лишь не то есть он мешает

00:52:08

то есть он задает лишь не отступаем но

00:52:11

его тут быть не должно поэтому его нужно

00:52:13

отменить можно сразу его не задавать

00:52:16

можно отменять то есть можно отменять

00:52:19

написать вот так хедер на ли

00:52:22

: last child вот такое один из вариантов

00:52:27

указать марджан райт 0 то есть мы

00:52:29

выбираем последнюю лишку говорим о стук

00:52:31

справа ноль перейдем проверим да вот

00:52:33

уступа справа не можно вот такой вариант

00:52:35

сделать можно в тот момент когда мы

00:52:38

задаем написать здесь : нот и лаз child

00:52:43

то есть как бы мы задаем для всех

00:52:45

элементов но кроме глаз chile да и тогда

00:52:48

нам не придётся писать вот

00:52:50

дополнительный этот селектор palace чаду

00:52:51

то есть мы сразу его сюда скомбинировали

00:52:54

для всех кроме последнего задали устав

00:52:57

право действительно во всех кроме

00:52:58

последнего можно вот так вот делать либо

00:53:01

можно вообще сделать вот так ли плюс

00:53:05

ли то есть мы выбираем лишку а потом

00:53:08

следующую за ней то есть которая справа

00:53:11

и делаем марджан лифт 70 то есть у

00:53:15

второй третий четвертый пятый будет

00:53:18

доступ влево до от предыдущей но у

00:53:20

первое и не будет потому что у первой

00:53:22

нет у соседа слева можно написать вот

00:53:24

такую комбинацию

00:53:25

вот она даже чище и аккуратней на мой

00:53:29

взгляд чем not love child вот и смотрите

00:53:33

как это работает у 1 вот ступа нет у

00:53:35

второй отступ слева у 3 4 у каждой

00:53:38

последующей у которой есть сосед слева

00:53:40

будет доступ у первого уступа не будет

00:53:43

вот таким вот образом мы это сделали

00:53:47

отлично здесь кстати можно тоже подумать

00:53:51

как ссылки будут выглядеть при наведении

00:53:53

да ну чтобы как то они реагировали можно

00:53:55

менять их цвет я вот кликну по заголовку

00:53:58

чтобы скопировать его зеленый цвет это

00:54:00

походу такой брендовый цвет этого макета

00:54:02

и

00:54:03

мы укажем его для ссылок то есть мы

00:54:07

пропишем с вами давайте то лишнее уберу

00:54:10

я пропишу ходор ходор на пробел и этой

00:54:15

ссылка которая лежит внутри х дарнов и

00:54:17

когда оно будет в ховере power to call

00:54:22

or ее будет меняться на зеленый цвет

00:54:25

опять же тоже переменные мы здесь

00:54:27

использовать не будем я имею ввиду с с

00:54:30

переменной потому что это у нас такое

00:54:31

урок начального уровня чтобы на них не

00:54:33

отвлекаться да и тут принципе макет не

00:54:36

такой большой чтобы вот прям все на

00:54:38

переменной выводить поэтому будем делать

00:54:41

так вот паха беру цвет будет меняться и

00:54:44

чтобы он плавно менялся то есть сейчас

00:54:46

он будет меняться так довольно резко то

00:54:49

есть новым то мы наводим 1 раз

00:54:52

так мне бы сбросить это выделение вот

00:54:56

надпись резко меняется может сделать

00:54:59

чтобы это было плавнее это будет чуть

00:55:01

красивее для этого мне нужно изначально

00:55:04

выбрать ссылки и

00:55:06

сказать что не будет транзишен то есть у

00:55:09

них будет плавный переход для цвета но

00:55:12

для свойства color за две десятые

00:55:14

секунды

00:55:15

из временная функция будет например и

00:55:18

низ такое плавное нелинейная вот отлично

00:55:22

теперь так приятненько меняют свой цвет

00:55:25

здорово теперь сделаем кнопки

00:55:27

логина мы видим от сайн ин и stars trial

00:55:31

давайте сразу скопирую текстовки перейду

00:55:35

в яндекс html и напишем для них

00:55:38

необходимую верстку вот он хедер логин

00:55:40

контент у нас следующий сайн ин и

00:55:44

start real вот разметки для них будут

00:55:48

следующие то есть несмотря на то что она

00:55:50

выглядит как ссылка а вторая как кнопка

00:55:53

все зависит от того какие действия не

00:55:55

совершают в принципе можно заверстать

00:55:57

ссылками большинство сайтов и найдете

00:56:00

обнаружите что для кнопок тоже ссылки

00:56:02

используется это нормально вот на ну так

00:56:04

распространено да но вообще по семантике

00:56:07

ссылка это тот элемент который нас

00:56:09

куда-то ведет он нас ведет на другую

00:56:12

страницу или он ведёт нас по якорю на

00:56:15

другую страницу или прокручивает

00:56:16

какой-то секции данной странице именно к

00:56:18

якорной ссылке

00:56:20

если мы говорим о кнопки так батон то

00:56:23

это тот т который запускает какой-то

00:56:25

механизм на странице мы нажали там modal

00:56:27

к открылась

00:56:30

наверное вот modal к открылась больше я

00:56:32

ничего для этой кнопки придумать не могу

00:56:34

да ну вот то есть в рамках данной

00:56:36

странице мы остаемся что-то начинает

00:56:38

происходить какие-то блоки скрылись

00:56:40

другие показались и так далее вот но

00:56:44

то есть даже может выглядеть как кнопка

00:56:47

но по сути может являться ссылкой скажем

00:56:49

так в нашем случае это будут обе ссылки

00:56:51

то есть пусть они нас ведут куда-то на

00:56:53

другие страницы то есть сам сайт и нас

00:56:56

куда-то ведет и start real нас куда-то

00:56:58

ведет поэтому это будут 2 2 т г л

00:57:03

вот так вот таким образом опять же если

00:57:05

грамотно написать css стили для классов

00:57:08

то потом теги можно менять и все это

00:57:10

будет тоже отлично работать

00:57:13

сделали хедер логин есть и сюда я

00:57:17

добавлю класс батон я буду использовать

00:57:20

сокращенное название аббатом то есть

00:57:22

можно полностью написать батон вообще я

00:57:25

против сокращений да и вообще не стоит

00:57:27

сокращать классы которые но непонятно

00:57:29

отчего вы их сократили то есть не надо

00:57:32

писать l вместо logo не надо писать эйч

00:57:35

вместо хэдер это плохое сокращение вот

00:57:39

но то что касается btn это уже настолько

00:57:41

распространенная во многих фреймворк ах

00:57:44

ceкc с фреймворков используется btn как

00:57:46

батон вот поэтому это такое

00:57:49

распространенное сокращение его

00:57:52

нормально использовать отлично прописали

00:57:54

с вами хэдер логин теперь давайте

00:57:56

стилизуем то что здесь находится выбираю

00:57:58

control shift x перехожу в хедер и

00:58:01

ну вот да по сути только ходы логин на

00:58:03

батон у нас значит что у нас есть новых

00:58:07

ядер логин до тус текст внутри какой он

00:58:10

должен быть давайте посмотрим он такой

00:58:12

же как в навигации лотта медиум 20 то

00:58:16

здесь тоже хотя нет здесь регион здесь

00:58:18

лотара ягуар 20 то есть по сути это

00:58:21

стандартная стандартный текст и его даже

00:58:24

тебе никак не правлю единственное что

00:58:26

хедер логин эй ссылка до чтобы она не

00:58:29

была

00:58:30

синей хотя она не будет потому что у нас

00:58:32

все ссылки на следует свет на странице

00:58:36

цвет у нас здесь ноль ноль здесь black

00:58:39

да неожиданно

00:58:42

наверное единственный момент где у нас

00:58:44

black присутствует

00:58:47

ну чтож я тогда ну не буду отходить

00:58:50

скажем тогда от этого

00:58:52

дизайна сделаю тогда color black но так

00:58:57

вот

00:58:58

а для ссылок прописали

00:59:00

так ну что можно еще тоже сделать чтобы

00:59:03

эта ссылка по наведению какой-то

00:59:04

интересная была продублирую этот

00:59:07

селектор хедер логин эй да пишу сюда

00:59:09

hover это же вот цвет поставлю зеленый

00:59:13

который у нас был

00:59:14

itransition тоже для нее про копирую

00:59:17

хэдер логин эй транзишен color две

00:59:19

десятые секунды из

00:59:22

отлично

00:59:23

переходим и смотрим вот сайн ин здорово

00:59:26

да и теперь ставят trial мы давайте его

00:59:29

стилизуем уже как кнопку для этого

00:59:34

возвращаясь с с вот и наша кнопка значит

00:59:37

что у нас есть у кнопки у нее есть

00:59:39

зеленый фон по денги слева и справа по

00:59:42

50 и есть высота

00:59:45

50 пикселей

00:59:47

вот переходим и для кнопки делаем

00:59:50

стилизацию кстати здесь для кнопки я

00:59:52

пропишу такие стили класс батон , и

00:59:56

ссылка с классом батон потому что ссылка

00:59:59

тоже может давать какой-то свою

01:00:00

дополнительной стилизацию дано то есть

01:00:03

мы говорим что это чтобы и ссылки

01:00:05

которые для баттона мы их тоже вот

01:00:08

стилизуем

01:00:10

принудительно всеми стилями которые тут

01:00:12

есть то есть отсылок чтобы подвешивание

01:00:14

не было было переопределение вот значит

01:00:18

backgroundcolor копируем из фирмы ну вот

01:00:22

достаточно выбрать вот фил можно на

01:00:24

inspect перейти и можно вот отсюда взять

01:00:26

colors или здесь внутри прокрутить вот

01:00:29

бы grown тоже скопировать вот color copy

01:00:32

to clipboard

01:00:33

клипарт скопировано и указываем

01:00:36

backgroundcolor

01:00:38

решетка и данный цвет есть далее что еще

01:00:41

там будет ведь там будет высота хейт 51

01:00:46

pixel и pixel

01:00:47

есть отступы padding ft-1 райт по 50

01:00:51

цвет текста белую кнопке далее фон says

01:00:57

укажем 20 ну в принципе да это как бы

01:00:59

стандартный вот но я все равно укажу

01:01:01

почему до замечу то есть это не простой

01:01:04

тех все-таки кнопкой то элемент

01:01:05

интерфейса и кнопка может находиться

01:01:08

внутри разных блоков то есть она может

01:01:10

быть в шапке в подвале где угодно и в

01:01:13

разных блоках может быть свой функций но

01:01:15

кнопка она как такая независимый блог

01:01:18

как независимый компонент поэтому тут

01:01:20

стоит указать фон says фонд weight это

01:01:22

все нужно прописать далее у этой кнопки

01:01:24

есть скругление углов border-radius

01:01:26

четыре пикселя то есть если мы и выберем

01:01:29

ну либо здесь на вкладке

01:01:32

inspect мы обнаружим с вами барда радиус

01:01:35

4 вот либо в дизайне вот радиус

01:01:38

скругления 4 он есть и

01:01:40

что еще задам транзишен opacity 0 2

01:01:44

секунд то есть паха веру мы будем менять

01:01:46

opacity мы пропишем с вами вот так батон

01:01:49

hover opacity 08 то есть какой то эффект

01:01:52

когда мы наводим курсор чтобы что-то

01:01:54

плавно происходило плана она будет

01:01:57

прозрачность уходить вот да

01:02:00

но видим да то есть нужно что-то

01:02:02

доработать что нужно сделать высоту

01:02:04

нужно поставить хоть 51 это не сработало

01:02:08

потому что ссылки по умолчанию этой

01:02:10

онлайн элементы для на n элементов ну не

01:02:12

можем задавать по денги там да и так

01:02:14

далее высоту и так далее вот поэтому

01:02:17

можем здесь дать display inline

01:02:20

блок вот то есть он будет отображаться

01:02:23

как онлайн док теперь высота сработает и

01:02:25

по денги есть хорошо далее похожую мы

01:02:28

видим что что-то происходит с текстом то

01:02:31

есть он становится зеленым почему потому

01:02:34

что на следует hawera по ссылкам от

01:02:36

блока сайн ин в котором он находится то

01:02:39

есть да а то вот от блока хедер логин

01:02:42

вот поэтому чтобы такого не было

01:02:45

то есть для кнопки по хору тоже стоит

01:02:48

корректно вот указывать цвет который

01:02:50

должен быть то есть он остается белым

01:02:52

вот кажется возможно это избыточным но

01:02:55

это убережет вас от возможных ошибок ну

01:02:59

либо от возможных правок в будущем чтобы

01:03:02

потом не возвращаться к своей верстки не

01:03:04

править поэтому это нормально вот

01:03:05

прописать прямо по максимуму и хорошо

01:03:07

что мы с этим сейчас с вами столкнулись

01:03:10

так батон hover так и

01:03:13

эй батон hover вот так да то есть мы не

01:03:18

можем опираться просто на те свойства

01:03:19

блоков в которых расположена наша кнопка

01:03:22

да потому что вдруг вы что-то написано

01:03:24

там определенно вот как у нас здесь до

01:03:26

по ссылкам внутри этого блока но на

01:03:28

кнопку это никак не должно влиять

01:03:30

поэтому мы и так подробно перри

01:03:32

прописываем и вот теперь у нас с вами

01:03:34

задача выстроить этот текст start real

01:03:36

старт royal по центру кнопки один из

01:03:40

способов когда у нас высота кнопки но

01:03:43

всегда фиксирована и нету второй линии

01:03:45

текста это сделать вот так то есть

01:03:48

смотрите мы задаем высоту 51 и даем line

01:03:51

хоть 51 то есть таким образом высота

01:03:53

строки равна высоте кнопки это такой

01:03:57

простой легкий универсальный вариант

01:03:59

когда у вас вот только

01:04:01

одна строка да ну и не предусматривается

01:04:04

что там будет сильно много текста вот

01:04:07

вот так это все красиво работает можно

01:04:09

это сделать и по-другому каким образом

01:04:12

то есть этот первый вариант мы можем в

01:04:14

кнопке легко все выровнять ее я его

01:04:16

довольно часто и много где использую

01:04:18

второй вариант следующем и также задаем

01:04:20

высоту но мы выстраиваем текст по то

01:04:24

есть мы задаем высоту можем даже вот так

01:04:26

сделать мин хайд то есть как бы

01:04:28

минимальная типа за делом что если будет

01:04:30

много контента то высота может вырасти

01:04:32

вот и мы можем перевести кнопку в flex в

01:04:36

аффлек xbox и выровнять внутренние

01:04:38

контент по центру как и горизонтально

01:04:41

так и вертикально jesty фай контент

01:04:45

центра и line а этом центр вот то есть

01:04:47

получится вот так да высота ну то есть

01:04:50

мы тоже видим по центру хотя не совсем

01:04:52

давно все таки чуть чуть вниз идет со

01:04:54

смещением до момент

01:04:57

line хайд я бы единицу задал

01:05:01

хотя и не сильно это влияет

01:05:05

вот ну и теперь мы к примеру можем

01:05:11

добавить сюда еще текста но тут тут

01:05:15

слава богу

01:05:16

тут хватает у нас размера до но вот если

01:05:19

прям там ограниченная ширина будет

01:05:21

больше текста он даже на вторую линию

01:05:23

идёт кнопка вырасти то есть но как бы

01:05:25

кнопка будет но то есть ещё вот такой

01:05:27

вариант можем делать

01:05:30

хорошо кнопочку мы с вами стилизовали

01:05:33

дал правда при таком варианте мы видим

01:05:34

сайн ин прыгнул наверх почему потому что

01:05:36

у нас теперь

01:05:39

онлайн элемента вот этой онлайн элемент

01:05:41

а это flexx элементы они уже так друг

01:05:44

под другом 2 онлайновых или inline

01:05:46

inline блок были бы в ряд вот нам их

01:05:48

теперь тоже нужно выстроить в ряд для

01:05:50

этого в хедер логин мы с вами пропишем

01:05:53

дисплей flex вот нам и понадобился хедер

01:05:56

логин которого которые мы удалили точнее

01:05:58

перри определяли в ссылку но вот

01:06:00

возвращаем его пишем дисплеев лекс то

01:06:03

есть переходим проверяем отлично в ряд

01:06:06

выстроились но нам нужно вертикально

01:06:08

чтобы они тоже аккуратно стояли line ой

01:06:11

там с центр переходим проверяем вот и

01:06:13

нужно задать отступ между ними давайте

01:06:17

посмотрим чему он равен он тут равен 35

01:06:19

пикселей мы его пропишем следующим

01:06:23

образом давайте так сделаем федры логин

01:06:25

потом я обращаюсь к элементу который

01:06:29

лежит внутри него и его правому соседу и

01:06:33

даю martin f-35 то есть что я сделал я

01:06:36

сказал что элементы которые лежат на

01:06:38

первом уровне внутри хедер лагина то

01:06:41

есть первый уровень это года

01:06:43

непосредственно внутри то есть если

01:06:45

здесь например был бы какой-нибудь tex

01:06:47

пан ну вот такое тоже бывает там

01:06:49

выделяют к это слово да я его не хочу

01:06:52

задействовать поэтому написал знак

01:06:54

больше меньше то есть только первый

01:06:56

уровень но звездочка это значит любой

01:06:58

элемент то есть выберем не любой элемент

01:07:00

но на первом уровне то есть он выберет

01:07:03

первую ссылку и вторую но span он не

01:07:05

выберет вот и дали я говорю и выбери вот

01:07:08

любой элемент и потом сосед справа от

01:07:10

него и дай отступ влево до то есть опять

01:07:13

же первый у нас не выберется потому что

01:07:15

у него нет соседа слева и даймон ступ

01:07:17

слева таким образом у нас с вами

01:07:20

получилась ситуация что мы можем

01:07:22

добавлять сюда сколько угодно ссылок

01:07:25

кнопок и между ними будут отступы то

01:07:28

есть смотрите вот у нас сайн ин я у сюда

01:07:30

вставляю красота да опа почему так

01:07:34

получилось я просто вставил одну ссылку

01:07:36

в другую вот вот вот этот момент

01:07:39

получился потому что вот я в одну ссылку

01:07:41

вставил другой так не надо я могу кнопку

01:07:44

еще раз про копировать вот копия вот да

01:07:47

и пожалуйста сколько бы у нас тут

01:07:48

элементов не было между ними всегда

01:07:50

будут красивы отступы но от последнего

01:07:52

лишнего не будет вправо то что слева

01:07:54

идет all 1 слева тоже лишнего не будет

01:07:57

вот реализовали отлично

01:08:01

готово кстати

01:08:03

так здесь элементы я тут хитроу давай на

01:08:08

этом центр есть такой вот отличным в

01:08:10

целом у нас с вами шапка готова все

01:08:13

красиво по макету единственный от

01:08:15

момента это в том что я сейчас элементы

01:08:19

в шапке в ряду выстроил по 6 фай контент

01:08:23

space between ну то есть 1 в начале

01:08:25

последний в конце а тот который

01:08:27

посредине он просто посредине то есть у

01:08:29

него одинаковый доступ как для когда

01:08:31

логотипа так и до вот этого блока сайн

01:08:34

ин но если более точно посмотреть на

01:08:37

дизайн то конечно тут все-таки не так то

01:08:39

есть мы посмотрим здесь от логотипа 172

01:08:42

а от сайн ин 283 вот поэтому если есть

01:08:46

желание все-таки сделать и вот так

01:08:48

корректно да то тогда как мы с вами

01:08:51

сделаем мы выстроим все по левой стороне

01:08:53

а уходи логин зададим марджан left out a

01:08:57

и таким образом он едет вправо то есть в

01:08:59

конец то есть я найду хедер row

01:09:03

ухо дров я уберу justify контент то есть

01:09:07

когда его уберу это будет равносильно

01:09:09

flex старт потому что он и так работает

01:09:12

по умолчанию flex старт вот поэтому я

01:09:14

даже закомментируем то есть это имеется

01:09:16

ввиду вот поначалу оси все идет вот мы

01:09:19

видим

01:09:21

все стало поначалу оси теперь последний

01:09:25

элемент хедер логин мне нужно чтобы он

01:09:27

уехал вправо поэтому на фидер логин я

01:09:29

повешу морджим left out а вот он уехал

01:09:33

вправо я добавил то в инспекторе теперь

01:09:35

давайте перенесем вот сюда ходи rlogin

01:09:39

марджан left out a и

01:09:42

задам нужны корректные отступ от

01:09:46

навигации вода логотипа вот мы видим от

01:09:49

логотипа справа 172 да то есть вот

01:09:52

какой-то контент если идет от логотипа

01:09:54

то это получается

01:09:57

172

01:09:58

но в принципе так как мы тут работаем в

01:10:02

рамках шапки то где у нас naf naf naf

01:10:05

хедер на можно просто дать маржи лев 172

01:10:09

особо тут ничего не придумывая да то

01:10:11

есть вот есть навигация отступы слева

01:10:13

772 но нет и нет отступа хедер logo у

01:10:17

нас с вами пока остался никак не

01:10:18

задействованы поэтому я его удалю чтобы

01:10:22

пустой селектор здесь не мешался да

01:10:24

теперь это вот прямо даже по дизайну

01:10:26

отличным на этом у нас шапка готова мы

01:10:30

переходим к следующей секции

01:10:32

[музыка]

01:10:34

следующая секция это вот такой вот

01:10:38

промо-блок вот такой вот тоже хедер его

01:10:41

прям хочется назвать хедер но это не

01:10:43

федор да потому что шапка вот она вот

01:10:46

поэтому его можно назвать как промо-блок

01:10:48

правда я сталкивался с тем что

01:10:52

блокировщики рекламы

01:10:54

блокируют контент который называется it

01:10:56

over time and и слова proma в моей

01:10:59

практике тоже попадала под данный блок

01:11:02

поэтому я стараюсь не использовать такие

01:11:04

названия классов как от тверд промо

01:11:07

чтобы эти блоки не заблокировались у

01:11:10

пользователей да и чтобы они полностью

01:11:13

видели сайт они обрезаны

01:11:16

поэтому я назову этот блок home ну то

01:11:19

есть как такое знаете раньше home это

01:11:21

была главная страница на сайте home

01:11:23

пейдж на нашем случае это такой холл

01:11:25

блок вот почему бы нет переходим к

01:11:28

данному блоку верстаем его и так индекс

01:11:31

система

01:11:33

сворачиваем хедер

01:11:35

вот здесь кстати можно сделать такую

01:11:37

структуру main то есть основной контент

01:11:40

страницы и после когда у нас будет

01:11:42

footer сделать footer для по 2 вот и уже

01:11:45

внутри тега мейн мы можем создавать

01:11:47

секции таки из action и каждая секция

01:11:50

этого как эта секция нашего лендинга ты

01:11:53

сделал с экшн с классом home вот давайте

01:11:57

также пройдемся по данной секции то есть

01:12:00

разрисуем и и в виде прямоугольник таких

01:12:04

элементов чтобы понять прикинуть что и

01:12:06

как у нас будет происходить опять делаю

01:12:09

screenshot вот и

01:12:11

переходим к данной секции вот она

01:12:15

окей так выбираем фигуры значит сначала

01:12:18

мы сделаем вот такую секцию большой до

01:12:22

на всю ширину далее внутренние будет у

01:12:25

нас размещен контейнер который да все

01:12:28

также содержит себе контент лотом

01:12:30

контейнер далее нужно ли нам делать ряд

01:12:34

в данном случае в принципе нет ну то

01:12:36

есть мы можем по аналогии тоже сделать

01:12:38

ряд а потом блок с контентом но

01:12:41

тут нет двух элементов хотя бы до чтобы

01:12:43

составлять из них ряд поэтому в принципе

01:12:45

можно сразу в контейнере минуя ряд сразу

01:12:49

создать вот такой вот блок блок под этот

01:12:52

контент одну уже внутри это будет идти

01:12:55

заголовок потом будет идти div для тегов

01:12:59

п то есть тоже предусматриваем на период

01:13:02

что может быть несколько абзацев да

01:13:04

потому что текст это такая сущность

01:13:06

который может быть одним абзацем может

01:13:07

быть несколько есть конечно

01:13:10

нюансы есть когда вот мы идем по дизайну

01:13:13

мы понимаем что там больше одного абзаца

01:13:15

точно не будет вот но опираясь на свой

01:13:18

опыт как вообще работают лэндинги как их

01:13:20

правят заказчики зачастую им сюда

01:13:23

убывает хочется там целую портянку

01:13:26

текста засунуть ну чтобы он хотя бы не

01:13:27

слишком плохо отображался не слишком

01:13:29

ужасно да поэтому будем делать как

01:13:32

заготовку под несколько абзацев и кнопка

01:13:35

вот короче говоря вот такая вот

01:13:37

структура у нас получится есть еще здесь

01:13:40

нюанс с

01:13:41

картинкой вот картинку можно прописать

01:13:45

фоново либо для того чтобы подготовить

01:13:46

под все маски под движок сайта на эту

01:13:50

картинку стоит выносить таким образом

01:13:54

чтобы

01:13:56

она была прописана в еще мал то есть

01:13:59

чтобы при необходимости ее замены

01:14:02

картинка выводила система или вот

01:14:04

поэтому мы это тоже с вами сделаем окей

01:14:06

перехожу и

01:14:08

верстаем так section home секция home

01:14:12

значит сначала под контент контейнер

01:14:17

home секция потом контейнер потом как я

01:14:20

и сказал у нас дует эти контент home

01:14:24

контент и далее тот контент который мы

01:14:27

здесь видели то есть вот он заголовок и

01:14:30

сейчас пока быстро про копирую текст

01:14:33

потом мы все сделаем вот далее здесь у

01:14:36

нас идет заголовок пока тега и чадин у

01:14:40

нас нигде не было вот да конечно такие

01:14:42

чадин там по семантике это сеошнику же

01:14:44

регулируя да и желательно чтобы он прям

01:14:46

какой-то заголовок важный содержал для

01:14:49

страницы мы на это не отвлекаемся мы

01:14:51

верстаем так что потом любой загол вот

01:14:54

можно поменять 100 г еще один наш 2 или

01:14:57

просто надев или просто на п то есть

01:14:59

потом да уже там при seo-оптимизации это

01:15:02

можно будет сделать но пока вот я сюда

01:15:04

т.к. один да вот вот так будет белая

01:15:08

менеджер и

01:15:10

естественно мы по классу стилизуем его

01:15:12

класс и это у нас будет

01:15:14

home hedin то есть такой заголовок amx 1

01:15:19

далее текст текст у меня здесь будет

01:15:21

находиться в home текст таким вот

01:15:26

образом тут будет т.п. и

01:15:28

данный текст его копирую вырезаем вот

01:15:32

сюда вот так вот в т.п. отлично и после

01:15:36

этого у нас будут будет идти кнопка вот

01:15:42

собственно делаем блок для кнопок

01:15:47

home

01:15:49

боттомс ну или хум хум btn так момент

01:15:54

сделаю вот так дополнительную обертку

01:15:56

home btn и здесь уже даю кнопку пустят

01:16:00

тоже будет так и с классом bottom вот и

01:16:04

здесь даю кнопку значит почему столько

01:16:07

оберток зачем это сделано для тегов б я

01:16:10

пояснил зачем это надо да на случай если

01:16:12

тгп будет больше чем один между ними

01:16:14

будет 11 далее холм батон зачем это тоже

01:16:17

то есть это такая обертка для кнопок

01:16:19

сама кнопка она не имеет внешний

01:16:22

геометрии то есть оно не имеет отступов

01:16:24

сверху снизу слева справа ей это не

01:16:26

нужно на вот просто кнопка и она может

01:16:29

быть помещена куда угодно а вот туда где

01:16:32

она будет помещена она будет помещена в

01:16:34

определенный контейнер который даст ей

01:16:36

внешнюю геометрию то есть отступ нужный

01:16:39

даст или абсолютно из позиционирую до

01:16:41

или еще что-нибудь то есть таким образом

01:16:43

мы тоже распределяем ответственность у

01:16:45

нас есть обертки которые тянут на себе

01:16:49

внешнюю геометрию а есть просто вот

01:16:52

такие вот компоненты которые могут быть

01:16:55

размещены в любом месте да и просто если

01:16:59

бы я дал на эту кнопку марджан топ у

01:17:01

конкретно набатом то это бы сработало на

01:17:04

все подобные кнопки по всему сайту это

01:17:07

неправильно да то есть пришлось бы

01:17:09

как-то танцевать с бубном потом их

01:17:10

отменять еще что-то а если вот так

01:17:13

вообще все верстать то это просто жесть

01:17:15

начинает твориться вот поэтому есть

01:17:17

такое распределение ответственности в

01:17:18

принципе это такая уже знаете плавная

01:17:21

подводка кабан неймингу то есть это вот

01:17:23

те принципы которые я говорю это все по

01:17:25

методологии бы мне мин то есть я

01:17:27

единственная ну я его здесь как бы не

01:17:29

соблюдаю в полной мере единственной я не

01:17:31

пишу название классов там с

01:17:33

подчёркиванием чтобы сильно не путать ну

01:17:36

вот но когда это оттуда

01:17:38

вот это очень удобный подход поэтому

01:17:41

написали с вами вот так отлично вот мы

01:17:43

сами завер стали нашу секцию

01:17:46

единственное что вопрос даст картинка

01:17:48

как мы будем делать либо фоном либо

01:17:51

брать картинку и растягивать на всю

01:17:55

секцию холму в принципе давайте

01:17:58

давайте возьмем например да 1 тянем ее

01:18:02

на всю секцию hам вот для этого что мы

01:18:05

здесь делаем на сделаем

01:18:07

div с классом home дефис bg имидж такой

01:18:13

background-image

01:18:15

вот и сюда поместим картинку нее нужно

01:18:19

сохранить для начала значит переходим

01:18:21

сюда включаем вот так так и

01:18:25

теперь

01:18:27

control клик по картинке смотрю что вот

01:18:31

картинка она состоит тут из нескольких

01:18:34

слоев до есть какой-то слой сверху

01:18:37

overlay которые и чуть такой

01:18:40

затем но как бы осветляет да потом есть

01:18:43

сама картинка

01:18:45

да вот она сама картинка есть маска в

01:18:48

общем все это находится в группе б.г.

01:18:50

вот поэтому вот эту группу б.г. мы на

01:18:53

вкладке дизайн идем вниз вот экспорт

01:18:55

плюсик формат jpeg

01:18:57

превьюшку можно глянуть экспорт б.г. вот

01:19:01

и давайте здесь создадим папку которую

01:19:05

назову home ну как бы секция home

01:19:08

поэтому home вот и здесь в джипег мы ее

01:19:12

сохраняем далее прописываем это

01:19:15

изображение сюда source image home by

01:19:19

jack white background

01:19:22

кого то есть такая обложка для фона да

01:19:26

то есть но мы даем volt пояснение что

01:19:28

это не какая-то контентная вещь а просто

01:19:31

вот фон отлично но сейчас нам с этим

01:19:34

сами предстоит поработать и вот давайте

01:19:36

пока блок с картинкой а закомментирую я

01:19:40

пока

01:19:41

стилизуем вот эти вещи потом мы к

01:19:43

картинке вернемся выбираю в данную

01:19:46

секцию control shift x да но мы будем

01:19:49

писать это тоже в отдельном файле значит

01:19:51

в папке bloksi создан файл home css не

01:19:57

забываем его подключить в яндекс система

01:19:59

лу после хедера я подключаю холмс с.с.

01:20:03

вот теперь уже выбираю данную секцию

01:20:06

control shift x home css вставляю

01:20:08

контейнеры отсюда уходит он у нас уже

01:20:11

есть вот батон отсюда тоже уходит вот

01:20:15

что у нас остается ну и работаем

01:20:18

стилизуем

01:20:19

смотрим на дизайн значит что и как у нас

01:20:24

здесь будет вот он наш блог home внутри

01:20:27

есть контент опять же есть два подхода

01:20:29

первый подход мы можем задать

01:20:31

фиксированную высоту для блоков а вот мы

01:20:34

смотрим да у него вот высота 895 мы

01:20:37

можем сказать высота 895 вот можем

01:20:42

основывать высоту на по деньгах то есть

01:20:44

вот смотрим от контента в верх 175 вниз

01:20:48

336 то есть если будет больше контента

01:20:51

этот блок вырастет вот хотя бы на одну

01:20:53

строчку больше он уже вырасти если будет

01:20:56

меньше то он тоже будет меньше то есть

01:20:59

да можно чисто на padding использовать я

01:21:02

бы поступил следующим образом то есть

01:21:03

вот ну давайте представим до что вот

01:21:06

здесь вот продублирован абзац и кнопки

01:21:09

больше то есть вот вопрос да нужно ли

01:21:11

из-за этого

01:21:13

увеличивать высоту этого блока то есть

01:21:16

сделать ее вот еще вот так вот больше ну

01:21:19

вот насколько у нас контента стало

01:21:21

больше ну я считаю что нет я считаю что

01:21:23

это будет излишним да потому что здесь

01:21:24

как бы контента мы видим его мало вот

01:21:27

поэтому чтобы я сделал я бы задал

01:21:28

конечно минимальную высоту до 895

01:21:32

например вот и какие-то по денги бы

01:21:36

сделал то есть в целом он бы возможно

01:21:39

расширился если бы контента стало сильно

01:21:40

больше но не сильно вот поэтому такой

01:21:44

комбинированный прием используют то есть

01:21:46

я пропишу охает 895 для холм давайте

01:21:50

пока пропишем какой-нибудь цвет фона на

01:21:52

отличные от белого для того чтобы мы

01:21:57

стилизовали пока картинку еще не задал

01:22:00

фоном давайте сейчас я вот выбрал текст

01:22:04

feel color picker

01:22:07

и вот

01:22:08

такой вот ты просто скопировал

01:22:15

просто какой-нибудь бэкграунд хочу сюда

01:22:19

указать в принципе вот здесь даже можно

01:22:20

выбрать вот диск без какой-то бисквитный

01:22:24

да и

01:22:25

все и он отлично подходит да ну вот

01:22:28

нормальную а то есть вот у нас вот

01:22:31

высота отлично да мы видим этот блок

01:22:33

видим его размеры здорово ну и теперь

01:22:36

работаем внутри значит так этот блок у

01:22:38

нас есть холм контейнер есть он свою

01:22:41

работу делает мы едим контент стоит по

01:22:42

центру здорово далее что здесь нужно

01:22:45

сделать нужно ограничение по ширине для

01:22:48

контента да да то есть наш контент вот

01:22:51

лежит внутри home контента и сейчас он у

01:22:54

нас вот прям на всю ширину а по дизайну

01:22:57

вот там увидим он ограничен вот смотрим

01:23:00

насколько он ограничен это ширина 440

01:23:03

вот поэтому ограничиваем значит home

01:23:05

контент макс вид 440 я уже начал

01:23:09

использовать макс вид почему когда мы

01:23:11

будем адаптировать под смартфон

01:23:12

минимальная ширина смартфона это 320 да

01:23:16

и соответственно этот блок тоже должен

01:23:18

будет уменьшится то есть он не должен

01:23:20

быть фиксирована 440 он будет

01:23:23

уменьшаться поэтому макс vitz вот про

01:23:26

контейнер мы поговорим потом как для

01:23:28

адаптации там отдельный момент

01:23:31

отлично это сделали проверили да вода к

01:23:34

уменьшился с хорошо теперь зададим по

01:23:37

денги о которых я говорил то есть

01:23:39

посмотрим по 1 сверху 175 снизу 336

01:23:44

давайте сделаем таким образом сделал

01:23:47

padding для homo

01:23:49

padding топ 175 ип один год он тоже 175

01:23:54

то есть вот одинаковы мы сделаем да ну

01:23:57

их можно здесь совместить padding 175

01:24:00

пикселей сверху снизу слева справа по 0

01:24:02

а вот

01:24:04

то есть таким образом мы задали и типа

01:24:07

денги да ну вот я хотел задать мин хайд

01:24:11

указал хайд мы задали по денги задали

01:24:14

мин хай то есть давайте посмотрим что

01:24:15

получилось

01:24:17

по наши разметки f12 вот он хитер нет

01:24:22

сейчас вот он с action home да вот

01:24:26

section холмы видим его высота на

01:24:28

подсказки видно 895 как мы прописали по

01:24:31

денги по 175 но контент стоит верху

01:24:34

доступом 175 да то есть как бы мы и

01:24:37

высоту оставили и по денги прописали и у

01:24:40

нас есть куда расти контенту то есть

01:24:42

если контента будет становиться больше

01:24:44

вот так там тегов п становится больше он

01:24:49

сначала не растет то есть он не будет

01:24:50

расти до тех моментов пока контент не

01:24:53

дойдет до нижнего подают только потом

01:24:55

начнет расти то есть у вас такая не

01:24:56

нужно небольшое такое как бы

01:24:59

запас есть и я считаю это грамотно это

01:25:02

хорошо

01:25:03

отлично потому что помним всегда до что

01:25:06

верстка это не статика это не то что мы

01:25:08

вот там завер стали и все это так и

01:25:10

будет всегда нет это сайт это как живой

01:25:13

организм всегда контент меняется

01:25:15

дополняется сегодня три строки завтра

01:25:17

вообще ничего нет а после завтра сюда

01:25:19

войну и мир публикуют в трех томах и все

01:25:23

в эту секцию ну конечно нет но вот

01:25:25

несколько абзацев мы должны сделать так

01:25:28

чтобы это не выглядело ужасно потом вот

01:25:31

теперь стилизуем а то что здесь внутри

01:25:33

находится значит заголовок смотрим что

01:25:36

это у нас вот такой вот свет + тут еще

01:25:40

джорджа это мы шли в другой часто все

01:25:43

сдадим color сдаем color потом смотрим

01:25:45

фон says джорджия болт 65 прописываем

01:25:49

фонд уэйд 700 это болт фонд says 65 и

01:25:55

джорджа в принципе но джорджи всем

01:25:59

известна как пишется да но лучше все

01:26:00

равно себя перепроверяйте лучших

01:26:03

копируйте как бы из источников и я так

01:26:05

тоже сделаю советую то есть вот зайдем в

01:26:07

georges торчит control клик и посмотрим

01:26:10

как именно назван шифон сэм или джорджа

01:26:13

есть

01:26:14

скопировали переходим в home и для home

01:26:17

хайден мы вот сюда задаем джорджа я

01:26:20

напишу еще , и serif да да то есть все

01:26:22

таки на всякий случай если вдруг

01:26:24

джорджии не будет windows и хотя windows

01:26:27

7 есть если вы не будет на другой

01:26:29

операционной системе и файл со шрифтом

01:26:31

ну вот не загрузится по какой-то причине

01:26:33

но тогда serif ший в том все это

01:26:36

отобразится отлично с этим блоком готова

01:26:39

есть еще отступ 30 пикселей от заголовка

01:26:42

вниз давайте пропишем холм hidden

01:26:45

морджим ботом 30 пикселей

01:26:48

вот тут тоже есть момент который можно

01:26:53

сделать таким гибким и универсальным на

01:26:57

тот случай да вот что если например в

01:27:00

нас дальше элементов нет после хедера да

01:27:04

тут если он так вот что он последний да

01:27:06

и чтобы лишнего отступа не было то ос

01:27:10

тут можно давать немножко по-другому

01:27:11

вот если прям типа супер какой-то

01:27:14

гибкости он универсальности хочется

01:27:16

можно вот так home хайден например плюс

01:27:19

какой-нибудь элемент после него и

01:27:22

морджим тогда марджан топ-30 но это я

01:27:26

считаю это уже избыточно и что это уже

01:27:28

избыточно пошло вот потому что в

01:27:30

конкретно в разрезе данной секции где мы

01:27:33

делаем вы видели у нас там и запас

01:27:34

большой у нее так высота большая должна

01:27:36

быть поэтому мне кажется это уже

01:27:38

избыточный момент но вот прям если супер

01:27:41

заморочиться хочется можно вот так вот

01:27:43

сделать то есть чтобы не было подходи

01:27:45

нгам всегда у этого чего-то будет отступ

01:27:49

сверху 30 но в то же время на как бы

01:27:54

надо понимать что мы это прописали

01:27:55

теперь это будет работать далее home

01:27:58

текст то есть текст который находится в

01:28:01

шапке вот он 20 пикселей 48 базовый до

01:28:05

48 это у нас нет базовый 42 но тут 48 ну

01:28:09

чуть-чуть отличается что тогда переправе

01:28:12

перри пропишем color вот такой будет 48

01:28:15

48 20 у нас наследуется line хайд не

01:28:20

указан то есть авто

01:28:22

поэтому мы тоже вот

01:28:25

хоть нюхает mixed это не сбивает с толку

01:28:30

да вот в заголовке было in high tautou

01:28:32

поэтому никак мне указывали вот а вот

01:28:34

здесь слайд миксер то есть возможно там

01:28:37

где-то чуть другой указан поэтому надо

01:28:38

кликнуть внутрь выбрать вот так две

01:28:40

строки или хотя бы вот так да вот сто

01:28:44

сорок четыре пять процентов вот отлично

01:28:46

то есть тогда мы задаем для контекста

01:28:48

вот такой line хайд

01:28:51

celine хайд сто сорок четыре и пять

01:28:56

процентов вот и так как у нас у тебя

01:28:59

план хайкин харитон это отлично

01:29:01

унаследует если мы посмотрим

01:29:04

вот и все будет в порядке

01:29:10

так отлично

01:29:14

отлично отлично хорошо здесь мы сделали

01:29:18

давайте обновлю да вот один абзац далее

01:29:21

у нас идёт кнопка опять же от блока с

01:29:24

кнопками и до абзаца у нас есть вот

01:29:26

такой 53 то есть в целом его можно

01:29:30

повесить но опять же да можно тоже

01:29:33

сделать что вот холм текст + что-то

01:29:35

дальше о ступ сверху 53 иного типа если

01:29:39

после текста что-то у нас размещается то

01:29:41

53 отступ сверху но принципе можно если

01:29:44

мы уже идем по такому

01:29:48

супер-супер-супер

01:29:50

гибкому такому навороченного пути хотя

01:29:52

опять же да и я прямо говорю

01:29:55

зачастую большинстве макетов это может

01:29:57

быть излишним вот но если как бы вам не

01:30:00

лень можно такое сделать сам текст +

01:30:03

что-то дальше марджан топ на там было 52

01:30:07

вот 53 даже

01:30:10

53 пикселя ehome батон в принципе я the

01:30:13

home батон и

01:30:14

создавал для того чтобы на него этот

01:30:18

отступ повесить но как бы теперь он не

01:30:21

нужен то есть мне не никак ничего на

01:30:24

него повесить в плане стиле вот но здесь

01:30:27

разметки я его все равно оставлю хотя в

01:30:29

принципе он даже здесь

01:30:31

можно назвать его как бы лишним да то

01:30:34

есть избыточным то есть у нас всего одна

01:30:37

кнопка у нас тут нету

01:30:39

задачи выстраивать там две три кнопки в

01:30:41

ряд давать между ними о стоп если бы

01:30:43

такая задача была конечно он был бы

01:30:45

кстати вот но так как этого нет в

01:30:47

принципе то есть можно его так для

01:30:50

структуры оставить да то есть мы как бы

01:30:52

от структурировали сказали вот home

01:30:54

текст текст вот kombat он вот батон

01:30:56

можно оставить но если мы это уберём как

01:30:59

бы тоже ничего страшного не будет

01:31:01

вот и оставить просто вот так вот кнопку

01:31:04

да и посмотрим вот как это теперь все

01:31:07

отображается отлично единственное что

01:31:09

смотрите вот наша кнопка да она

01:31:11

растянулась почему на растянулась на и

01:31:14

вот здесь это происходит из-за того что

01:31:15

мы кнопки до этого давали дисплей flex и

01:31:18

теперь он начинает

01:31:20

она работает как flex бокс для

01:31:22

внутренних элементов но как по внешней

01:31:25

геометрии да вот она работает как блок

01:31:28

то есть она тянется на всю доступную

01:31:29

ширину вот теперь нам нужно как то это

01:31:32

править вот конечно мы можем на тот

01:31:36

контейнер в котором находится повесить

01:31:39

тоже выравнивание по flex выровняйте

01:31:40

этом по левой стороне например то есть к

01:31:43

примеру наша кнопка она лежит в верхом

01:31:46

контент дай мы можем ему сказать дисплей

01:31:48

flex flex direction колом и алайна этом

01:31:51

слег старт мы можем это сделать но эта

01:31:54

идея мне не очень нравится тем что

01:31:56

теперь

01:31:57

вот где бы у нас ни были кнопки нам

01:32:00

нужно про это помнить что вот они будут

01:32:01

тянуться на всю ширину да то есть но вот

01:32:04

то что я проговорил то есть это можно

01:32:05

решить вот так вот flex direction колонн

01:32:08

вот выйдем колонку и теперь делаем line

01:32:11

ой там стоит по поперечной оси flex

01:32:13

старт и пожалуйста вроде бы вроде бы

01:32:16

вопрос решен всего лишь на холм контент

01:32:19

повесить эти три свойства но где бы

01:32:21

теперь эту кнопку у нас не находилось мы

01:32:23

всегда должны понимать что

01:32:26

надо это вешай да вот и причем вообще

01:32:30

даже зачем-то визжать на холм контента

01:32:32

что относится к кнопке которая внутри

01:32:33

него почему общих ум контент должен

01:32:35

что-то знать что на нем что-то должно

01:32:38

висеть что если вдруг ним будет кнопка

01:32:40

ну то есть как то немножко странно да

01:32:41

если все же вот есть желание вот эту

01:32:44

кнопку оставить то тогда я бы вернул все

01:32:47

таки home батон да то есть вот прямо

01:32:49

корректно я говорю что есть такая

01:32:51

обертка у нас для кнопок вот ты хам

01:32:55

батон тоже делал дисплея flex то есть

01:32:57

элемент внутри него будет конфликт

01:32:59

сайтом он уже не будет тянуться на всю

01:33:00

ширину

01:33:01

ну вот и мы перейдем проверим

01:33:03

вот да все в порядке вот он то есть

01:33:07

kombat он просто дает flex до элементы

01:33:10

внутреннего выстраивается в ряд но также

01:33:12

элементы отображаются как flex сайтами и

01:33:14

не тянуться на всю ширину вот просто так

01:33:16

вот поэтому вот такой вот вариант как

01:33:19

выход из ситуации либо

01:33:22

работать с кнопкой вот

01:33:24

то есть либо вот такой вариант оставить

01:33:26

в принципе в принципе он нормальный да в

01:33:29

принципе нормальный потому что но кнопки

01:33:31

все-таки они вот зачастую там верстки

01:33:33

лэндингов да они их не размещают просто

01:33:37

посреди текст типа вот текст текст текст

01:33:39

и бац кнопка да то есть это либо 1 либо

01:33:41

группа кнопок их так или иначе нужно как

01:33:43

то вряд иногда выстраивать то есть не

01:33:45

конкретно в этом макете но в целом я

01:33:47

говорю про подход да а конкретно в этом

01:33:50

макете у нас нигде такого нет чтобы в

01:33:52

две кнопки вариант но в целом как подход

01:33:54

это нормально вот и плюс у нас такая

01:33:57

даже кнопка универсальная на несколько

01:33:59

линий вот либо тогда уже

01:34:01

убирайтесь кнопки дисплей flex оставлять

01:34:04

просто охает пятьдесят один пиксель и

01:34:06

делать line хайд пятьдесят один пиксель

01:34:08

и тоже все будет отлично ok в общем мы с

01:34:10

кнопкой справились единственный момент

01:34:12

что она чуть-чуть другая по размеру то

01:34:15

есть смотрите вот эта кнопка которая

01:34:16

была по классу батон у нас у неё размер

01:34:19

51 и фон says 20 у этой кнопки фан-сайт

01:34:24

20 но размер 65 а по денги какие такие

01:34:29

же по 50 до

01:34:31

по 1 где такие же то есть это некий

01:34:34

такой большой

01:34:36

увеличенный вариант кнопки с высотой 65

01:34:40

пикселей давайте посмотрим другие кнопки

01:34:42

вот еще то же самое да тоже 65 тоже 20

01:34:46

здесь тоже тоже 20 тоже 65 то есть мы на

01:34:51

основе этого можем сделать вывод что в

01:34:53

нашем макете есть 1 2 3 4 кнопки

01:34:57

одна из них

01:34:59

высотой 51 все остальные высотой 65 вот

01:35:03

то есть мы можем сказать что нас есть

01:35:05

некая маленькая кнопка и нормальные либо

01:35:07

можем сказать что у нас есть одна

01:35:08

нормальная кнопка дату стёпа нормально

01:35:11

это вот это например а все остальные

01:35:13

большие это вот такие то есть тут с

01:35:15

какой стороны посмотреть вот поэтому и

01:35:19

добавить просто модификатор то есть мы

01:35:21

добавим модификатор к кнопке которая

01:35:24

будет увеличивать ее размер вот и все

01:35:26

поэтому я поступлю таким образом что

01:35:30

скажу что вот эта кнопка это батон а

01:35:33

увеличенные кнопки хоть их и больше но

01:35:36

это будут у меня как увеличенной кнопки

01:35:38

это будут кнопки с дополнительным

01:35:40

классом батон big вот поэтому в секции

01:35:44

хам вот этой кнопки файловый мы

01:35:46

добавляем модификатор bath and big и

01:35:49

давайте напишем для него в стиле который

01:35:51

стоит добавить батон big естественно

01:35:54

добавим мы их туда где описаны стартовые

01:35:56

кнопки то есть это в хедере в хедере у

01:36:00

нас вот батон вот вот и мы добавляем

01:36:04

баттенберг добавляем баттенберг но опять

01:36:06

же да я тоже допишу сюда , и батон

01:36:12

big и

01:36:15

правим высоту на 65 пикселей хайд так

01:36:21

момент

01:36:23

мин хай то есть дата то есть даже они

01:36:26

расти могут 65 пикселей вот мы все тут

01:36:30

единственное что потребовалось поправить

01:36:32

высоту вот мы поправили перешли смотрим

01:36:34

вот пожалуйста да все переменилось минхо

01:36:38

65 до теперь эта кнопка отображается вот

01:36:41

так по структуре файлов конечно кнопки

01:36:44

их по-хорошему стоит вынести в отдельный

01:36:47

файл то есть в блоках стоит создать

01:36:50

батон

01:36:52

css раз у нас класс сокращенной то и

01:36:56

название файла я тоже сделаю таким чтобы

01:36:59

было понятно даже если мы будем искать

01:37:01

по названию мы найдем и все что связанно

01:37:04

с кнопками я перенес из кедра в батон с

01:37:07

ес потому что кнопка она принадлежит не

01:37:09

только федору но во многих секциях

01:37:12

присутствует такой самодостаточный

01:37:14

самостоятельный элемент вот вынесли в

01:37:17

отдельный файл и подключаемые давайте

01:37:20

вот здесь где нибудь перед фейдером

01:37:21

подключим батон ceкc с то есть батон

01:37:24

хедер home отличный так на этом этапе у

01:37:28

нас с вами хедер готов за исключением

01:37:31

картинки на давайте кстати посмотрим как

01:37:34

текст переносится белый менеджер иван

01:37:37

weiss и так далее лет вот единственное

01:37:40

что вот этот текст лет тоже должен

01:37:44

переноситься да но мы не можем уменьшить

01:37:46

размер контента the system хедер контент

01:37:49

буду а ширина уменьшать то у меня скорее

01:37:52

мы видим заголовок перейдет на три

01:37:54

строчки чем текст ниже то есть когда вот

01:37:58

холм текст нужно править то есть тут

01:37:59

либо тбр добавлять либо править home

01:38:02

текст давать ему ширину то есть давать

01:38:04

ему ширину у какой если здесь 440

01:38:09

танахом текст

01:38:11

давать макс вид 440 пикселей я буду

01:38:16

уменьшать пока он не дойдет до нужного

01:38:19

мне значения вода

01:38:21

430 например что вот лет тоже перешло то

01:38:24

есть дадим еще вот такое ограничение на

01:38:26

холм текст это у нас холмс с с ломтик

01:38:30

создаем это ограничение отличным

01:38:34

здорово и теперь работаем с картинкой

01:38:37

кстати вот тут хоть тоже скрою тут тоже

01:38:39

скрою

01:38:40

home работаем с картинкой а раз

01:38:43

комментирую данный блок хамбо г имидж

01:38:46

скопирую из него

01:38:48

сюда свойства комбо демедж как это у нас

01:38:54

будет работать то есть мы растянем эту

01:38:57

картинку на весь наш blocks

01:39:01

позиционируем ее абсолютно растянем по

01:39:03

ширине по высоте и пропишем корректно

01:39:05

так что мана правильно масштабировались

01:39:07

вот посмотрим что сейчас вот сейчас та

01:39:09

картинка просто внизу я же ее буду

01:39:13

растягивать

01:39:14

соответственно тянуть мы ее будем по

01:39:16

всей секции home поэтому секциях он

01:39:18

должна быть позиция латиф смотрите

01:39:21

секции home мы даем позиция realty то

01:39:26

есть она будет родителем далее

01:39:29

вот у нас шоу комбо гп имидж мы его

01:39:33

тянем пусть этой секции то есть мы даем

01:39:35

ему позицию абсолют

01:39:38

лифт 0

01:39:41

так

01:39:43

0 вот он а ширина

01:39:47

100 процентов высота сто процентов то

01:39:51

есть он полностью тянется хайд сто

01:39:54

процентов он полностью тянется по блоку

01:39:57

в котором лежит

01:39:58

вот картинка тоже должна тянуться по

01:40:01

нему то есть картинки когда быть сто

01:40:07

процентов то вместе что и абсолют уже

01:40:11

можно будет дать но сейчас что вот

01:40:14

дотянулась до и картинка тоже натянулась

01:40:16

вот 100 на 100 то есть вот холм б.г.

01:40:20

image я смотрю на подсказку вижу

01:40:22

подсказку 1902 на 895 и картинка такая

01:40:26

же 1902 на 895 вот но картинка может

01:40:30

некорректно масштабироваться да то есть

01:40:32

но вот размер экрана может быть чуть

01:40:34

чуть другим да и вот мы видим все она

01:40:37

уже сжалось чтобы такого не было мы

01:40:39

картинки еще дадим

01:40:41

background

01:40:43

ground says нет ни background

01:40:49

вот объект fit обжиг fit это аналог бы

01:40:53

grounds аналог бы grounds только для

01:40:56

картинки обжиг fit и значение кого то

01:40:58

есть это аналог бы grown says ковер для

01:41:00

фона вот то есть она корректно

01:41:03

масштабируется полностью заполняет то

01:41:06

есть сама картинка

01:41:08

словно фон корректно масштабируется и

01:41:12

полностью заполняет размер тега image

01:41:14

вот тогда ты сама картинка внутрь этого

01:41:16

имидж вот оно как фон вот отлично это

01:41:20

сделали то есть вот такие свойства нужно

01:41:21

прописать давайте да ну и еще нужно

01:41:24

сделать чтобы наш контент был сверху

01:41:26

наши картинки да то есть наш контейнер

01:41:29

нужно вынести вперед либо картинку

01:41:32

вынести назад

01:41:34

вот как мы это можем задавать и картинку

01:41:37

пром вынести назад z-index

01:41:40

-1 таким образом зад индекс минус 1 она

01:41:43

уходит за она даже выходит за секцию то

01:41:46

есть тогда вот этот бежевый фон я его

01:41:48

отсюда удалю и я его дам на этот combo g

01:41:53

image вот на то есть он себе несет и фон

01:41:57

связанный с картинкой вот а секциях он

01:42:00

просто как обертка вот давайте перенесем

01:42:03

все эти свойства значит по шагам сейчас

01:42:06

еще раз разложу что и как для home мы

01:42:09

даем позиций нравилось переходим в home

01:42:12

находим его фон убираем даем позиций

01:42:16

латиф далее по размеру home мы будем

01:42:20

растягивать

01:42:21

combo g имидж def con бога имидж находим

01:42:25

девкам бага имидж вот он мы его

01:42:28

растягиваем

01:42:30

по размеру

01:42:33

в общем фон тоже нужен а значит мы ему

01:42:36

даем позишн абсолют лифт 0 топ 0 ширина

01:42:41

100 процентов высота сто процентов это

01:42:44

мы его же спозиционировали растянули вот

01:42:47

даем ему фон какой-то да то есть если

01:42:50

картинка не загрузилась то какой то

01:42:51

такой комплементарный фон это неплохо в

01:42:54

принципе там белые картинка светлое это

01:42:55

не обязательно делать но типа если мы

01:42:58

зададим то хуже от этого не станет да то

01:43:02

есть пользователь увидит уже какой-то

01:43:04

комплементарный фонд пока картинка

01:43:05

грузится вот и далее мы работаем с

01:43:07

картинкой внутри данного хамбо г image

01:43:09

home baby имидж пробел имидж уговорим

01:43:11

хоть сто процентов быть сто процентов и

01:43:16

объект fit он сжег fit collar отлично

01:43:22

переходим проверяем да и это все нужно

01:43:25

сдвинуть назад то есть нужно home бага

01:43:28

имидже дать ему z-index -1 то есть мы

01:43:32

его

01:43:33

сдвигаем

01:43:35

взят индекс

01:43:39

минус 1 моего задвигаем за секцию у

01:43:42

секции правда не должно быть фона да то

01:43:44

есть вот чтобы картинка была сзади

01:43:46

отлично вот таким вот образом мы это с

01:43:49

вами сделали и зачем так было

01:43:50

заморачиваться для того чтобы теперь и

01:43:54

вот если это верстка будет восстановлена

01:43:56

на 7 из а зачастую то что делает

01:43:58

верстальщики потом ставится на 7 из ну в

01:44:01

50 процентах случаев это точно то есть

01:44:04

конечно часть каких-то лэндингов сразу

01:44:07

идет на продакшн грузиться на хостинг и

01:44:09

все подключаются нужны скрипты вот но 50

01:44:13

процентов случаев не меньше это

01:44:15

постановка на 7 из и тогда вот сюда

01:44:18

можно будет прописать какойто переменную

01:44:20

да то есть там либо переменную полностью

01:44:23

вместо картинки либо вместо пути и через

01:44:26

админку можно будет легко это меняет

01:44:28

подгружать и причем неважно даже где эта

01:44:30

картинка будет находит будет находиться

01:44:32

потому что здесь вот прям полностью путь

01:44:35

указан хоть какой пиши вот отлично в

01:44:38

общем сделали с вами секцию холм

01:44:41

перейдем посмотрим эти вот так как это

01:44:44

все у нас красиво кстати так что то у

01:44:48

нас случилась start real

01:44:51

stark trial что-то с ним случилось

01:44:53

почему он стал темным так ну во-первых

01:44:56

span у меня тут остался

01:44:58

это нужно поправить а во-вторых хедер

01:45:02

логин и на него работает а почему не

01:45:06

работает color white потому что хедер

01:45:09

логин потому что более

01:45:10

более подробно и такая ссылка да и по

01:45:14

итогу даже кнопка и и не перебивает вот

01:45:18

сейчас мы это поправим

01:45:20

откроем

01:45:21

откроем шапку не вот он хедер логин то

01:45:24

есть ну во первых вот этот спа нужно

01:45:26

убрать

01:45:27

он тут лишние его для демонстрации

01:45:30

добавлял вот а во-вторых у нас

01:45:33

перебивает хедер логин эй давайте

01:45:36

откроем хедер а

01:45:39

почему он начал перебивать вот тоже да

01:45:42

хороший момент он начал перебивать

01:45:43

потому что у нас

01:45:45

потому что у нас кнопка подключена

01:45:49

перед федором и соответственно приоритет

01:45:52

тоже изменился и вот это вот тоже да не

01:45:55

правильно то есть смотрите у нас просто

01:45:56

поменялись порядке подключения классов

01:45:59

да то есть вот если бы если бы описал

01:46:01

все в одном файле друг с другом когда

01:46:03

все отлично но обратите внимание

01:46:06

мы просто изменили порядок подключения и

01:46:09

все как бы сломалась это плохо такого

01:46:14

быть не должно то есть это опять же тоже

01:46:16

из банды минга порядок того как мы

01:46:18

описываем селекторы ну не должен влиять

01:46:20

на их работу вот поэтому что мы сделаем

01:46:23

давайте в хедер логин эй я все-таки

01:46:26

ссылочку здесь вот хадра логин я есть

01:46:29

элизу его так класс по классу клас хеда

01:46:34

линк вот так хедер link order логин link

01:46:37

то есть тут давайте хода логин линда

01:46:39

более конкретно вот потому что у нас и

01:46:42

навигации и ссылке вот хедер логин линк

01:46:45

и соответственно хадер логин эй мы это

01:46:48

меняем на хедер логин link все то есть

01:46:51

теперь мы не трогаем никакие ссылки

01:46:54

которые там лежат где тогда мы то есть

01:46:58

вот этим селектором хадра logging хабер

01:47:01

мы конкретно стилизуем только то что нам

01:47:04

нужно

01:47:05

то есть да вот только те элементы у

01:47:08

которых этот класс есть вот и теперь

01:47:10

нормально то есть даже если наши кнопкой

01:47:12

описаны раньше или позже не важно в

01:47:15

какой очередности они подключены все

01:47:17

работает корректно это тоже признак

01:47:19

хорошей правильной верстки то что можно

01:47:21

заверстать наобум а потом ну вот мало ли

01:47:25

и не знаю да просто там в коде этом

01:47:28

решат какие-то общие элементы наверх

01:47:29

поднятие все сломается просто из-за того

01:47:32

что порядок селекторов изменится

01:47:37

отличным переходим к следующим секциям

01:47:40

следующие секции у нас тоже довольно

01:47:42

интересно это вот такое секция how it

01:47:43

works который состоит из за такого

01:47:46

заголовка и

01:47:47

блоков ниже

01:47:49

давайте с ней поработаем для этого

01:47:53

но для этого мы сначала нарисуем с вами

01:47:55

схему как обычно как это все будет

01:47:58

происходить то есть смотрите что здесь

01:47:59

да вот такой большой блок и потом

01:48:02

заканчиваются они сейчас хочу это все

01:48:06

уместить вот так

01:48:07

также делаю printscreen и сейчас

01:48:11

немножко порисуем

01:48:12

вот эту вот всю секцию да я ее буду

01:48:16

воспринимать как единую секцию так

01:48:18

момент в момент printscreen а лишний

01:48:22

фрейм появился вот эту секцию я буду

01:48:25

воспринимать ее как одну то есть ее

01:48:27

можно было бы воспринять в принципе

01:48:29

двумя разными например вот так и вот так

01:48:32

да то есть как бы две разные но по сути

01:48:35

это все одна секция во-первых мы это

01:48:36

видим по заголовку и мы это видим тоже

01:48:38

по смыслу мы понимаем с вами что это вот

01:48:42

как это работает

01:48:43

абзац и 123 как это работает вот поэтому

01:48:48

у нас будет вот такая большая секция для

01:48:50

блока как это работает далее внутрь этой

01:48:53

секции у нас будет контейнер на этой

01:48:55

секции будут висеть по денги сверху

01:48:57

снизу потом будет идти контейнер вот он

01:48:59

контейнер он идиоту чисто по контенту

01:49:02

далее опять же да как здесь поступить то

01:49:07

есть мы видим что внутри две секции да

01:49:10

вот это по сути я пока контейнер 1

01:49:11

рисовала но внутри вот как бы такие у

01:49:16

одной секции внутри 2 под секции можно

01:49:18

так сказать то есть одна для заголовков

01:49:21

2 для 0123

01:49:23

в принципе можно нарисовать общей

01:49:26

контейнер и уже в нем делать два блока

01:49:29

можно наоборот сделать di2 под секции и

01:49:32

в каждый делать контейнер вот два

01:49:35

варианта оба нормальные имеющие право на

01:49:38

существование и вырастают на самом деле

01:49:40

итак итак вот

01:49:44

вариант когда две под секции потом уже

01:49:47

контейнеры мне нравится тем что прямо 2

01:49:50

под секции очень разграничены да то есть

01:49:52

я прям вижу что они раздельные вариант с

01:49:55

общим контейнером хорош тем что разметки

01:49:57

будет меньше на то есть вложенность

01:50:00

будет короче вот

01:50:02

да влажность будет короче но зато как

01:50:05

как будто бы такого по ходу сильного

01:50:08

разграничения уже не будет потому что

01:50:10

внутри контейнера ну давайте попробуем

01:50:12

вот так все таки как бы в один контейнер

01:50:14

память и разместим будет один синий

01:50:16

контейнер у нас внутри него у нас будет

01:50:19

два вот таких вот блок а вот красных

01:50:23

первый блок это будет первый ряд ряд для

01:50:26

заголовков ну или блог для заголовков он

01:50:28

же и будет функции ряда выполнять и он

01:50:31

будет выстраивать внутри себя элементы в

01:50:33

ряд то есть первый элемент это будет вот

01:50:35

такой блок кода how it works вот я

01:50:38

закрыл и

01:50:39

2 заголовок зеленый и 2 будет для текста

01:50:42

вот а здесь внутри вот этот красный блок

01:50:45

он тоже будет выполнять функцию ряда для

01:50:48

колонок да ну здесь будут идти колонки

01:50:51

то есть вот колонка будет первое потом

01:50:53

будет колонка 2 и будет колонка 3 мы

01:50:58

видим здесь вот такие отступы то есть

01:51:00

колонке у нас так все равно будут идти

01:51:02

на всю высоту но мы видим даже 0103 на

01:51:05

разной высоте находятся 02 тем более

01:51:08

колонки будут идти на всю высоту но у

01:51:10

них будут padding то есть у первое нет

01:51:12

по 1 га сверху у второй он очень большой

01:51:14

у 3 чуть поменьше вот когда нужно будет

01:51:17

они будут перестраиваться уже там в две

01:51:19

колонки потом в одну вот ну третье по

01:51:22

сути но по сути она как бы тоже будет

01:51:23

идти до конца можно сказать а вот но это

01:51:27

уже не так важно то есть ну там не так

01:51:30

важно то есть будет она или здесь она

01:51:32

будет заканчиваться не суть

01:51:34

вот такая вот структура у нас будет

01:51:37

значит создаем секцию под блок хаус

01:51:40

форекс потом создаем контейнер и в

01:51:42

контейнер и создаем два блока

01:51:43

подзаголовок и под шаги

01:51:46

вот вот эти 0123

01:51:49

описываем идем в яндекс система

01:51:52

так сворачивая вот так все остальное и в

01:51:55

мае не создаем section how to fix it

01:52:01

works есть внутренние контейнер и далее

01:52:06

заголовок и шаги значит сделала так how

01:52:11

it works

01:52:12

here i

01:52:14

hold x степс

01:52:18

отличным

01:52:20

в хедере как мы сказали два блока для

01:52:24

собственно заголовка и для контента

01:52:28

значит

01:52:31

how the works her

01:52:34

foot works хода

01:52:36

пойдут прямо длинные да получается и для

01:52:39

контента content

01:52:43

вот для той то здесь у нас два заголовка

01:52:46

это конечно сейчас еще будет интересно

01:52:49

то есть опять нас будет придумывать до

01:52:50

какой-нибудь

01:52:51

хайден хедер тайтл сип тайтл и слова

01:52:55

заканчиваются вода поэтому

01:52:58

давайте знаете как сделаем how it works

01:53:02

мы назовем двух ядрах федор до

01:53:07

хедер федором

01:53:09

в один заем ход а

01:53:12

внутри я оставлю на тайтл is up to you

01:53:15

how it works her her head how to fix не

01:53:20

вот так будет тайтл тут я опущу хедер и

01:53:25

head да просто так пойду тайтл и samp

01:53:29

тайтл

01:53:30

стать высота это вот так и это будут вот

01:53:34

эти текстовки how it works то есть это

01:53:36

как будто бы такой важный заголовок

01:53:39

understand and и анджелес это такое

01:53:41

объяснение вот и по тегам значит это у

01:53:44

меня будет из 2 а это пусть будет и 4

01:53:47

вот так

01:53:50

хорошо и контент вот он контент копирую

01:53:54

т.п.

01:53:56

z вот контент то есть вот такая шапка у

01:54:00

нас получилось то есть вот общая шапка

01:54:03

это будет вряд выстраиваться этого

01:54:06

первый элемент в ряду второй элемент в

01:54:07

виду и вот в этом первом элементе один

01:54:10

заголовок 2 а во втором абзаце здорово

01:54:13

контейнер первую часть мы расписали

01:54:16

давайте шаги оставим пока на потом и

01:54:18

стилизуем то что здесь есть опять же это

01:54:21

все будет в отдельном файле how to рекс

01:54:23

поэтому kontrol б внутри блоках создаем

01:54:26

блоков создаем how to fix css не

01:54:30

забываем его подключить в яндексе чем а

01:54:32

вот куда-нибудь после hам

01:54:35

так вот how to access с готова переходим

01:54:41

в него так мы предварительно копируем

01:54:43

выбираю секцию control shift x вставляю

01:54:47

контейнер убираю вы заметили до скорость

01:54:50

уже немножко повышается но потому что мы

01:54:52

повторяем одно и то же но ни одно и то

01:54:56

же но разные вариации но суть одна и та

01:54:58

же суть очень похожи поэтому мы идем

01:55:01

дальше и быстрее итак смотрим на отступы

01:55:03

то есть вся секция будет иметь отступ и

01:55:06

сверху 169 снизу 51

01:55:11

но науки по 1 таб 169 по 1 батон 51

01:55:17

можно округлять до можно можно подзабить

01:55:20

на это и не кругу то есть но посмотрите

01:55:23

короче говоря туда в принципе если от

01:55:25

вас потом будут требовать пиксель песик

01:55:27

и будут сравнивать с дизайном то вот

01:55:30

такие цифры это норм ну то есть

01:55:32

нормально и та же цифра да это ж не 10

01:55:34

там чтобы думать 10 округлить туда или

01:55:36

сюда вот в принципе 169 не обязательно

01:55:39

170 особенно если потом нужен будет

01:55:42

пиксель пес если это потом будут

01:55:43

накладывать поверх то

01:55:46

тогда лучше не заморачиваться не тратить

01:55:49

время на округление я просто раньше но

01:55:51

довольно часто как бы округлил ну по

01:55:53

сути это

01:55:54

иногда потом боком выходит когда-то

01:55:57

пиццы пивка делаешь накладываешь все

01:55:58

равно тебе править поэтому все равно

01:56:00

если лучше писать то что те значения

01:56:03

которые берем вот

01:56:05

how it works хэдер то есть это как ряд

01:56:08

для первых двух элементов то есть

01:56:09

дисплей flex & g стив и контент space

01:56:12

between чтобы они были по краям потому

01:56:14

что да если мы посмотрим то они

01:56:18

действительно по краям то есть вот этот

01:56:20

блок

01:56:21

вот он да и вот этот а не по краям

01:56:24

контейнеры ну по краям рядом хорошо

01:56:27

далее стилизуем заголовки

01:56:30

так head находя пока пропущу вот тайтлы

01:56:35

sap тайтл тайтл этот чёрным которую на

01:56:37

сделан вот он лотта сами болт 24 157

01:56:43

запомнили пишем funds 24 line хайд сто

01:56:48

пятьдесят семь процентов сами болт фунт

01:56:51

weight 600 единственная цвет я не взял

01:56:55

42 но это по моему на тот который в базе

01:56:58

поэтому я не беру отступ и вниз смотрите

01:57:02

его тут его тут нет он даже

01:57:05

даже такое чувство что он раз два три

01:57:11

то есть он на минус 3 пикселя даже -3 но

01:57:17

давать margin вот у минус 3 в принципе

01:57:20

это вполне себе может имеет смысл то

01:57:24

есть когда вот прямо очень плотно

01:57:25

элементы стоят по дизайну дизайнер да

01:57:27

вот так сделал то есть вот конечно это

01:57:30

высотой строки тоже фиксится да ну тогда

01:57:32

не надо сто пятьдесят семь процентов

01:57:34

давать просто дать высоту 1 и будет

01:57:37

рядом но опять же если потом pixel

01:57:39

perfect подгоняют в принципе можно так

01:57:41

сделать

01:57:42

отлично это мы тайтл стилизовали то есть

01:57:45

вот просто черный халат рекс и вот

01:57:47

сейчас до чтобы нам постоянно не

01:57:49

скролить вниз очень удобно будет скрыть

01:57:52

блок на странице то есть у нас есть блок

01:57:55

home я даю ему класс новым который у нас

01:57:57

прописан дисплей но и таким образом он

01:58:00

не будет отображаться и мы всегда будем

01:58:02

видеть наверху сразу же тот блок с

01:58:05

которой мы работаем теперь переходим к

01:58:07

заголовку вот там даже стенд анджелес и

01:58:09

смотрим джорджия ball 50 157

01:58:13

прописываем значит 157 болт это 700 фонд

01:58:21

cs50 и

01:58:23

джорджио джорджио джорджио мы берем

01:58:26

где-то ее уже прописывал

01:58:29

ну можно еще раз вернуть отсюда джорджа

01:58:34

вот даже осталось в силе gti джорджия ,

01:58:38

serif отлично вот прописали кстати да

01:58:42

вот 157 и тут и тут мы можем их вынести

01:58:45

на хит например можно так сделать у нас

01:58:48

же все равно ингрида все наследует

01:58:50

поэтому также так

01:58:55

или нет а ну-ка

01:59:00

контент он лайн хайден харит по

01:59:04

компьютер если мы посмотрим

01:59:09

да

01:59:11

немножко не то

01:59:13

давайте мы еще дальше добавим line хоть

01:59:16

сто пятьдесят семь процентов ну да и то

01:59:19

по другому нет поэтому ее тут выносить

01:59:21

не получится возвращаю обратно конкретно

01:59:24

здесь конкретно здесь указаны отличный

01:59:27

так ну тоже как-то или нормально

01:59:30

understand english это нормально просто

01:59:34

ширина должна быть побольше вот мы видим

01:59:36

ширина 584 то есть обязательно должна

01:59:39

быть поэтому мы зададим

01:59:43

блокхед в котором лежит тайтлы sap тайтл

01:59:46

мы мы зададим минимальную ширину 584 мин

01:59:50

vitz

01:59:52

584 пикселя перейдем проверим да вот

01:59:56

теперь нормально кстати зеленый цвет я

01:59:58

забыл перенести

01:59:59

переносим на саб тайтл как то есть этот

02:00:04

суп тайтл она отображается больше но по

02:00:07

смысловому значению для меня он все-таки

02:00:09

sap тайтл да потому что тайтл секции how

02:00:12

творог все понятно о чем это а это как

02:00:14

подзаголовок

02:00:16

окей вот все отлично теперь можно

02:00:19

поработать с текстом и задать отступы

02:00:20

между ними то есть мы видим отступ 136

02:00:23

да

02:00:24

тут либо уступ 136 задавать либо указать

02:00:29

какой-то макс быть 671 в принципе стоит

02:00:34

сделать это это то есть сюда указать

02:00:36

макс vitz

02:00:38

671 пиксель да то есть при уменьшении

02:00:41

размера экрана они будут соединяться и

02:00:43

уступ между ними будет становиться

02:00:45

меньше но в какой-то момент у суб все

02:00:47

равно должен остаться и тогда уже они

02:00:50

будут уменьшаться вот поэтому

02:00:52

тут

02:00:54

мы можем мы можем между ними то есть вот

02:00:57

между вот этими элементами

02:01:00

да вот между дедом и контентом задать

02:01:04

отступ можем 136 дать тогда все будет

02:01:06

прям пиксель в пиксель и отступ всегда

02:01:08

будет большое они будут сами ужиматься а

02:01:10

можем его чуть поменьше сделать в

02:01:13

принципе у них размеры заданы на

02:01:16

определенной ширине на большой все окей

02:01:18

а при уменьшении

02:01:19

сначала отступ уменьшится а потом они

02:01:21

уменьшатся я считаю это будет хорошо

02:01:25

136 значит так сейчас это свернулся

02:01:31

до 136 между ними ну вот отхода можно

02:01:35

задать маржи нравится 136

02:01:38

вот так вот это можно сделать

02:01:41

вот

02:01:43

букетах и да да я же говорил что я

02:01:46

поменьше хочу сделать то есть я могу

02:01:47

дать тридцатку примеру да

02:01:50

так момент

02:01:54

нет не минует макс ведь должно было быть

02:01:57

тут макс вид и тут максу это опечатка

02:02:03

проверяем да вот да нормально кстати

02:02:06

line хайд сюда надо обратить внимание

02:02:08

line хоть сто пятьдесят

02:02:11

поэтому надо задать на контент line хайд

02:02:15

150 процентов

02:02:17

перейти посмотреть да вот теперь

02:02:23

так на опять же кстати вот здесь четыре

02:02:26

строки 671 ширина

02:02:30

здесь

02:02:35

671 ширина и три строки

02:02:39

как так интересно получается

02:02:43

laters пей

02:02:45

70 процентов 20 лат 150 medium до medium

02:02:51

вот толщина больше медиум то есть медиум

02:02:55

это фонд воет 500

02:02:58

проверяем да вот теперь здесь тоже

02:03:01

перенос как надо отлично теперь смотрим

02:03:03

по вертикальному выравниванию то есть

02:03:05

вот они действительно оба по верхней

02:03:07

строке идут либо все-таки этот нужно

02:03:08

чуть сдвинуть вниз до всем посмотрим все

02:03:11

таки нужно чуть вниз двинуть как

02:03:13

прямоугольник выберу нарисую его тогда

02:03:15

что-нибудь

02:03:16

видим все он идет по его можно по

02:03:19

деньгам сдвинуть можно vertical line

02:03:21

middle сделать мне кажется тут padding

02:03:24

будет уместней то есть вот видим до 58

02:03:28

что я сделал я вот выбрал секцию how it

02:03:32

works

02:03:33

зажал control и alt и получится как бы

02:03:37

от секции меряют у текста вижу 58 вот

02:03:39

поэтому на этом тексте на контенте я дам

02:03:43

padding топ 58

02:03:46

вот и таким образом у меня будет отступ

02:03:49

и он получается вот почти как зеленый

02:03:51

заголовок начинается отлично верхняя

02:03:54

часть how to x готова переходим к шагом

02:03:58

к степс

02:03:59

[музыка]

02:04:01

посмотрим значит на дизайн между

02:04:04

заголовком и шагами есть некий отступ

02:04:07

вот я выбрал заголовок alt зажал навожу

02:04:10

на 0 1 персона из персонала из именно на

02:04:14

него потому что все остальные сильно

02:04:16

ниже и вижу отступ в 52 то есть это

02:04:20

говорит о том что от заголовка мне нужно

02:04:22

дать уступ вниз 52 от заголовка это вот

02:04:26

от works хэдер да вот от него вниз 52

02:04:31

это может быть padding вполне себе то

02:04:33

есть это нормальный вариант дать padding

02:04:36

ботом 52 на то есть как бы для него чуть

02:04:40

место есть что бы он там вплотную не

02:04:42

стоял чтобы там дальше не было вот и

02:04:44

потом пойдут шаги по шагам давайте

02:04:48

посмотрим на нашу схему которую мы

02:04:50

рисовали то есть все лежит в одном

02:04:52

контейнере под шаге мы делаем обертку и

02:04:54

которая будет выполнять роль и ряда и

02:04:57

внутри уже будем создавать три колонки

02:05:01

вот поэтому переходим и описываем вот

02:05:04

яндекс система холодок степс

02:05:06

вот и здесь значит делаем наши шаги

02:05:13

how творог steps то есть наши шаги

02:05:19

внутри будут размещены сами шаги я

02:05:23

назову ну просто степ то есть можно

02:05:25

назвать конечно степой там да и три шага

02:05:28

это три блока степой там в принципе

02:05:30

вполне себе как мы говорим что-то

02:05:32

отдельная сущность

02:05:33

можно этом опускать и часто вы можете

02:05:37

встретить такую рекомендацию опускать

02:05:39

название вроде ой там вот то есть тут

02:05:42

уже смотрите по удобству но тогда степ

02:05:46

шаги давайте сделаем первый шаг потом я

02:05:51

его размножу и потом мы их уже выстроим

02:05:53

как нам нужно будет итак шаг что внутри

02:05:56

шага у нас находится название персонала

02:05:59

из у него есть цифра 0 1 мы ее будем

02:06:01

выносить через дата атрибут

02:06:04

мы и запишем этот атрибут и будем

02:06:07

описывать через псевдо-элемент потом

02:06:09

есть блок с текстом где абзац текстом и

02:06:12

блок с картинкой где есть картинка вот

02:06:15

кстати нам нужно экспортировать эти

02:06:17

изображения

02:06:19

вот давайте их

02:06:23

экспортируем вот и я конечно уже

02:06:27

приложил руку к этому макету помоему

02:06:30

потому что я экспортировал заранее

02:06:32

по-моему тут у них все-таки должен выйти

02:06:34

радиус скругления по 8 пикселей если я

02:06:37

не ошибаюсь

02:06:40

да по-моему тут вот все таки вот так вот

02:06:43

по 8 пикселей да они должны быть

02:06:45

скруглены по дизайну мы это скругление с

02:06:47

вами сделаем вот но перед тем как

02:06:50

вырезать эти скругления убираются даты

02:06:52

все тут было восемь я его убираю в ноль

02:06:56

зачем то есть мы сохраняем картинку

02:06:58

прямоугольную а потому что не важно

02:07:01

какая у нас будет картинка потом она

02:07:03

может поменяться на абсолютно любую

02:07:04

другую и контент-менеджер он не должен j

02:07:08

скруглять как-нибудь еще что-то даже

02:07:11

должно быть так мы загрузили любую там

02:07:14

прямоугольную картинку и и

02:07:16

cms обрезала под нужные размеры а

02:07:19

скругления мы добавляем с помощью css

02:07:22

вот соответственно так реализуем поэтому

02:07:27

сейчас я сохранить и три картинки

02:07:30

control клипа первой картинке вот вижу

02:07:33

rectangle в принципе посмотрю на превью

02:07:36

да на превью смотрю действительно то что

02:07:38

нужно но вот есть еще групп 55 с как бы

02:07:42

экранным да поэтому

02:07:44

0 1 то есть гру 55 и rectangle то есть

02:07:49

вот так через shift выберу

02:07:51

экспорт плюс но он воспринимает как два

02:07:54

слоя но это все должно быть один слой

02:07:57

поэтому rectangle сюда задвину в группу

02:07:59

55 вот так аккуратно либо можно выбрать

02:08:02

его и группу 55 и поражать kontrol г то

02:08:06

есть еще раз и сгруппировать чтобы

02:08:08

добиться того что это все одна группа

02:08:10

нажимаем экспорт обязательно смотрим

02:08:12

превью что то что нам нужно джипег

02:08:14

формат

02:08:16

экспорт 56 здесь папки image давайте

02:08:20

создадим новую папку назовем ее степс то

02:08:24

есть наши шаги степс и

02:08:27

сохраним здесь как 01 02 03 то есть шаг

02:08:31

010 этом степ 01 step2 степ

02:08:36

01

02:08:38

сохранить есть теперь control клик по 2

02:08:41

картинки

02:08:42

смотрю экспорт уже плюсик jpeg превью

02:08:46

все верно

02:08:47

сохраняю как степ 02

02:08:50

контракты по 3 картинки тут тоже все не

02:08:55

так просто смотрим картинка есть маска

02:08:57

все это лежит в групп 29 вот выбрали

02:09:00

групп 29 видим корректные размеры

02:09:02

экспорт выбираем jpeg смотрим превью

02:09:06

отлично степ 03 хорошо все картинки мы

02:09:10

сохранили теперь давайте поработаем с

02:09:11

первой карточкой я пока перенесут туда

02:09:14

чисто контент то есть внутри степа

02:09:17

персонала из потом кот кот в текст и

02:09:21

потом картинка image source

02:09:25

имидж

02:09:28

css почему то зашел

02:09:30

image

02:09:33

степс степ 01 ну и альтам степ имидж

02:09:38

конечно надо что-то более осмысленное но

02:09:41

мы семантикой сейчас не занимаемся

02:09:43

поэтому так теперь напишу здесь

02:09:47

необходимые классы то есть все это мы

02:09:49

уже стилизуем разграничено значит это у

02:09:53

нас заголовок персонала и со сделай его

02:09:55

тегами 4 h2 у нас там был чуть выше

02:09:59

сделаю так мы четыре помещу его сюда

02:10:03

контроле со счета выровняю кстати

02:10:06

прикрою лишние

02:10:08

далее на и 4 повешу класс класс равно

02:10:13

степ hidden то есть заголовок для шага

02:10:18

далее я говорил что вот эта цифра 0 1 мы

02:10:22

ее пропишем через псевдо-элемент а

02:10:24

значение мы возьмем из data атрибута то

02:10:26

есть пропишем сюда да то нам бы

02:10:29

равно 0 1 далее для текста ну

02:10:33

естественно текст мы помещаем в т.п. вот

02:10:36

в целом для таких карточек когда

02:10:38

зачастую всегда только один блок текста

02:10:40

то есть ну вот

02:10:43

в основном вот когда карточки то есть

02:10:45

там текст обрезается и там он выводится

02:10:47

только в один абзац и поэтому принципе

02:10:49

тут можно не предусматривать два абзаца

02:10:51

текста но если мы предусмотрим ничего

02:10:54

страшного тоже в этом не будет поэтому я

02:10:57

сделаю такой div как стоп

02:11:00

стоп текст то есть текст внутри степа и

02:11:04

потом т.п. и сюда наш абзац вот таким

02:11:07

вот образом

02:11:08

готова то есть зачем делается еще вот

02:11:10

этот div дополнительный да потому что

02:11:13

между тегами п отступ у нас по одному

02:11:15

ему но между блоком текста и кнопка и

02:11:20

картинка и заголовком отступ будет

02:11:24

совсем другой не такой как между

02:11:25

абзацами зачастую он больше вот для

02:11:28

этого вот степ текст есть и картинка

02:11:32

собственно картинка пусть так и лежит

02:11:35

картинка я картинка дадим ей класс класс

02:11:38

степ image то есть тоже мы по классу

02:11:42

будем стилизовать вот такая карточка у

02:11:44

нас получилось div с классом степ

02:11:46

давайте здесь все добавлю такой

02:11:49

комментарий что наш стек заканчивается

02:11:51

то есть то что он начинается мы понимаем

02:11:53

пути вы с классом степ то что он

02:11:55

заканчивается мы понимаем вот здесь вот

02:11:58

это не является какими-то ссылками да то

02:12:01

есть это не ссылки новым по ним по

02:12:03

крайней мере ну не никак не очевидно что

02:12:06

это ссылка это просто описание того как

02:12:09

работает продукт поэтому ссылке мы тут

02:12:10

нигде не делаем

02:12:12

вот что мы наверстали давайте посмотрим

02:12:14

вот выглядит примерно вот так и сейчас

02:12:17

стилизуем все это дело значит перехожу

02:12:21

div класс степ выбираю control shift x

02:12:25

опять же да в how it works переходим и

02:12:29

продолжаем здесь вставляйте и

02:12:32

стилизовать вот кстати

02:12:36

это у меня скрытая думаю почему они

02:12:38

пусты нет это заполнены да она просто

02:12:41

пустая вот х у турок степс то есть

02:12:44

оберткой пошли стемп стемп хайден степ

02:12:46

текст и степ имидж погнали для самого

02:12:49

степа он имеет ограниченную ширину мы

02:12:52

видим 390 то есть он не должен по идее

02:12:54

больше расти потому что

02:12:57

потому что у нас картинка хотя можно это

02:13:01

конечно организовать вот да но в данном

02:13:03

случае не буду это делать скажу что у

02:13:05

него макс улиц

02:13:09

390 пикселей то есть максимальная ширина

02:13:11

390 далее работаем по заголовку сначала

02:13:14

только вот с этим блоком потом 01 мы

02:13:17

тоже сделаем значит сам заголовок

02:13:19

персонал айс тут я перейду в inspect и

02:13:21

тут я уже наверно скопирую готовые

02:13:24

свойства вставлю в hidden и просто

02:13:27

избавлюсь от лишнего вот phone 7 или

02:13:30

джорджа это в кавычках , serif фон

02:13:35

styles and weight болт

02:13:38

730 line хоть сто пятьдесят

02:13:40

текст lines интер не надо color black

02:13:44

надо потому что у нас не black по

02:13:46

умолчанию отлично отступ вниз от него 55

02:13:50

ну это потом может его поменяем дал пока

02:13:53

55 м д 55 далее по тексту

02:13:57

тут я тоже скопирую из фирмы сразу

02:14:01

готовый блок по тексту значит таланта

02:14:05

normal фонд в 500 это тоже не стандарт

02:14:07

20 это стандарт в принципе ну пусть

02:14:10

будет да ты как бы карточка пусть у нее

02:14:12

свой будет функций слониха 150 цвет 42

02:14:16

но это по сути тоже к стандартным нужно

02:14:19

и оставить вот степ текст есть и отступ

02:14:23

от текста до картинки 60

02:14:26

mb 60 ну и собственно сама картинка пока

02:14:32

пока я ничего на ней не прописываю

02:14:35

смотрим переходим да вот что получилось

02:14:37

отличным

02:14:39

картинки к слову тоже можно задать

02:14:41

конкретный размер то есть вот до

02:14:47

сделать для нее корректный конкретный

02:14:50

размер чтобы вот она всегда была такой

02:14:55

по ширине давайте давайте так и сделаем

02:14:58

значит что мы пропишем у картинки ширина

02:15:01

100 процентов то есть ширина всегда идет

02:15:03

по карточке у карточки у нас большом

02:15:06

варианте

02:15:07

390

02:15:08

хейт all the object фейт опять же то

02:15:13

есть но на случай если вдруг сюда придет

02:15:15

какая-то нет не такой пропорции картинка

02:15:17

the object with cover мы можем сделать

02:15:21

вот и все будет корректно

02:15:24

отлично теперь поработаем с заголовком

02:15:28

персонала из то есть так чтобы а там

02:15:30

высвечивать и нужную нам 01 псевдо

02:15:33

элементом значит для степ хайден мы

02:15:37

создаем степ hidden by for и говорим что

02:15:41

в be for мы будем выводить

02:15:45

наше название

02:15:48

дата атрибута вот выглядеть это будет

02:15:52

вот так вот напишем count контент : и

02:15:58

здесь мы указываем от т.р. то есть

02:16:00

сейчас

02:16:01

час момент так контент контент да если

02:16:07

мы пишем кавычках то мы сюда передаем

02:16:10

строку которую мы хотим определить но

02:16:12

если мы обращаемся к атрибутам и сразу

02:16:14

обращаемся attr атрибут и название

02:16:16

атрибута data on амбра в нашем случае

02:16:19

вот то есть теперь перед нашим

02:16:21

заголовкам появится

02:16:22

01 вот мы видим 01 появилась на отлично

02:16:26

и теперь этот ноль один должен

02:16:28

отображаться так как он отображается в

02:16:30

дизайне а в дизайне он отображается вот

02:16:33

таким вот образом кликаю на него и

02:16:35

тоже копирую его свойства из фирмы

02:16:39

переношу их и

02:16:41

оставляем то что нужно функциям или

02:16:43

джорджия так где там у нас уже было в

02:16:45

принципе он family джорджей так у нас

02:16:48

следует ацтек hedin поэтому я указать не

02:16:51

буду normal это понятно фунт weight

02:16:54

400 чтобы он нет потому что он будет

02:16:56

наследовать а тут normal функций 150

02:16:59

line хайд 150 текстовая не нужен и цвет

02:17:04

нужен вот такой код получился давайте

02:17:06

проверим да вот до получилось неплохо но

02:17:10

теперь мы видим что наш текст должен

02:17:12

заезжать вообще-то на 01 должен немножко

02:17:16

заезжать вот таким вот образом мы видим

02:17:17

на как бы он заезжает вот тогда на 88

02:17:21

вот соответственно

02:17:24

как нам это можно сделать как этого

02:17:28

можно добиться мы сделаем следующим

02:17:30

образом то есть

02:17:32

мы

02:17:33

разместим нашу цифру 0 1 абсолютно

02:17:37

вот мы разместим абсолютно а весь наш

02:17:41

заголовок он будет занимать все вот это

02:17:43

пространство и у него будет отступ слева

02:17:46

padding 88 пикселей и сверху у него тоже

02:17:50

будет отступом ну вот мы видим 135 до

02:17:54

135 то есть у заголовка наш заголовок

02:17:57

это будет

02:17:59

словно вот такой вот большой блок у

02:18:02

число прозрачным только сделаем мигом

02:18:06

вот да вот заголовок это вот такой

02:18:08

большой блок в котором есть текст

02:18:10

персонал айс и он идёт с отступом слева

02:18:12

и сверху вот но там еще внутри абсолютом

02:18:17

прописано единицы вот то есть

02:18:22

88 и 135 возвращаемся к степ 1 по 1 таб

02:18:27

135 по 1 лифт 88

02:18:32

перейдем проверим так вот что получилось

02:18:36

так проверяем ну окей теперь

02:18:40

единицу мы вносим в абсолют значит степ

02:18:45

hidden у нас позиция латиф позиция

02:18:47

креатив есть единицу вносим в абсолют то

02:18:51

есть мы на be for вешаем позицию

02:18:55

абсолют лифт 0

02:18:59

топ

02:19:01

0 вот и почти получили то что нам нужно

02:19:05

вот весьма весьма похоже переношу на be

02:19:10

for абсолютно f 0 так 0 если мы

02:19:14

посмотрим по дизайну смотрите вот дизайн

02:19:15

и мы видим так мы видим букву п и мы

02:19:19

видим вот нижнее основание единицы так

02:19:22

как она стоит возле буква п да вот можно

02:19:25

поэтому ориентироваться и вот что мы

02:19:27

завершали вот пожалуйста я увеличу да

02:19:31

вот аналогично у нас получился тот же

02:19:34

самый результат

02:19:36

отлично мы это сделали вот instep hidden

02:19:39

красота

02:19:41

далее де с текстом и картинка

02:19:46

и

02:19:47

вот здесь мы сейчас с вами завершали

02:19:50

полностью эту карточку и мне бы еще

02:19:52

хотелось

02:19:53

показать как можно по-другому разместить

02:19:57

изображение на тот случай если вдруг у

02:20:00

нас будут разные изображения и разная

02:20:05

ширина карточки но сейчас поясню то есть

02:20:08

к примеру

02:20:09

если у нас ширина карточки будет

02:20:12

варьироваться

02:20:14

становиться больше или меньше и как

02:20:17

сделать так чтобы картинка оставалось по

02:20:21

ширине всегда такой же и по высоте тоже

02:20:24

в правильных пропорциях

02:20:26

вот давайте посмотрим как это сделать

02:20:29

интересный прием который возможно я

02:20:33

думаю вам пригодится выглядеть он будет

02:20:35

следующим образом для этого нам нужно

02:20:37

будет картинку поместите в

02:20:38

дополнительный div давайте скажем степа

02:20:41

имидж

02:20:43

wrapper например вот так и сама картинка

02:20:46

внутреннего лежит как стек имидж вот

02:20:49

степ имидж wrapper он будет определять

02:20:52

размер блока под картинку то есть сама

02:20:56

по себе степ имидж ей вообще дам пока

02:20:58

дисплей ну то есть она не отображается

02:21:00

нам это пока не важно пока и его так

02:21:04

сверну и поработаю с степ имидж wrapper

02:21:08

давайте дам ему некий background brown

02:21:10

color например вот такой темно-зеленый

02:21:14

вот и мы сейчас посмотрим ты сейчас его

02:21:17

не видно потому что его

02:21:20

нет он есть но нет высоты вот он степ

02:21:23

имидж rapper 390 на 0 до но вот размеры

02:21:26

у него по ширине 390 то есть как блок на

02:21:30

всю карточку растягивается и теперь мы

02:21:33

сделаем так чтобы у него была высота

02:21:37

пропорциональна ширине

02:21:39

такая же как пропорции картинки то есть

02:21:41

вот наша картинка размер 390 на 492

02:21:47

мы сделаем следующее

02:21:49

давайте узнаем пропорции картинки

02:21:53

высоты к ширине то есть 492 разделить на

02:21:59

390

02:22:02

1261 то есть это у нас получается

02:22:05

пропорция то есть нашу ширину 390 если

02:22:09

ее умножить на 12

02:22:13

61

02:22:14

если умножить на 1261

02:22:19

то

02:22:21

получится 492

02:22:24

вот и

02:22:26

теперь мы зададим данному блоку

02:22:30

padding

02:22:33

padding сверху или снизу то есть по 1

02:22:36

сверху или снизу будет влиять на его

02:22:38

высоту но в процентах если это делать то

02:22:41

проценты будут высчитываться от ширины

02:22:43

да то есть мы сами рассчитали что если

02:22:46

ширину умножить ну если взять

02:22:49

ширина умножить на 1 и 261 либо говоря

02:22:53

другими словами если взять сто двадцать

02:22:55

шесть процентов ширины это получится

02:22:58

высота картинки вот и соответственно

02:23:01

находим этот блок

02:23:03

вот он и

02:23:05

нам нужно дать его высоту относительно

02:23:08

ширины вот поэтому такой хак мы даем ему

02:23:12

но padding топ или боттом неважно

02:23:15

padding потом например сто двадцать

02:23:19

шесть процентов то есть что получается

02:23:21

до 126 процентов откуда они были

02:23:24

посчитаны это если мы даем по 1 ботом

02:23:28

100 то это получается отступ вниз сто

02:23:32

процентов но сто процентов идет от

02:23:33

ширины то есть вот компьютер если мы

02:23:35

заглянем по 1 ботом 390 получился у нас

02:23:39

на моего мы его задали 100 процентов но

02:23:44

это идет 100 процентов от ширины этого

02:23:46

блока ширина 390 на 100 390 вот и если

02:23:51

мы даем по 1 ботом

02:23:53

126 то это идет 126 от ширины

02:23:57

до 390 это вот как раз пропорция высоты

02:24:00

картинки того тогда вот по 1 ботом 491

02:24:04

если посмотреть как раз 492 ну там плюс

02:24:08

минус да вот собственно вот таким вот

02:24:12

подходом мы можем задать такой гибкий

02:24:16

блок для изображения то есть он будет

02:24:18

расти и будет уменьшаться вместе с

02:24:21

размером карточки но его высота всегда

02:24:24

будет оставаться пропорционально как вот

02:24:26

должна быть пропорциональна картинка вот

02:24:29

эти пропорции размеров всегда будут

02:24:31

сохранены поэтому

02:24:33

записываем сюда по 1 ботом 126 то есть

02:24:36

он будет теперь расти пропорционально и

02:24:38

картинка которая размещена в нем она

02:24:41

будет

02:24:43

всегда тянутся по нему вид 100 хайд 100

02:24:48

ну и все то есть тянется по ширине

02:24:50

тянется по высоте и обжиг хит ковер

02:24:53

чтобы корректно и было масштабирование

02:24:55

перейдем проверим

02:24:58

так щас тут нюанс только по разметке

02:25:01

надо проверить что все верно у меня степ

02:25:03

имидж wrapper внутри и степ image

02:25:07

степа медж rapper внутри степ имидж до

02:25:11

картинка должна быть внутри него а

02:25:13

сейчас padding и и выталкивает вниз она

02:25:15

как бы должна быть по нему до то есть он

02:25:18

должен быть родителем позиция нравилось

02:25:20

if a картинка должна быть абсолютным

02:25:22

босс был 0 до 0 ну вот переходим

02:25:27

проверяем а отлично вот он наш стек

02:25:30

имидж rapper вот она картинка все

02:25:33

красиво аккуратно и

02:25:35

чего мы с вами добились какого эффекта

02:25:39

что если эта карточка будет расти то

02:25:42

есть давайте возьмём вот наш стек и если

02:25:46

ее ширина будет примеру там вот я ее

02:25:49

увеличиваю мы видим она растет то есть

02:25:52

вот текст растет и вы видите растет

02:25:54

ширина картинки и высота растет

02:25:56

пропорционально

02:25:58

да вот в этом фишка вот плюс если будут

02:26:03

другие такие карточки то это пропорций

02:26:05

она везде одинакова для всех и даже если

02:26:07

там картинки будут разного размера ну

02:26:10

вот так случилось что мы нарезали разные

02:26:12

картинки или вот как-то так туда

02:26:13

загрузили и они разные по высоте ту все

02:26:16

равно вот это вот пропорции с дизайна

02:26:18

она у нас уже высчитано и сохранена и

02:26:21

они уже будут под неё подгоняться вот в

02:26:23

этом класс вот в этом фишка да и при

02:26:26

уменьшении мы видим все тоже также

02:26:28

пропорционально вот поэтому вот такой

02:26:31

вот подход мы с вами использовали и

02:26:33

можно его брать на постоянку отличным мы

02:26:36

сделали первую карточку теперь я могу

02:26:39

продублировать

02:26:41

сделав во вторую и третью и дальше уже

02:26:43

займусь их выравниванием значит вот степ

02:26:46

у нас один мы дублируем

02:26:49

23 значит меняем текст во второй в 3 во

02:26:54

второй это у нас вот брайтон understand

02:26:56

и

02:26:58

так сейчас момент куда-то она прыгнула

02:27:02

или я не скопировал то что нужно kontrol

02:27:05

ц

02:27:06

вот первый стоп вот он второй мы пишем

02:27:09

дата намбер 02 пишем другой заголовок

02:27:13

вставляю другой текст и

02:27:15

другая картинка степ 02 это был второй

02:27:19

блок и третий блок дата нам боль 03

02:27:22

здесь

02:27:24

тоже

02:27:27

копирую

02:27:29

заголовок

02:27:31

так

02:27:33

и

02:27:34

копирует текст

02:27:42

копирую текст

02:27:45

вот так и степ 03 отличным переходим

02:27:49

проверяем сейчас мы с вами пока мы

02:27:52

только вряд наблюдаем то есть не в

02:27:54

колонку наблюдаем три карточки вот нам

02:27:56

их нужно выстроить в ряд выстраивать мы

02:27:58

будем с помощью flexo и колонок вот это

02:28:01

такой подходящий сюда способ в принципе

02:28:05

здесь можно использовать гряды тоже

02:28:07

отлично сработает и fleck с колонками

02:28:10

тоже отлично сработает вот поэтому можно

02:28:14

сделать два варианта с заделом на

02:28:17

адаптив подойдут подойдут в принципе оба

02:28:21

вот поэтому

02:28:23

значит как это будет выглядеть мне

02:28:26

наверное все таки

02:28:33

ну давайте давайте реализуем вариант на

02:28:35

грядах но как бы nav лекциях он тоже тут

02:28:37

интересно значит вариант на грядах будет

02:28:41

каким у нас есть аккаунт wirex temps это

02:28:44

будет грид контейнер и это уже будут

02:28:46

элементы внутри сетки вот мы внутри grid

02:28:49

контейнера объявим

02:28:52

колонки

02:28:53

автоматический размер колонок то есть за

02:28:56

делом под адаптив по 390 пикселей то

02:28:58

есть когда они все помещаются то они все

02:29:00

размещены когда они не помещаются они

02:29:02

будут ужиматься давайте посмотрим как

02:29:06

steps

02:29:08

вот степс наши шаги значит мы пишем

02:29:12

дисплей grid

02:29:15

далее указываем колонки говорит темплейт

02:29:18

collapse и здесь мы указываем крепит

02:29:22

функцию рипит то есть мы не знаем

02:29:24

сколько у нас колонок ну на самом деле

02:29:26

три но под адаптив они будут уменьшаться

02:29:29

поэтому мы четко и количество не

02:29:30

указываем мы говорим all the feet то

02:29:33

есть не говорим какое количество all the

02:29:34

feet то есть вот они авто размещаются

02:29:37

сколько

02:29:38

получится разместить только размещать

02:29:40

столько и будет размещено и размер

02:29:43

каждой колонки по 390 пикселей то есть я

02:29:45

его здесь задаю фиксирована чтобы

02:29:49

ну мне важно чтобы они как бы да все

02:29:51

фиксирована одинаковый имели размер я не

02:29:54

хочу такого чтобы одна сильно уже

02:29:56

малость 2 нет вот поэтому одинаковый

02:29:59

размер для всех вот и нам нужен отступ

02:30:01

между колонками

02:30:02

принципе здесь если посмотреть вот 95

02:30:05

пикселей между ними поэтому колон гэп по

02:30:10

95 пикселю такой вариант переходим

02:30:13

проверяем отлично да вот они выстроились

02:30:16

мы видим что ну да чуть они неровно но

02:30:19

это нормально на самом деле вообще 2

02:30:21

должна быть сильно ниже и 3 ниже вот

02:30:24

поэтому мы сейчас сделаем посмотрим по

02:30:26

дизайну да вот мы видим первое и вот мы

02:30:30

видим 2 и она прям сильно ниже то есть

02:30:32

смотрите 1 сверху 52 2 сверху 339

02:30:38

-52

02:30:39

339 -52 287 это отступ у второй

02:30:46

переключаясь в дизайн 200

02:30:50

287 марджан так мы можем у нее задать то

02:30:54

есть по денги у нас там или по din 287

02:30:58

то есть мы выбираем наш второй степ

02:31:02

можно и на по din повесить в принципе да

02:31:05

вот второй степ

02:31:07

padding топ 287 пикселя вот и вот он

02:31:13

уехал вниз второй степ соответственно

02:31:16

это нужно для него прописать можно на а

02:31:18

псевдо-элемент повесите нас едва начал 2

02:31:21

можно просто класс какую-нибудь добавить

02:31:24

и по классу это дать тут уже не суть я

02:31:27

наверное повешу на нас и child семья

02:31:30

будет степ далее :

02:31:35

2 и

02:31:36

по 1 таб 287 переходим проверяем отлично

02:31:41

3 тоже должна быть чуть ниже поэтому

02:31:44

переходим смотрим так у 1

02:31:47

52 у 3 106

02:31:51

106

02:31:54

-100 6 минус 52 54 на и

02:31:59

прописываем 54 просто продублировала

02:32:02

тогда значит для 3

02:32:05

54 по 1 таб

02:32:08

отличного 3 тоже чуть съехала вниз и вот

02:32:11

красота вот так у нас три карточки

02:32:13

получилось это такой вариант на грядах

02:32:15

он так попроще чем на flexor в плане

02:32:17

записи вот в принципе все с этой секции

02:32:22

у нас готова давайте посмотрим тут у нас

02:32:24

даже уступ вниз какой-то имеется да по 1

02:32:28

будем 51 до он так и остался еще уже

02:32:30

прописывал вот с этой секции все в

02:32:33

порядке [музыка]

02:32:34

[аплодисменты]

02:32:35

[музыка]

02:32:36

а переходим к секции с видео значит

02:32:39

здесь опять же по структуре уже все

02:32:43

довольны знакома общей контейнер общая

02:32:46

секция контейнер ряд 2 колонки на ну

02:32:50

давайте прорисуем но я думаю тут уже

02:32:52

все плюс-минус понятно после те блоков

02:32:56

которые мы сделали то есть будет такая

02:32:59

большая секция вот она зеленого зеленого

02:33:02

фона

02:33:04

вот раз далее внутренние идет контейнер

02:33:08

вот он синий пусть также остается далее

02:33:11

внутри контейнера

02:33:13

ряд вот на разные функции у контейнера

02:33:17

своя функция у ряда своя далее внутри

02:33:20

ряда блок вот черный пусть будет или

02:33:23

желтый желтый пусть под один контент и

02:33:25

второе под видео вот таким вот образом в

02:33:29

общем переходим и верстаем

02:33:32

перемещаюсь в яндексе м.л. сворачиваю ту

02:33:35

секцию

02:33:36

начинают следующую смотрю она называется

02:33:39

история буду называть ее историю

02:33:42

соответственно с action класс история

02:33:46

далее контейнер далее store роу

02:33:53

истории road то есть наш ряд далее

02:33:57

внутри ряда историй

02:33:59

контент и истории видео

02:34:04

вот таким образом отличный

02:34:08

теперь наполняем все это дело контентом

02:34:11

копирую

02:34:13

так

02:34:15

заголовок

02:34:18

копирую текст

02:34:20

и

02:34:23

кнопка

02:34:24

get started

02:34:27

так для кнопки

02:34:30

не туда немножко пошел вставлять значит

02:34:33

внутри контента у нас будет

02:34:36

заголовок текст и кнопка следуем такому

02:34:39

же принципу то есть истории hidden как у

02:34:43

нас было ранее в него заголовок далее

02:34:46

для контента тоже отдельный блок store

02:34:48

текст и там уже абзаце истории текст

02:34:52

вот и

02:34:54

ну для кнопки тоже тогда на 1 у нас

02:34:57

кнопки пав лексом та история

02:34:59

battles

02:35:01

или история батон и

02:35:05

уже здесь будет кнопка

02:35:08

кнопка это будет ссылка с

02:35:12

классом батон и баттенберг потому что

02:35:16

она большая вот вот так на отличный

02:35:19

теперь переношу контент у

02:35:22

нас git status-

02:35:25

заголовок и

02:35:28

текст

02:35:30

внутри tgp

02:35:34

вот так вот вот что получилось историй

02:35:37

контейнер ряд потом storie контент

02:35:42

открыли закрыли истории видео пока

02:35:44

пустой внутри контента header тексты

02:35:47

один текст и кнопочка отличные видео

02:35:51

пока я просто напишу видео вот хотя

02:35:53

можно для него картинку сохранить

02:35:55

давайте сохраним control клик так тоже

02:35:58

тут смотрим где тут как что-то с

02:36:02

картинкой связано dota картинки тоже

02:36:04

радиус скругления кстати забыл сюда

02:36:06

радиус скругления вернуть по 8 пикселей

02:36:08

до дела картинки 16 значит я их сначала

02:36:12

отменяю тут тоже по моему да тут тут так

02:36:18

сразу да вот теперь получилось отменить

02:36:21

да здесь кстати картинка и сверху есть

02:36:24

rectangle 9 слой наложения которые

02:36:26

делает

02:36:27

темнее вот поэтому этот момент тоже

02:36:32

можно продумать смотрите какая идея то

02:36:34

есть идея в том что сюда помещено видео

02:36:36

да и оно такое вера lame прикрыта но

02:36:40

когда мы нажимаем на кнопку

02:36:42

то наверное этот умерли должен пропадать

02:36:44

и видео начинает играть но потом видимо

02:36:49

мы можем навести и нажать на паузу и он

02:36:52

опять должен появиться нолд если прямо

02:36:53

так сильно продумать этот вариант тогда

02:36:56

я пока сохраню просто картинку потом уже

02:36:58

можно будет видео какой-то подыскать и

02:37:00

сохранить но пока просто с картинка

02:37:02

сделаем значит а

02:37:04

вот наша картинка

02:37:06

превью да все верно джипег и давайте

02:37:10

создам здесь папку история

02:37:16

история

02:37:18

вот и в ней мы сохраним это как и видео

02:37:22

кого-то есть такая обложка под видео

02:37:25

видео ковра вот плюс саму иконку тоже

02:37:29

нужно сохранить это вот она иконка лардж

02:37:31

это уже будет и свага формат да тут за

02:37:35

моего видео не видно вот до иконка

02:37:37

экспорт из рога вот она белая такая или

02:37:39

видно но оно есть и это плей лайт в

02:37:43

принципе нормальное название

02:37:44

отличным все эту картинку сохранили

02:37:50

ну и сюда и вставим заверстать ну

02:37:52

давайте это оставим на потом сначала

02:37:55

секции разберемся значит секция

02:37:57

называется история но вот перед этим я

02:37:59

бы еще вот эти картинки скруглил который

02:38:01

я забыл скруглить до этого вот эти

02:38:03

картинки они у нас называют степ имидж и

02:38:06

так как у меня это сейчас еще открыта в

02:38:08

блоке how творог вот он степ image

02:38:13

давайте их скруглим барда радиус варда

02:38:18

радиус по 8 пикселей вот перейдем

02:38:21

проверим

02:38:22

они скруглены но зеленый фон остался у

02:38:25

блока под ними backgroundcolor надо

02:38:27

убрать у wrapper а вот да теперь все в

02:38:31

порядке теперь блок с how the rocks у

02:38:33

нас полностью закрыт закрывая его css и

02:38:37

вот здесь где house враг добавляю но он

02:38:39

теперь мы работаем только с история в

02:38:42

css в блоках создаем файл история css

02:38:48

подключаем его после how it works

02:38:53

история сердце с подключили

02:38:56

переносим в него все стили сильно классы

02:39:00

control shift x данной секции вставляем

02:39:04

вот он

02:39:05

история и

02:39:06

погнали его стилизовать значит сама

02:39:11

секция фон backgroundcolor

02:39:15

вставили зеленый далее смотрим на

02:39:17

отступы

02:39:19

вот ступы у нас 229 176

02:39:24

padding

02:39:25

229 сверху и

02:39:28

170

02:39:32

176 снизу есть далее контейнер у нас уже

02:39:36

прописан ряд выравниваем по flexo 31 но

02:39:40

30 вот такая классический вариант

02:39:42

доступа значит дисплее flex ну пусть

02:39:47

будет 6 фай контент space between там

02:39:49

посмотрим на далее вертикальное

02:39:52

выравнивание я думаю тоже нужно то есть

02:39:54

она по центру идет мы видим текстом как

02:39:56

бы по центру картинки вот поэтому

02:40:00

давай на этом

02:40:02

центр отступ между элементами давать

02:40:05

историй контент дадим маржин райт 30 вот

02:40:08

в принципе можно и на flex повесить

02:40:10

колом гп-30 но тут можно сказать что он

02:40:13

еще

02:40:15

есть там 5 процентов сафари который его

02:40:17

не поддерживает да и поэтому можно еще и

02:40:21

то не все там пользователем и шт айфонов

02:40:23

обновляются одновременно ну или в

02:40:26

принципе обновляются старые поэтому

02:40:27

можно пока то есть колон гэп тут можно

02:40:30

поспорить используем его в своем проекте

02:40:32

или нет для flex бокса вот поэтому если

02:40:34

нет то вот так margin райт 30 store

02:40:38

контент есть

02:40:40

посмотрим что получилось да в целом

02:40:42

неплохо кстати один важный момент как

02:40:44

только мы задали цвет фона отличный от

02:40:47

белого то есть темный то сразу же там же

02:40:50

надо задать цвет текста тоже белый а вот

02:40:53

поэтому переходим сюда где мы задали в

02:40:56

store и делаем color

02:40:59

раза три белый цвет текста вот и теперь

02:41:03

на наш текст отлично читается стилизуем

02:41:06

дальше контента есть для заголовка

02:41:09

джорджия ball пятьдесят сто пятьдесят

02:41:11

семь процентов и

02:41:13

погнали для заголовка фан-сайт 50

02:41:18

line хаит 157 фонд weight 700

02:41:24

font family

02:41:26

вот джорджа да она есть в стандартном

02:41:29

списке но мы ее от timestream сервисе в

02:41:32

принципе можно в стандартном

02:41:34

использовать как бы нормально

02:41:35

вот но был выбран такой вариант уже прям

02:41:39

наверняка мы ее прям вообще подключили

02:41:41

чтобы она точно везде было

02:41:44

далее это у нас был заголовок заголовка

02:41:48

33 вот опять же да то есть можно тут как

02:41:50

шапки тоже вот это следовать там старик

02:41:52

едино плюс что-нибудь марджан топ 33 но

02:41:56

можно просто на нее повесить воздух вниз

02:41:58

33 да и все вот далее для текста отступ

02:42:02

вниз 57

02:42:05

аналогично можно сделать плюс что-нибудь

02:42:08

марджан топ 57 по самому тексту

02:42:12

25 здесь размер то есть нестандартный и

02:42:15

и сами болт то есть фонд weight 600 и

02:42:19

функций с 25 и

02:42:22

line хайд 157 где-то вот она была

02:42:25

процентов вот отличным store текста же

02:42:28

сделали для кнопок для кнопки

02:42:31

кнопка это у нас данном случае просто

02:42:34

обертка и

02:42:37

да ну все что можем дать это дисплей

02:42:40

flex вот и тогда тут с кнопкой типа все ок

02:42:45

ограничения по ширине для этого блока

02:42:48

стоит дать давайте посмотрим вот

02:42:50

580 пиксели ограничения по ширине и to

02:42:53

content

02:42:55

макс лиц

02:42:57

580 пикселей

02:43:00

580 пикселей готова переходим проверяем

02:43:04

вот так красота

02:43:06

теперь у нас остался блок с видео делаем

02:43:10

его

02:43:11

так переходим сюда батон battle.net

02:43:14

истории видео и работаем с ним значит

02:43:17

storie видео что у нас будет у нас будет

02:43:20

само видео

02:43:22

потом у нас будет оверлей сверху видео и

02:43:26

кнопка

02:43:28

значит пока в роли видео у меня будет

02:43:30

выступать картинка это будет картинка с

02:43:33

классом истории

02:43:36

видео

02:43:38

отжиг назову так потому что сейчас эта

02:43:41

картинка а потом вообще по идее это

02:43:42

видео должно быть source

02:43:48

image

02:43:51

история video cover back alt нам видео

02:43:56

например

02:43:57

далее картинка есть потом должен быть

02:44:01

overlay сверху который как бы появляется

02:44:04

и исчезает и картинг и кнопка давайте

02:44:08

сделаем кнопку батон с классом

02:44:12

стали

02:44:14

видео

02:44:16

dad базам вот истории видеобатл имидж

02:44:21

картинку

02:44:23

прописываем сюда image история plate

02:44:28

white svg

02:44:29

play

02:44:31

вот так

02:44:33

отличный далее hover сверху но я его

02:44:37

делаю тогда здесь

02:44:39

сразу так storie video overlay

02:44:42

истории video url

02:44:46

вот просто такой div теперь и стилизуем

02:44:49

все это дело control shift x вот история

02:44:52

видео у нас уже была и стилизуем дальше

02:44:55

значит посмотрим как это все выглядит

02:44:58

так картинка разместилась кстати под

02:45:00

картинкой есть белый фон и возможно это

02:45:03

она так было экспортировано то есть это

02:45:05

вполне себе может быть такой вариант

02:45:08

давайте это проверим

02:45:11

отобразить открыть изображение новой

02:45:13

вкладке

02:45:16

вот да да и вот вы видите на белая

02:45:19

полоска под картинка то есть этого быть

02:45:21

не должно

02:45:22

это бывает присутствует когда были

02:45:24

макеты photoshop фотошопе это вообще

02:45:26

встречалась очень часто в фильме это уже

02:45:29

реже но все равно такое бывает вот

02:45:32

такого быть не должно то есть давайте

02:45:33

разберемся что здесь не так

02:45:36

rectangle это сверху поверх это сама

02:45:40

картинка

02:45:41

перейду на inspect css тут выберу вид

02:45:45

табличный вот такой то и ball file name

02:45:49

кликнув image.png

02:45:50

он сейчас откроет эту картинку вот да и

02:45:54

но по идее нормально

02:45:56

но тут я правда не пойму

02:45:59

открыть изображение в новой вкладке оно

02:46:02

белое на белом

02:46:04

да тут тут непонятно

02:46:08

вот но

02:46:09

[музыка]

02:46:16

но здесь здесь вроде бы порядок

02:46:19

но экспортируется почему-то с

02:46:23

смотрите фил имидж есть еще еще кое-то

02:46:26

фил заливка

02:46:28

jpeg превью

02:46:29

[музыка]

02:46:33

может быть это заливка фактор влияет нет

02:46:36

я не думаю ну если я уберу эту заливку

02:46:39

еще раз я попробую экспортировать

02:46:41

как видео кого

02:46:44

только уже удалив заливку

02:46:48

нет все то же самое то есть ну да

02:46:50

сироток экспортируется вот поэтому в

02:46:53

общем не нужно избавиться от этой линии

02:46:57

которую здесь вообще не видно

02:47:02

895 на 500 1611 вот это кстати возникает

02:47:06

из-за того что у нее вот такой вот

02:47:08

размер вы видите 516 и 11 вот кто-то по

02:47:12

высоте давайте сделаем ее размер просто

02:47:15

516 не знаете как лучше мы нажмем

02:47:18

constraint про porsche нас то есть

02:47:20

сохранять пропорции и только теперь я

02:47:22

поменяю и 516 просто на 516 вот все и

02:47:27

теперь я сохраняю

02:47:29

мне думает из этого

02:47:32

скорее всего вот и да вот все контроллер

02:47:36

она мне открыта в браузере мы видим

02:47:39

белая линия ушла и отсюда тоже ушла

02:47:41

отлично то есть да мы все-таки

02:47:43

доработали до того момента что все в

02:47:45

порядке

02:47:46

такой запасной вариант вот прямо прямой

02:47:49

в лоб можно было вот эту исходную

02:47:50

которую мы открыли просто сохранить вот

02:47:53

на картинке должны быть без вот этих

02:47:55

белых полос и так далее вот как сейчас

02:47:57

отличным картинка есть ну теперь

02:48:01

собственно работаем то есть смотрите

02:48:03

видео у нас да вот есть некие тоже

02:48:06

масштаб видео тоже есть некие пропорции

02:48:08

то есть мы можем поступить

02:48:10

так же как с

02:48:14

точно так же как с карточками можно

02:48:16

поступить таким же образом то есть вот у

02:48:19

нас пропорции до

02:48:23

895

02:48:25

895 это размер блока с видео это размер

02:48:28

вот этого истории видео то есть нас торе

02:48:30

видео я вижу макс vitz

02:48:34

895 пикселей

02:48:36

так точно да прям такой большой размер

02:48:40

вешаем на него макс вид с 895 далее его

02:48:46

высота будет пропорциональна ширине то

02:48:50

есть мы вот берем здесь вызываем

02:48:52

калькулятор

02:48:54

делим 516 на

02:48:57

895 получаем 0 57 то есть его высота это

02:49:01

57 процентов

02:49:03

от на 57 там и 6 до

02:49:07

57 процентов

02:49:09

системы 5

02:49:12

от ширины

02:49:14

соответственно мы делаем по 1 ботом там

02:49:17

или топ неважно

02:49:20

57 и

02:49:23

65 процентов ну тактику чтобы точнее

02:49:26

было да то есть теперь у него получится

02:49:28

высота будет такая же как у картинки в

02:49:30

пропорциях к этой ширине к этой до

02:49:33

ширине то есть 895 на 516 переходим

02:49:36

проверяем тут надо из него контент весь

02:49:39

удалить вид пока пропишу 895 да вот

02:49:42

просто контента нет так что он чересчур

02:49:46

большой получился компьютер потому что

02:49:50

его 57 процентов считаются от блока в

02:49:52

котором он лежит от 100 reroll а мне

02:49:54

нужно внутреннего значит да тут нужно

02:49:56

только внутри него что-то создавать вот

02:49:59

поэтому вот этот

02:50:01

прием 57 до нам нужно внутреннего

02:50:04

wrapper создавать нужно внутреннего

02:50:07

истории видео wrapper вот нужно

02:50:11

внутреннего его делать этот rapper и на

02:50:14

него давать по 1 таб то есть он

02:50:17

растянется на сто процентов этой ширины

02:50:19

об один топ будет тоже от этой ширины

02:50:22

вот вот так store wrapper и сюда

02:50:24

какую-нибудь backgroundcolor коралловый

02:50:26

давайте чтобы мы его видели

02:50:30

да только я его не прописал истории

02:50:33

wrapper и вот это пока закомментируем и

02:50:37

сделаю вот так истории wrapper

02:50:40

вот отлично то есть таким образом

02:50:45

так и ну-ка

02:50:55

макс весна потому что здесь макс vitz

02:50:57

если бы здесь была vitz да или был

02:51:00

какой-то контент вот то вот

02:51:08

вот порядок вот такой истории wrapper у

02:51:11

нас получился

02:51:13

ладно в общем наполняй теперь его

02:51:16

контентом ну вот где в чем где в том что

02:51:22

бы

02:51:27

чтобы масштабировать пропорционально все

02:51:30

это дело сейчас посмотрим как это

02:51:31

сделать

02:51:32

значит

02:51:35

наша картинка которая как бы будет

02:51:38

играть роль видео она будет

02:51:40

растягиваться пасторе видео в рапиру то

02:51:43

есть торе видео wrapper будет для нее

02:51:44

позиций нравитесь а

02:51:46

картинка которая у нас имеет класс

02:51:50

историю видео обжиг будет по нему

02:51:51

тянутся то есть позицию абсолют f0 топ 0

02:51:57

ширина 100 процентов высота сто

02:52:00

процентов переходим проверяем можете

02:52:04

получилось тянется но

02:52:07

немножко не так как бы хотелось истории

02:52:10

видео ну вот смак свидеться работает

02:52:14

895

02:52:16

окей ладно тогда пока возможно от этой

02:52:21

идеи откажемся истории видео пока пусть

02:52:23

будет ширина 895 да и общем просто тогда

02:52:28

будет пропорциональная картинка да она

02:52:30

тут все равно 1 видео тоже будет

02:52:32

примерно в такой же пропорции

02:52:34

вот ну тогда тут и нет смысла это так

02:52:38

растягивать все дело тогда истории видео

02:52:40

wrapper тоже не нужен просто да просто

02:52:43

storie видео просто внутри картинка

02:52:45

которая история уже просто вот размещена

02:52:49

вот она есть вот кстати

02:52:54

да вот она просто размещена далее

02:52:57

истории видео rapper все равно делать и

02:52:59

впадин топайте все не нужны кнопкой

02:53:02

оверлей внутреннего

02:53:04

я будут

02:53:06

кстати кнопку можно положить в оверлей

02:53:09

вот и

02:53:11

при нажатии он будет пропадать но

02:53:15

приходили он будет появляться вот так

02:53:17

истории video overlay находится поверх

02:53:19

всего истории видео вот значит сюда

02:53:22

позишн абсолют l0 t0 до

02:53:29

все таки нам этот код понадобился но

02:53:31

только здесь вот мы его растягиваем

02:53:33

далее смотрим на overlay на его фон то

02:53:36

есть вот он rectangle 9 был отключен это

02:53:39

черный из 20 процентами в принципе я из

02:53:42

инспектор сразу rgb скопирую

02:53:45

вот такой

02:53:47

backgroundcolor

02:53:51

вот он и рыба

02:53:53

отлично переходим проверяем да вот но

02:53:57

только родителям у него историю video

02:53:59

overlay рабби родителям должен быть

02:54:02

истории видео истории видео wrapper у

02:54:04

нас уже удален вот

02:54:07

да отлично все умерли появился иконка

02:54:10

должно быть по центру поэтому тоже

02:54:12

центрируем и и в общем то вот историю

02:54:15

видео батон позишн абсолют в 50

02:54:18

процентов топ 50 процентов transform

02:54:21

translate

02:54:24

transform

02:54:29

transform

02:54:30

translate минус 50 процентов , минус 50

02:54:36

процентов пододвинули и и четко по

02:54:38

центру вот она кнопочка наша стоит

02:54:40

кстати да благодаря нашим сбросом потому

02:54:43

что мыло ботана все сбросили вот так все

02:54:45

это красиво аккуратно то есть дано мне

02:54:47

надо нам не пришлось сейчас сбрасывать

02:54:49

что-то из стандартных свойств браузера

02:54:52

кнопки вот таким вот образом это

02:54:54

подготовили под видео вот видео в

02:54:57

принципе можно будет разместить уже я

02:54:59

думаю может следующем в следующей части

02:55:02

когда мы

02:55:04

сделаем полностью завершаем потом

02:55:07

вернемся сюда и скачаем видео и поставим

02:55:10

пока оставим вот так то есть такая

02:55:12

заготовка

02:55:14

переходим дальше следующая часть у нас

02:55:17

это own product data есть эта секция

02:55:20

была такая довольно быстро я сворачиваю

02:55:24

секцию истории добавляя к ней но и будем

02:55:28

делать секцию our product по секции ауэр

02:55:31

produce что у нас здесь кстати нет ранок

02:55:34

не переходить потому что в секции

02:55:36

история

02:55:38

контейнер был пошире то есть тут

02:55:40

контейнер мы видим 1506 вот я

02:55:43

использовал стандартный поэтому

02:55:45

возвращаемся к store и здесь контейнер

02:55:47

нужно поправить то есть я добавлю сюда

02:55:49

класс контейнер контейнер white он будет

02:55:53

шире у него будет ширина под контент

02:55:56

1506 плюс 30 пикселей по 15 поля слева

02:55:59

справа вот поэтому добавляем в старик

02:56:03

контейнеру класс контейнер white далее

02:56:06

заходим в bass css где он нас описан

02:56:09

контейнер добавляем контейнер white и

02:56:12

пишем для него ширину 1506 это под

02:56:16

контент но так как есть поля по 15

02:56:19

1536 вот таким образом все переходим

02:56:22

проверяем да вот теперь это уже все

02:56:25

похожи на только должно быть по макету

02:56:27

вот контейнер видим ширина 1536 100

02:56:32

reroll ряд под контент у нас уходит с

02:56:36

вами 1506 вот все верно все внутри два

02:56:40

блока выстроены по центру между ними

02:56:42

отступ вот все отлично да теперь история

02:56:45

block story завершён и

02:56:48

можно его закрыть вот тут свернуть

02:56:52

добавить но и перейти к следующему

02:56:55

следующий блок у нас интересный вот

02:56:59

такой вот tower product

02:57:01

и здесь по контенту контентом то есть

02:57:04

смотрите тут надо подумать данта либо

02:57:07

хотя принципе вот

02:57:09

тут как бы какой вариант на подумать на

02:57:13

подумать такой вариант у нас в

02:57:14

контейнере лежит только вот это 1309 до

02:57:17

или вот этот элемент тоже в контейнере

02:57:20

то есть вот этот элемент он

02:57:22

вот прямо напрашивается чтобы его

02:57:24

абсолютом разместили но мы его абсолюта

02:57:26

мы будем размещать потому что эта

02:57:28

карточка поверх фотографии до когда

02:57:30

элемент размещены абсолютом то ну они

02:57:33

выходят за общие границы то есть они

02:57:35

свободно выходит за контейнер и так

02:57:37

далее и тут нам надо понять как бы для

02:57:39

себя решить это у нас все в одном

02:57:41

контейнере или ну то есть или карточка

02:57:44

все-таки за его пределы выходит вот если

02:57:47

посмотреть на размеры вместе с картошкой

02:57:49

получается

02:57:50

1370 то есть это то же самое что было у

02:57:54

нас сверху

02:57:55

да да 1370 1400 вот кстати а ну-ка bass

02:58:03

гляну

02:58:04

до 1400 вот это в общем тот же контейнер

02:58:09

1370 поэтому он хоть и будет абсолютом

02:58:12

но он будет внутри контейнера вот такой

02:58:14

важный момент вот ну а по

02:58:16

структуре сейчас нарисуем в целом тут

02:58:20

тоже все довольно стандартно по

02:58:23

структуре большая секция потом внутри

02:58:27

будет идти

02:58:29

вот-вот контейнер опять же контейнер

02:58:31

идет по контенту то есть вот так

02:58:33

карточка за него выходит но мы сделаем

02:58:36

так чтобы слева она оказалась внутри

02:58:38

контейнера мы можем даже и padding

02:58:40

специально прописать так чтобы она тоже

02:58:42

оказалась внутри контейнера то есть мы

02:58:44

так специально сделаем вот потом внутри

02:58:47

будет идти ряд для того чтобы выстроить

02:58:50

колонки вот внутри идет ряд потом идет

02:58:54

первая колонка

02:58:55

вот и первая колонка вот и она будет

02:58:58

иметь padding слева и снизу чтобы эту

02:59:00

карточку внутрь себя включить хоть она и

02:59:02

абсолютом потом уступе жду колонками 2

02:59:05

здесь тоже все понятно

02:59:07

заголовок подзаголовок контент кнопка

02:59:09

вот такая вот структура у нас получилось

02:59:12

этот блок на назовем product потому что

02:59:14

our product и переходим к его верстки и

02:59:17

так с action .

02:59:20

products далее контейнер далее

02:59:24

product.ru product ролл далее внутри

02:59:28

product image вы можно им g product

02:59:34

image далее product hunt and

02:59:37

content вот так product image сюда мы

02:59:40

помещаем картинку и будет у нас еще и

02:59:43

карточкам вот поэтому

02:59:47

product image но то надо сохранить ее

02:59:50

допродать контент тоже общем я думаю

02:59:53

пока тут классов достаточно написано

02:59:55

давайте сохраним нужное изображение то

02:59:58

есть кликаем сюда на картинку картинка

03:00:02

тут тоже составная вот мы видим все

03:00:04

лежит в имидже 18 радиус скругления

03:00:07

кстати вот здесь я тоже не добавил

03:00:10

радиус скругления да он тоже по 18 было

03:00:12

картинки и

03:00:14

стоило его добавить радиус скругления

03:00:20

здесь его не добавил надо потом

03:00:22

запомнить и здесь он тоже 18 мы его

03:00:25

обнуляем сначала то есть сохраняем без

03:00:30

радиусы скруглений а вот прямоугольную

03:00:32

экспорт jpeg

03:00:35

превью так вот тут мои видео я знаю

03:00:38

сейчас мешает а я его так и не включил

03:00:40

да вот окей

03:00:43

значит

03:00:45

rectangle rectangle вот еще блок и вот

03:00:49

группа image to то есть я могу выбрать

03:00:51

группу image

03:00:52

все экспорт с jpeg мы видим правда фон

03:00:54

такой прозрачный то только чтобы не

03:00:56

должно

03:00:57

rectangle

03:01:00

[музыка]

03:01:02

как там

03:01:04

хотя если jetpack думаю нормально

03:01:06

сохранит давайте экспорт из jpeg

03:01:09

создадим здесь папку product

03:01:14

product &

03:01:16

photo

03:01:17

photo photo каста мир фото что то такое

03:01:20

вот перейдем посмотрим что за картинка у

03:01:23

нас получилось вот наша папка с проектом

03:01:26

image product вода нормально то есть и

03:01:29

тот который нужен в принципе вот на

03:01:31

превьюшке видно

03:01:32

да отличным

03:01:35

этот момент есть теперь я вернулась сюда

03:01:38

радиус скругления по 18 как он и был и в

03:01:42

карточке тут тоже есть фотография и она

03:01:44

вроде бы такая же но она другая то есть

03:01:46

ее тоже нужно сохранить вот клик сюда

03:01:48

вот имидж

03:01:50

здесь я уже сохраню круглую данного

03:01:53

как она будет типа круглая но дпк наш

03:01:56

робот прямоугольную вот ну

03:02:00

типа мы видим тут прям совмещено вот

03:02:04

поэтому тут не буду с дизайном играться

03:02:06

но все равно аватарки все скругляется

03:02:08

через css вот image- jpeg то есть

03:02:11

аватарка оно должно быть тоже

03:02:12

прямоугольный но просто скругляется

03:02:14

через css но тут уже просто много

03:02:16

слишком проведя как бы тоже дизайн

03:02:18

верстачок он не дизайнер на чтобы сидеть

03:02:21

тут с этим разбираться вот наше дело

03:02:23

предусмотреть под не круглые картинки

03:02:27

вот самим делать скругление но а то что

03:02:29

мы это сохраним тут ничего страшного нет

03:02:31

поэтому выбираю группу image- jpeg

03:02:33

экспорт и назову ее аватар

03:02:37

отличный на этом все в плане картинок

03:02:41

для этого блока и теперь работаю по

03:02:43

картинкам то есть но работаю по контенту

03:02:46

значит давайте наверно сначала contains

03:02:49

верстаем потом product image потому что

03:02:51

тут довольно много будет всего карточка

03:02:53

будет и она такая

03:02:56

немножко скучно вот но то есть там много

03:03:00

мелких элементов давайте сделаем сначала

03:03:02

контент значит produce контент что здесь

03:03:04

внутри хэйден текст там да и так далее в

03:03:08

общем все как обычно product hunt and

03:03:10

hiding там или хедер или тайтл

03:03:13

далее заголовок

03:03:16

вставляем здесь

03:03:19

th2 кстати я в прошлой секции да не дал

03:03:24

течь 2 давайте поменяем вот для store

03:03:27

дадим th2 вот так а потом по тексту

03:03:31

product контент текст т.п.

03:03:37

дальше копируем

03:03:40

вставляем

03:03:44

далее для кнопок тот вариант который мы

03:03:48

выбрали требует оберток для всех кнопок

03:03:50

product контент банкнот и так не очень

03:03:54

кстати тот вариант который по итогу был

03:03:57

выбран до что у нас любая кнопка

03:04:00

требует для себя обертки то есть она уже

03:04:02

получается не самостоятельно а это

03:04:04

нехорошо вот то есть это не хорошо

03:04:08

потому что ну как бы она зависима от

03:04:11

окружения куда мы ее положим она должна

03:04:13

быть независимым поэтому тот вариант с

03:04:15

лексом он не очень product контент

03:04:18

btn better and better be кв а new way и

03:04:21

так далее вот если мы перейдем посмотрим

03:04:24

вот что получилось можно уже какие-то

03:04:27

стили написать давайте сексу так это все

03:04:31

в отдельном файле должно быть значит в

03:04:33

блоках создаем файл

03:04:39

так блоках создаем файл product

03:04:43

создать файл product css есть

03:04:48

теперь product копируя контур shift x

03:04:52

нет control shift x control-d закрываю

03:04:56

продавце составляю контейнер ролл и

03:04:59

погнали для продуктом отступ сверху 120

03:05:04

снизу

03:05:07

168 по 1 таб

03:05:09

121 потом 168 далее между ячейками

03:05:15

8663 значит между ячейками но вот сюда

03:05:19

например манжет 86 далее product.ru

03:05:23

дисплей flex джозефа и контент space

03:05:28

between line at emc я подозреваю нет ни

03:05:33

центр по верху поэтому окей это мы не

03:05:35

трогаем

03:05:37

дальше

03:05:39

product контент это вот как раз правая

03:05:41

часть то есть но тут по размерам тоже да

03:05:44

стоит указать опять же пока контентом

03:05:46

занимаюсь 584 размер поэтому product

03:05:50

hunt and max вы x

03:05:54

584 пикселя далее смотрим сюда оон

03:05:59

produce ну в принципе похоже на то что

03:06:01

было где-то раньше лотта сами ball 25

03:06:04

157 поэтому прописываю

03:06:09

так а вот для кодинга слушайте до седин

03:06:12

тут он двойной

03:06:13

я не предусмотрел этот вариант но тут

03:06:17

есть тайтл и esab тайтл поэтому вот есть

03:06:20

еще такой заголовок

03:06:22

поэтому сделаем

03:06:24

сделаем и 4

03:06:27

тут есть еще зеленый

03:06:29

вот так вот а он про да где ты чёрный

03:06:32

потом идет зеленый но и тогда это будет

03:06:34

тайтл по аналогии с тем как делали ранее

03:06:38

h3 будет сам-то этом вот так копирую два

Описание:

↓↓↓ Макет и ссылка на материалы в описании под видео ↓↓↓ Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео уроке я подробную покажу HTML CSS верстку простого макета из FIGMA. Поделюсь полезными приемами как быстро сделать адаптивную верстку, добавить мобильную навигацию и разместить видео на вашем сайте. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3" От установки редактора, до публикации в сети. 👉 Получить уроки, конспекты, макет и код из уроков: https://webcademy.ru/htmlsite/ :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс по созданию и верстке сайтов: https://webcademy.ru/htmlstart/ Обучение с наставником, 3 месяца, результат, гарантия. Научим создавать веб-сайты и зарабатывать на этом. Старт обучения: 01 Июля 2024 года. 💻 Курс "Frontend разработчик. JavaScript + React": https://webcademy.ru/jscourse/ Обучение с наставником, 3 месяца, результат, гарантия. Старт обучения: 03 Июня 2024 года. 💻 Курс "Разработка сайтов на PHP + MySQL": https://webcademy.ru/phpcourse/ Создание сайтов с системой управления. Присоединиться к курсу можно прямо сейчас. 🏁 Обучение с нуля 💁‍♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе 💳 возможна рассрочка 💳 если курс не понравится, вернём деньги в первую неделю :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💈 Сайт школы ВебКадеми: https://webcademy.ru/ 💈 Вступайте в группу Вконтакте: https://vk.com/webcademy 💈 Подписывайтесь на Telegram: https://t.me/webcademynews МАТЕРИАЛЫ К УРОКУ: • Макет: https://t.me/joinchat/friZxyBulgNmYjE6 • Код с урока: https://t.me/joinchat/friZxyBulgNmYjE6 • Урок по VS Code: https://www.youtube.com/watch?v=942oq0_v95E • Основы HTML: https://www.youtube.com/watch?v=1OL38vcF-VM&list=PL1NBhQGGj46bA6cFVixqblUDXxso1ctAg • Сброс стилей reset.css: https://webcademy.ru/blog/739/ ТАЙМ КОДЫ: 00:00 Знакомство с макетом и старт проекта 03:38 Сброс стилей 18:02 Базовые стили, контейнер, шрифты 29:57 Контейнер 33:40 Верстка шапки с навигацией 1:10:30 Верстка верхней секции 1:47:35 Секция How It Works - заголовок 2:04:48 Секция How It Works - колонки 2:32:34 Секция Story 2:56:56 Секция Our Product 3:27:54 Подвал 3:34:16 Правка багов 3:37:37 Читкод для отображения десктопной версии на смартфонах 3:41:58 Адаптивная верстка шапки и навигации 3:50:20 Адаптация первой секции 3:56:10 Адаптивная верстка секции How It Works - заголовок 4:00:30 Адаптивная верстка секции How It Works - колонки 4:07:42 Адаптивная верстка Story 4:12:51 Адаптив для секции Product 4:38:05 Адаптив для подвала 4:43:02 Мобильная навигация, скрипты 5:06:24 Видео в секции Story, Скрипты :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Меня зовут Юрий Ключевский. Я занимаюсь разработкой сайтов уже много лет, специализируюсь на front-end разработке и верстке сайтов, JavaScript и PHP программировании. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, JavaScript, jQuery, PHP, MySQL, React, Gulp. На нашем канале https://www.youtube.com/c/WebCademy?sub_confirmation=1 вы найдете много полезных обучающих материалов, а так же сможете поработать со мной лично пройдя мои курсы. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Сайт школы ВебКадеми: https://webcademy.ru/ Наша группа Вконтакте: https://vk.com/webcademy Telegram канал: https://t.me/webcademynews

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи"?

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

Как скачать видео "Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи"?

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

Как сохранить кадр из видео "Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

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