Верстка сайта компании LaslesVPN в формате landing page. Часть 1
#webdevhouse
#html_css
#верстка_для_начинающих
#landing_page
Мы в ВК: https://vk.com/webdevhouse
Мы в Telegram: https://t.me/webdevhouse
Эпизоды:
00:00 Вступление
00:49 Подготовка к верстке
10:12 Верстаем header
20:01 Стилизуем header
48:35 Верстка блока с преимуществами
58:09 Стилизуем блок с преимуществами
01:14:07 Верстаем блок с рекламой
01:20:57 Стилизуем блок с рекламой
01:48:27 Верстаем блок с выбором плана
01:59:13 Стилизуем блок с выбором плана
02:31:40 Работа с градиентом
Сегодня верстаем сайт компании 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://yadi.sk/d/lOM64HNddkUnEA
