Адаптивная верстка Landing Page | Создание меню и логотипа.

Автор Liza Merichenko
Адаптивная верстка Landing Page | Создание меню и логотипа.

Всем привет.

С вами на связи. Александр шулепов и в сегодняшнем видео мы продолжим верстку нашего лендинг. Пейдж она личного сайта сегодня мы с вами будем делать меню на перед тем как мы начнём и хотел бы чтобы вы подписались на мой канал ставили лайки нажимали колокольчики задавали интересующие вас вопросы и возможно самые интересные вопросы.

Я бы снял отдельно видео погнали.

А давайте мы сейчас с вами загрузим все наши файлы с онлайн кинем так папочку откроем индекс потом View layout сделаем так и сделаем Style так — это всё на прошлом уроке давайте сейчас мы с вами давайте сейчас мы делаем разметку для меню начнём мы размечать блок первый наш экран называется section. Всё мы с вами разметили шапку сделали Class header общее Logo слева меню справа два тебе сейчас откроем. Так мы открыли с вами сайт вот смотрите What Class header Logo вот наша меню почему мы сделали section потому, что — это такая правильная семантическая разметка трясёт секция 1 1 блок секция 2 у нас будет Second — это Friends 3 развивается по секциям в принципе можно было и сделать просто div Class ничего бы не поменялось про тематический правильно. Ну тут H2 H2O соответственно. Вот наши менюшки. Давайте посмотрим, что у нас вообще пока наверное. Мы вряд ли увидим какой-нибудь хороший результат вот наша загрузочная. Вот наши в нашем логотип всё в принципе всё идёт по плану так. Давайте продолжим теперь работа со стилями. И начнём мы с класса section стери для всех секций. Так мы разметили секцию задали общий сервер для всех секций. Понятно Вот раньше блокеры выровняли flightright появилась дисплей гринфлайт для более сложного выравнивания в гриб. Где сейчас они все браузеры его понимают, но последний браузеры с ним уже работаю так, что вот новое свойство justify-content-between всё — это тоже понять. Давайте двигаемся дальше начнем оформлять. Фёдор так не разметка для хейтер, что тут у нас новая justify-content space-between традиционный распределяется равномерно флекса крайние он прижимает. Ну по бокам по краям так сказать то есть допустим тут тут и тут там 4 Flex ooh то есть вот этот вот такое вот и будет распределять равномерно. А ещё не объяснил почему вот сексом без точки ты всегда для всех классов для всех section тоже. Ну если нет точки. Там для всех видов. Ну короче — это я тоже раньше. Так теперь мы поработаем и хедером ещё и уже добавил класс Logan. Ну в принципе добавили анимацию появления всё тоже стандартной топ сверху слева — это то есть по нулям чтобы по центру вот всё было так двигаемся дальше уже начнём задавать классы для нашего меню которые находятся в хедере меню у нас булах в списке этом сейчас мы будем сдавать для или общие свойства. В общем. Мы закончили. Давайте теперь посмотрим, что у нас вообще получается так пока у нас мне не видно. Давайте Man меню логотип логотип capacities. Крым потому, что он всё равно — это в дальнейшем можно будет для манипуляции с анимацией и по идее у нас. Должно всё появится тут скромно проститут спасти — это прозрачность. Ну ты же знаешь чтобы мы не видели она появлялась там после того как анимация исчезнет. Это буквально там через 3 секунд на этом я хочу. Закончить видео в, что реально сделать коротенький вообще все ролики хочу быть коротенькая чтобы они были для вас ненапряжные поэтому жду в следующем уроке пока.

0 комментариев
0

Читайте также