Скачать "#6 Верстка сайта с нуля для начинающих | HTML, CSS"

Обложка аудиозаписи

Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.

Предыдущее видео: Уроки HTML, CSS / Как вставить gif анимацию на сайт Следующее видео: #4 ActiveBox - Верстка сайта с нуля для начинающих | HTML, CSS

#4 ActiveBox - Верстка сайта с нуля для начинающих | HTML, CSS

#4 ActiveBox - Верстка сайта с нуля для начинающих | HTML, CSS

Канал: BrainsCloud

Уроки HTML, CSS / Как вставить gif анимацию на сайт

Уроки HTML, CSS / Как вставить gif анимацию на сайт

Канал: Изучаем мир ИТ / Олег Шпагин / Программирование

Верстка сайта с нуля из Figma для начинающих #2

Верстка сайта с нуля из Figma для начинающих #2

Канал: [DELETED]

brainscloud

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

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

верстка html

верстка html css

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

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

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

курс верстки

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

уроки верстки сайта с нуля

flexbox

верстка сайта для начинающих

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

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

уроки html

уроки css

html для начинающих

дмитрий валак

верстка

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

html

css

css3

00:00:02

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

00:00:03

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

00:00:06

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

00:00:09

также мы с вами сверстаем блок с

00:00:11

отзывами но у нас уже есть поэтому нам

00:00:13

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

00:00:15

немножко там что-нибудь поменяем так и я

00:00:19

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

00:00:21

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

00:00:25

давайте начнем с вами конечно же самого

00:00:28

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

00:00:32

сейчас у нас есть блог на прошлом уроке

00:00:36

мы с вами стали блок с командой и блок с

00:00:39

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

00:00:41

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

00:00:43

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

00:00:47

логотипы были по центру потому что мы

00:00:48

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

00:00:50

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

00:00:52

хотелось бы чтобы это все было по одной

00:00:55

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

00:00:57

пропишем еще одно правило от в блоке

00:01:00

логос напишем с вами еще правило онлайн

00:01:04

контент-центр ой не контента

00:01:08

фитнес-онлайн

00:01:10

ой там с центр и тогда у нас наши

00:01:12

элементы все будут по одной полосе

00:01:16

выровнены

00:01:17

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

00:01:21

новому блоку переходим сюда html и

00:01:24

сделаем с вами новую секцию

00:01:27

сексом с классом suction внутри

00:01:30

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

00:01:33

секции вот такая вот с текстом и

00:01:36

где-нибудь сейчас найдем скопирую

00:01:38

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

00:01:42

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

00:01:46

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

00:01:48

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

00:01:54

сюда текст дальше сам of a work

00:01:59

вставляем сюда и данное обязательство ли

00:02:03

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

00:02:05

появилось новое секций с первым нужно

00:02:07

сделать секцию с работами здесь просто

00:02:10

выводится

00:02:11

работы картинки и при на воде опять же

00:02:14

появляются градиент и появляется текст

00:02:17

заголовок и текст также еще есть иконка

00:02:20

очень похож блок опять же на блог

00:02:23

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

00:02:25

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

00:02:26

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

00:02:28

мы сделаем здесь отдельные классы для

00:02:31

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

00:02:34

сначала подумать как лучше сделать такой

00:02:37

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

00:02:40

было бы вот этот большой картинке так

00:02:42

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

00:02:45

центру такой большой картинке то было бы

00:02:47

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

00:02:50

котором есть works python и они просто

00:02:52

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

00:02:57

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

00:02:59

то скорее всего мы с вами сделаем вот

00:03:00

так вот то есть у нас будет блок works и

00:03:03

в нем будут колонки в каждой колонке

00:03:04

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

00:03:06

а в третьей колонке будет одна большая

00:03:08

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

00:03:11

поймёте так пишем что у нас будет новый

00:03:16

блок works

00:03:17

и у него будет works поэтому так даже не

00:03:22

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

