0: Сделаем не 3, а полтора.

1: Да, так будет поприятнее. Супер. Причём обратите ещё внимание на 1 особенность этой сетки. Если я сейчас буду уменьшать ширину браузера, что происходит? Она равномерно уменьшается, масштабируясь. Очень круто получается.

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

3: Здесь сейчас, так как у нас 3 на 3, соответственно, нам нужно 3 строки. И вот здесь, чтоб не было дублирования, запишем.

4: Репит 3.

5: Запятая 1 фр. Вот так, на всякий случай проверим.

6: Все работает чётко. И теперь как сделать так, чтоб наша, наш макет, то есть наши карты именно были абсолютно адаптивными. На планшетах, они стали в 2 столбца на смартфонах, в 1 записываем здесь медиазапросы, как я говорил.

7: Медиазапросы можно легко нагуглить, чтобы вы могли писать их под каждое какое-то конкретное устройство, но можно ограничиться некоторыми, скажем так, примерно подходящими вариантами. Почему примерно? Потому что, например, для, например, планшетов 750

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

9: Обычные скобки записываем. Максимальная ширина, двоеточие 800 пикселей. Дальше здесь открываем фигурные скобки и записываем, что будет дела.

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

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

12: Колонки. И здесь у нас 9 карт, значит 2 колонки. Поэтому здесь сделаем 5. Посмотрим, как это отображается.

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

14: И теперь, ну, здесь 9 карт суперски теперь.

15: Делаем тоже самое для смартфонов, копируем медиа запрос, записываем его здесь ниже и меняем с 800 на 600 пикселей.

16: Здесь меняем двойку на единицу и, соответственно, колонок у нас, ой, вернее, строк у нас будет 9 под каждую карточку товара. Это раз. Во вторых, давайте сразу сделаем, чтоб лишний раз не обновлять. У нас здесь есть с вами свой

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

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

19: Inline, где он вот он, то есть это одновременно и слева, и справа установим на 0.

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

21: Инспектор, тем более что, кстати, да, вот этот, сейчас коснёмся конкретно вот этого бокового отступа 0. Давайте посмотрим через

22: Так, смотрим через inspector. Итак, что у нас здесь? Давайте начнём с 4K на 4K экране все выглядит отлично. Переходим на лептоп.

23: Laptop меньший таблет итак, планшет 768 пикселей мы указали 800 для уменьшения количества колонок, жмём планшет 800 все супер, так что у нас здесь mobile.

24: 425. Вот так все получается, все наши карты располагаются в 1 линию, даже вот на каком-то маленьком экранчике 320. Даже если кто-то будет смотреть с калькулятора, будет

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

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

27: Давайте выберем, например, так вот, какой-то телефон. Вот так получается. Ооо, вот так будет удобно. 412 пикселей в ширину, 914 в высоту. Это у нас, а 51 поворачиваем и на нём в горизонт.

28: Положении, когда он будет повёрнут, будет 3 колонки, например, выберем какой-то другой телефон, что-нибудь, не знаю, пиксель какой-нибудь, что ли, 851.

29: Нет, не 851, например, что о, вот так подойдёт galaxy s 8. Вряд ли они ещё есть где-то, но все-таки на нём, в горизонтальном положении, это 2 колонки. То есть вот таким образом можно подогнать так, чтоб выставить вот эти параметры.

30: Медиазапросов, таким образом, чтобы на телефонах, в горизонтальном положении, например, было по 2 карты в вертикальном, по 1. Ну это уже такие дела, скажем так, возвращаем все это обратно.

31: И закрываем, инспектор.

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

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

34: Например, название чего-нибудь, что там продаётся, неважно. Вот так это у нас раз здесь запишем ценник тоже пусть будет тег п и запишем там 25 и теперь

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

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

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

38: Дело покупал и картинку, и тег п с названием, и ценник оборачиваем. Комбинация alt дабл ю, которую мы делали в тег. А то есть чтоб все это

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

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

41: Так, точка инфа.

42: И здесь, например.

43: Text align center.

44: Так что у нас здесь оно отцентровала так, да, все супер. И теперь, кстати говоря, получилось очень замечательно. Почему у нас теперь отображается вот так. Почему картинка растянулась? Потому

45: Мы здесь с вами писали точка карт, то есть дочерний имг, то есть тег img дочерний от точка карт благодаря вот этой скобке ему придавали ширину 100% от родительского контейнера.

46: От дива мы его обернули, эту картинку тег img в тег а и сломалась вот эта иерархия соответственно, какие варианты есть, чтобы это исправить, нам здесь необходимо или дописать ещё?

47: Вот так tag а как оно идёт? Card, а потом img это 1 вариант или 2 вариант написать вот так. То есть не наследование, а любые теги img в hard, то есть и так и так срабо.

48: Так, давайте глянем вот так суперски и давайте так сразу вот так, а?

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

50: Итак, после того, как мы с вами вот это все продублировали, создали полностью нашу карту.

51: Копируем её и сколько её здесь нужно? Так, 2, 3, 4. Делаем их 9 штук. Обновляем нашу страницу. Получается вот так супер.

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

53: На планшетах и на телефонах все будет отображаться просто супер. Итак, теперь давайте разбираться как теперь этот контейнер разместить там, где он нужен. То есть теперь делаем отдельно шапку бока.

54: Панель навигации 1 или 2. Сделаем 2, чтоб было интереснее и так далее тоже при помощи сетки это можно уже свернуть. То есть весь контейнер целиком. Вот так, чтоб он нам не мешал. Так.

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

56: Работать. Смотрите, у нас вот здесь есть style css тот, с которым мы сейчас работали, и он полностью описывает то, как ведёт себя наш контейнер.

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

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

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

60: Контейнер, например, как-то так. Пробелы не ставьте, ставьте, например, тире, как разделитель между словами напишу слитно переименовали.

61: Переименовался здесь тоже отображение теперь корректное.

62: И теперь здесь меняем с style css на style hard.

63: Контейнер подсказка есть, обновляем.

64: Страницу. Все работает корректно. Теперь здесь

65: В файлах в каталоге styles выбираем его, тыкаем на кнопку создать новый файл и теперь давайте запишем здесь новый стиль, новый файл, вернее, стайл.

66: Main

67: Контейнер точка сиэсэс

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

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

70: По нашей иерархии, подключаем его так, где он? Вот он, mein контейнер. Вот так. То есть мы уже будем работать с 2 файлами. Css можно разделить, если вам удобно потянуть. Вот смотрите, 2 вкладки за 1 тянете вниз. И вот

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

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

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

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

75: Которые пока что закомментируем, чтоб они никак не влияли на то, что мы сейчас будем делать. Итак, сделаем так, чтобы сбоку от наших карт товара. Что мы сейчас будем делать сбоку от наших карт товара, разме.

76: Слева панель и справа панель. Для этого сразу здесь запишем дифф, например.

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

78: Правый.

79: Есть у нас теперь получается 3 контейнера div 1 у нас заполнен 2 пустые. Теперь для того, чтобы разместить их, будем использовать точно также сетку, при помощи которой удобно делать адаптив при помощи

80: Медиазапросов, то есть когда широкоформатный экран просмотра, то есть full HD и так далее. В общем, с ноутбука смотрят у нас они будут 1 слева, другая справа, а когда переходят в режим планшета или в режим телефона, тут

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

82: Главный контейнер, при помощи которого мы и будем составлять эти все столбцы и колонки, записываем здесь.

83: Вот так главный контейнер таб.

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

85: Нашей сеткой, поэтому теперь здесь работаем с main контейнером, записываем ему display grid, потом сколько у нас будет колонок, у нас колонок будет по идее 3 по идее, у нас должно быть трико.

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

87: Посмотрим, во первых, строка, то есть строка у нас будет 1. Вот так. А теперь сколько колонок можем записать? Например, давайте сделаем так.

88: 1 фр. Дальше, следующий 4.

89: 1. Так вот, вот, че он ругается. Сделаем вот так. 1, 4, 1. То есть это соотношение доли.

90: Посмотрим, как это выглядит. У нас теперь здесь 1 доля. 4 доли, 1 доля, но это неудобно. Сделаем так. Например, так работает подобным образом сервис бутстрап, с которым мы дальше будем.

91: Будем тоже работать. Запишем здесь репит. Запишем здесь 12 колонок 12.

92: Запятая по 1 доле. Почему именно 12? Потому что мы с вами без проблем можем указать, сколько будет занимать точно также вот этот центральный контейнер с картами. Мы можем указать, что из этих 12 он будет занимать, к примеру,

93: С 3 по 10 включительно, вернее так, с 3 до 11. То есть будет тот же самый эффект. Это очень удобно, потому что позволяет более тонко настраивать соотношение сторон у

