Верстка сайта компании LaslesVPN в формате landing page. Часть 1

Описание

Мы в ВК: https://vk.com/webdevhouse
Мы в Telegram: https://t.me/webdevhouse
Мы в Boosty: https://boosty.to/webdevhouse

Сегодня верстаем сайт компании LaslesVPN в формате landing page. Компания предоставляет услуги по подключению и настройке VPN сетей; спокойный и не сложный дизайн, позволяет повторить основы CSS и поработать с псевдо классами и элементами + закрепить основы позиционирования, а так же display: flex.
Что применяли:

— display:flex;
— flex-direction;
— position: relative, absolute;
— ::before
— :hover
— :not(:first-child)
— :last-child
— transform: translateY(-50%);

Сделано:

1. header
1.1 header row
1.1.1 svg(логотип)
1.1.2 nav
1.1.3 a(ссылка для входа в кабинет)
1.1.4 button (кнопка для входа в кабинет)
1.2 Описание
1.3 Декоративная картика на позиционировании

2. Рекламный блок
2.1 Декоративная картинка
2.2 Текстовые элементы
2.2.1 Маркеры у списка через ::before + transform и position

3. Блок с выбором плана
3.1 Карточки + :hover (меняют цвет границы при наведении)
3.1.1 Описание карточки + кнопка меняющая стили при наведении(:hover)

Макет https://disk.yandex.ru/d/lOM64HNddkUnEA