00:03:24

сделаем works ком колонка колонка у нас

00:03:28

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

00:03:31

сделать один два три четыре 4 колонки в

00:03:34

каждой колонке будут по две работы 3

00:03:36

колонки будет одна большая работа

00:03:38

переходим в css пишем что мы работаем с

00:03:41

блоком works и давайте мы пропишем стиле

00:03:44

для works это будет дисплей flex

00:03:47

а также по ширине они будут одинаковые

00:03:50

все поэтому для works кол мы пропишем с

00:03:52

вами свойства flex и здесь напишем 11

00:03:57

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

00:03:59

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

00:04:01

появляется 4 колонки но кстати у нас мы

00:04:05

видим здесь по дизайну что они на всю

00:04:09

ширину экрана то есть они выходят из

00:04:10

границы сетки они не помещены в

00:04:13

контейнер поэтому давайте мы works

00:04:16

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

00:04:20

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

00:04:23

section хэдер и все так вот таким вот

00:04:27

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

00:04:29

колонки а не на всю ширину экрана

00:04:31

отлично теперь я опять же подготовил

00:04:34

картинки так я уже их вырезал вот данные

00:04:38

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

00:04:41

же сделаем новую папку с названием works

00:04:44

сюда мы поместим нашей работы все а

00:04:47

помещаем работы

00:04:48

сюда и я также сразу вырезал там

00:04:51

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

00:04:54

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

00:04:56

переместим

00:04:57

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

00:05:00

теперь давайте мы сверстаем сами работы

00:05:04

у нас будет блок works

00:05:06

этом в нем будет картинка asset так ему

00:05:11

джесс works так works

00:05:14

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

00:05:18

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

00:05:21

какой-то текст в работе также еще будет

00:05:24

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

00:05:26

блоку works info

00:05:28

тут будет информация о работе и здесь

00:05:31

будет works тайтл и works текст также

00:05:37

иконку я думаю потом мы вставим с вами

00:05:39

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

00:05:42

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

00:05:44

данный текст works python будет такой ее

00:05:47

works текст у нас коротенький текст

00:05:51

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

00:05:53

нас получилось у нас получилось вот

00:05:55

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

00:05:57

и есть 10x то так по умолчанию мы опять

00:06:01

же скроем works info

00:06:03

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

00:06:05

по центру так works python нам нужно

00:06:10

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

00:06:13

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

00:06:15

относительно works поэтому и делать его

00:06:18

по центру этого блока поэтому полежу

00:06:20

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

00:06:23

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

00:06:25

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

00:06:28

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

00:06:30

градиент давайте пропишем для имиджа

00:06:33

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

00:06:37

vox имидж или фото не суть важно и

00:06:43

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

00:06:47

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

00:06:49

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

00:06:51

для works

00:06:53

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

00:06:56

градиент будем делать градиент вниз

00:07:00

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

00:07:04

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

00:07:07

можем найти градиент карточек

00:07:11

находим градиент карточек

00:07:13

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

00:07:17

скопируем

00:07:18

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

00:07:24

при на воде на works ой там при на воде

00:07:28

нам works ой там мы будем с вами works и

00:07:30

матч уменьшать апатите до 0 1 давайте

00:07:36

посмотрим на воде на works этом и у нас

00:07:39

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

00:07:43

картинкой данный градиент отлично это у

00:07:47

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

00:07:49

длительность

00:07:50

0 2 секунды так и теперь давайте works

00:07:53

in from мы выровняем по центру блока это

00:07:56

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

00:08:00

с вами опять же топ 50 пикселей lf 0 и

00:08:04

transform translate3d по оси x 0 по оси

00:08:08

y минус 50 ось z тоже ноги таким образом

00:08:13

мы с вами выравниваем данный блок works

00:08:15

инфа по центру по вертикали пишем wack

00:08:20

100 процентов и давайте посмотрим что у

00:08:22

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

00:08:24