94: Каждого контейнера, поэтому мы здесь дальше записываем. У нас есть так, main контейнер, который мы уже настроили, к нему, в принципе, здесь обращаться больше не нужно, кроме, например, там

95: Merging от него сделать или что-то подобное. Теперь здесь мы записываем лефт бар.

96: Раз с ним здесь работаем.

97: Теперь здесь записываем див контейнер, там, где у нас карты товара, и теперь здесь записываем правый бар.

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

99: Grid column. И здесь указываем для вот этой левой панели. То есть мы хотим, чтобы она занимала 2 из 12 долей. Для этого здесь нужно написать спе.

100: И через дробь до какой-то есть 1 и 2, значит, до 3.

101: Теперь здесь в контейнер мы хотим, чтобы он занимал с 3 по 11, то есть 11 не включая, а то есть получается с 3 до 10 включительно. Соответственно, здесь нам нужно записать грид.

102: Calum и здесь записываем с 3?

103: По 11, 11, не включая и здесь правая

104: Все оставшееся, то есть с 11.

105: По 13, то есть 11 и 12. 13 нет, но вот так вот оно записывается и теперь обновляем.

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

107: У себя на рабочем столе сетку, которая разбивает его по здесь пунктирные линии на 12 равных частей.

108: Это главный контейнер. Дальше здесь у нас есть левая панель, которая занимает первые 2 доли.

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

110: 8 долей по центру. И есть правый контейнер, который занимает оставшиеся 2 доли супер. Кинем туда немножко контента, буквально чуточку. Итак, в нашем левом боковой панели

111: Запишем, пусть будет tech п. Набираем лорем, и если сейчас не нажать энтер, а ввести количество, например, я хочу 10, то есть это будет означать, что он возьмёт рандомных 10 слов.

112: Ещё 1 сделаю тег п наберу лорем каких-нибудь рандомных 25 слов.

113: И давайте это все продублируем чуть чуть.

114: Сделаем вот так.

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

116: Левый бар центральный и правый. Итак и здесь давайте ещё поработаем с css левый бар, копируем айдишник, копируем селектор, вставляем сюда через

117: Запятую обращаемся к правому, то есть и к тому, и к тому,

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

119: Красивее кинем туда мэржин, пусть будет так. 2 нет, не 2 1 m.

120: Есть.

121: Верхний отступ, сделаем 1.

122: И нижний отступ сделаем 1 е кинем простенький бордер стайл.

123: Солит.

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

125: Вот как-то так. То есть наполнение этих панелей уже на своё усмотрение. Так и нужно ещё внутренний пединг кинуть здесь. Давайте тогда сделаем просто это удалим, вот так и сделаем.

126: Просто отступ во вот так будет покрасивее супер, так как этот main контейнер хранит все.

127: Сделаем ему лёгкое оформление. Более красивое оформление будем делать уже, когда будем работать с бутстрапом. То есть там уже постараемся, скажем так, это все оформить. Покрасивее сделаем.

128: Вот так накинем цвет на фон какой-то такой темно синий и здесь добавим для так color.

129: Какой-нибудь вот такой. Нет, не такой.

130: Аквамарин и border color тоже аквамарин вот так.

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

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

133: Сделаем так. Здесь второстепенная информация должна отображаться, например, внизу, то есть ниже карт с товаром. И давайте это теперь реализуем, возвращаемся в редактор и сделаем так, чтобы левая панель отображалась вверху, правая внизу.

134: Или как-нибудь по другому. То есть никто не мешает, например, их обе сделать снизу и так далее. Что нам для этого нужно? Во первых, вот эти медиазапросы, которые мы с вами писали в прошлом файле css, который создаёт наши карты товара, мы раскомментируем.

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

136: Main контейнер и теперь посмотрим, что мы делали здесь. То есть у нас есть 12 колонок и 1 строка. Соответственно, сейчас нам необходимо разместить вот эти панели следующим образом.

137: У нас должна быть 1 колонка и 3 строки 1 строка будет занимать в данном случае левая панель, средняя строка, то есть меж ниже будет у нас располагаться контейнер с товаром и 3 строка.

138: Это у нас будет правый бар, что теперь нам необходимо написать в медиазапросах. Во первых, сразу копируем вот это.

139: Там, где указаны доли размещения наших Баров и нашей карты с товаром.

140: Здесь строку, которая указывает количество колонок, мы вообще убираем, пусть у нас и остаётся 12. Переназначать мы не будем. А вот great темплейт роуз, здесь мы с вами укажем 3. То есть у нас

141: Будет разбито на 12 колонок и на 3 строки так будет просто удобнее все это дело форматировать, и здесь тоже самое для 600 пикселей.

142: Указываем 3 строки теперь здесь, в медиа запросе, добавляем размещение по долям наших Баров и контейнеров, что мы здесь меняем? Грит колом везде устанавливаем 1 дробь.

143: 13, то есть чтобы он занимал полностью всю ширину, все 12 колонок.

144: Делаем вот так и теперь дописываем грид.

145: Ro. Здесь левый бар должен находиться в 1 строке, соответственно, мы здесь записываем точно также с 1 до 2.

146: Наши контейнеры размещаем с 2 до 3 и правую панель размещаем с 3 до 4, которой не

147: Существует, но синтаксис таков. И теперь давайте посмотрим, как это будет выглядеть у нас в нашей сетке. Обновляем страницу и потянем за боковушку.

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

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

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

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

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

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

154: Не с 800, а, например, с 900 пикселей. То есть когда уже будет 900 пикселей у нас начнёт

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

156: Прошлый файл css, который регулирует наш контейнер, и укажем здесь, например, с для эксперимента с 1000 пикселей.

157: Обновим страницу и получается теперь так тянем.

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

159: И теперь у нас вот так вот получается супер.

160: И в конце на мобильном устройстве будет это выглядеть вот так.

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

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

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

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

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

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

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

168: Точка сиэсэс есть. Переносим его сюда, этот закрываем, он уже не нужен. Итак.

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

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

171: Give и сразу там объявим класс навбар, через который будем с ним работать. Будем реализовывать нашу навигационную панель не при помощи списков, как было показано, а сделаем это красиво при помощи ссылок.

172: Итак, записываем тег, а сделаем их, не знаю. Штучек 5, например. Вот так. Теперь здесь в каждом поставим не заглушку, а запишем здесь ссылку на наш основной.

173: Index html для того, чтобы удобнее было тестировать, итак, запишем индекс html и здесь какие-нибудь надписи.

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

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

176: Ещё 1 контейнер гиф и запишем ему, например, класс на лист.

177: Вот так и поместим все эти ссылки в него.

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

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

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

181: Записываем здесь обращение по классу навбар.

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

183: Ряд, скажем так, в строку итак, дисплей флекс к нему мы обратились сразу давайте сделаем ему какой-нибудь бэкграунд так. Background color выбираем блэк и сделаем, естественно, не чистый.

184: Чёрный, а, например, что-то так, что-то вот такое просто почти чёрный проверяем. Так выглядит замечательно теперь.

185: Нам нужно поработать с нашими ссылками, к ним мы обращаемся через now лист.

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

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

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

189: Вот здесь.

190: Применим точно также дисплей флекс для того, чтобы эти

191: Кнопки отобразились вот так в 1 ряд супер продолжаем работать с нашими ссылками во первых, нужно применить свойство, text decoration, поменять на none.

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

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

194: Нажмём мы как бы переходим на эту же самую страницу. Супер, теперь копируем вот это обращение к нашим ссылкам и делаем так применяем. Это называется псевдокласс псевдо.

195: Класс hover позволяет изменить css стиль элемента, когда на него наведён курсор и что мы сделаем скопируем вот этот бэкграунд колор, перенесём сюда и сделаем его цвет чуть чуть.

196: Светлее. Вот так, например, посмотрим.

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

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

199: Это нужно.

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

201: Телефон, планшет тоже точно такие же медиазапросы, например, 800 пикселей. Как только ширина экрана 800 пикселей, нам вот это нужно скрывать и вместо этих ссылок показывать здесь кнопку, которая называ

202: Бургер такие 3 продольные чёрточки. И при нажатии на эту кнопку у нас выпадало вот такое меню из вот этих же ссылок, что для этого нужно? Во первых, для начала нам нужно здесь как

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

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

205: Запишем тег button, сразу ему сделаем класс, например, nav бтн, чтобы мы могли применять к ней стили, и здесь запишем специальный

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

207: Изображение и так далее. В данном случае, если вбить в поиске в google html код кнопки бургер, то там будет вот такой код можно найти, который выглядит вот следующим образом. Обновляем. Вот теперь мы мо,

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

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

