Адаптивная верстка Landing Page для новичков | Flexbox | Создание сайта | #4

Автор Sergei Plotnenko
Адаптивная верстка Landing Page для новичков | Flexbox | Создание сайта | #4

Всем привет.

С вами на связи. Александр шулепов и сегодняшнее видео мы продолжим ждать наш лендинг прошлом уроке. Мы закончили вот главную страницу шапку принципе.

Она готова сейчас мы с вами будем доделывать меню выводить.

Вот она в курсе подсвечивается, но почему-то не видно вот и продолжим уже верстать 2 блок. Давайте продолжим. Так мы сами закончили оформлять. Верхнее меню. Давайте посмотрим, что у нас вообще вышло. Я уже проверил. У меня всё работает. Ну Вот такой вот у нас меню шапка всё готово иконки кстати появились. Почему в прошлый раз. Их не было с ним появились всё нормально. Давайте пробежимся по коду. Что за, что добавили. Ну во-первых мы сделали порядок, что первое по порядку там nth-child через 5 секунд 2 через 525. Ну то есть появляется менюшки по порядку тоже самое ссылке ссылка медали стиле там как они будут дети background. Белый там ну короче всё вот как вы наблюдаете активно при наведении background 0ff стиле и подключили анимацию то есть без анимация не работала. Давненько делает Landing на самом деле и вроде все стили сделал. А ну не видно их было просто. Подключите не сниматься уже всё заработало по первому блоку нас в принципе всё готово шапка сделано вот-вот. Обратите внимание у нас здесь есть я поставил 100 пикселей ничего не отвечу — это 1% от 1% высоты окна браузера чтобы точно — это всё отобразилось. Давайте сделать. Второй блок продолжим открыл наш пример, что мне тут с интернетом чуть беда. Вот давайте мы начнём верстать 2 блок, что нас был, тогда нам. Для начала нужно сделать разметку этого блока. Так давайте посмотрим, что получилось такое нас получился элемента где-то что-ли div не закрыл она пока сделаем так будем продолжать оформлять. Так давайте теперь добавим. На всякий пожарный мы обновим и посмотрим TX и ботан 2 блок он стал меню ездит фиксированная блок стиль текста пока менять не буду. Пусть будет такое давайте мы сейчас с вами откроем нашу папку и я уже скопировал то есть взял из исходника папку иконок. Вот они в принципе есть, а пути мы с вами прописали здесь. Давайте посмотрим, что у нас так почему-то не хотят они отображаться сделаем ещё раз посмотрим странником. Почему вы не хотите отображаться Python writing CSV в принципе посмотрим айконс переименуем смотрю должен отобразиться всё супер. Ну название надо менять и соответственно будет разные названия. Так давайте пробежимся как мы именно этот блок. Северстали хочу отдельно сказать стали мы его флексами здесь мы подключили в строчку слева направо здесь у нас мы сделали можно в одну строку на здесь несколько строчек. То есть она задается именно выравнивать. Почему на проектах. Не надо быстро похудеть так не надо делать то, что Flex отображается во всех современных браузерах. Ну вот и элементы располагала именно Flex то есть мы включили сказали браузеру мы используем Flex включаем дисплеем. говорим, что будет использоваться всё остальное здесь выравнивание позиции трансформации. То есть в принципе всё как обычно в общем этом всё закончится урок сегодня мы с вами оформили блог категории. В следующем уроке мы будем оформлять последние 3 блок — это с формой и адаптив посмотрим либо в этом уроке либо в следующем если, что под видео есть исходники всего этого лендинга из. Лего что-то не получается можете посмотреть и повторять вместе или был поверх кода проверять. В общем всем спасибо за внимание пока.

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

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