Привет! Сегодня мы сверстаем непростой макет по продаже/покупке недвижимости. В этом уроке тебя ждет много интересного, так как мы сделаем несколько слайдеров, галерею, поработаем с CSS-переменными, поработаем с волшебной формулой, а также сразу же сделаем адаптив для нашего сайта! Присаживайся поудобнее, тебя ждет сочный контент! Приятного просмотра :)
!!! Если компилятор ругается на clamp формулу, то оберните центральную часть (где складывается vw и rem) в функцию calc
например: clamp(1rem, calc(1vw + 1 rem), 1rem)
Код для подключения шрифта: (поставь “:” после https)
@import url("https//fonts.googleapis.com/css?family=Work+Sans:regular,500,600&display=swap");
Сайт с большим количеством макетов на любой вкус: frontend-skills.com/
Архив с результатом: drive.google.com/file/d/12iaol9jjaz8cMPW4JSvmw5GEnjkFnplQ/view?usp=sharing
Ссылка на макет: (после перехода нажми на название макета, затем на Duplicate to your drafts)
www.figma.com/file/NXEibpYo7WOBDdI8igPNkP/Rentiz?node-id=0%3A1
Сайт Swiper: swiperjs.com/
Сайт Min-Max Value Interpolation: min-max-calculator.9elements.com/
Соцсети:
Telegram: t.me/prokashev_daniil
Github: github.com/flizerzet
Поддержать автора:
Тинькофф: www.tinkoff.ru/cf/7eWHazpSjAF
USDT: TUHbvntkGV5G1EaRqupQYYScPk1nbqtGAT
BTC: bc1qxwx7mz74mac6um282dgsz2889026mxm79p6vc2
ETH: 0x784E7dcbAdF4fd08Bd26bF0702395105D4B0c864
Таймкоды:
00:00 - Начинаем
00:32 - Смотрим макет
02:16 - Создаем и настраиваем проект
10:42 - Верстаем шапку
28:04 - Верстаем первую секцию
50:17 - Верстаем секцию с логотипами
56:26 - Верстаем первый слайдер
01:15:44 - Секция с преимуществами
01:28:22 - Слайдер с отзывами
01:40:05 - Галерея
01:49:49 - Секция со слоганом
01:54:43 - Верстаем футер (а потом доделываем слоган)
02:06:24 - Проверяем весь макет и поправляем косяки
Теги:
#webdev
#верстка
#layout