блок с текстом заголовком и текстом по

00:08:27

центру нашей картинки

00:08:28

а также для word и мышь пропишем дисплей

00:08:31

blocks чтобы у нас не было этого отступа

00:08:33

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

00:08:37

пропишем об исламе

00:08:38

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

00:08:41

по центру и у нас общий стиль будет

00:08:43

color бывает

00:08:45

color white белый цвет так также давайте

00:08:51

мы для works инфо добавим по этим слева

00:08:54

и справа там допустим 15 пикселей чтобы

00:08:56

у нас впритык там границам текст не

00:09:00

прилегал так есть теперь пишем стиле для

00:09:04

заголовка и там он за рассчитана speaks

00:09:07

to appear кейс и белый цвет так у нас

00:09:11

есть works python пишем на него стиле

00:09:14

так свет белый фон с 14 пиксели

00:09:20

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

00:09:24

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

00:09:27

потом нам пикселей 5 можем потом 5 и для

00:09:32

works так мы пропишем тоже стиле кстати

00:09:35

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

00:09:37

здесь колод не указывать потому что мы

00:09:39

его мы несли какой общий стиль для всего

00:09:42

что находится works info

00:09:43

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

00:09:46

для текста нам осталось сделать здесь

00:09:49

только light italic и размер 15

00:09:52

так пишем фонд сайт так фонд фон says 15

00:10:00

пикселей фондовой 300 iphone style

00:10:03

блин что я промахиваюсь

00:10:06

форм style пишем italic сохраняем

00:10:12

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

00:10:14

картина теперь мы скрываем works

00:10:17

инфоблок делаем ему opacity 0 а по

00:10:21

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

00:10:25

на посетим транзишен opacity

00:10:29

0 2 секунды линейная функция и при на

00:10:32

воде на works этом мы с вами также будем

00:10:35

показывать works

00:10:37

info делаем опасть 1 давайте посмотрим

00:10:42

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

00:10:45

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

00:10:47

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

00:10:49

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

00:10:53

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

00:10:56

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

00:11:00

ниже сделать здесь старую красиво

00:11:02

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

00:11:04

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

00:11:06

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

00:11:08

теперь во вторую колонку мы помещаем еще

00:11:11

две картинки другие

00:11:12

[музыка]

00:11:13

третью четвертую потом в третью колонку

00:11:18

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

00:11:21

она большая у нас будет и в четвертую

00:11:24

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

00:11:27

они тоже маленькие

00:11:29

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

00:11:32

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

00:11:36

для закрывающего тега

00:11:38

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

00:11:40

works так смотрим что у нас получилось

00:11:44

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

00:11:46

меня картинка это меньше да я понял

00:11:50

почему потому что опять у меня было

00:11:53

сжать непонятное давайте попробуем еще

00:11:55

раз вырезать эту картинку без сжатия

00:11:59

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

00:12:03

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

00:12:06

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

00:12:11

по размерам проверяем все края так вот

00:12:18

так вот и внизу у нас ссылки

00:12:22

пробуем сохранить экспортировать

00:12:27

нажимаем сейф сохраняем так и смотрим

00:12:33

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

00:12:35

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

00:12:39

надеюсь нормальные так это у нас номер

00:12:43

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

00:12:47

заменяют так за меня где заменить так

00:12:52

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

00:12:55

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

00:12:59

теперь ну вот у нас теперь есть этот

00:13:02

блок с работами как мы видим все как

00:13:05

надо в этих колонках по две картинки в

00:13:08

этой колонке одна большая картинка и в

00:13:10

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

00:13:13

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

00:13:16

потому что у нас у нас получается что

00:13:21

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

00:13:24

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

00:13:27

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

00:13:29

адаптивными делать это при помощи

00:13:32

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

00:13:37

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

00:13:41

будут картинки будут сужаться в

00:13:43

зависимости от ширины браузера и все

00:13:47

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

