Практика. Часть 11. Верстаем блок «Материалы» | Курс Веб разработчик | Академия верстки

Автор Denis Lisitsin
Практика. Часть 11. Верстаем блок «Материалы» | Курс Веб разработчик | Академия верстки

Привет.

На связи. Артем Исламов это. Академия верстки вы сейчас находитесь в плейлисте который называется web-разработчик 10 поток — это записи нашего закрытого курса мы их бесплатно в YouTube, но мы не выложили домашнее задание и дипломный проект от этого курса для того чтобы получить полный доступ ко всем домашним дипломом и так далее.

Вам необходимо перейти по ссылке в описании или вот там справа в углу будет значок информации.

Вы можете кинуть туда и перейти по ссылке, а затем вы оплачиваете полный доступ ко всем домашку дипломным проектом указывайте свою почту после этого получаете доступ полностью к записям курсы веб разработчик 1000 со всеми модулями со всеми заданиями дополнительными заданиями со всеми видео уроками которые здесь есть как мы обычно прикрепляем к каждому нашему уроку и дополнительные документы дополнительные материалы макеты дополнительные ссылки. Поэтому если вы хотите получить полный доступ ко всем записям и не ждать пока они выйдут на. Ютюбе Вы можете перейти по ссылке в описании и оплатить. Приятного просмотра этого урока. До скорой встречи. Всем привет. С вами. Артём Исламов продолжаем практиковаться в верстке мы остановились на том, что наш пакет с вёрст до раздела развиваем сомнения то есть этого раздела замечать девушкой сейчас. Наша задача сверстать следующий блок. Но после того как вы. Северстали все предыдущие блоки я уверен, что — это не будет проблематично потому, что блок уже конкретен понятен, что с ним происходит всё вам. Ясно собственно здесь нужно просто сверстать этот блок с картинками и собственно со всеми подписями. Ну тут. Масленица уже совсем немного всего три блока поэтому очень быстро сегодня в темпе верстаем этот блок остальные и у нас ещё на очереди всплывающие окна и собственно. У меня есть задумка сделать этот сайт многостраничного в этом чуть позже и так сегодняшний урок. У нас блог про материалы есть фоновые изображения которые можно вырезать я собственно я этим занимаюсь сейчас я говорю — это фоновые изображения здесь материалы у нас могут считаться как товарами предложение то есть оперы мы можем добавить — это офис. Беги или материалы. Ну давайте добавим потерял потерял диджей в качестве 100% и теперь нужно ещё взять вот эти вот изображения. Маленьких тоже вырезать с скачать, когда их вырежу мы можем продолжить так я скачал. Все эти элементы и их нас получилось здесь четыре штуки. Это фон точнее 5 штук полный объекты и так переходим на рабочий стол сохраняю в раздел Project Source AMG и сохраняем. Ну давайте такие на материал и просто открой настройку сохранил сюда, а материал бюджет витамина materials by Jay всё отлично теперь. Мы готовы к тому чтобы сверстать этот блок всё, что нам остаётся — это скопировать отсюда тексты переходим сюда создаем новую секцию в саблайм текст 3 запускается в чуть не забыл и так Action и эта секция у нас будет матерился здесь будет контейнер внутри этого контейнера так как бы — это всё правильно раскрыть контейнер внутри будет section header. Ну естественно здесь будет заголовок 2 уровня вставляем, что у нас тут есть здесь у нас материалы также здесь будет так п и в этом. ТГП мы просто. Скопируй текст из Photoshop скопировать отсюда просто перейдём сюда. Отлично Теперь у нас здесь опять будет ролл. Кстати на мобильном макете насколько я помню. Сейчас я посмотрю на мобильном макете у нас может отличаться вся эта история как — это задумал дизайнер кстати кстати мы забыли в предыдущем блоки покрасить problems list которые у нас второй который будет. Поэтому обязательно нужно его покрасить border-color причём — это icons Color зелёный цвет обновим. Посмотрим Да мы забыли просто сделать — это в предыдущем уроке. Я у меня совсем из головы вылетело и так, что же задумывал дизайнер когда нарисовал мобильный макет тут очень много вещей которые вас задумывал реализовывается не так не так тривиально не так не так по идее по традиции до в обязательно то есть разделение решений не совсем верное у дизайнера на мобильной версии сайта — это как мы сделали она в принципе простое и самое подходящее. Так у нас здесь много материалы выглядят вот таким вот образом то есть. Нам нужно будет здесь точно также как и в разделе с преимуществами сделать точно такой же slick Slider. Давайте попробуем просто пока скопировать с дублировать код там не потребуется. Никаких сомнений мы так и оставим. Ты, что я желаю мы просто меняем слово features на слово материлась или если всё будет гладко и так как нам надо ничего не нужно будет менять. И так первое, что у нас здесь есть — это изображение здесь у нас тоже — это и есть, но так как у нас нет нигде здесь svg изображение svg альтернативы которые кстати здесь написано с шипучкой о которой я говорил в нашей встречи. Но если вы смотрите — это видео не посещайте наш еженедельные встречи чтобы так и не узнаете. В чём была ошибка ладно в общем здесь у нас есть папка materials в ней есть 1 материалы Knauf пенсий и собственно — это будет. Вот так вот Knauf оставляем сюда в заголовок мы вставляем слово Knauf с большой буквой вставляем обозначением mp-75 245 руб. за мешок 245 автостронг цену. О’кей Я теперь остаётся просто поменять всё остальное. И у нас тут всё закончилось. А я пропустил один из блоков моего здесь вырежу и вставлю после вот этого блоков сохраняем смотрим возможно нам не придется ничего переделывать и всё кажется гораздо проще так вроде неплохо. Единственное, что нужно отправлять размер под картинки то есть картинки. У нас сейчас выглядят вот таким вот образом. Нам нужно будет во-первых.

Новое в блоге: Узнайте, почему стоит приобрести эротический фартук.

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

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