210: И теперь поработаем с ним. То есть мы теперь обращаемся к нашей кнопке по классу на в бт.

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

212: Соответственно, нам здесь необходимо увеличить фон сайз. Удвоим. Сделаем 2 им.

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

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

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

216: Установим на 10 пикселей, посмотрим так выглядит лучше и теперь добавим, чтоб выглядело ровнее. Сделаем так.

217: 1 bottom установим на 2 пикселя.

218: Вот так даже на 3, наверное, и она поднимется вверх.

219: Ооо, прям по центру супер. Теперь из за чёрного фона и тёмного оформления. Ну уж было сделано так в данном случае не видно. У этой кнопки есть border, то есть рамка, давайте её сразу уберём.

220: Запишем здесь бордер.

221: Non устанавливаем значение на none.

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

223: В ней расположен сделаем белым.

224: То есть, скажем так, произведём инверсию цвета. Вот так, супер. Так. Текст, цвет немножко не тот получился. Надо сделать. Тот, не тот скопировал, где он, вот он.

225: Вот так.

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

227: А эти ссылки не отображались при просмотре через телефон запишем здесь.

228: Так.

229: Собака медиа в обычных круглых скобках запишем максимальная

230: Ширина. Двоеточие установим пока на 1000 пикселей, потом отрегулируем так как нам будет нужно. Здесь открываем фигурные скобки и здесь записываем, сделаем.

231: Даже так. Давайте вот этот класс теперь, который придаёт оформление нашей кнопки, перенесём в этот медиазапрос.

232: Вот так, чтоб не было все, чтоб все не было разбросано, скажем так, перенесём в этот запрос.

233: И сделаем вот так.

234: Здесь запишем в стандартном отображении на широкоформатном экране свойство display у этой кнопки.

235: Запишем нон, то есть она просто не будет отображаться, как только будет такой медиазапрос. То есть ширина экрана станет меньше 1000 пикселей. Здесь нужно указать

236: Для этой же кнопки сделать её display block и получится вот так.

237: Она не отображается. Как только меньше 1000 пикселей, она появляется тоже самое, только в обратную сторону нужно сделать. Вот с этими ссылками переходим обратно, записываем на в лист.

238: Вот этот здесь у него display flex на широком экране, а здесь запишем на в лист.

239: Display none. Ну, грубо говоря, та же самая инверсия. И получается на широком экране кнопка не отображается. Отображается наша навигация обычная, как только

240: Nashi 1000 пикселей появляется кнопка ссылки пропадают, супер полдела на самом деле уже сделано, возвращаемся в редактор, и теперь, прежде чем приступить к реализации выпадающего меню, нужно ещё уточнить пару моментов.

241: Во первых, здесь у кнопки нужно добавить ещё 1 свойство свойство cursor.

242: И здесь выбрать в вариантах. Начнём печатать. Поинтер, что это значит? Это значит, что

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

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

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

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

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

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

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

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

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

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

253: И поместим туда нашу кнопку и наш контейнер с ссылками. Вот так.

254: Для чего нам это нужно? Во первых, давайте сейчас.

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

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

257: Наши ссылки применяем к нему, напоминаю, без пробела записываем двоеточие псевдокласс, ховор.

258: И здесь обращаемся к нашему на лист.

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

260: И применяем свойства к вложенному в нём тегу div с классом nav лист, но добавим сюда условие при наведении курсора на вот этот контейнер в таком случае.

261: Мы здесь записываем, записываем свойство display block, то есть чтобы он проявился.

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

263: Display, flex, display, flex, значит, он их располагает в ряд, делаем дисплей блок, он их будет располагать по вертикали, и здесь нужно ещё добавить свойство, я его сейчас объясню свойства.

264: Position.

265: И указать значение абсолют. Давайте посмотрим, что сейчас произойдёт, а потом я его объясню.

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

267: Просто background color копируем и переносим сюда, обновляем вот так выглядит красиво это когда есть курсор без клика просто наводите и получается.

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

269: Кинем 100, да? Ну отлично. При наведении наведения никакого нет. Кликаем и у нас отображается вот такое выпадающее меню. Пожалуйста, нажимаем. У нас тут ссылка на эту же страницу.

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

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

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

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

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

275: Уже лазят по менюшке вашего сайта, соответственно, да, вот, кстати говоря, ещё 1 пример, когда он не рядом, все четенько выпадает, вот как раз вот под ним

276: Давайте теперь разместим его здесь справа. Что для этого нужно, во первых, так как у нас вот этот навбар, флекс, контейнер и в нём, по сути, есть вроде вроде логотипа. И вот этот контейнер, который у нас делает все для этого

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

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

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

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

281: С ним можем работать. И почему вообще, в принципе, у нас получается сделать вот такую панельку. Итак, я сейчас даже сделаю вот так изменение justify content space between я закомментирую.

282: И сделаем вот так.

283: Значит, в чем вся суть?

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

285: С его места, на котором он располагается, и спозиционировать по другому что значит position absolute это значит что вот сейчас кликаю на него применяется свойство позишн абсолют это.

286: Значит, когда значение абсолют тег дифф, вот он.

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

288: Этот тег выдернулся отсюда, из этого контейнера, и расположился вот сюда уголком. Что будет, если я сейчас закомментирую позишн абсолют?

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

290: И располагается ниже.

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

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

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

294: Батон, которые работают, когда указан позишн абсолют или relative top button left.

295: И, соответственно, white.

296: Запишем, например, топ 50 пикселей, лефт, 50 пикселей и посмотрим, где сейчас отобразится наше выпадающее меню.

297: Обновим. Нет, давайте запишем больше топ 100 и left 100.

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

299: И bottom мы можем задать ему положение поверх нашего основного html документа, если мы здесь запишем не абсолют.

300: А relative, то тогда в таком случае мы можем применять топ лефт и так далее. Но в таком случае видите, что происходит? Он не выдёргивается из контейнера, поэтому вернём первона.

301: Начальное то, что было, запишем здесь.

302: Абсолют. Уберём топ лефт и так далее. Вернём наш джастифи контент, который позволяет нам

303: Разместить слева нашу панельку. И вот что мы с вами видим. Она уходит, появляется по умолчанию в левом нижнем углу, ниже левого нижнего угла контейнера родителя. И теперь мы здесь дописываем вот прям

304: Здесь применяем свойство white, то есть справа, сколько справа отступить от границы экрана, запишем 1 пиксель и посмотрим.

305: Вот так. Теперь получается просто супер. Вот так. И теперь, прежде чем переходить к бутстрапом и так далее, давайте теперь все это. Проверю макет, скажем так, пока пишу видео, что все работает.

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

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

308: Так как вам удобно при клике на них так сейчас нужно добавить кстати, свойство hover здесь оно работает. А и да, и здесь тоже работает все супер. Так, при наведении здесь тоже все супер убира.

309: Наш инспектор, смотрим, как на пкшки все хорошо. Проверю, что здесь ещё у нас. Так, display none. Так, на бтн. Так, на так, все.

310: Такие ему свойства ховер нужно добавить. Сейчас сделаем так нав бтн, вот так тоже записываем вот здесь.

311: Без пробелов, холлар. И здесь мы сделаем бэкграунд колор. Так вот, этот светло серый

312: Чтоб при клике на нём он, скажем так, более чётко реагировал.

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

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

315: Уже готовых css классов, которые предоставляются самим фреймворком, то есть это сайт, с которого вы получаете доступ к готовым html картам, например, любым конструкциям, навигационным панелям и так далее, и там уже, и к ним уже прописаны.

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

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

318: При помощи фреймворка bootstrap 5 адаптивный макет сайта магазина с главной страницей и будет 2 страница с каталогом карт товара этот фреймворк позволяет при помощи готовых блоков, кода и подготов.

319: Six стилей как конструктор собирать сайт буквально за час 2, который будет адаптивно себя вести на любом устройстве, а также я покажу вам классный сайт, на котором вы можете получать готовый css код различных стилей оформления на

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

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

322: Для начала создадим с нуля файлы и структуру каталогов для нашего проекта, создадим новую папку, назовём её как-то пространно, назовём её бс 5 в этой Папке создадим

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

324: Хранить изображения, которые касаются наших товаров, 2 папку назовём её просто как files, здесь будут вспомогательные файлы, например, видео для видеофона, то есть на главной странице, постоянно в цикле будет воспроизво.

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

326: Three, естественно, нам понадобятся свои, чтобы вносить некие коррективы.

327: После того как это готово, основную главную папку директорию бс 5 открываем при помощи редактора, кликаем здесь, доверяем автору если у вас высвечивается данное окно, закрываем приветственную страницу и здесь, в