00:13:52

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

00:13:54

отлично с этим мы с вами разобрались так

00:13:58

и теперь что нам ещё нужно сделать здесь

00:14:00

наверное у нас все здесь у нас все

00:14:05

переходим дальше переходим дальше у нас

00:14:08

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

00:14:11

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

00:14:13

давайте мы их найдем где-то у нас они

00:14:16

были так вот данный блок с отзывами

00:14:19

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

00:14:23

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

00:14:26

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

00:14:28

убираем обновляем смотрим вот появился

00:14:31

блок с отзывами

00:14:33

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

00:14:35

вставим сюда картинку

00:14:37

аватар который я тоже уже вырезал вместо

00:14:39

этого placeholder опишем a sense

00:14:41

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

00:14:45

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

00:14:48

есть теперь давайте мы уберем эту

00:14:50

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

00:14:55

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

00:14:58

нужно сделать тогда border-radius 50

00:15:00

процентов чтобы у нас он был круг

00:15:04

border-radius писать процентах у нас

00:15:06

будет эта граница вокруг картинки

00:15:08

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

00:15:11

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

00:15:14

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

00:15:17

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

00:15:22

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

00:15:24

потекла побольше 235 даже чуть еще

00:15:27

больше 200 там 55 но как-то так примерно

00:15:32

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

00:15:34

фотография и у нас справа текст отзыва и

00:15:38

имя давайте эту аватарку мы также ставим

00:15:41

верхний

00:15:42

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

00:15:46

этого здесь вот ну и как-то так давайте

00:15:50

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

00:15:52

отзывами и он есть вот здесь вот на

00:15:54

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

00:15:58

закончили и переходим к новому блоку

00:16:00

happy кларенс так переходим сюда

00:16:04

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

00:16:08

новая секция с классом секция в ней

00:16:12

опять же контейнер

00:16:13

так и копируем шапку к нашей секции

00:16:16

шапку секции вот оно так вот она шапка

00:16:20

секция скопировали и вставляем сюда

00:16:23

меняем текста так меняем текста 5 класс

00:16:29

happy кларенс сюда и данный текст

00:16:34

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

00:16:39

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

00:16:43

появился новый блок happy кларенс также

00:16:45

для этого блока у нас будет новый

00:16:47

модификатор для того чтобы вставить эту

00:16:50

картинку фоновую поэтому мы с вами берем

00:16:53

и создаем новый matific атор который

00:16:56

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

00:17:00

и ok дальше давайте пока пропишем фоновый

00:17:05

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

00:17:07

модификатора f5 в 5 5 так и поднимется в

00:17:12

css и выше найдем секцию стиля для

00:17:14

секции

00:17:15

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

00:17:20

стиле много поэтому нужен поиск вот мы

00:17:22

нашли секцию и пишем что у нас будет

00:17:25

модификатор как lines и пока пропишу

00:17:30

underground просто в свет картинку чуть

00:17:33

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

00:17:37

осталось сделать

00:17:38

верстку 5 ход блоков с клиентами так

00:17:43

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

00:17:46

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

00:17:49

здесь новую секцию клавиш новый блок

00:17:53

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

00:17:57

будет получается кларенс этом клайн

00:18:00

сайтом и у нас будет 4 отзыва

00:18:03

4 отзыва окей теперь переходим в css и

00:18:08

пишем стиле для нового блока создаем

00:18:11

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

00:18:15

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

00:18:20

опять же дисплей flex 10 flex и у нас

00:18:26

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

00:18:29

50 процентов можем при помощи вы просто

00:18:31

прописать все процентов и чтобы наши

00:18:34

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

00:18:37

здесь пропишем flex

00:18:39

секс в раб wrap чтобы у нас нашей

00:18:43

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

00:18:45

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

00:18:48

четыре блока в котором мы сейчас

00:18:51

поместим отзывы так давайте продумаем

00:18:55

структуру отзыва структуру отзывы у нас

