Мне интересно, как работает перекрывающийся дизайн на веб-сайте wework.com. я знаю, что это достигнуто с абсолютным и относительным положением и т. д. c, и, очевидно, я могу извлечь источники с помощью инспектора, но существует множество искажающих классов, которые затрудняют обзор всего. также я работаю с bootstrap и хочу добиться чего-то подобного. мне удалось воссоздать дизайн, но у меня проблемы с медиа-запросами:
Мой дизайн выглядит так:
Как вы можете видеть, это очень похоже, за исключением расстояния под белой текстовой областью. Кроме того, при изменении размера высота рабочей картинки уменьшается, поэтому она выглядит как двухцветная компоновка без наложения. в моем дизайне все так ломается:
Я использую Bootstrap 4 для достижения этой цели. Как мне добиться того, чтобы изображение было «обернуто» вокруг остального содержимого, без необходимости его оборачивать?
my html:
<div class="hero space-bottom-2">
<div class="container">
<div class="row position-relative">
<div class="col-12 col-md-6 col-lg-4 position-absolute left-0 z-index-999 space-1">
<div class="space-1 bg-white border-radius pr-md-7">
<h1 class="h2">Lorem ipsum dolor sit amet consecteteur instagram yolo paleo.</h1>
<p class="sub-p mb-5">Lorem ipsum dolor sit amet consecteteur instagram yolo paleo. Lorem ipsum dolor sit amet
consecteteur instagram yolo paleo.</p>
<!-- Form Group -->
<!-- I removed the form, because it is not necessary for this example and takes many lines of code -->
<!-- End Form Group -->
</div>
</div>
<div class="col-12 col-md-6 col-lg-10 position-relative offset-lg-2">
<%= image_tag("content/hero/hero-image2.jpg", class:"img-fluid border-radius bottom-0 left-0 right-0 top-0") %>
</div>
</div>
</div>
</div>
Я надеюсь, что все в порядке, что я не предоставляю css, так как мне нужно было бы искать все классы, и имена в значительной степени указывают, о чем идет речь. класс space-* дает отступы сверху и снизу. pr и mb также для отступов и полей. Есть ли у вас какие-либо предложения? Заранее спасибо!