328: Корневой директории бс 5 создаём.

329: Файл индекс точка, html.

330: И давайте сразу создадим 2 файл для прайсинг точка html, в котором у нас будет каталог наших товаров. Её мы пока закроем, оставляем индекс, создадим сразу базовую структуру и

331: Идём знакомиться с будстрап в браузере, в поисковике, вбиваем будстрап 5 и здесь пролистываем рекламные объявления, и мы видим с вами ссылку, которая нам нужна. Гетт будстрап ком кликаем на неё в зависимости от того, на

332: Какую ссылку вы нажали? Вас может сразу перекинуть на вкладку docx или на вкладку хоум? В любом случае, обратите внимание, нам с вами здесь пригодится вкладка docx и, может быть вкладка айконс, то есть иконки, которые здесь уже

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

334: Сразу объясню, например, здесь, когда вы зашли на вкладку docx, вот здесь слева есть навигационная панелька, которая открывается на вкладке интродакшн. Мы сюда вернёмся, но давайте пролистаем вниз. И, например, обратите внимание, вот компоненты, напри.

335: Пример. Нам нужно с вами разместить карту товара кликаем на card. И здесь вот пример. То есть, к примеру, будет выглядеть вот так. Картинка, название, описание и ссылка, кнопка, назыв.

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

337: В документ здесь уже прописаны классы, например, класс карт, здесь, класс, hard body и так далее. Уже прописаны классы, которые есть в файле css, который предоставляет фреймворк bootstrap. Если вам

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

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

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

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

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

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

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

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

346: Маршрута от вашего хоста, вашего компьютера и так далее к ближайшему серверу, откуда можно получить доступ к этим по этим ссылкам, к этим css файлам и к файлам javascript. То есть нам нужно всего лишь

347: Разместить эти ссылки в нашем html документе и например, вот эту ссылку на css необходимо просто записать в теге link атрибуте Ашреф там, где подключает, там, где подключаются файлы css. Но давайте сделаем по другому кстати, да.

348: Обратите внимание, вот здесь, в правом верхнем углу, есть ссылка, вернее, выбор версии, которая используется сейчас. Я видео показываю на последней, 5 точка 2. Если здесь по истечению времени будет 5 3. Неважно, версия старше.

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

350: Можно непосредственно скачать эти css и gs файлы кликаете здесь донлоад, там простой архив, его распаковываете, и там нужно найти пролистаем ниже.

351: К примеру, css файл будет называться тот, который нужен бутстрап точка мин точка сиэсэс, а файл с gs кодом будет называться бутстрап точка бандл точка мин точка джиэс ну?

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

353: Копируем именно так. Не кликайте сюда. Сейчас объясню, почему, копируем её и в нашем документе подключаем к нашему, к нашей странице.

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

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

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

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

358: В теги п какой-нибудь текст и откроем наш индекс html

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

360: Наш тег p выглядит вот так. Если я сейчас закомментирую подключение файла css и обновлю страницу.

361: Наш тег п изменится, соответственно, возвращаю обратно.

362: И применяется в стиле css от бутстрапа он сбрасывает базовые мэрджин, Педин и так далее и устанавливает свои варианты, то есть даже непосредственно как выглядит шрифт, устанавливает свои отступы и так.

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

364: Что нам нужно? Давайте сделаем так. Я эти теги не показывал, они в принципе не играют никакой ключевой Роли, но все-таки, когда они есть, более удобно работать с вашим кодом. 1 тег это хедер, который

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

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

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

368: И так далее, которая располагается в самом низу сайта в виде такой горизонтальной панельки. Сделаем вот так.

369: Можно и без них, повторюсь ещё раз, а можно с ними? Теперь вот это все переносим в наш 2 html файл, копируем полностью все, что есть, открываем наш 2 html, документ и переносим сюда. Замечательно.

370: И теперь давайте займёмся наконец то практикой и разместим здесь навигационную панель.

371: Делается это чрезвычайно просто теперь здесь, в левом, в левой навигационной панели ищем.

372: Компоненты и здесь выбираем навбар, пролистываем варианты с поисковым пропустим бренд тоже image просто картинка пропустим вот

373: Нас просто навигационная панель. Здесь есть вариант с использованием списка, так как мы с вами работали с википедией или здесь ниже есть вариант с использованием просто ссылок, тегов. А как мы реализовывали в

374: Навигационной панели на чистом css и html, совпадающем меню. Давайте в данном случае возьмём вот эту 1, здесь уже можно свободно вот кликаем на иконку копирования, копируется весь этот.

375: Html код, и мы его просто переносим сюда в тег header.

376: Обновим и посмотрим, что у нас получилось.

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

378: И она сжалась, вот она, кнопка бургер готовая, и теперь все эти ссылки располагаются при нажатии на неё вот таким образом.

379: Кликаем обратно, и она скрывается, и возвращаемся в редактор. И давайте осмотримся, что у нас здесь есть. Итак, вот она, наша навигационная панель, которую мы взяли с bootstrap тег nav. Здесь у нас есть

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

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

382: В diff. И обратите внимание, все уже прописано с классами из css стиля обращаю внимание, что в чем прелесть использования бутстрап, если вы хотите, например, посмотреть непосредственно

383: Код css который здесь применяется, то так как я показывал скачиваете zip архив и там смотрите не bootstrap min, css в котором удалены все пробелы, отступы и так далее, то есть это кэшированная версия, в которой

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

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

386: Итак, при помощи бутстрапа набросали макет страницы и потом, если вам нужно что-то изменить, поменять фон, применить стиль оформления и так далее, просто через свой файл css, создаёте свой файл css и, скажем так, переназначаете, то есть перебиваете или допол,

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

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

389: Ментами ли. Давайте его уберём, оставим пока что вот эту ссылку, кнопку, ссылку home и прайсинг. А вот эти 2 уберём. Что для этого нужно, возвращаемся в наш код. Итак, смотрим вот, вот она disabled здесь у нас есть

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

391: Вот так вот уберём.

392: Полностью этот элемент обновим, все это значение пропало. То есть дисбат это неактивная ссылка. То есть зная, что там есть такой класс, мы с вами без проблем можем записать, например, здесь

393: Этот класс и получится так, что

394: Она стала неактивной, но нам это не нужно, поэтому я его отсюда убираю. Итак, оставляю прайсинг фьючерс, вот это убираю теглина ляю только home, пусть будет и прайсинг, пусть будет.

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

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

397: Тег nav полностью все и перенесём, откроем вот так tag наш html, файл, прайсинг и давайте вот так разделим на 2 колонки, пока что свои css прям сейчас применять не будем, а воспользуемся.

398: Тем, что есть у бутстрапа. Итак, вот у нас есть index html основной и прайсинг html, давайте его изменим. Итак, у нас есть index html главный, и теперь вот она, ссылка, которая называется pricing у нас есть такой

399: File давайте здесь сделаем ссылку на наш html файл прайсинг.

400: Вот так.

401: Здесь, там, где home, укажем этот же файл index html для того, чтобы, находясь даже на главной странице, ссылка перехода на главную страницу соответственно работала и теперь здесь в in.

402: Html переход на вкладку хоум. Здесь указан класс актив, так и оставляем, а здесь, в файле прайсинг html. Делаем следующее. Во первых, добавим ссылку. Ссылка pricing.

403: Соответственно, на этот же документ ведёт ссылка хоум ведёт нас на index html.

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

405: Index html вот она подсвечена, хоум. То есть мы на главной странице кликаем на прайсинг, мы перешли на новый html документ, и теперь она подсвечивается как активная супер. С этим все хорошо. Теперь, если мы хотим.

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

407: Классом какому-нибудь из них добавить css свойства background color, или мы можем здесь указать вот блайт, то есть явно видно, что этот класс задаёт цветовое оформление нашей навигационной панели.

408: Я это знаю из документации если здесь указать не лайт, а dark, то будет следующее давайте я это сделаю вот так.

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

410: Наш сиэсэс файл закрою html, документ прайсинг, оставлю только индекс и давайте создадим наш сиэсэс файл. Итак, здесь в stels создаём, назову его так, my сиэсэс точка.

411: Css ну как-то так.

412: Разделим на 2 части.

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

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

415: Или непосредственно у ссылки Тега а навлин. Соответственно, давайте к нему и обратимся к нашему, вот к этому нав линк. Это будет намного просто и понятно. Итак, записываем класс.

416: Линк и здесь указываем колор.

417: Пусть будет в данном случае. Давайте выберем аквамарин.

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

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

