Верстка сайта по продаже недвижимости || HTML, SCSS, JavaScript, Swiper.js, Адаптивная верстка

Привет! Сегодня мы сверстаем непростой макет по продаже/покупке недвижимости. В этом уроке тебя ждет много интересного, так как мы сделаем несколько слайдеров, галерею, поработаем с CSS-переменными, поработаем с волшебной формулой, а также сразу же сделаем адаптив для нашего сайта! Присаживайся поудобнее, тебя ждет сочный контент! Приятного просмотра :)

!!! Если компилятор ругается на clamp формулу, то оберните центральную часть (где складывается vw и rem) в функцию calc
например: clamp(1rem, calc(1vw + 1 rem), 1rem)

Код для подключения шрифта: (поставь “:” после https)

Ссылка на макет: (после перехода нажми на название макета, затем на Duplicate to your drafts)

Соцсети:

Поддержать автора:
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

[anjelikashaptalo]

//-код для бургера

&-icon {
display: none;
@media (max-width: 992px) {
display: block;
height: 18px;
width: 30px;
position: relative;
cursor: pointer;
z-index: 5;
span {
transition: all 0.3s ease 0s;
top: calc(50% - 1px);
left: 0;
position: absolute;
width: 100%;
height: 2px;
background-color: #fff;
&:first-child {
top: 0;
}
&:last-child {
top: auto;
bottom: 0;
}
}
&._active {
span {
transform: scale(0);
&:first-child {
transform: rotate(-45deg);
top: calc(50% - 1px);
}
&:last-child {
transform: rotate(45deg);
bottom: calc(50% - 1px);
}
}
}
}
}

[ixide]

Автор явно заслуживает больше зрителей и подписчиков

[Mister-Petrovich]

Очень быстро рассказываешь, мозг не успевает пережевать информацию. В остальном молодец.

[olegger]

не знаю почему многие в таком восторге от видео, все очень дергано, глаз просто не успевает за действиями автора и даже не всегда успеваешь на паузу видео поставить что-бы увидеть что автор написал

[PieceOfInternet]

У тебя очень качественный контент. Было бы здорово увидеть верстку сложных макетов в таком стиле. Тот же многостраничник с множеством сложных блоков или интернет магазин просто идеально подошел бы) С твоей подачей многие вещи становятся проще, поэтому ролик с таким видео очень помог бы)

[the-tata]

Чел, ну ты когда вернёшься? отлично же верстали. Ждём новых топовых видосов.

[sakinurs]

Автор просто находка для верстальщиков!!! Никогда не видел чтоб человек быстро и без воды все верстал. Сразу видно профессионал своего дела. Было бы супер, сверстай ты еще более сложный макет с анимациями и используя побольше JS. Автор, желаю тебе успехов в будущем. P.S. Жду еще видео по верстке сложных макетов)

[litan]

Очень классно, рад что нашёл твой канал. Не вздумай забросить

[dmitrytrezkov]

Верстать форму divами - это просто недопустимо, как для юзабилити, так и для отправки на сервер.

[ГеоргийДронов-ля]

Приветствую! Ждём новых видео)) Очень полезный контент!

[glebkraitcer]

Дорогой Данил, спасибо огромное за урок. Пока его делал я привык к боли, в шее, в пояснице и ниже, но я дошел до конца и многому научился. Дай Вам Бог здоровья! :-)

[khayaproduction]

Крутая подача! Спасибо! Такой контент скоро будет набирать больше подписчиков, уверен! В будущем хотелось бы попросить Даниила поверстать различные UI компоненты, часто встречающиеся на сайтах

[isok.atyrau]

Видно что автор канала много чего заимствовал из канала "Фрилансер по жизни". Отличная подача.

[seron]

Просто находка!Спасибо вам большое, я подписался и буду вашим постоянным зрителем, столько нового узнал, продолжайте!

[alix]

Это какой-то стокгольмский синдром. Сверстала две секции, за это время я испытала все виды боли. Даже боль от того, чо 3 секунды перемотки стрелкой в ютубе - это слишком много. За 3 секунды чел делает пятьсот действий)) Впервые в жизни использовала замедленную на максималках скорость, чтобы иногда понять, куда он пишет. Я решила, что не готова к такому формату и приняла твёрдое решение не идти до конца, а найти что-то попроще.
Сюрприз.
Теперь мне все кажутся очень медленными))) Я в заложниках у этого чела.
Рекомендую всем хардкорщиками и извращенцам. Пока разбираешься, куда он тыкнул - начинаешь реально ориентироваться в простыне стилей.
И огромное спасибо за clamp. Сначала не очень понимала, откуда берутся значения для формулы. Теперь не понимаю, как же иначе то)

[TheZUB]

видос огонь, подача очень хорошая, много фишек подчеркнул и решений, хотелось бы продолжения такого контента и сложные макеты
Автор вернись пожалуйста)

[arsen]

Дізнався чимало нового, дякую за урок !

[podkolpakina]

жду след проект с нетерпением, надеюсь будет многостраничный))

[максим-мжэ]

так ну посмотрел я урок, мне оч зашло, набрался и фишечек новых всяких, буду применять . я бы время от времени смотрел подобные видосы, только с одним ньюансом - на усложнение . ютуб переполнен версткой для новичков . а даже челу в процессе обучения как я уже хочется посложнее, вот например это конкретное видео, но дальше лучше ещё более hard

[skprodactions]

Прекрасное объяснение. Благодарю за вашу работу, многое узнала для себя)