0: Итак, мы с вами сегодня продолжаем заниматься вёрсткой формы. Посмотрим с вами, как нам ещё для неё сделать несколько анимаций, связанных с как сделать анимации для баннера.
1: Посмотрим заодно, как можно работать с блюром сесси, и посмотрим, как нам сверстать.
2: Навбар меню для того, чтобы мы могли сделать сайт многостраничным, в том числе это меню у нас будет состоять и из ссылок в виде текста и ссылок в виде изображений, чтобы это сделать на
3: Нам нужно открыть наш с вами проект с прошлого занятия.
4: Открываем.
5: Вескод.
6: И там открываем папку нашего проекта.
7: У нас здесь уже открыты файлы с прошлого, занятия с css и html, посмотрим, на чем мы с вами остановились, у нас с вами готов базовый вариант того, как формочка должна выглядеть.
8: И наша с вами задача немножко шаманить на тему того, чтобы правильно вывести импут на передний фон, потому что у нас сейчас его перекрывает псевдоэлемент, и как раз, чтобы у нас он симпатично выглядел, в том числе сделать маленькую анимацию. Похо,
9: На знак вопроса здесь с почтой или с номером телефона у нас тоже такой должен быть. Давайте откроем с вами ссылку, где у нас все это было.
10: Вот так у нас выглядела базовая формочка. Да, нам тут нужно будет сделать такое наведение, и мы с вами ещё сделаем баннер, как у нас был в исходнике вот этого скриншота.
11: Давайте начнём с того, что откроем сиэсэс и попробуем с вами прописать для импута, который у нас лежит внутри класса плейсхолдер. Давайте найдём его.
12: Вот у нас плейсхолдер, и мы выбираем вложенные в него элементы. Нам здесь стоит прописать значение позишн, релейтив, релейтив, потому что он никуда не должен перемещаться и указать
13: Индекс со значением единичка, чтобы у нас он сейчас перекрывал наш
14: Псевдоэлемент при этом псевдоэлемент мы с вами используем для того, чтобы отображать текст. Если мы с вами в таком виде все оставим у нас, он будет перекрываться фоном самого импута у импота базово белый фон. Поэтому, чтобы это исправить, мы сделаем с вами свойство background.
15: Color со значением транспорент прозрачный да, если вы не знали, можно делать прозрачный фон целиком и посмотрим на результат у нас визуально ничего не поменялось, но видите, теперь мы можем с вами печатать поверх элемента и нам.
16: Теперь нужно сделать так, чтобы псевдоэлемент симпатично у нас брал и уходил наверх, когда мы начинали с вами печатать. Как это реализовать. У нас здесь будет довольно непростая схема, которая заклю
17: Заключается в следующем. Мы с вами в 1 очередь обращаемся к элементу с классом плейсхолдер. Это у нас спан, который оборачивает инпуты, на котором у нас лежит псевдоэлемент буфор. Затем мы говорим, давайте мы используем псевдокласс хэз для того,
18: Чтобы проверить, что у нас внутри лежит импут в состоянии, когда мы положили внутрь курсор. Вот это вот состояние, когда мы выделяем элемент, это состояние у нас контролируется через псевдокласс.
19: Вот таким образом и в конце этого уравнения пишем, что мы при этом работаем с псевдо элементом буфор. Сколько бы псевдоклассов вы не накладывали, псевдоэлемент всегда находится в самом конце.
20: Этого уравнения. Ну и пишем, что мы с вами хотим немножко стиля поменять. Фон сайз. Давайте посмотрим, какие у нас там были базовые значения. У нас там было 17. Я думаю, пусть у нас будет 14 фон сайз.
21: И нам надо поменять пединг топ, чтобы у нас элемент лежал повыше или просто топ сделать отрицательным, чтобы он тоже у нас все-таки перестраивался повыше.
22: Альтернативный вариант. Можем ещё лайн хайт сделать поменьше, тогда он тоже будет повыше. Давайте, наверное, лайн хайт сделаем с вами не 54, а, например, 34 пикселя, и он у нас на двадцаточку вверх уедет. Давайте
23: Проверим, работает у нас эта магия или нет. Смотрите, вот я кликаю, и видите, у нас резко элемент утекает наверх, в целом работает, но нам теперь надо добавить плавности этому движению. За плавность у нас отвечает свойство.
24: Transition, мы с вами будем его вешать на все ai из использовать, чтобы у нас была плавная дуга. Я бы это сделала на самом деле за 2/10 секунды. Больше, я думаю, тут не стоит для этой анимации при этом
25: Напоминаю, транзишн действует только в 1 сторону если мы его вешаем вот на has инпут фокус, он действует в 1 сторону если мы хотим, чтобы он действовал во все стороны, в том числе когда мы убирали курсор, то надо его повесить ещё и просто на сам псевдоэлемент ве.
26: Его ещё и на плейсхолдер фо обновляем и вот он у нас уже красиво уползает.
27: Чудесно. Я бы, наверное, на самом деле ещё чуть чуть поменьше сделала размер фон сайз, например, в 12 пикселей. Сейчас проверим. Да, в 12 он выглядит вполне себе убедительно, и при всем при этом нам надо бы ещё для самого импута в моменте сде.
28: То, чтобы он у нас немножко смущался, мы берём импут, а то видите, если мы так оставляем, у нас немножко мало места между ними берём импут в состоянии фокуса и говорим, пусть у нас
29: Состояние фокуса добавится маленький пединг топ. Тут десятки пикселей будет достаточно для этого решения проверка оп оп оп. В целом все у нас тут работает. Единственное, чт.
30: Она у нас уже уползает, когда у нас что-то ещё осталось. Поэтому этот момент нам тоже нужно поправить. Нужно поправить, что у нас текст возвращается, если мы хоть что-то заполнили, как это сделать вот здесь
31: Будем с вами писать, что у плейсхолдера, который внутри себя обладает импутом, который не пустой, чтобы проверить, что он не пустой. Мы
32: Вешаем селектор нот псевдокласс not вернее который у нас обозначает отрицание и там проверяем, что у нас нет значения плейсхолдер шоу я выбрала да, именно такой адский вариант, чем работать через gs, чтобы.
33: Показать вам силу псевдокласса классной анимации тоже можно делать все сессии и все это повесить опять-таки на бфо в самом конце. Сейчас проверим, будет ли она у нас работать. И да, видите, ага, он у нас сейчас будет выбирать все варианты.
34: Потому что мы с вами их не проставили, верно? Верно? У нас нигде в теле нет импута, что у нас делает свойство псевдокласс плейсхолдер шоун. Он проверяет, что у нас есть плейсхолдер. Именно сам атрибут плейсхолдер, и нам
35: Его надо везде в импута добавить, причём добавить пустым самый простой вариант как это сделать это открыть через команд или ctrl f поиск вбить сюда велью с кавычками, а в реплейс выбрать велью с кавычками и place, ходор с кавычками.
36: Place holder равно кавычки пустые и заменить, и оно у нас везде во всех 6 местах допишется там, где у нас имена, там, где у нас почта и пароли, и там, где у нас номер телефона.
37: Проверка вот у нас все вернулось на круги своя смотрим мы что-то вбили, и вот оно у нас вернулось нам ещё в таком кейсе, там, где у нас форм css, надо вписать, что пединг то будет ещё в состоянии, если у нас
38: Input получается, как это лучше обозначить тоже вот в этом состоянии. Оп.
39: Проверка.
40: И вот у нас везде все работает, отступы везде нормальные, все в порядке.
41: Вот таким вот хитрым образом мы с вами обеспечили корректную работу этой анимации.
42: Давайте подожду вас. Если вдруг в процессе возникают вопросы, то говорите.
43: Окей, едем дальше.
44: И ещё немножко нужно времени. Хорошо?
45: Супер. Тогда давайте следующим этапом мы с вами сделаем баннер для баннера. Что мы будем с вами делать? Баннер будет выглядеть примерно следующим образом. Где у нас есть вот такая вот такой вот
46: Пространство, в рамках которого у нас будет крутиться анимация. Но, кстати, перед тем, как мы его сделаем, нам надо ещё вот эти кружочки доделать, мы же их ещё не доделали. Давайте посмотрим, как они у нас были обозначены. По моему, у нас там был
47: Class circle, если я ничего не путаю, вот он диф с классом сёркл. Отлично, давайте под ним добавим ещё диф с классом. Текст какой это у нас, кстати, текст это у нас
48: Текст про данные давайте.
49: И там тоже внизу текст про данные, там про номер телефона, а здесь у нас про дату рождения. Давайте вот так, наверное, его обзовём.
50: И внутрь напечатаем необходимый текст.
51: Эти данные определяют сервисы, доступные для учётной записи.
52: Затем идём с вами в css, находим элемент с классом сёркл.
53: Он у нас в нужном месте уже находится. Все, что нам нужно для него дописать. Это, во первых, чтобы у нас не триггерился, не триггерилось выделение текста, потому что не очень хорошо, когда мы с кнопок можем текст выделять, у нас для этого есть свойств.
54: User select со значением none и обязательно добавляем курсор со значением поинта, чтобы подсветить пользователю что этот элемент у нас выделяемый и вот у нас все поменялось у нас рядом заодно появляется наш
55: Текст, который мы до этого написали, можем его здесь же стилизовать, скажем, что у нас есть текст верф.
56: Во первых, я бы нашла, где мы.
57: Добавляли свойства для в целом текста, если так посмотреть, он у нас небольшой довольно, где у нас там был фонд сайсс, у
58: У кнопки плейсхолдера снова там 17, вот тут 15, вот там, где у нас есть класс лайт, я бы через запятую докинула. Сюда же. Класс. Текст Берр. Отлично.
59: Посмотрим, он у нас должен стать поменьше. Это хорошо. Затем мы укажем, что у нас у этого элемента. Пусть будет, во первых, значение позишн.
60: Салют. Во вторых, зет индекс сразу же можем указать двоечку он у нас должен будет перекрывать инпуты, у которых уже z index единичка бэкграунд калор. Можем указать такой светло серый оттенок.
61: Если выбирать между ними, наверное, это вот этот оттенок ддд, который проверка.
62: Вот так это пока что выглядит отлично. Здесь же можем определить с вами пединг. Я бы сказала, что он у нас будет пикселей, наверное, 14 по краям небольшой бордер. Радиус. Давайте я пока укажу 12. Потом, если
63: Что поправим и ширину можно через max виф это сделать, пусть у нас ширина будет с вами например процентов 30, может быть она у нас будет побольше 30 это на глазок нет, наоборот она у нас точно будет поменьше.
64: Тут у нас.
65: Интересные 30 у нас 30, как будто от родителя идут, получается, всей страницы, а нам надо бы 30 от родителя, как это легко поправить можно на
66: Сам тег form где-то же он у нас присутствует в обычном виде ну, кстати, нет, можно сказать, что у нас просто у Тега form будет позишн релейтив написали, но нет.
67: Все ещё хочет от ширины страницы это считать. Ну ладно, пусть будет так.
68: Тогда давайте не в процентах укажем это, а просто в пикселях. Так будет удобнее. Даже сейчас прикинем, где-то примерно 200 пикселей это подходящий нам размер плюс я бы ещё на самом деле
69: Все-таки фонсай сделать чуть чуть поменьше, например, 14 пикселей. Посмотрим.
70: Вот это уже ближе к правде и у нас лайн хайт точно будет поменьше лайн. Хайт, давайте двадцаточку пока укажем.
71: Двадцаточка многовато. Давайте тогда вот таким образом отрегулирую. Так удобнее.
72: 18, наверное, вполне себе.
73: Сделали и теперь нам надо этот элемент передвинуть куда-нибудь, а именно немножко выше нашего кружочка и чуть чуть его левее.
74: Давайте скажем, что у нас мы будем его двигать наверное через свойство transform. Так тоже удобно это сделать, можно через top left, в целом нам никто этого не запрещает, у нас будет, получается транслейт по 2.
75: Это по иксу и по игреку через запятую. 2 значение, так как мы уводим наверх, будет точно у нас отрицательным. Я пока прикину рандомные значения и уже сейчас посчитаю через
76: Инструмент отладки. Какое там должно быть значение более удобное.
77: Ну вот так вполне себе. 60, 70 получается, вернее, 60 - 70. У нас, получается, это мы сделали кружочек, который у нас для даты рождения кидаем, получается, с вами на сам текст Берр свойства.
78: Display none чтобы скрыть его, он у нас не должен отображаться базово, и далее говорим, что у кружка по ховору будет меняться следующий за ним текст бери.
79: Они являются сестринскими элементами, которые лежат в 1 родителе. Именно поэтому мы можем с вами использовать селектор плюсика, который отмечает сестринский элемент, лежащий прямо за элементом. И таким образом, взаимодействуя с 1, мы можем влиять
80: 2 без всякого джесса и меняем здесь свойство display на значение блок.
81: Проверка наводимся и вот у нас все возникает. Такой быстрый поп ап. Тоже самое нам надо будет сейчас сделать для области с номером телефона. Давайте мы найдём сейчас этот элемент, он у нас
82: Находится, получается пониже, идём с вами в html.
83: Я далековато пролистала. Вот у нас импут с номером телефона, сюда же получается, мы добавляем диф с классом сёркл, и прямо за ним у нас будет идти диф с классом. Текст дефис тел.
84: Circle, добавляем знак вопроса.
85: Текст тел. Добавляем подсказку от номера телефона. Этот номер телефона будет использован для проверки вашей личности, восстановления пароля, если вы его забудете.
86: Добавили затем.
87: Смотрим, они у нас должны примерно здесь располагаться. Вон у нас сёркл, который у нас, кстати, невидимый. И Вон у нас текст. Интересно, почему?
88: Ага, у нас плейсхолдер, звёздочка перекрывает. Нам надо чуть чуть стиля поправить. Там, где у нас был плейсхолдер с выбором звёздочки внутри. Нам надо поправить это на инпуты. Плейсхолдер импут.
89: Вот так.
90: Вот кружочек у нас вернулся на место. Теперь, я думаю, кружочек мы через абсолют подвинем, также как и текст тел.
91: Получается, чтобы выбрать конкретно этот круг.
92: Мы можем написать, что это будет, например.
93: Input плюс сёркл можно, конечно, навешивать дополнительные классы, но это правило в нашем кейсе тоже сработает, и у него будет свой собственный трансформ. Транслейт пока что можем предложить такой же, как и здесь. А ну нет.
94: Давайте лучше это сделаем по другому через position absolute посмотрим куда у нас кружочек перетащится пока что никуда.
95: Выберем этот круг.
96: Зададим ему z index тройку он должен лежать у нас выше, чем input вот он у нас теперь должен выбираться, он пока не особо хочет, но мы его сейчас перетащим.
97: У нас, кстати, импут видимо, так выбрался, а должен был бы сёркл выбраться. Интересно.
98: Почему у нас вот это решило не работать потому что я написала просто сёркл а у нас тут класс circle, логично что не работает вот теперь он у нас переехал супер, можно задать ему значение для начала write 0 посмотреть куда он уедет давайте.
99: 10 пикселей у нас будет, чтобы он не прилипал идеально и небольшой отрицательный топ.
100: Двадцатка многовато, десятка тоже. Ага. Все-таки положительный. Окей.
101: 20 пикселей получается. Рай 10, стоп 20.
102: Вот у нас кружочек и дальше работаем с текстом, который идёт следом за ним. У нас там был класс текст тел. Можем через запятую ну кстати, это у нас уже получается абсолютно 2 идентичных элемента, у которых только transform.
103: Будет отличаться. Давайте вот здесь для начала через запятую укажем текст тел, чтобы стили были те же самые
104: Затем скажем, что у circle ховер плюс точка текст дефис тел будет работать такая же анимашка, и нам осталось только перед
105: А, ну ещё наверху найти.
106: И вот здесь дописать.
107: Отлично, и теперь осталось только взять этот класс, указать для него свой трансформ.
108: По иксу давайте пока что сотку сделаем и посмотрим, куда у нас уезжает.
109: Давайте я пока дисплей нан отрублю, чтобы нам было удобнее его установить, а потом уже поправим. Окей, получается, у нас здесь будет значение.
110: Где-то примерно 130 ii отрицательная тоже будет побольше.
111: 130 и 135. Например, вполне себе подходящий вариант. None. Возвращаем, значение меняем
112: И вот у нас он возникает, этот попап. Чудесно. Что делаем дальше? Дальше давайте все-таки вернёмся к баннеру. Нужно ли вас подождать немножко?
113: Или все окей. Хорошо, тогда я пока скрою форму, мы в Баде будем с вами выбирать наш баннер. Для этого будем создавать с вами класс.
114: One?
115: У нас внутри этого дива с классом баннер будет лежать отдельный диф с классом калорс, в котором у нас будут лежать непосредственно наши цвета в количестве 4 штук. Можем сгенерировать диф с классом калор точка си до.
116: Таким образом, при помощи эммита мы можем с вами умножить эту формулу на 4 и сразу же сгенерировать 4 дива. Вот так это будет выглядеть.
117: И с этой структурой мы сейчас будем с вами дальше работать.
118: Идём с вами в css, давайте я тут напишу комментарий, что тут у нас будут идти стили для баннера.
119: И укажем, во первых, что баннер у нас будет с вами располагаться на всю ширину страницы, ширина 100%.
120: Немножко его обозначим высоту в 300 пикселей, так как у нас внутри будут выступающие элементы, можно сразу же сказать что будет свойство overflow со значением хидан.
121: Это нам на будущее.
122: Внутри у нас, получается, лежит класс калорс, который используется для всех цветов. Для него мы с вами обозначим тоже ширину и высоту, которая будет немножко выходить за значение родительского элемента.
123: У нас тут будет ширина в 400 пикселей, и высота тоже в 400 пикселей, при этом мы скажем, что у нас будет margin top.
124: Отрицательный. Давайте, вернее, как сначала обозначим с вами значение margin 0 auto, чтобы у нас элемент выровнялся по центру, а потом margin, top, обозначим в - 50 пикселей 50. Почему? Потому что 400 и 3
125: Если мы их вычитаем, будет сотка, разница 50 сверху, 50 снизу, получается, 50 сверху, чтобы выровнять.
126: И у нас внутри лежат 4 элемента колор, мы их обозначим для начала просто как кружочки, как кружочки. Это означает, что у них у всех борд радиус будет 100%. Затем укажем им ширину и высоту. В половину родителя можно
127: 200 пикселей можно по 50% и так, и так сработает.
128: И затем для каждого из них укажем свой оттенок через background color возьмём какие-нибудь яркие базовые пусть у нас там будет, например, красный.
129: Жёлтый, а если так посчитать, лучше красный, синий.
130: Red blue gold золотистый и такой какой-нибудь лайт блю голубоватый оттенок возьмём.
131: Light sky blue, например.
132: Посмотрим, как это выглядит.
133: Вон у нас эти кружки располагаются внутри, при этом нам надо бы саму форму покрасить для баннера. Можем указать с вами бэкграунд калор какой-нибудь не прицельно чёрный, а такой просто Тёмный оттенок, например.
134: 19, 19, 19 вот так это будет выглядеть, затем давайте на калорс ещё накинем дисплей, флекс и flex wrap в рэп для того, чтобы у нас элементы переносились, у нас тогда будет такой
135: Квадратик из 4 Кружков.
136: Смотрим, вот он у нас образовался.
137: Теперь мы можем заставить его крутиться, как это сделать, пишем с вами простенький ки фрейм анимашку, назовём её калорс и у нас будет буквально 2 состояния мы крутим по crew.
138: Наш элемент калорс родительский, у нас, получается, будет значение на нуле у transform ротейта 0.
139: У 100% трансформ ротейт 360 градусов целиком круг и вешаем её на калорс. Анимейшн, калорс. Пусть она
140: Идёт, например, 10 секунд линейно с 1 и той же скоростью и бесконечная инфинит. Смотрим, вот у нас кружочки крутятся, но вы скажете, что пока что ничего особенного нет, но
141: У нас есть замечательное свойство, которое называется фильтр со значением блюр. У нас есть на самом деле 2 очень похожих си свойства. 1 называется фильтр, а другое бэкдроп, фильтр, бэкдроп. Фильтр действует на фон и размывает фон. А Филь.
142: На самый элемент и размывает все в него вложенное. Если мы на калорс повесим свойство фильтр со значением блюр и укажем там, например, 150 пикселей, посмотрите, какой у нас красивый результат получился.
143: Вот наша анимашка из 4 элементов можно при желании выбрать какие-нибудь другие, более яркие цвета, но в целом оно и так у нас выглядит неплохо. Теперь все, что нам осталось, это добавить. Заголовок посередине.
144: Этого баннера он у нас должен будет накладываться на цвета, поэтому мы можем под калорс положить h1 написать создайте свой apple id и ука.
145: Стили для самого элемента h1 у нас получается, он должен лежать сверху, поэтому он, к сожалению, будет абсолютно позиционирован. У нас будет отступ сверху, например, 110 пикселей он size у него будет довольно большой
146: 40 пикселей и font weight. Ну например 700 такой.
147: Bolt будет значение вот так это выглядит, чтобы отцентровать его используем с вами свойство.
148: Shirin, 100% и text align center добавляем также калор вайт, чтобы он у нас был белого оттенка смотрим и вот так это выглядит с.
149: Анимашкой на фоне в целом вот такие вот аккуратные ненавязчивые анимашки. Это хорошая база для веба. Здорово если вы будете их добавлять в свой проект не что-то супер
150: Яркое, навязчивое, а что-то такое мягкое, деликатное, но при этом привлекающее внимание не очень сильно можно сделать анимацию даже помедленнее сделать не 10, например, а 20 секунд. И в любом случае человек, который заполняет форму.
151: Увидеть, что у нас эта анимация работает, но при этом она у нас работает очень мягко и ненавязчиво. Ну и что? Здорово. У нас вся эта анимация сделана чисто на сессии.
152: Не нужно подключать здесь ни какую-то jazz библиотечку, ни просто ванильный джс для её реализации.
153: Давайте последнее, что мы с вами посмотрим, это ссылки. Для этого нам наверху нужно будет создать тег наф наф, сокращение слова навигейшн и naaf. Это у нас семантический тег, который
154: Требуется для того, чтобы мы могли создавать меню. Как правило, у нас любая навигация по странице или по сайту будет храниться внутри тагана. У нас. Если мы посмотрим меню, выравни.
155: По центру. При этом по бокам есть отступы. Значит, нам понадобится обёртка. Можете назвать её, например, на врепер.
156: И внутри идут пункты меню.
157: У нас их тут.
158: 13 штук, включая изображение. Давайте создадим тёк эй в количестве 13 штук. У нас он, к сожалению, строчный, поэтому не очень красиво создаётся. Надо будет вот так вот попереносить.
159: Вручную, потому что если мы будем через Претер сохранять, я проверяла Претер тоже как-то не очень дружелюбно к строчным, соседствующим друг с другом тегам относится и как-то их криво сохраняет.
160: 1 у нас пустой. Последние 2 пустые. В остальные надо перекинуть текст. Давайте это сделаем. У нас тут будет магазин.
161: Mc.
162: Ipad.
163: Айфон.
164: Watch.
165: Airpods
166: Тв и дом.
167: Только в apple.
168: Аксессуары и поддержка и у нас пустые остаются 2 отлично, вроде все сходится.
169: Сохранили.
170: Давайте попробуем это потихоньку стилизовать.
171: Для начала растянем меню по всей странице скажем, что у нас у нах будет ширина 100%. Высоту зафиксируем, пусть будет 48 пикселей. Цвет у нас будет.
172: У меню такой же, как и у баннера, бэкграунд калор. Вот это 19, 19, 19.
173: Смотрим.
174: Пока что вот так выглядит. У нас все теги, которые относятся к ссылкам по умолчанию, будут синими с подчёркиванием или же фиолетовыми с подчёркиванием, если мы уже по ним кликали, я уже
175: Предыдущей группы кликала, поэтому они у меня фиолетовый оттенка. В общем, как википедия, у нас выглядят ссылки, так они у нас и здесь базово будут смотреться, чтобы их нам стилизовать. Нам потребуется взаимодействовать непосредственно с тегом a.
176: Давайте напишем следующее у нас внутри лежит наф в репер.
177: А давайте ограничим ему ширину, сделаем её поменьше, чем ширина страницы, и тогда мы сможем использовать с вами свойство margin 0 auto и у нас элемент автоматически.
178: Будет оцентроваться.
179: Правда, он сейчас не хочет этого делать. Давайте ещё раз проверим. Вот у нас на вот нас, на репер ему.
180: Оп. Нет, ему не все равно. Вон у нас отступы появляются по краям, просто у нас внутреннее содержимое пока ещё не отцентровано, чтобы отцентровать внутреннее содержимое. Используем на элемент родительский дисплей флекс джеффа контент.
181: Space between чтобы у нас элементы по горизонтали были на равном расстоянии элайн айтом центр, чтобы по вертикали их выровнять вот они у нас потихоньку выстраиваются посмо.
182: Смотрим у нас дифф на репер, не унаследовал высоту, значит, пишем ему хайт 100% от родителя.
183: И вот у нас оно отцентровала ь супер, едем дальше, у нас внутри элемента на репер лежат ссылки с тегом a нам нужно указать им. Во первых, текст декорейшн нам убираем нижнее подчёркивание калор.
184: Давайте укажем белый. И смотрите, у нас там как это работает на самом сайте, по умолчанию у нас такие светло серые оттенки, а по наведению мышки они становятся белыми. Надписи мы это можем с вами отрегулировать, если будем
185: Использовать. Опасити. Опасити. Например, 0 точка 6 на сами элементы закинем, а потом будем её по ховору менять на единичку.
186: Почему это лучше всего делать через опасити, а не через background color потому что у нас картинки тоже себя так ведут видите и нам с картинками придётся работать так же это проще всего сделать через опасити без лишних.
187: Опа, опечаточка без лишних страданий.
188: Вот она у нас меняется, я бы ещё и туда, и туда повесила свойство transition со значением опасити 1 мы пишем то, что меняем затем, что у нас через, из за, ну, например,
189: 2/10 секунды тоже это значение меняется. И вот у нас оно плавненько переключается. Может быть, оно уже не так сильно заметно человеческому глазу. Но поверьте, если бы у нас было резкое переключение, вы бы гораздо сильнее это заметили теперь.
190: Давайте сделаем с вами фонд сайз поменьше. Ну, например, 14 пикселей смотрим. Вот это уже больше похоже на правду. Ну и текст мы, считайте, с вами стилизовали теперь.
191: Давайте стилизуем картинки картинки я буду брать напрямую с эппловского сайта для начала я сразу скажу, что пусть у нас будут все элементы со свойством background repeat, no repeat.
192: Так удобнее всего и затем будем работать с каждым из элементов. Давайте мы повесим на них на все классы.
193: Пусть у нас у 1 элемента будет класс лого, это у нас логотип. У предпоследнего у нас будет класс серч, потому что у нас там поисковая лупа и в конце
194: Back, потому что у нас там такая сумочка, давайте я вытащу ссылки на картинки, мы их будем добавлять с вами через свойство background image навожусь на картинку.
195: Оп оп.
196: Вытаскиваю ссылку, копирую её.
197: Иду в css, обращаюсь, получается, к классу лога и использую свойство background.
198: Image со значением url круглые скобки кавычки и вставляю ссылку.
199: Смотрим, у нас ничего не произошло, потому что ссылка у нас пока что с необозначенным размером. Во первых, давайте мы пропишем ей ширину, во вторых, пропишем этому элементу свойство.
200: Background size у нас получается, пусть будет ширина, например, 14 пикселей, а background size.
201: 14 пикселей 44 пикселя. Это у нас по горизонтали и по вертикали проверка.
202: Все ещё элемента не видно. Давайте снова попробуем его найти. Вот он и у нас высота обозначена здесь как 0. Значит, нам надо ещё высоту добавить для всех элементов 3. Давайте я сразу их в начале через запятую.
203: Перечислю, у нас там получается лого серч и back, у них у всех будет высота 100%. Смотрим, вот у нас яблочко появилось.
204: У нас, правда, немножко как будто бы кривовато.
205: Давайте ещё, наверное, background position на все на 3 накинем, например, центр.
206: Вот, и теперь оно у нас ровненько по центру расположилось. Видите, у нас анимация с опасити все ещё работает по хопру. Теперь нам осталось повторить этот трюк для оставшихся 3 элементов. У нас там дальше будет, получается серч.
207: У него будет другая ссылка, я сразу же её
208: Освобожу.
209: Надо будет немножко нам поменьше менюшку сделать. Нашли с вами поиск. У нас немножко другие размеры для него будут. А ещё у нас тут сюрприз. Спрайт спрайт в изображении зачем-то выбрано, хотя у нас как будто бы
210: Здесь в базовой версии оно так не работает. Может у нас в бургере где-то по другому работает? Да, Вон у нас в бургере эта иконка меняется. Ну ладно, нам пока что главное для десктопа сделать это изображение получается у нас будет
211: Другая картинка. Помимо этого, ширина в 15 пикселей бэкграунд сайз 15 88 88, потому что 2 спрайта, каждый из них по 44 проверка, он у нас
212: Окошко с поиском появляется. Нам надо будет ещё поменять конкретно для этого элемента получается бэкграунд позишн, он по горизонтали будет все ещё центр, а по вертикали уже топ и у нас будет, получается значение топ центр. И вот
213: Иконка вернулась на место, и в конце, получается, мы будем взаимодействовать с элементом бэк.
214: Background position убрали ширина у нас там будет 13 бэкграунд сайз, или 14, по моему, все-таки бэкграунд сайз 13 13 44 44 такой же размер, как у нас, был у пёр.
215: Элемента. Там всего 1 картиночка у нас сейчас будет. Вытаскиваем эту сумку.
216: Вытаскиваем бэкграунд имейдж.
217: Так, ещё раз. Оп.
218: Скопировали.
219: И добавили.
220: Проверка, как у нас это выглядит?
221: И вот у нас добавилась иконка и магазина все на месте.
222: Окей, давайте посмотрим ещё, как мы можем делать в проекте саму многостраничность у нас с вами по структуре нашего проекта базовой, по крайней мере, про продвинутую, думаю, с вами.
223: Если у вас будет такое желание, поговорим ещё все html файлы будут храниться друг рядом с другом, у вас будет index html, главная страница и второстепенные страницы, которые называются по другом.
224: В зависимости от своей функции, чтобы их связать друг с другом ссылками, вы везде будете вставлять абсолютно идентичное для них меню, которое в себе будет содержать атрибут у тегов a эйч рф.
225: Который мы будем наполнять путями к файлам. И если все файлы лежат друг рядом с другом, у вас путь будет состоять только из названия файла. То есть, что это значит на практике берете и пишите, что у вас будет форм html.
226: На логотип главный, потому что у нас файл называется форма html берете и добавляете просто на примере тех файлов, которые у нас под рукой это сделаю, докидываете везде непосредственно ссылки.
227: Jazz бейсикс, джес фанкшнс и, например, и примерно вот так это выглядит. И если мы попробуем обновить страницу, видите, я кликаю, что по картинке и у меня срабатывает, видите обновление?
228: Страница это переход на вот эту же страницу, что я по другим кликаю, и у нас сейчас будут открываться файлы с наших предыдущих занятий.
229: Так, у нас работает многостраничный сайт, мы можем кликать по разным ссылочкам, и у нас работает переход, и на других страницах у нас будет точно такое же меню в html, которое ведёт нас обратно, то есть нет необходимости.
230: Стилизовать меню по другому. У нас всегда меню выглядит абсолютно идентично, за исключением того, что максимум, что вы можете сделать, это в зависимости от страницы. Если хотите подсветить пользователя, на какой странице он находится, кинуть класс дополни.
231: На ту ссылку, на которой пользователь сейчас находится. И тогда у вас там, например может как-то активно выделяться элемент, ну например вот мы с вами находимся сейчас на странице форм html, берём и говорим, что мы берём с вами
232: Вот этот наф в rapper элемент внутри него выбираем тёк эй, который является самым 1 там enter of type 1, и пусть он у нас будет text decoration.
233: Underline, например, смотрим. И вот мы видим, что он почему-то решил не сработать. Так почему это форм, а потому, что нам нужен 2, простите, 2, например, оп. И вот
234: У нас, видите, когда мы находимся на необходимой страничке, у нас будет это подчёркнуто и так вы можете делать в зависимости от того, на какой странице мы находимся, лучше всего это кинуть на класс и в html вручную уже этот класс.
235: Добавлять в каждую амельку, когда вы хотите это за стилизовать. Вот такая история.
236: Мы с вами как-то супер быстро сегодня по всему этому пробежались но ok смотрите тогда давайте так, давайте без перерыва я вам дам супер короткое задание на многостраничность просто чтобы вы попробовали
237: Тестить, как ссылки создаются, что они у вас работают без стилей, просто базовая структура. И потом вы покажете, что у вас получилось. Как только покажете, я вас отмечу, и вы будете свободны. Что нужно сделать.
238: Создайте минимум 4 html странички, которые будут обладать самой базовой обвязкой там вот из html, head body.
239: Маленькое меню в каждое из них, где у нас будет 4 Тега a, которые свяжут эти 4 страницы друг с другом.
240: Да, и оно у нас будет везде одинаковое. То есть вы в 1 месте его прописали, в остальные просто скопировали. Просто потестить, что все в порядке. Механизм работает и понятен.