420: Прайсинг ну, например, я в данном случае, поэтому мне нужно перейти на home, так как наш сиэсэс подключён пока только к index html, и мы здесь видим, что прайсинг изменилась, теперь она выглядит цвета аквамарин почему home?

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

422: Пишем так.

423: Возьмём их в паре.

424: Сделаем нав линк без пробела точка актив и здесь сделаем такой цвет, который нам нравится. Перенесём сюда колор.

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

426: Этот элемент, то есть нам нужна навигационная панель.

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

428: Видим наш, наше обращение точка нав, линк точка актив. Оно перечёркнуто, потому что вот оно выше находится оформление бутстрап. У него выше приоритетность точка навлин точка актив. Точно так же, как у нас, но до этого

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

430: Из бутстрапа. То есть нам нужно написать точка навбар, тире нав, вот этот класс. Соответственно, мы здесь записываем точка нав, бар, тире, нав. Вот так.

431: Пробел и теперь обращение непосредственно к селектору без пробела нашего Тега a обновляем, и вот что у нас получается то есть мы переназначили, только теперь давайте сделаем его посветлее.

432: Как-то вот так.

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

434: В наш pricing html точно также ниже бутстраповской. Вот сюда его добавляем и идём проверять, как теперь это все выглядит. Переходим на прайсинг. И вот так. Теперь home active. Теперь прайсинг.

435: Активная, мы на ней находимся, а ссылка хоум выглядит вот так. Теперь давайте добавим сюда логотип вместо надписи возвращаемся в редактор и в файлы нашего проекта вот сюда, в папку files, кидаем логотип.

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

437: В files лого png, например, и теперь здесь, в html документе, там, где у нас тег, а вместо текста размещаем сюда тег имджи и записываем сюда иерархию пути к нашей картинке итак.

438: Укажем соурс файлс лого png. Только в данном случае slash. 1 нужно удалить и тоже самое мы с вами копируем. Нет, давайте так сначала с этим разберёмся. Это мы добавили в pricing html это изображение. Посмотрим.

439: Как она выглядит вот так. То есть нужно откорректировать её размер.

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

441: И здесь укажем, попробуем так.

442: Например, укажем ширину в 35 пикселей.

443: Сейчас подгоним все это дело под нормальный размер. Так вот так выглядит нормально. Можно, конечно даже чуть крупнее сделать 40 пикселей, да, вот так супер логотип.

444: Мы приделали, теперь давайте вот здесь добавим описание, если нужно, я пока 3 точки кину и сделаем ссылку на домашнюю страницу. Это у нас index html, теперь, когда это все готово, переносим именно.

445: На вот эту строку полностью копируем её всю

446: И переносим её в наш индекс html, заменяя ту, которая там вот так.

447: И давайте теперь проверим. Она работает замечательно, как только мы перешли на неё на хоум, и это изменило цвет. То есть все работает корректно, супер. Если сейчас смасштабировать

448: Нашу страницу получается вот так.

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

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

451: Классу навбар толер.

452: Вот здесь и давайте сделаем ему background color вот такой серый.

453: И посмотрим, что у нас получится, да, вот так она намного нагляднее суперски, и теперь давайте перейдём в while price html и займёмся для начала размещением наших карт, товара и позна.

454: Знакомимся с бутстраповской сеткой, то есть как в bootstrap реализовано размещение карт товара, то есть при помощи сетки итак, возвращаемся в браузер и открываем бутстрап здесь налистается в ком.

455: Понентах.

456: Посмотрим, как выглядит html код непосредственно самой карты товара. Итак, вот она карта, и теперь смотрим. Здесь непосредственно указан html именно самой карты, а самой сетки, при помощи которой её размещать, например, 3 в ряд.

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

458: Так, вкладку лайаут и здесь начинаем с контейнерс нам нужно контейнерс и grid сетка. Итак заходим в containers и осматриваемся что здесь значит во первых вот они классы которые применяются к тегам div и которые обозначают например,

459: Container fluid мы его уже с вами видели такой класс прописан вот здесь вот он дифф класс container fluid в нашей навигационной панели.

460: Что это обозначает? Контейнер флюид? Это значит, что не в зависимости от ширины экрана этот контейнер постоянно располагается на 100% ширины самого экрана. Например, если выбрать класс контейнер тире.

461: Lg это значит, что 100% будет занимать на смартфонах и планшетах, а когда, например, больше 992 пикселей, то он будет занимать 960 пикселей, больше 1002.

462: 200 пикселей 1140 и так далее то есть в данном случае удобно будет использовать container fluid. Вы можете я сейчас установлю контейнер флюид. Для всего вы без проблем сможете поэкспериментировать, просто изменяя тире флюид.

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

464: Товаром размещаем здесь.

465: Тёк диф с классом container fluid все нужные css стили применятся сюда автоматически, так как они уже подключены и теперь нам нужно следующее разместить в этом глобальном контейнере сетку то есть как расположить?

466: Интересующие нас элементы, а именно те карты с товаром, которые мы с вами смотрели, открываем вкладку грид.

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

468: Мы уже указали, то есть мы уже с вами указали контейнер флюид суперский. Теперь вот здесь вот этот код, который здесь находится между этим контейнером, как мы видим, есть diff класс row, то есть строка, а дальше

469: Каждая отдельная элемент указан класс, кол, то есть каллум, столбец все дело в том, что сетка бутстрапа построена не на свойстве грид, то есть это не display grid в данном случае grid имеется ввиду ну прост.

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

471: Необходимо их разместить сначала diff класс row, а уже потом указывать дифф класс column вот таким образом итак, нам 3 и нужно копируем эту структуру, копируем и переносим

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

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

474: И копируем аштиэмель код всей этой карты товара. В данном случае просто его копируем целиком. И здесь, там, где указан просто текст, в данном случае в теге div.

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

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

477: Html и видим вот такую картину. Картинок нет естественно, но само оформление, то есть описание и так далее уже все есть давайте сделаем пока что так чтоб посмотреть как это работает, давайте возьмём и

478: Вот она, карта товара находится в колумне. Вот так выделим до следующего или лучше сделать даже так.

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

480: Копируем, вставим, обновим. Получается вот такая история, потому что мы не указали доли, о чем я, что я имею ввиду, удалю все, что было. Вот это то, что мы вставили.

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

482: Будет, скажем так, долей, то есть 3 карты товара, 4, 5 и так далее, и, соответственно, на каком устройстве запишем здесь call элджи, то есть крупные экраны, например, ноутбук, и здесь указ.

483: Col lg тире 4 что это значит бутстраповских ть и на flex контейнерах, но точно так же, как мы с вами делали, разделена на 12 на 12 столбцов, соответственно, мы здесь.

484: Указываем кол элджи 4 на Широких экранах, 1 столбец будет занимать 4 доли из 12, так как у нас их 3 по 4 доли суммарно получается 12, обновим сейчас страницу html и посмотри.

485: Что у нас сейчас здесь будет отображаться?

486: Вот так их 3. Соответственно, если мы теперь продублируем это, он уже знает, сколько размещать в 1 строку карт товара, обновим.

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

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

489: Нужно здесь, например, разместить на при такой ширине просмотра 2 карты товара в ряд, а не в 1. Соответственно, что нам здесь указать, так как мы указали на для Широких экранов, каждая карта занимает по 4

490: Доли, мы точно также здесь можем указать кол мд, то есть medium средний экран тире 6, то есть 6. Это обозначает 6 долей. Из 12 будет занимать каждая карта, то есть Ровно половину.

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

492: Он становится в 1 ряд, то есть к мобильным устройствам, он без проблем приспосабливается дальше сам это очень удобно. Итак, дальше с этим вроде как все окей получается. Вот такая структура. Разверну 1

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

494: Размещается на странице, как в данном случае показано, ложится в контейнер, в котором указываются классы как размещать, сколько долей он будет занимать, при какой ширине устройства вот эти call элджи 4, какие есть вообще call элджи?

495: Мд и так далее можно посмотреть вот здесь заходим в bootstrap, здесь заходите.

496: Так лайаут грид и листаете вниз.

497: Вот здесь все описано, то есть что, какой префикс значит, lg, то есть lg экраном считается тот, который в ширину больше 992 пикселя мд, тот, который находится в пределе 768 992 и так

498: Далее. То есть можно подстроить по префиксам вот этим под каждую ширину экрана. То есть 6 вариант это 1. То есть дальше все эти примеры выглядят по тому принципу, по которому я вам и говорил, например, писать мы это не

499: Будем, но вот наглядный пример ниже обратите внимание раз raw это 1 роу здесь разбито на 2 части, нижний роу разбито на 3 вот он смотрим сиэсэс код дифф класс контейнер, то есть контейнер который вы укажете контейнер тире флюид.

