Speaker A
Привет. Надеюсь, ты попрактиковался после прошлого видео, и у тебя всё получилось. Если нет, не расстраивайся.
Урок 9 курса по HTML/CSS: практика верстки макета в Figma. Разбор базовых стилей, ограничивающего контейнера, методологии BEM и расширения ecss.
Key Takeaways
- Общие стили лучше выносить в body, а повторяющиеся элементы — в отдельные классы
- BEM помогает структурировать CSS: блок__элемент--модификатор
- Контейнер ограничивает контент, но фон блоков должен растягиваться на всю ширину экрана
- Расширение ecss tracker ускоряет копирование классов и стилей из DOM
What the video covers
- Определение общих стилей страницы в Figma: фон, размер шрифта 16px, вес 400 и цвет текста по самым частым значениям
- Определение ширины контейнера (1200px) через инспектирование и линейки в Figma
- Создание класса контейнера с max-width 1200px и центрированием через margin: 0 auto или margin-inline: auto
- Стилизация хедера: белый фон, падинги 28px сверху и снизу, стилизация логотипа и ссылок
- Знакомство с методологией BEM: блок, элемент, модификатор и правила именования классов
- Использование расширения ecss tracker для быстрого копирования классов из блока
- Стилизация кнопки: фон, border-radius 12px, padding, font-weight 700, ширина через max-width и 100%
- Вынесение общих стилей кнопки в класс btn и применение нескольких классов к одному элементу
- Ограничение контейнером контента внутри хедера, а не самого фона хедера
- Структурирование main по секциям (about, advantages, service, reviews, contacts) с комментариями в HTML и CSS
Full Transcript — Download SRT & Markdown
Speaker A
Сейчас покажу, как это можно было реализовать. Переходим в Фигму. Первое, что мы должны сделать - это определиться, какой у нас общий бэкграунд на странице, какой размер используется чаще всего у шрифта и какой цвет у текста используется на странице
Speaker A
чаще всего. Чтобы определить цвет, ну, просто визуально оцениваем макет. Видим, что у нас и белого, и вот такого тёмного цвета примерно одинаковое количество.
Speaker A
Ну, давайте этот тёмный установим по умолчанию. Также определимся с размером шрифта. Кликаем по все по всему тексту.
Speaker A
Здесь 24, здесь снова 16. 16. Так как в карточках везде одинаковый шрифт, я кликаю на только одну. 16 16. Ну, в общем, покликали по всем элементам. И видим, что у нас on size 16, on weight 400 и color чёрный. Это стили, которые
Speaker A
встречаются чаще всего на странице. Поэтому переходим в наш CSS и для body задаём font weight fontweight 400, font size 16 color. Color чёрный. А backкграунд color как раз вот такой.
Speaker A
Смотрим в браузере. Отлично, бэкграунд покрасился. Теперь нам нужно определиться с шириной ограничивающего контейнера. Это можно сделать несколькими способами. Либо просто по покликать по контенту и видим, что 1.200 как раз ширина контента. И видим, что наш контент по всему сайту нигде не
Speaker A
вылезает за эту ширину. То есть нигде нету такого, что контент должен растягиваться на всю ширину экрана пользователя. Везде контент чётко находится в ограничивающем контейнере.
Speaker A
Второй вариант - это пользовать такие линии. Если у вас их нету, для того, чтобы их включить, переходим в пункт меню View и вот здесь rules. Включаем галочку. Теперь, когда линии есть, мы можем их установить в любое удобное нам
Speaker A
место. И сверху даже по линиям видно, что вот начинаем мы со 118, а заканчиваем на 1.318. Ограничивающий контейнер 1.00. Поэтому давайте перейдём в CSS, создадим класс контейнер и напишем ему Max Fitz 1.00 пикселей.
Speaker A
Отлично. Ну и контент должен быть по центру, поэтому можем использовать либо merge 0 авто, как я показывал в прошлом видео, либо более современное свойство merch onlineй со значением авто. Merch online как раз отвечает за отступы и справа и слева. Так, контейнер задали.
Speaker A
Теперь можем переходить к стилизации хдера. Первое, что мы видим - это то, что бэкграунд color у хедера белый.
Speaker A
Дальше можем определить сразу падинги. И видим, что здесь 30, здесь 26. Ну давайте 28 возьмём. Переходим в CSS.
Speaker A
Берём header, задаём ему background color. Background color белый падинг 28 пикселей сверху и снизу, а дальше у нас есть логотип, есть пункты меню. Так, у нас уже есть лого и линк. Название для классов будем давать осмысленный по методологии BМ. Bм расшифровывается как
Speaker A
блок элемент модификатор. То есть у нас есть блок header и у него название header. То есть это имя блока. Внутри него мы можем делать как независимые блоки, так и элементы этого блока. То, допустим, если у нас ссылка - это
Speaker A
элемент блока header, мы пишем имя блока, два нижних подтёркивания и имя элемент. То же самое для ссылки. Она у нас является элементом. Поэтому пишем header, два нижчних подчёркивание, link.
Speaker A
И для вот этой ссылки тоже зададим класс header order. А для того, чтобы не перетаскивать вот так руками, не копировать, не вставлять в CSS, мы можем использовать расширение, которое называется еss trck. Выглядит оно вот так. Устанавливаете его себе. И теперь
Speaker A
мы можем просто выбрать нужный нам блок. Кликаем правой кнопкой мыши или можете горячие клавиши настроить. Выбираем ecss factor run. И он копирует нам все классы, не повторяя их. Переносим CSS.
Speaker A
Нажимаем Ctrl V header. Header logo. Header link header order. Для лого стиль у нас уже есть. Для link тоже просто перетащим их сюда. И также header удалим. Ещё, так как у нас будет сегодня много классов, много тегов, предлагаю и
Speaker A
в HTML разделить блоки комментариями. Комментарии в HTML пишутся именно так. На Windows можно быстро развернуть его, нажав Ctrl/ Комментарии в браузере, естественно, не видны, поэтому пишем сколько угодно комментариев, чтобы вам было удобно. Также в CSS. Давайте тоже вот боди, контейнер - это общие стили.
Speaker A
Дальше идут уже блоки, поэтому здесь тоже подпишем header. Под ним сразу сделаем main. Вот теперь нам удобнее будет ориентироваться в коде, быстрее находить блоки и стили для них. Так, у нас осталась вот эта кнопка. Кликаем на неё. Надо запустить, естественно,
Speaker A
inspectes. Кликаем на кнопку. Видим, что цвет у неё белый. Size 16, font weight 700. Так и запишем. Кстати, чтобы сокращённо писать font size, fontweight и другие стили, можно просто писать две буквы. Для fontweight - это FW и значение, которое мы хотим. Нажимаем
Speaker A
Tab. Fonside 16. Он у нас по умолчанию установлен, поэтому я его здесь не прописываю. Для самой кнопки у нас есть бор радиус. Бор радиус. В прошлом видео я не сказал об этом. Это это скругление.
Speaker A
Бор радиус у нас 12. Записываем. И backкground color синий. Также у нас здесь есть падинги. Ширина кнопки у нас 160 пикселей. Max 160 пикселей. Wid 100%. Но чтобы у нас ширина работала, как мы поним header order - это у нас
Speaker A
ссылка. Соответственно, она должна быть отличной от иначе вис просто не будет работать. Поэтому мы задаём display inlineла блок. Задаём display блок.
Speaker A
Смотрим. Да, ссылка у нас уже похожа на то, что мы хотим видеть. Но мы должны сразу посмотреть, не повторяются ли у нас какие-то элементы на странице.
Speaker A
Возможно, они повторяются, и мы можем вынести общие стили в общий класс. И мы видим, что эта кнопка, она одинаковая у нас везде отличается только её максимальная ширина. Соответственно, мы другие общие стили мы можем вынести в отдельный класс. Давайте так и сделаем.
Speaker A
BТN - это сокращение. Button можно написать button. И туда перетаскиваем как раз вот это всё. Перетаскиваем сюда.
Speaker A
Display line блок. Перетаскиваем сюда. Здесь мы это можем удалить. Падинг тоже туда перетащим. Header order мы оставляем только максимальную ширину, потому что конкретно для этой кнопки она устанавливается. Остальные стили выносим в класс BTN. Но теперь, если мы посмотрим браузер, естественно, никаких
Speaker A
стилей у нас нету. И нам нужно этот класс BTN прописать для order. В один класс, в один атрибут-класс, мы можем сколько угодно классов прописывать, что позволяет нам как раз избавляться от дублирования стилей. Задали класс BTN.
Speaker A
Видим, что у нас есть header, order и btn. Всё, кнопка как в макете. Прекрасно. Можем идти дальше. Давайте разберёмся с нашим контейнером. Мы контейнер прописали, но нигде его не применили. Давайте это исправим и зададим. Обратите внимание, что если мы
Speaker A
сейчас зададим контейнер для header, что будет? Мы увидим вот такую историю. Наш ограничился заданной контейнером шириной и видим, что его бэкграунд обрезается. А у нас бэкграунд не обрезается. У нас бэкграунд растягивается на всю ширину экрана пользователя. Поэтому это нам не
Speaker A
подходит. Мы берём контейнер и задаём его вот этому блоку. То есть внутри хедера мы ограничиваем контейнер. Сам хедер у нас на всю ширину, на всю ширину экрана пользователя, ничем не ограничен, а контейнер внутри него он уже ограничивает. Расставлять элементы на
Speaker A
странице мы научимся в следующем видео. Поэтому переходим к следующему блоку. Следующий блок у нас название блоков можно взять из макета. Все название для класса headдеer нам больше не нужен.
Speaker A
Header сворачиваем. Переходим в main. Внутри main тоже можно, если удобно. Каждый раздел можно подписать, допустим, это у нас раздел about для лучшей навигации, да, чтобы в этом полотне кода проще ориентироваться. А следующий у нас блок какой будет advantages. Давайте
Speaker A
здесь сразу по и для удобства классы блоки, конечно, лучше сворачивать. Если блок готов, зачем нам в развернутом виде? Портянка, неудобно. Свернули, концентрируюся на том, с чем мы сейчас работаем. Так, здесь для самого блока обёртки создаём тоже класс с названием
Speaker A
блока, то есть блок about. В нём у нас два дива с контентом. Класс about content можно назвать. А второй about image. Также H1 у нас будет about title.
Speaker A
Title заголовок, - это aboutтек, а ссылка about link и уже общий класс BTN. Здесь у нас тоже не main, а about.
Speaker A
Берём, выделяем ecssor, вставляем. BTN нам здесь не нужен, потому что у нас вынесен выше. С остальным давайте работать. Также определяем сразу отступы сверху и снизу внутри блока до контента.
Speaker A
У нас 85 пикселей about. И внутри него падинг 85 пикселей сверху снизу, по бокам ноль. Переходим к блокам. Блок видим внутри блока тоже есть падинг.
Speaker A
Видим, есть падинг по бокам по двадцатке. Сверху блок прилипает. Можем задать падинг для подстраховки. Снизу там, чтобы контент не прилип. Сверху ноль, по бокам 20. Ну, снизу давайте тоже 20 зададим. Переходим к стилизации контента. Фнт сайз 40, font weight 800,
Speaker A
allр белый. Отлично. Копируем, прописываем. Также нам нужно ещё определить отступни до соседнего элемента. Кликаем на главный заголовок, выделяем второй ижима зажимаем Alt.
Speaker A
Видим, отступ 20 пикселей. Отлично. Так и записываем GМ button, то есть MB. MB 20 Tab. Сразу к тексту переходим. Color белый. Font size 24, font weight 500.
Speaker A
Готово. И сразу надо было посмотреть сразовый отступ от этого текста. Низ 40 пикселей. MB 40 пикселей. Кнопка у нас готова. Поэтому мы смотрим максимальную ширину контента. Она равняется 542 пикселя. Единственное, что у нас здесь внутри кнопки текст не по центру, потому
Speaker A
что мы не задали текст lineцен. Давайте в общих стилях для btn пропишем текt al line center. Здесь у нас кнопка 54 пикселя. Мы можем ей задать 54 пикселя.
Speaker A
Текст внутри кнопки не по центру, но этот момент мы научимся исправлять тоже в следующем уроке. Здесь мы видим, что у нас и заголовок, и контент белого цвета.
Speaker A
можем задать для всего контента color и цвет цвет у нас следуется и весь контент внутри блока content будет иметь белый цвет. Переходим к следующему блоку Advantages. Так, здесь сразу комментарий или для Advantages. Всё, блок about мы можем свернуть. Переходим в Advantages.
Speaker A
Здесь то же самое. Задаём класс для общего блока, называем его Advantages. И поехали уже понакатанной. Класс Advantages title. Следующий блок advantages list. список приму сразу для всех четырёх блоков задаём класс и называем его advantages itemсть какой-то элемент из списка так едем дальше image
Speaker A
для всех imagм класс под названием icon называем его icon а так как title у нас уже есть это будет subtitle и для текста advantageтек суперблок разрастается сразу давайте его отделим комментарием следующий блок у нас услуги то есть а
Speaker A
супер. Теперь мы можем взять какой-то из блоков, копировать. Я CSS run. Переносим стиль CSS. Переходим в макет. Видим бэкграунд. Падинги по 40 он нам показывает. Давайте проверим. Да, действительно, а падинги по 40.
Speaker A
Background color белый. Кому падинг задали со всех сторон, да? Так, только мы забыли, я забыл в прошлом блоке и в этом блоке задать контейнер. Поэтому возвращаемся к блоку about. И для него нужно создать дополнительную обёртку, в которую мы засунем наш контент и imagйж.
Speaker A
Для того, чтобы быстро создавать div с классом, можем просто написать точку, имя класса и нажать Tab. Он нам развернёт div с указанным именем класса.
Speaker A
Если мы хотим любой другой тег с создать с именем класса, мы пишем имя тега. Ну, допустим, а с классом link. Нажимаем Tab, он нам развернёт а классом link.
Speaker A
Всё, aboutут нам не нужен. Сворачиваем. Для advantage сделаем то же самое. А контейнер весь контент туда засовываем.
Speaker A
Тент по центру backкграунд белый. Переходим к стилизации title. И что мы видим? У нас цвет тёмный. Font size font weight. Копируем. Забираем title. А давайте сразу отступ до блоков посмотрим. 34 пикселя. Так, запишем всё, что скопировали. Плюс MB34. Смотрим в
Speaker A
браузере. Отлично. Только здесь ещё нужно текст lineцентр прописать. И для кнопок, и для tйтle у нас семейстр шрифта Monster и для пунктов меню Monserat. Отлично, этот момент я не заметил. Давайте сразу вернёмся пунктам меню и зададим Font family. Монцерат.
Speaker A
Так, для блоков, для кнопки и для tйтle, да. Так, дальше у нас а карточки.
Speaker A
Смотрим карточки. Bк shadow background order radius 12 и book shadle. Так, копируем. Это для самой карточки, то есть для вот этого айтема. Только у нас мы бэкграунд ещё свойство отдельно изучим, поэтому пока у нас backgroundунд color падин 20,
Speaker A
бурдиус 12. И ещё что я здесь заметил, это текст line, тоже внутри блока lineцен. Переходим к иконкам. Отступ от иконки. Давайте, да, по 10-10 пикселей здесь, а, получается между иконкой и заголовком 10 пикселей. И от заголовка текста тоже 10 и subtitle имеют merg
Speaker A
bottom 10 пикселей. Вот стопы появились. Теперь переходим к подзаголовку. видим, что этот у нас жирноватый, font weight 600. Соответственно, нам нужно найти его в HTML. Это у нас первый subtitтle. И здесь как раз мы воспользуемся модификатором. Нам нужен модификатор. У
Speaker A
нас есть несколько одинаковых блоков с одинаковыми классами. Для них есть общие стили, но нам нужно один как-то выделить. И мы задаём ему модификатор.
Speaker A
Так как у нас текст жирный, давайте я назову его strong. И вот по вот этому модификатору мы как раз укажем, что font weight 600. Но также мы видим, что у нас третий блок имеет tex decoration light throw, ну или как там правильно
Speaker A
читается, а, неважно. Важно, что нужно его выделить. И именно для него. Переходим в браузер, смотрим. Не работает. Почему не работает? А, дёшево, дорого. Так, не работает, потому что мы не не сохранили HTML. Видите, всё работает. Отлично. Можем переходить к
Speaker A
следующему блоку. Сворачиваем, чтобы он нам не мешал. Следующий блок сервис. Задаём ему класс. Заголовок, соответственно, с таким же классом, с именем класса блока элемент title. А, едем дальше. Нам нужен здесь контейнер.
Speaker A
Давайте попробуем обойтись без дополнительной обёртки. Здесь напишем, а что это у нас сеesс? А, тоже можно написать services row, допустим, да, какой-то ряд. И здесь же зададим контейнер. Ограничим дальше. Каждый блок у нас это элемент списка. Мм, давайте
Speaker A
колум назовём. Ряд, колонка. Каждая карточка - это колонка. Также для imagмиe. Видите, очень много повторяется от блока к блоку. Плюс у меня макет такой максимально дефолтный как раз для практики минимальных свойств, которые мы изучили. То есть у нас есть, а, Icon,
Speaker A
допустим, тоже тоже те же самые названия классов, они повторяются из раза в раз. Если вам сейчас кажется, что, блин, сложно придумывать название классов и так далее, это повторяется набор из 10-15, там двадцати имён классов. Не переживайте, если сейчас сложно, со
Speaker A
временем это превратится в рутину. Здесь также какой-нибудь subtitle и для текста класс тоже текст. Не будем ничего придумывать оригинального. Копируем через трактор. Сохраняем сразу HTML. Не забываем. Здесь развернём классы. Отсюда возьмём имя сервисе. Сразу разделяем визуально удобно. Итак, текст нам не
Speaker A
нужен. Здесь не понадобился. Можно избавиться от него. Лист понадобится нам в следующем уроке, поэтому не будем избавляться. Главный блок почему-то почему-то не скопировался. Давайте руками добавим его. И здесь, насколько мы помним, падиг 40 пикселей. Падигн 40 пикселей сверху снизу. Контейнер у нас
Speaker A
уже определён. Title у нас имеет белый цвет. Font size, font weight 800. И вот что мы здесь сразу видим. Прошлый тайтle тоже имел size 32, fate 800, а был текст lineнраat и так далее. Поэтому логично это тоже вынести в общий класс. И
Speaker A
назовём его title. И теперь заберём отсюда все стили. Я просто здесь закомментирую. Сюда вставляем. FWAT 800 нужен. Fй 32 нужен. Color не нужен. Он будет определяться отдельно в классе.
Speaker A
Merg button тоже текline line center phone family. Отлично. Возвращаемся сюда. Здесь оставляем цвет и merg bottom. Остальное нам не нужно. Теперь в advantage мы просто добавляем title обратно сворачиваем. Здесь title наши услуги. И здесь нам нужно указать только
Speaker A
color. В нашем случае это белый и mergм ботом 24. Следующая карточка. Border radius 12 падинг 20. Блин, карточки тоже, конечно, одинаковые, но мы не будем выносить в универсальные блоки, потому что карточки часто разные. Это просто в моём макете так получилось, что
Speaker A
они все одинаковые. Удобно было копировать и переиспользовать. Так, здесь мы сервис сворачиваем, чтобы нам не мешал ничего. Переходим в браузер и видим всё то же самое. То же самое здесь текстцен. Ну, можно сказать, что изучили и сразу закрепляем на практике, потому
Speaker A
что один блок повторяет другой. Так, здесь у нас по отступам вниз, что получается? 16. Это уже отличие. А здесь также 10. Icon у нас имеет MB16.
Speaker A
Subtitle MB10. Текст у нас как-то стилизуется? Нет, текст. Текст у нас максимально дефолтный. Все эти стили уже и так к нему применены. Переходим к следующему блоку. Отзывыказать падинг 40. Background белый. Запомнили это?
Speaker A
Сейчас нам это понадобится. Reviews. Открываем его сразу. Накидываем класс. Здесь, конечно же, reviews title и title сразу. И вот здесь что у нас? Ну, контент ограничиваем, создаём. Создаём контейнер, кладём в него внутрь. А у нас большая форма здесь. Всё, сюда внутрь
Speaker A
контейнера. контейнер контейнер items. Здесь все блоки, э, только это не контейнер, это reviews. Давайте назовём reviews кар для разнообразия. Можно здесь не items, а карточки. Карточка нормально тоже стандартное распространённое название. Внутри каждого блока для картинки создаём класс reviews icon для пэшки, которая автор.
Speaker A
Мы так и можем назвать reviews авто. Следующий блок у нас есть класс текст. Ну, мы здесь просто добавим приставку Reviews и ниже у нас идёт дата, так и назовём reviews date. Всё, длинный блок получился. Форму пока оставляем. Первый
Speaker A
блок копируем. Title контейнер нам не нужен. Reviews мы запомнили, что падинг там 40 пикселей. И background color белый. Идём проверять. Так, почему-то не применился контейнер, потому что я написал неправильный класс. Здесь тоже нужно быть внимательным. Контейнер. Да, я пропустил N. Всё, теперь работает. Ай
Speaker A
у нас имеет цвет такой, а отступ 32. Б 32. Дальше у нас есть карточки. Блин, ну они, конечно, все одинаковые, прямо совсем все, да, за исключением того момента, что здесь бокше, он заметит только у одной карточки. Это говорит на
Speaker A
о том, что при наведении на эту карточку будет появляться бокшел. У остальных карточек по умолчанию такого нет.
Speaker A
Поэтому мы берём стили обычной карточки, а вот этот стиль будем применять уже при наведении. Это мы научимся делать тоже чуть позже. Поэтому для карточки мы берём background color падиг 20 пикселей, бор радиус 12. Отлично.
Speaker A
Переходим к иконке 10 boton 10 пикселей и также для карточки текст lineцен. Можем переходить к следующему подблоку внутри этого блока оставить его. От карточек нам нужно отступить вот от этого от самого блока карточками ботом 32 пикселя. Здесь у нас tйтle
Speaker A
отличается. У него font weight 700, fн size 24. Соответственно стили для общего тайтлана к нему не подходят. И мы задаём ему отдельный класс reviews form title.
Speaker A
Revwюwфом - это у нас блок будет. И у него вот эти стили. И также надо посмотреть, насколько он отступает. 32 пикселя. И теклайнцентр у него, конечно же. Ещё переходим к форме. О, здесь борд радиус отличается, падинг отличается.
Speaker A
Классно я сделал. Так, переходим к форме. Теперь нам нужно review. Reviewewфом. Reviewewфом. А элемент у него будет каждому диву. А их всего два.
Speaker A
Ну, вообще вот эту кнопку бы тоже обернуть дополнительный див. Каждому диву задаём класс м. Так, здесь у нас input мы вкладывали внутрь. Давайте это переделаем. Для более комфортной утилизации сделаем так. Для label задаём классы класс preview formel для input
Speaker A
задаём класс input для текстерия. Одна для кнопки btn, то есть как элемент и отдельный класс BTN.
Speaker A
Теперь вот это всё копируем через runs exстрактор, естественно, и переходим батн нам здесь не нужен. Идём в форму.
Speaker A
Смотрим, формадио 16 падинг 24кграунд такой же. Это всё есть. Отлично. А максимальная ширина 487 пикселей. Max widz 487 пикселей. Есть. И надо merion 0 авто использовать либо Merionline авто.
Speaker A
Переходим к стилизации label. Видим font weight 500. Так и запишем. И видим, что у нас йл растягивается на всю ширину.
Speaker A
Поэтому для label задаём display блок font weight 500. Дальше давайте посмотрим. Между элементами 18, а между лейблом и инпутом тоже 18.
Speaker A
Соответственно, для лейбл MB 18 пикселей и для айтема MB 18 пикселей. А сейчас мы видим такой момент, что у нас появился отступ формы. Давайте в button я уберу этот класс для divдива с классом button, чтобы у нас не было этого отступа. Его
Speaker A
можно было бы решить, используя псевдоклассы, но псевдокласса мы придём попозже, там и разберёмся, как можно было эту историю обойти. Приходим стилизовать inporder rрадиус 12.
Speaker A
Background color белый 12. Background color хорошо внутри смотрим отступ 10 по бокам мм так хейт. А высота у него 40 падигн. Падинг 12 сверху 10. И хейт как раз тот случай, где мы можем задавать жёсткий размер, потому что inpт - это
Speaker A
односрочное поле ввода. И сколько бы ты текста туда не ввёл, он всегда будет в одну строку. Поэтому здесь мы можем спокойно задать жёсткую высоту, и ничего нам это не сломает. Видим наш инptexteria.
Speaker A
В тексте мы задаём как раз-таки минate, потому что там мы можем сколько угодно текста написать и оно растянется. Так, и в целом вот эти стили для input, они также подходят и для текстерия. Поэтому прописываем текстериia, input имеет одинаковые стили, за исключением того,
Speaker A
что текстрия имеет минимальную высоту другую. Супер. Внутри текстерия у нас здесь должен быть placeйсхолдер. Он такой. Давайте его скопируем. Перейдём в текстерия. Айдишка нам не нужна, а вот placeйсolder как раз-таки нужен.
Speaker A
Напишите ваш отзыв. Есть. И теперь для инпутактерии нужно задать wi 100%. Казалось бы, инпут строчный тег, но к нему можно применить свойство wi так же как и текст. На самом деле, потому что input, как и текст, так как и image, они
Speaker A
блочносрочные. То есть дисплей на inлайблок, они ведут себя как строчные в плане, что занимают столько контента, сколько им нужно. Но при этом мы можем задавать им разные свойства, которые работают только с блоками. И для инпута, и для текстера ещё берём font size 12
Speaker A
color. Вот этот отставляем сюда. Всё, отлично. Аа кнопка. Кнопка у нас здесь имеет высоту 51 пиксель. Мы здесь говорим, что ты Minhadй 51 пиксель. Так.
Speaker A
Ваш отзыв, ваше имя. Ну давайте оставим имя, отзыв. Напишите ваш отзыв здесь нормально. Всё, этот блок готов.
Speaker A
Переходим к следующему блоку взаться с нами. Здесь мы закидываем комментарии контакт AS. И здесь сворачиваем. Здесь пишем класс контакт AS. Сразу здесь оборачиваем ещё в один блок контейнер.
Speaker A
Здесь для заголовка as title. Здесь контакт AS, которое действие может пользователя совершить. А здесь я заметил, что у нас в макете иконки, а у нас их нету, мы их не подключили, поэтому давайте обернём ещё в div и подключим наши иконки. У нас они лежат в
Speaker A
icons. А здесь что? Phone. Alt звонить нам. Снизу тоже дополнительный div. AMG. Также icons, только здесь email. и Alt написать нам. Теперь пять item. И здесь для AMG contct as Icon, а здесь контактas link. Копируем контейнер, удаляем контак. Что у нас по этому
Speaker A
блоку? Ага, здесь видно, что тоже, ну, 40. Так, tй мы здесь не прописали. Title 24 40, то есть падинг также 40. А title button 24 связаться с нами. И color белый. От экшн блока мы тоже откупаем 24. Так, и от icon 13, здесь 14. Ну
Speaker A
давайте 14 возьмём. То есть Merion W 14. Ссылка у нас Ссылка у нас имеет такие стили. Отлично. Вся эта форма тоже имеет ограничение 583 пикселя. М в целом мы можем здесь не использовать контейнер общий, а мы можем использовать контакт AS контейнер. Ему
Speaker A
задать Maxwitz 587 пикселей. Mergion inline Auto. Так, отлично. Переходим к форме. Контактные данные. Action блок можем свернуть. И форма у нас есть form.
Speaker A
Можем так и оставить. А так вот только вот этот момент исправим, что у нас здесь будет H3. Контактные данные. Field и legend мы удалим. Здесь нам это не подходит. Познакомились с этими тегами и хорошо. Так, здесь мы можем как раз
Speaker A
использовать класс контакта с subtitle. Так, что он имеет? Ин button 36. Сама форма. Ну, такая же, как и предыдущая, то есть для тегоформ. Давайте вручную здесь пропишем. Ничего нового.
Speaker A
Background color по о контактные данные текст center. Так, теперь нужно надив на divвы внутри формы накинуть одинаковые классы. Одинаковые классы за исключением вот этого батна последнего. Пропишем класс и он будет равен form. То же самое делаем для label для всех label. А, так,
Speaker A
за исключением, предпочитаемый способ связи сюда подходит. А вот телефон и email мы пока опускаем комментарий. А так комментарий, а, и вот этот йл нам тоже не нужен. Так, для них задаём класс formel. Потрясающе. А теперь переходим к инпутам. Инпуты, которые не радиокнопки,
Speaker A
а просто поля ввода. Им задаём класс form input. Так, а здесь для кнопки задаём класс form button и отдельный наш button. Накинем стилей. А потом посмотрим, что мы забыли, что ещё нужно будет стилизовать. Переходим к айтемам.
Speaker A
То есть выделяем вот эту всю историю и смотрим. 27 27 для всех формате merg button 27 уже хорошо. Аel для всех label font weight 500 и merg bottom 18. Display block fit 500 MB 18. Переходим к input. For
Speaker A
rрадиус 12%. Так, background color белый. size 12 coloring для для текстерия, насколько я помню, там тоже самое должно быть, поэтому задаём класс текстерия. Здесь через запятую для него прописываем и отдельно для текстерия задаём минимальную высоту 120 пикселей. Теперь
Speaker A
смотрим для input надо задать 40. И там падиг ещё я забыл падинг замерить 1012.
Speaker A
Отлично, форма почти готова. Э, телефон, email даю данные. Так, это всё хорошо. Комментарией у нас нету. Текстерия. В текстею добавим. Placeholder.
Speaker A
Дополнительная информация. Кнопка здесь 50. Тоже у нас радиокнопки. Они, я заметил, в макете больше, чем по факту.
Speaker A
Да, по факту они 13. И чекбокс тоже 13. А в макете это всё по двадцатке.
Speaker A
Отлично. Давайте стилизуем тогда чекбокс отдельно. Класс form checkbox. Так, он у нас идёт после текстерия. Старайтесь классы писать в таком же порядке, как они идут в HTML. Тогда будет проще ориентироваться. И такой же класс, вернее, не такой же класс, а класс для
Speaker A
инпута. Нужно задать радио. Здесь через запятую прописываем. Переходим в браузер. Отлично. Чикбоксы. Всё хорошо.
Speaker A
Остаётся у нас футер. Давайте быстренько его сделаем. Смотрим на падинге. 38 28. Давайте футр классфтер. Внутри него контейнер. Внутрь это всё кладём. Здесь для текста зададим класстекст.
Speaker A
Сохраняем. Через трактор копируем. Терконтейнер нам не нужен. Здесь падинг 28 сверху, 28 снизу, по бокам ничего. И для текста. Текст line center. Вот size 20, font weight 800. Жирненький текст.
Speaker A
Сохраняемся. Идём в браузер. Ага, background color белый, конечно же, background color белый. Вот и всё, сайт готов. Подписывайся на канал, ставь лайк. Увидимся в следующем видео.
Topics:HTMLCSSверсткаBEMFigmaконтейнермакетфронтендecssдля начинающих
