Всем привет, сегодня мы продолжим верстать макет "FromBoard Delivery". Придётся разбить статью с вёрсткой на несколько частей, так как на Дзене в статью можно прикрепить максимум 100 скриншотов, а этого в прошлый раз хватило только на хедер и первую секцию 😁
Ну что ж, начнём...
Вёрстка секции "Наши преимущества"
Наша будущая секция будет выглядеть вот так. Заголовок и 6 блоков с картинками SVG. Скачиваем картинки.
Добавим заголовок и блоки
Чтобы блоки было видно, на первое время я сделал им границы. Вот так это выглядит. Наши блоки не переносятся на следующую строку, а заголовок не центрируется, исправим это.
Добавим новый класс, который при добавлении к ".container" будет центрировать содержимое
А также зададим нормальные отступы для нашей новой секции и зададим стили нашему заголовку, как в макете:
Теперь делаем перенос блоков на следующую строку и их автоматическое размещение.
Свойство "flex-wrap" делает перенос блоков на следующую строку, если они не влезают, а "justify-content: space-between", чтобы блоки размещались по всей ширине объекта, и между ними автоматически настраивались отступы.
Также нужно задать нижние отступы, чтобы блоки не прилипали в строчку.
Получается так. Красиво, очень красиво. Не знаю, как вам, а я восхищаюсь каждым элементом своей работы. Макет становится всё больше и красивее...
Может вам покажется это и странным. Но я оптимист, абсолютно вся моя работа прекрасна, и я буду об этом говорить 😁
Начинаем добавлять картинки. Я сделаю это так. Сама картинка у нас будет на заднем фоне, то есть задана, как background-image, а для текста будет задан какой-нибудь большой padding-left, чтобы текст начинался после этой картинки.
Сейчас покажу
Чтобы задать уникальные картинки на задний фон нашим блокам, нужен какой-нибудь id или класс, который добавляет им определённую картинку. Лучше добавить класс, чтобы её можно было переиспользовать ещё раз.
Теперь задаём стили
Теперь осталось добавить текст и, возможно, сделать кое какие доработки.
Если добавить текст, выглядеть это будет вот так:
Нужно сделать так, чтобы элементы блока выстраивались не в строчку, а в колонку.
Также в макете заголовки не выровнены по одному уровню, они все на разных уровнях. Весь текст выравнивается по центру блока по высоте. Это тоже нужно сделать. А также нужно проверить, как будут вести наши блоки при переполнении их текстом. Они не должны разваливаться.
Я понял, что допустил ошибку. Я сделал заголовки h2, а не h3, из за этого стили заголовка h2 в этой секции применяются к заголовкам блоков.
Сейчас я это исправлю, а также задам нужные стили тексту. У текста и заголовков по умолчанию заданы отступы, которых у нас быть не должно. А также размер шрифта нужно поменять.
Да, хочу кое что сказать. В своих статьях я стремлюсь показать не только, как всё сделать правильно и без ошибок, я хочу ещё и добавить частицу себя. Я хочу показать свой ход мышления, как я работаю и справляюсь с трудностями. Иногда я могу исправлять собственные баги, и на это может быть полезно посмотреть.
Исправляем
И получается вот такая красота
Проверку на переполнение проходит, но текст не должен плотно соприкасаться с границей, должны быть внутренние отступы, о которых я немного забыл. Также нужно убрать эти чёрные границы, их я добавлял для наглядности.
Вот так у нас получается. Всё довольно красиво, секцию мы сверстали. Можно приступать к следующей секции.
Верстаем секцию "Гарантии качества"
Следующая наша секция выглядит так:
Ну что ж, приступаем.
Между старой и новой секцией расстояние 72 пикселя. Но у каждого нашего блока есть нижний отступ в 24 пикселя. Получается, 72 - 24 = 48 пикселей, именно столько и будет наш отступ у новой секции.
Я пришёл к выводу, что нет смысла в каждой секции задавать нашему заголовку h2 отдельные стили, так как на всей странице они почти одинаковые, кроме секции с формой. Ну и нижние отступы у них отличаются, а в целом заголовки h2 очень похожи.
После того, как я добавил текст, получилось вот это
Как выяснилось, класс "center" центрирует текст по центру, но он элементы выстраивает по строке, а надо, чтобы в столбец.
Надо поменять свойства
Нужно ещё текст по ширине ограничить
Теперь нужно сделать нижнюю часть с документами
Как это выглядит в макете:
Пишем код.
Делаем так, чтобы в контейнере секции элементы располагались по всей ширине с автоматическими отступами друг от друга, с помощью "justify-content", и чтобы переносились на другую строку, если места нет, с помощью "flex-wrap".
Ну а дальше просто создаём стили для блока, задаём ширину, центрирует элементы по вертикали и настраиваем свойства текста.
Вот так получается
Нужно сделать нормальные отступы у текста
Так уже лучше
Но лучше всё таки сделать эти блоки в виде ссылок, чтобы можно было по ним перейти и посмотреть эти документы
Осталось сделать кнопку
Ух, как много получается стилей
Вот, что у нас получается в итоге
Подходим к концу
И так, мы сделали ещё две секции.
Вот так это всё выглядит в макете
Как я выяснил, в статьях Дзена есть ограничение на количество изображений, я могу вставить только 100 скриншотов.
В следующей статье я буду делать вот эту секцию. Это не просто два отзыва со стрелочками, это слайдер из отзывов.
На отдельном листе представлены отзывы, которые должны быть в нём. Если вы верстальщик, похоже, вам придётся выучить JavaScript. Не знаю точно, прокатывало ли у кого-нибудь на работе такое, что верстальщик, не знающий JavaScript, освобождался от создания слайдера или чего-то подобного? Я думаю, такое бывает редко.
В следующий раз мы будем делать слайдер. Ну а вы не забывайте подписываться на канал и ставить лайки 😀