500: Контейнер тире x, xl элджи и так далее дальше идёт ролл вот он raw тот который верхний разбит на 2 части и дальше идёт.

501: Следующий роу, если они отличаются между друг другом по разбивке, и в нём свои контейнеры с разбивкой колн элджи, например, 6, 4 и так далее, кратно от 12 столбцов. В общем, как-то так.

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

503: У нас будет будем моделировать вроде как интернет-магазин электроники. Кидаем их в имейджи.

504: Так, все есть и теперь давайте заполним эти карты с товаром. Итак посмотрим что у нас вообще здесь есть 1 карта итак класс карт, к нему применён некий стиль. Итак и тег img.

505: То есть здесь, соответственно, нам нужно записать наше изображение. Записываем

506: Так, имейджи и какое-то 1 изображение. Давайте так что у нас будет 1 лэптоп. Так 1 слэш убираем при таком расположении файлов, как у меня, alt альтернативное, естественно, всегда.

507: Заполняем. Картинка не прогрузилась или ещё что, или поисковик будет лучше ранжировать ваш сайт. Так, карт тайтл описание. Это у нас будет карта товара, то есть как бы прайс лист непосредственно ассортимента, то есть есть карта лэптоп.

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

509: Какой-то быстрый текст, который здесь подставлен автоматически, мы оставим, не будем здесь ничего менять, а здесь, в кнопке заменим на

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

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

512: Как сейчас отображается у нас изображение, вот таким образом все получается лэптоп с gaming pc vr кнопки купить выглядят в общем, выглядят так, как они выглядят замечательно, и теперь мы с вами видим вот такую.

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

514: Мы с вами видим, что здесь в dive кард указано свойство style, в котором для каждой карты товара установлена по умолчанию ширина в 18 рм. Это нас не устраивает вообще никак. Убираем.

515: С каждой карты эту запись.

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

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

518: На ширину браузера, а на ширину контейнера, в котором они находятся.

519: То есть они резиновые. Именно этим мы и воспользуемся. Сейчас возвращаемся в редактор и вот это все, что у нас есть. То есть все карты товара и ихний контейнер роу вот так вот свернём помести.

520: В ещё 1 контейнер для того, чтобы разбить нашу, наше пространство, например, здесь сделать отступ. Вот здесь вот так, к примеру, на где-то долина 8 разместить карты товара. А

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

522: Здесь опять же raw в котором мы укажем следующее нам нужен с вами как здесь по аналогии вот развернём вот такой контейнер.

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

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

525: Так, и здесь запишем ещё 1 такой контейнер.

526: На который выделим 12 - 1 и - 8. Это у нас получается 3 доли осталось вот так.

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

528: Пустой. 1 доля 8 долей на карты товара и 3 доли на боковую панель. Вот они.

529: Получается вот так. 1 доля 8 долей и 3 доли супер. Теперь укажем, как они будут себя вести на планшетах и на том, что дальше на смартфонах. Так, прежде чем это делать, поправлю вот так вот.

530: Код, да, вот так будет. Давайте лучше рефактор сделаем, отформатируем. Вернее, да, вот так лучше. Супер.

531: Свернём, чтобы это было нагляднее. Вот так, да, отформатированное, оно выглядит поприятнее. 3, 8. Одни. 1 доля на широком экране. Теперь изменим следующее, чтобы на планшетах, например, вот эта боковая панель

532: Боковая панель с каким-то там текстом, ссылками и так далее располагалась внизу запишем здесь колм мд 12, то есть занять в ширину все 12 долей, соответственно, это перенесём

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

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

535: Супер с этим готово. Теперь нам нужно сделать так, чтобы как-то сделать мэрджин. То есть чтобы здесь был зазор бустрапа. Для этого специальные классы уже готовы. Естественно, мы можем указывать

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

537: Обращаемся вот сюда, например, к нашему глобальному контейнеру вообще, который находится в теге секция, то есть под навигационной панелью.

538: Вот здесь, например, чтобы задать margin, достаточно указать букву м. Это имя класса. И здесь 1, 2, 3, 4, 5. Например, давайте сделаем вот так. М, 4. Это будет значить, что от этого

539: Контейнера будет Мержен во все стороны лево, право вверх вниз.

540: Вот так со всех сторон, если нам нужно, например, сделать мэржин только по игреку, то есть вверх и вниз.

541: Записывается вот так. М, игрек 4.

542: По бокам нет, а сверху есть. Соответственно, микс это pot Бо слева, справа, если нужно, например, мт 4. Это только сверху мб 4 Батам снизу и так далее.

543: Тоже самое касается Педин для контейнера, то есть указывается вот так вместо м буква п, в принципе, удобно. Итак, как нам поступить? Давайте в данном случае сделаем пока что просто м, т.

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

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

546: Годится сайт веб код тулс таких сайтов на самом деле много. Это просто 1 из примеров в чем особенность таких сайтов позволяет сгенерировать готовый css, html, шаблон и так далее. Например, взглянем на

547: То есть там кнопки и так далее. Разнообразные варианты тегов подобрать и сгенерировать некие шаблоны, например, с чем мы с вами не знакомились. Тег видео, например.

548: Есть видео уже на сайте, и вы здесь смотрите вот здесь находится html шаблон при помощи чекбоксов, то есть можно выбрать автовоспроизведение, чтоб видео работало постоянно в цикле само себя постоянно.

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

550: Стили оформления очень удобно, например, анимации. К ним вернёмся позже. Обязательно. Например, давайте сейчас вот бэкграунд колор, нет, бэкграунд, градиент точно также. Итак, вот образец.

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

552: Какой-то другой цвет, например, с синего, вот с такого.

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

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

555: Ходим в редактор и здесь, в самом верху давайте так как он самый главный, обращаемся, например, к тегу body.

556: И помещаем сюда этот аш сиэсэс код, который мы скопировали, линейный градиент. Итак, это градусы. То есть начинается 6 часов. Если смотреть на циферблат, это 0 9 часов 90 12 180.

557: И 3 часа это 270. Итак, устанавливаем здесь Ровно как мы хотим, 90 на 90 градусов. То есть слева направо цвет здесь тоже прям в редакторе уже можно изменить, если это нужно. И давайте теперь на это посмотрим 1.

558: Обнови наш сайт, и вот таким образом теперь это все выглядит выглядит симпатично тоже самое касается многих других вещей, например, что у нас здесь выберем пункт box shadow.

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

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

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

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

563: Через css делайте это через css, тогда сайт получается намного легче. Так, к этому сайту мы потом вернёмся, сейчас пока его закроем.

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

565: Это 1. 2. Поменяю надпись на английскую. Раз у нас здесь заглушки на английском, так css свернём обратно. Итак.

566: Сначала поменяем надпись, так, заменим. Купить на на что-нибудь такое. Так, go шоте. Вот так. И теперь вот она, наша карта теперь.

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

568: Изображение, на которое они ссылаются так, где у нас там имейджи, так здесь у нас будут продаваться видеокарты, так и запишем гпу. Так, go shopping есть и поехали в таком стиле.

569: Или дальше?

570: Добавил ещё 5 карт товара, получилось вот такое полотенце, ну а как по другому давайте посмотрим, как это выглядит так, первые 3 так, лэптоп игровые пк vr гарнитуры, что у нас здесь?

571: Гпу, цпу, контроллеры, всякие аксессуары и прочие компоненты. Получилась вот такая вот страница, и мы сразу видим недочёт. Мы здесь добавили отступ margin top 4 для глобального контейнера.

572: Где он тут?

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

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

575: Карта каждого товара нам здесь везде, в каждом из них так пролистываем альтом натыкивает.

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

577: Закончим потом здесь, поменяем фон и все приведём в порядок, потому что мы будем ещё применять стили оформления текста и его цвет. Поэтому сначала добавим здесь вот эту боковую панельку, на которой предполагается, что будут, ну, какие-то дополнительные статьи, ссылки и

578: Так далее. Поэтому напоминаю, что здесь у нас контейнер 3 доли из 12, поэтому возвращаемся в наш код и ищем его. Вот он у нас здесь находится в самом низу. Col, lg 3.

579: На средних экранах мд 12, то есть он располагается на планшетах и ниже под карточками, под контейнером, с товаром. Что нам здесь нужно? Будем работать точно также с бутстраповской сеткой. Итак, вот она, этот.

580: Контейнер, боковая панель, которая занимает 3 доли. Здесь мы для начала обязательно указываем роу. Без него никак. Теперь, что мы здесь делаем? Мы указываем опять же, контейнер тёк диф для