00:18:58

вот отзыв у него есть padding слева и

00:19:03

padding справа примерно по 45

00:19:06

пиксельного padding слева мы сделаем

00:19:07

больше вот до контента потому что

00:19:10

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

00:19:12

абсолютно так да давайте вот измерим 175

00:19:19

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

00:19:22

padding сверху и снизу пока сделаем 0

00:19:25

справа 45 снизу 0 и слева 175 пикселей

00:19:30

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

00:19:33

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

00:19:34

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

00:19:38

пишем так имидж

00:19:40

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

00:19:43

place hold .

00:19:45

нет давайте изберем размеры аватарки

00:19:47

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

00:19:51

так где наш аватарка вот она да да

00:19:56

смотрим размеры 110-го 110 пишем здесь в

00:20:00

110 отлично и то есть дальше у нас будет

00:20:06

кларенс так clarins

00:20:10

контент которым будет находиться которым

00:20:14

будут находиться имя профессия и

00:20:17

текст пишем кларенс name клайн

00:20:22

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

00:20:31

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

00:20:37

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

00:20:42

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

00:20:47

вами сделали давайте мы предадим также

00:20:49

класс для фотографии кларенс фото

00:20:52

[музыка]

00:20:55

кларенс фото

00:20:57

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

00:21:01

пока сделаем так топ 0 of 0 z-index один

00:21:05

позишн абсолютно и пропишем размеры 110

00:21:10

проценты 110 на 110 пропишем сразу

00:21:15

border-radius

00:21:17

10 центов чтобы можно было загружать

00:21:19

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

00:21:21

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

00:21:23

образом и вот у нас уже появляется

00:21:26

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

00:21:28

клиентов и давайте пропишем лев не 0 а

00:21:31

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

00:21:36

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

00:21:40

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

00:21:43

для найма черный 14 пикселей tex

00:21:48

transform а про кейс берем clans name

00:21:51

пишем фонд с 14 лет

00:21:57

333 и текстом форм а про кейс смотрим

00:22:01

есть дальше поехали у нас профессия ой

00:22:05

так профессия 15 пикселей робота ну как

00:22:08

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

00:22:10

используем просто пишем 15 пикселей

00:22:11

light italic

00:22:12

для профессия цвет цвет тоже у нас

00:22:16

черный

00:22:17

так color 30 333

00:22:20

так фон сальца 15 и

00:22:24

font style

00:22:27

font style у нас так он ставил italic и

00:22:35

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

00:22:42

еще давайте добавим для имени мэри джейн

00:22:45

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

00:22:47

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

00:22:51

теперь у нас еще остался текст у нас 999

00:22:54

будет по цвету да и 15 пикселей

00:22:59

размер шрифта fishing lines текст

00:23:02

кларенс текстов он союз

00:23:05

15 пикселей цвет для видео и 9 сохраняем

00:23:10

и обновляем и вот у нас получается такая

00:23:13

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

00:23:16

черточку

00:23:17

можем это сделать для либо

00:23:19

профессии либо ты черточку можем сделать

00:23:22

для текста давайте сделаем и для текста

00:23:24

у нас будет лук lines текст

00:23:27

псевдо-элемент be for потому что полоска

00:23:30

получается перед текстом поэтому be for

00:23:32

используем die for

00:23:35

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

00:23:40

60 скорее всего будет как и раньше

00:23:41

высота три и backgroundcolor давайте мы

00:23:44

с вами возьмем пипетку и данный цвет

00:23:50

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

00:23:54

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

00:23:56

добавим мартин сверху и снизу сверху и

00:23:59

снизу по там 20 пикселей допустим 20

00:24:05

сверху и снизу слева и справа ноль и вот

00:24:09

у нас получается вот так вот давайте

00:24:11

сделаем чуть поменьше морган сделаем 15

00:24:17

так отлично и добавим еще между

00:24:20

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

00:24:23

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

