Верстка многостраничного сайта с нуля с пояснениями. Gulp, SCSS, CSS Grid, БЭМ. Страница Services

Привет! Первая часть седьмого марафона на канале, верстаем макет Createx! Это платный макет, которым я делюсь с вами, а также показываю как его верстать.

В этой части верстаем страницу Services

Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.

Тема VS Code: One Monokai
Шрифт VS Code: Consolas, 'Courier New', monospace

#ityoutubersru #марафонверстки #лендинг

[alexandrgusletsov]

Спасибо Максим, всё самое интересное про вёрстку у тебя ! Лучший

[vitaliiviktorovich]

Макс привет! в секции services-content > item ты задал gap 30px, a по макету 80px. Поэтому не стыковки) Спасибо за марафон!

[enfllome]

Огонь!)
Единственное, в .page-hero следует добавить модификатор для фоновой картинки, тк блок будем переиспользовать, а картинки будут меняться

[evgenylezhepekov]

здесь не нужны были гриды, и не нужны padding-и в services__info нужно было делать на флексах задать align-items-center и каждому четному элементу задать flex-direction: row-reverse, так оно становить по макету идеально и просто если в будущем планируется натяжка на cms этого макета то легче будет через циклы выводить services__item и не надо будет в acf придумывать как задать доп класс нужному элементу

[МаксимСергеевич-пб]

Привет! Спасибо за контент!
А почему ты не обнуляешь глобально margin? Так же быстрее и не надо писать постоянно margin:0;

[ДмитрийНормов-юц]

Не до конца понял момент с подрезанием картинок в ФШ для скролла.
1903 - это типа 1920 и т.д. Может у вас есть статья или видео об этом?
В каких случаях, где, когда надо делать такую обрезку?

[MonteCrush.]

А разве не надо для каждой страницы подключать отдельные файлы стилей, ведь стили index.html не нужны в том же work.html, services.html и т.д. Или я ошибаюсь?

[ccosik_]

Добрый день, я секцию services-content сделал через flex. В свойствах я указал что для каждого четного элемента li будет действовать свойство flex-direction: row-reverse. Это считается приемлимым вариантом?) И насчёт несостыковок текста. Я задал те же размеры что в макете, тоже не совпадают немного, это скорее всего так браузер текст воспринимает

[Svetkachalina]

Здравствуйте! Не подскажете, где начало марафона? Спасибо!

[BMikel]

Мне сложно понять, в каких случаях надо использовать inline-block, а в каких inline -flex?