581: Каждого окошка, скажем так, в котором будет указан текст, записываем класс call элджи 12, его будет достаточно, то есть в данном случае что имеется, почему здесь 12 потому.

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

583: И теперь здесь записываем, например, тег p. В нём введём какой-то произвольный текст lorem пусть будет не знаю, 26 рандомных слов, нажимаем тап и так они есть вот.

584: Так вот это выглядит и теперь здесь в конце добавим перед закрывающим тегом п. Ещё какую-то ссылку, например сделаем вот так tag a в атрибуте Ашреф поставим заглушку.

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

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

587: Class selector. Для того, чтобы обращаться было удобно. Сюда. Давайте запишем так сайд бар. Ну как-то так. Этого будет вполне достаточно, чтобы мы могли применять свои стили. Запишем здесь сайд.

588: Здесь укажем параметр колор. Например, сделаем его вот таким аквамарин, чтобы сайт выглядел в 1 стиле. Вот так.

589: Проверим, выглядит нормально. Итак, теперь, что нам нужно дальше продублируем, чтобы она была не 1. Просто копируем здесь. Так, нет, вот так этот тег, div, то есть.

590: Container все, что у нас там есть. И сделаем их штучки 4 наверное, пусть будет вот так, чтобы они немножко отличались. Давайте это здесь лорем немножко подправим чуть короче текст здесь.

591: Как-то так как-то вот так сделаем неважно. И здесь как-то вот так чтобы они просто у нас сейчас визуально отличались обновим получается вот такая вот история так они немножко разные.

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

593: Сначала сделаем с вами следующее. Давайте установим здесь, у этих контейнеров, div, именно вот у этих какой-нибудь другой бэкграунд колор, чтоб мы видели, сколько площади они занимают, копируем вот этот градиент, который мы примен

594: Body и переносим сюда в сайт бар. И давайте изменим градусы с 90

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

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

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

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

599: Располагаются в контейнере row. Вот он. Давайте установим у него не мэржин, а Педин внутрь от его границ внутрь. Сделаем по оси икс, например, в 2

600: Точно также это встроенный класс в bootstrap обновляем и получается вот так супер. Давайте немножко сейчас подправим цвет. Мне немножко немного не нравится. Так сделаем не совсем.

601: Чёрный, а где-то вот такой вот так немножко сероватый и здесь

602: Синий ближе к тёмному как-то вот так. Ну-ка да так будет. Нет, не будет. Лучше сделаем обратно.

603: Чёрный обновим.

604: Да, чтоб здесь просто слева было темнее. И вот здесь исправим тоже самое, чтоб все соответствовало копируем. Это то, что в Баде, и меняем здесь, чтоб не переписывать непосредственно сами цвета.

605: Просто опять линия градиент поменяем на 270.

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

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

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

609: Стиле от будстрап точно также можно получить и шрифты, например, от google фонс вбиваем в поисковике google, ну, в принципе, в любом поисковике, но вбить нужно следующее google, фонс, то есть шрифты, и вот она вкладка фонс точка, google, точка ком и здесь.

610: Мы можем посмотреть на образцы шрифтов, которые можно использовать, получая их от сервера google, например, робота. Классный вариант часто используется потом, что тут ещё такое есть.

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

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

613: Посмотреть, как работать с api, google, фонс. Итак, google, фонс набираем дальше css апи.

614: И вот так developers google com get started with google фонс апи, вот эта ссылка нам нужна и здесь вот есть пожалуйста примеры как это все можно использовать здесь показаны примеры как это реализовать через

615: Подключение непосредственно вот он тег head.

616: Тех стайл и здесь к body применяется фонд фэмили, то есть такой-то, то есть здесь написать, например, михром и так далее. И подключив до этого ссылку на получение этого шрифта, мы сделаем это немного по другому.

617: Мы сделаем это, подключим через файл css. Для этого здесь сейчас я налистаю, нужно найти ссылку. Так где она?

618: Налистать вот эту ссылку для css. Так, использование, отображение шрифта здесь https фонс гуугл апи сиэсэс фэмили. Здесь указывается именно это название шрифта. И здесь ещё 1 свойство display свап.

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

620: Переходим обратно в наш сисс документ и здесь. Что нам с вами нужно? Здесь, в 1 строке записываем следующую директиву собака.

621: Import url? Вот так и сюда помещаем в кавычках. Здесь, в одинарных. Вот так вставляем этот url. Здесь меняем название с того, который там был, там был робота меняем на тот, на то, которое

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

623: Предложенные варианты, которые есть по умолчанию записываем нашу михром.

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

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

626: Давайте это проверим.

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

628: Теперь смотрим, не помню, есть ли у нас здесь обращение к ним. Нет, в сисс мы к ним ещё не обращались. Теперь давайте сделаем так.

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

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

631: В редактор и точно также через этот селектор кард, вот этот текп подхватит цвет, который мы здесь укажем так как он его просто напросто наследует. Указываем колор и здесь записываем аквамарин. Вот так.

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

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

634: Апнуть, кликнуть здесь, здесь, здесь, чтобы у него все получилось. Сделаю только на этой 1. Просто чтоб сейчас все это не делать. Такие вещи просто нужно предусматривать, когда непосредственно моделируете сам шаблон 1 карты, когда уже все это, скажем так,

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

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

637: Отражение.

638: H5 или можно было надпись в теге h5 ну не имеет значения и тег п.

639: Давайте даже сделаем так вот эту картинку надпись.

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

641: Ссылку сейчас кинем заглушки.

642: Вот так и посмотрим, что у нас сейчас.

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

644: Обратно сюда, применим стили к этим тегам, а во первых, обратимся здесь в css стиле к через селектор кард к тегам, а которые там есть, и применим свой

645: Text decoration установим на none и посмотрим, что сейчас здесь будет обновим. Так, text decoration none, но цвет не тот, который нам нужен, не аквамариновый. Значит это все произошло потому что мы

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

647: Карта вот так. Ну да, и так как я тут ничего не менял, я его и здесь тоже оставлю.

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

649: Мы не проверяли с вами ещё, как это выглядит на мобильных устройствах.

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

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

652: Адекватно супер. Проверим планшеты, например. Так, пусть будет вот так таблет на таблетах наши товары в 2, в ряд. И здесь все тоже масштабируемо отлично на всякий

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

654: И так далее. Но это уже дело такое. Итак, все супер, что нам нужно дальше? А дальше нам с вами нужно сделать так, чтобы на странице хоум, напомню, она у нас ещё пустая был.

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

656: Все содержимое, которое есть здесь. Так, сейчас я подвину вот так вот в index html. Здесь у нас есть уже, то есть навигационная панель есть, то есть нам сюда нужно переместить все то, что у нас в теге.

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

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

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

660: Служебная информация, телефончик туда там мигающий закинем, чтоб пользователь, если вдруг не может сориентироваться или что-либо заказать там и так далее, чтоб он мог легко это сделать. Итак, у нас здесь с вами в index, html, все карты.

661: Находятся в тех див класс row, это значит что мы делаем вот так, чтоб это было просто быстрее сворачиваем весь этот raw.

662: Удаляем его и просто напишем его здесь заново, чтоб просто лишний раз ничего не листать и не выбирать. Вот так.

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

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

665: Карусель.

666: Так, 1 пролистываем. Это просто автоматические слайды. Вот, например, вот такая карусель. То есть можно выставить сколько фотографий будет, например, 2, 1, 10. И между ними вот так можно перелистывать, если пользователь не нажимает сам, она автоматически там раз.

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

668: Код, который под вот этой каруселькой, то есть боковые стрелки и индикаторы, на каком слайде сейчас находится карусель, и переходим в редактор, вставляем его в контейнер роу там, где у нас call элджи 8 там.

669: И мы почистили все в файле index html, помещаем сюда полностью код этой карусели и вкратце на него взглянем во первых, механизм этой карусели реализован посредством.

670: Css и javascript, который у нас уже подключён вот здесь.

671: Дальше, что здесь вообще находится вот эти 2 нижние. Вот 1 кнопка это кнопка назад стрелочка и соответственно кнопка, кнопка следующий слайд. Вот эти 3 кнопки формируют

672: Отображение, на каком слайде мы сейчас находимся, вот они здесь, естественно, у него, как у всего, есть свой собственный контейнер, в котором уже прописаны классы бутстрапа, это значение true то есть булевое значение обозначает, что если пользователь не

673: Скажем так, не нажимает на карусель, а просто остановился и смотрит картинку через какое-то время она сама перескочит на следующий слайд, то есть, если вдруг нужно отключить автопрокрутку, достаточно здесь написать вот так, заменить true на false, но мы

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