00:24:26

кларенс python находим его епишина

00:24:29

можем потом 60 сохраняем и у нас

00:24:34

получается вот так вот так же давайте мы

00:24:37

клиентов немножко делим побольше

00:24:39

пропишем majin top black lines 70

00:24:45

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

00:24:49

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

00:24:53

сюда и сюда так это у нас закрывается

00:24:56

блок кларенс сохраняем смотрим у нас

00:25:00

есть четыре блока супер можем поменять

00:25:04

просто по-быстрому текст для наших

00:25:09

клиентов так как мы видим такими

00:25:14

именно меняются здесь профессию у всех

00:25:16

одно и то же все графических дизайнера

00:25:20

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

00:25:26

как-то так получается теперь нам

00:25:28

осталось вырезать фон давайте мы все это

00:25:32

скроем скроем все слои и вырежем фон так

00:25:39

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

00:25:42

почему-то хочется тоже их называть

00:25:45

отзывами

00:25:47

так и вырезаем фоновую картинку уберем

00:25:50

скальпель

00:25:52

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

00:25:55

смарт-объект поэтому до берем скальпель

00:25:58

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

00:26:06

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

00:26:10

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

00:26:13

в папке так открываем вот у нас наш фон

00:26:18

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

00:26:22

перенесем сюда

00:26:24

находим наш модификатор clarins

00:26:28

так clarins clarins clarins вот он и

00:26:31

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

00:26:34

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

00:26:44

majus и

00:26:46

lines бегать . джек

00:26:51

центр но рипит и бы grow ставится ковёр

00:26:58

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

00:27:00

это сделали фотография думаю сейчас

00:27:04

вырезать не буду может быть я их вырежу

00:27:07

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

00:27:09

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

00:27:11

доделаем все мелочи

00:27:13

вот пройдемся еще раз по всему дизайн

00:27:15

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

00:27:17

ну на этом я думаю все мы с вами сделали

00:27:20

еще три блока

00:27:21

отзывы о philips работы слайдер с

00:27:25

отзывами и мы с вами swear стали

00:27:27

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

00:27:31

блок карту и footer и все я думаю

00:27:37

следующем уроке мы с вами как раз таки и

00:27:39

займемся

00:27:40

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

00:27:43

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

00:27:45

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

00:27:47

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

00:27:49

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

00:27:52

ну чтож на этом все спасибо всем за

00:27:54

внимание если вам нравится такой формат

00:27:55

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

00:27:58

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

00:28:00

убит revo лак и увидимся с вами в

00:28:02

следующем видео пока

Описание:

Продолжаем наш курс по верстке сайта с нуля для начинающих! В этом видео продолжаем верстать сайт и практиковать верстку сайтов используя только HTML и CSS! Сверстаем еще несколько блоков нашего макета, продумаем структуру новых блоков и сверстаем их используя flexbox и многое другое! ------------------------------------------------ Основы HTML и CSS для начинающих: https://brainscloud.ru//landing/html-css Верстка сайта транспортной компании: https://brainscloud.ru/landing/logistic-html Файлы урока: https://files.brainscloud.ru/file/mogo-urok-6 ------------------------------------------------ Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд. На сайте проекта https://brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания. ------------------------------------------------ Мой ВК - https://vk.com/odimaz Группа BC - https://vk.com/brainscloud Мой Instagram: https://www.facebook.com/unsupportedbrowser

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "#6 Верстка сайта с нуля для начинающих | HTML, CSS"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "#6 Верстка сайта с нуля для начинающих | HTML, CSS" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "#6 Верстка сайта с нуля для начинающих | HTML, CSS"?

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

Как скачать видео "#6 Верстка сайта с нуля для начинающих | HTML, CSS" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "#6 Верстка сайта с нуля для начинающих | HTML, CSS"?

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

Как сохранить кадр из видео "#6 Верстка сайта с нуля для начинающих | HTML, CSS"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

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