Верстка сайта, Gulp 4, препроцессор scss, анимация. Часть 3

Серия контента по верстке сложного пакета, использую сборку на gulp 4 и препроцессор scss. Макет нарисован в figma, дизайнер постарался с интерактивными элементами, так что нам будет что делать и над чем подумать. Велком и приятного просмотра.

Макет:

Телеграм канала:

Телеграм чат по верстке:
ссылка на чат если в ваше стране блочат телеграм:

Вк канала:

Мой instagram:

Подпишитесь на канал, если вам понравилось данное видео:

[Александр-цтв]

Огромное спасибо за такие видео, их очень, очень мало, именно с такой версткой, а не где взяли макет где две картинки, легкий слайдер и пару текстовых блоков.
1:02:51
В span, я попробовал добавить
display: block;
text-align: right;

[man_money_]

Велике дякую за відео-урок! Ти даєш можливість йти до своєї мети

[ЯнаАлексеева-пл]

Зачетные видосы!!! Смотрела, когда только вышла первая часть. Теперь прям каждую часть жду, как новый сезон Игры престолов)))) Автор интересно подает материал. С юмором и позитивно!

[lesyadorosh]

Спасибо тебе Вадим! Только у тебя на канале самый лучший контент. Надеюсь что у тебя еще будут видео с таким же интересным и сложным макетом. Благодаря тебе научилась многому. Жду твои новые видео и марафоны.

[ВладимирЧернов-шб]

Вадим, привет . Отличная работа ! С каждым уроком становится всё интереснее) Буду ждать следующего урока.

[paveldubinin]

Очень полезно смотреть ваши уроки, а главное интересно

[Mykhailo_Vdovychenko]

Спасибо за такой чудесный урок! Добра и успехов тебе и твоей семье! =)

[ИванМиронов-зб]

кстати, спасибо за сохранение нервов на счёт написания значений свойств, но не потому, что так правильнее, а потому что раз ты так пишешь по отдельности, значит это что-то значит. а у тебя, Вадим, просто так ничего не бывает)) но теперь нейроны спокойны, потому что ты оказывается просто так по отдельности писал))

[raulbaimukhametov]

отличный контент. Смотрится на одном дыхании!!! Мы все ждем остальные части))

[Олег-зсг]

Спасибо за видос!!!

Можно было не вставлять <br> наверно в данном случае, а прописать &nbsp; вместо пробела в одном случае.
Хотя может кому как нравиться.

<div
23 Hours 5&nbsp;Minutes
</div>

[vladislavaleksandrovich]

Припаркую свой коммент тут) Вадим, контент - топ!

[paranoia-]

1:01:57 ты начал через абсолют ставить вниз предложение Round Trip можно это сделать через dispaly: block или так нельзя?

[Den_camrad]

.travel-slider__descr img {
padding-left: 24px;
display: inline-block;
}
так как свойство перезаписалось из
.slick-slide img {
display: block;
}

[greengrei]

Крутой ленд, КОГДА БУДУТ на канале ОСТАЛЬНЫЕ ЧАСТИ ????

[anvara.]

поставлю лайк, и позже зайду с инструментами. ( мы то знаем, что это за "инструмент") :)

[TechnoDukes]

Дякую за контент.

Решение задачи с перевернутыми словами не правильная(ну как неправильная работает значит все ок). Нужно было прописать следующее:

    transform: rotate(-90deg) translate(-100%,  0);

    top: 0;
    left: 0;
Сначала мы "смещаем конец строки", потом меняем точку поворота строки через св-во transform-origin. В итоге у нас конец строки будет в аккурат тому месту где начинается Тайтл и заказчик сможет редактировать слова как ему вздумается.
Типичный верстальщик 1.5 месяца отроду.
P/s Писать то мы можем но в какой то момент текст начинает наезжать(быковать) на кнопку. Как сделать так чтоб текст "толкал кнопку вниз"

[СашаИванов-цяд]

Как я мог я нежно subtitle НЕ скопировал, бедаааааааааааааааа. Ой у Вадима супер манера преподования!

[ПитбульЭнергия]

АААА(( Сборка не работает, пацаны как её оживить? Help, SOS!! Очень хочу сверстать эту красоту) Вадиму большое спасибо за контент.

[alexles]

Серия видео 1000 и 1 споcоб кастомизации slick-slider снова с вами!!!

[Александр-бнв]

Я вот только только первую часть закончил))