675: Карусель итем. То есть это конкретно элементы карусели. Здесь по умолчанию вот они 3 слайда. Дополнительный класс. Актив обозначает, что именно этот слайд будет показан 1, как только пользователь загрузит страницу,

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

677: Задают ему форму по ширине блока, то есть видно, что здесь есть класс w 100 это обозначает ширину 100% от родительского контейнера и класс д. Блок, который накидывает на него прочие стили.

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

679: Картинку сюда любую. Вот так здесь тоже самое. Закинем сюда какую-нибудь картинку. Так, имеджес вот так и тоже самое сделаем в 3 слайде.

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

681: В контейнере, который занимает 8 долей, и из за того, что здесь прописано ширина 100% от родительского контейнера. Поэтому наше изображение по ширине подогналось по ширине этого контейнера. Ну а в высоту соответ.

682: Просто сохранился масштаб.

683: Так, по клацаем, по нашим элементам. Так я, наверное, 2 одинаковые картинки выбрал, да, цепу надо изменить. Так вот так обновим. Элементы все прекрасно работают.

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

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

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

687: Чтобы изображение, например, допустим, контейнер будет вот такой высоты, допустим, да, вот сделаем и здесь будет половина этого слайда, это изображение, a2 половина это описание, ну то есть товаров, которые предлагает это

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

689: Каждый слайд называется карусель итем, а вот уже вложенная в него информация, то есть непосредственно контент, записан с классом d block дабл ю 100 соответственно, необязательно использовать тег img, например, чтобы размещать здесь контент.

690: Мы можем пользоваться другими вложенными структурами просто, которые нужно пометить вот этими классами.

691: Значит, мы с вами сделаем так, копируем вот это дальше, поработаем сразу с 3 картами, чтобы лишнего не писать. Итак, удаляем все эти теги, которые размещают себе изображение.

692: И делаем следующее. Так вот, сделаем так. Нам нужен тег div здесь у него запишем класс и запишем сюда эти классы, все теперь эти контейнеры.

693: Контейнеры будут по ширине родительского контейнера, и мы указали здесь класс d block теперь в каждом из этих контейнеров сделаем следующее то есть нам нужно вот здесь, в этом контейнере, уже д. Блок.

694: Shirin, 100 вот этот разместить картинку слева надпись справа воспользуемся точно также бутстраповской сеткой. Запишем здесь обязательно класс.

695: Вот так. И теперь уже здесь делим пополам. То есть мы с вами записываем, нам нужен колм элджи 6. То есть берём половину из 12 долей.

696: И допишем здесь ещё com lg так мд.

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

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

699: Пк.

700: Так здесь лэптоп и здесь.

701: Were. Вот так первые слэши, повторяю, удаляем при таком расположении проекта. Итак, супер.

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

703: Вот здесь так, это он у нас раз и 2. Нам теперь нужно разместить 2, который тоже будет занимать половину этого контейнера. Записываем здесь ещё 1 тег гиф для того, чтобы разместить там описание, то, которое мы хо.

704: Здесь запишем класс и копируем туда вот это эти же самые селекторы. Так, сюда, сюда.

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

706: Там что-то было бы написано. Так здесь запишем лором 25, например.

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

708: Делали обновим страницу.

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

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

711: Можно, то есть написать нужно или здесь в своём css стиле указание, ширина 100% или здесь можно воспользоваться уже встроенным бутстраповский классом вот этом вот этим, который это же и обозначает для этого здесь во всех этих

712: Картинках 1, 2 и так и 3. Дописываем ещё 1.

713: Так, класс дабл ю тире 100. И теперь обновим, посмотрим. Теперь получается вот так.

714: Все работает. Вот он, текст. Его, наверное, на записи не видно. Он серый, мы сейчас его сделаем вот таким вот цветом.

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

716: Заведём здесь для тегов п. В которых написано данное описание.

717: Дополнительный класс, при помощи которых добавим ему стиле. Итак, выбрали все эти 3 Тега п. И здесь записываем класс, запишем его, как слайд текст.

718: Вот как-то так и переходим в наш сиэсэс, вот здесь добавим.

719: Точка слайд. Текст здесь применим ему.

720: Color выберем вот этот аквамарин вот так обновляем так, теперь он такого цвета как нам нужно и теперь его необходимо здесь разместить по центру. Реализуем это следующим образом во первых.

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

722: Мы не удаляем, а копируем, а потом удаляем. Дело в том, что нам нужно отцентровать текст, а чтоб центровать текст, нам нужно обращаться к вот этому контейнеру дифф. Соответственно, мы и цвет можем применить к тегам п. Просто

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

724: И вот здесь.

725: Цвет сохраняется, и теперь мы без проблем, так как этот тег div является контейнером Тега п. Мы здесь можем указать содержимое, которое находится в нём. То есть это содержимое Тега п центровать. Как это сделать?

726: При помощи значения merging. Дело в том, что, смотрите, можно написать, например, merging инлайн и указать значение auto. Это означает, что он его просто отцентрует по горизонтали, если выбрать, например, мержи.

727: Блок это значит сверху и снизу ауто, то он его отцентрует сверху и снизу по центру, но чтобы не писать 2 строки мы можем с вами записать значение мэрджин двоеточие и здесь указать auto пробел.

728: Запятой ауто. Это будет означать следующее, что и по иксу, и по игреку задать центральное положение от контейнера, в котором находится, например, tech п. Вот таким

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

730: Все, что карусель итем, вложенная в него, копируем и размещаем здесь ниже. Добавим 1. Пока что. Так. Где она тут? Вот так. Значит, мы её добавляем вот сюда.

731: Обновим сейчас давайте сейчас заменю здесь с gaming pc, на что у нас там будет дальше неважно, пусть будет так контроллер вот так обновим.

732: Вот он. Но кнопки здесь 3 остаётся для этого. Чтобы поменять количество кнопок, нам нужно лезть вверх, копируем все, что находится в этой строке. Дублируем эту кнопку и теперь смотрим, чем они отличаются друг от друга. 0 1.

733: 2. Соответственно, следующий 3. Здесь слайд 4. Вот так обновим. Их теперь стало 4. Все супер. То есть вот таким образом увеличиваем количество. Соответственно, если мы их сделаем, 10, здесь будет вот этих де,

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

735: Можно не заметить, а это именно коллекция из изображений с текстом.

736: И теперь возвращаемся в редактор. Так добавим здесь ещё карт, ну, чтобы у нас все вот эти изображения, которые у нас

737: В images, например, в данном случае были в этой карусели.

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

739: Здесь у нас их есть 4. Значит, 1, 2, 3, 4. Вот так добавляем индикаторные кнопки и теперь, соответственно, меняем у них у всех те, что мы добавили порядковые номера. Так, обратите внимание.

740: Здесь, например, если 1 указано 3, следующий в этой же строке слайд 4 и так далее. Ну, из за нумерации в программировании такая штука происходит. Поэтому делаем вот так дальше. Здесь у нас 5, 6 и так далее. То есть все эти значения

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

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

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

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

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

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

747: С вот этим контейнером убираем и их просто не будет. Или можно сделать вот так.

748: Медиа добавить свой медиазапрос никто не отменял. Что так можно сделать? Максимальная ширина. Двоеточие здесь укажем. Пусть будет так. Планшета у нас 756. Ну давайте напишем 750.

749: 55. Вот так вот так и здесь укажем, что делать. Если до 755 пикселей мы сделаем вот так обращаемся к этому классу.

750: По этому селектору.

751: К этим кнопкам и делаем вот так. То есть их просто вот так display none, их просто не отображать на мобильных устройствах и они у нас на планшетах и пк останутся. А на мобильных устройствах

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

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

754: Работать точно также пока что в index html, так как футер везде одинаковый, потом перенесём его в pricing. Итак пока что это все даже не пролистываем. А давайте сделаем так.

755: Вот он наш тег секция, свернём его, так как он нам пока что не нужен и хедер с навигационной панели тоже свернём. Итак, вот он наш footer, начинаем здесь.

756: Запишем здесь точно так же, как, например, в хедере. Посмотрим. Нет, давайте не в хедере в секции посмотрим. Так контейнер флюид роу и потом разбиваем уже на секции, как на разбиваем так, как нам нужно.

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

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

759: На 3 равные блока здесь будет разместим надпись, что права на содержимое в сайте защищены здесь ссылки дополнительные и здесь ссылки на ютубы и так далее. Соответственно, нам здесь потребуется 3 конте.

760: Сделаем вот так. 1, 2, 3. Итак, создаём. Нам нужен кол элджи 4, чтоб разбить на 3 равные части. Вот так. Теперь дальше здесь дописываем для планшета.

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