KononovD

отрицательные маргины вам в помощь))

Позиционировать элементы через флоат - костыль и вынужденная мера (тогда флексов небыло/плохая поддержка браузерами). пример использования флоатов правильно - картинка, которую обтекает текст, для этого они нужны.

насчет флекс и грид - они очень легко могут жить вместе ( курим это : https://www.youtube.com/watch?v=s6RCsjcQADc&t=2786s )

если верстаете на бутстрапе - то все секции верстайте бутстрапом, а все, что внутри колонок - можете чем-угодно(флекс/грид)

опять же, смотрим видос, что я скинул - там вам все расскажут)

можно в js задавать max-height вручную. свойство "scrollHeight" вернет полную высоту элемента независимо от стилей

Мне кажется, гриды в этом примере - просто лишняя головная боль)
я придумал как на флексах сделать с одним нюансом: инпуты будут позиционироваться абсолютно

берем делим вашу вот эту штуку на 2 части, слева картинка - справа все остальное
делаем 2 враппера, для ползунков и кнопок.
враппер ползунков - ul, ползунки в li, li тоже флекс, что бы в разные стороны развести инпут и таб-кнопку
врапперу для кнопок делаем маргин топ: авто

с десктопом, собсвенно все)

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

https://codepen.io/Kononov_D/pen/zbJxeQ?editors=0110
п.с. с стилями сами поиграйтесь, js так же сами напишите)

А что там делать-то?

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

а вообще..
берем, открываем container, row, col-lg-3 и col-lg-9 (или какие там размеры колонок, наугад писал)
в col-lg-3 запихиваем блоки, что слева, очевидно, а в col-lg-9 запихиваем заголовок, картинку и текст.. все до безумия просто)

а куда деть левую колонку на телефонах - уже сами думайте)

p.s. всем картинкам у себя в проекте поставьте max-width: 100%; max-height:auto display:block;

Owl-carousel, center:true, items:1, margin: -сколько-то там пикселей

Берём центральный элемент(class active) даём ему самый большой z-index, а по стандарту ставим его на 0, так же делаем оверлей на ряду с каруселью и если не получится выводить только 1 итем над оверлеем - то делаем следующее
Для всех итемов делаем opacity .3, transition .5s ease и с tranform:scale() сами поиграйтесь. Для активного - opacity:1 и transform: none(или как-то так)

Берем гугл и пишем "курсхантер"
находим первую ссылку : https://coursehunters.net/
и в посиковой строке ищем что нам надо и впитываем инфу)
я смотрел вот это:
https://coursehunters.net/course/polnyy-kurs-po-ja...

p.s. да, пиратство, да, минус карма, да, воровство, фактически, но что поделать, когда знать надо, а 400$ на курсы нету?)

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

вообще,

background: url("pass/to/img") no-repeat center / cover;

должен сделать приемлемую картинку)

file > settings > editor > emmet > css > "auto insert css vendor prefixes"

спасибо, Сергей delphinpro

Есть такая штука clearfix называется

Создаём в css следующее :
.clearfix:after{
Content:"";
Display:table"
Clear:both;
}

И пишем этот класс ВСЕМ оберткам(контейнерам), ВНУТРИ которых есть float