<div class="container">
<div class="hero-bg-container">
<div class="bg">
<div class="content">
<h2>Dynamic Content</h2>
<p>abcdefghijklmnopqrz</p>
<ul>
<li>Lorem ipsum </li>
<li>Dolor sit amet</li>
<li>Consectetur adipiscing</li>
<li>Elit nunc nec ex</li>
</ul>
<p><a href="#" class="btn btn-primary">Visit</a></p>
</div>
<div class="bg-offset">
<picture>
<source srcset="https://via.placeholder.com/1200x850/00685e" media="(min-width: 1200px)">
<source srcset="https://via.placeholder.com/1200x1200" media="(min-width: 992px)">
<source srcset="https://via.placeholder.com/800x1200/face8d" media="(min-width: 768px)">
<source srcset="https://via.placeholder.com/768x480/003f7f" media="(min-width: 480px)">
<img src="https://via.placeholder.com/480x300" alt="two students look at books in a library">
</picture>
</div>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni expedita cum incidunt debitis deleniti ex. Facere, molestias aliquid hic cupiditate esse non officiis ab, quos fugiat delectus ducimus totam ipsum.</p>
</div>$screen-md: 768px;
$hero-offset: 1rem;
* {
content: border-box;
}
body {
background: #eee;
font-size: 16px;
margin-bottom: 2rem;
}
.container {
max-width: 1400px;
background: #fff;
}
.hero-bg-container {
margin-right: 0;
margin-left: 0;
padding-top: 5rem;
padding-bottom: 5rem;
.bg {
position: relative;
display: flex;
flex-direction: column;
padding: $hero-offset;
padding-top: 0;
background-color: gold;
}
.content {
z-index: 2;
margin-top: $hero-offset * -1;
padding: 2rem;
color: #fff;
word-wrap: break-all;
background: #0f198e;
font-size: 1.5rem;
}
.bg-offset {
margin-bottom: $hero-offset * -2;
img, picture {
width: 100%;
margin: 0 0 0 auto;
}
}
}
@media (min-width: $screen-md) {
.hero-bg-container {
margin-right: $hero-offset * -1;
margin-left: $hero-offset * -1;
.bg {
flex-direction: row;
padding-right: 0;
}
.content {
flex-basis: 30%;
}
.bg-offset {
position: absolute;
top: -56px;
right: 0;
z-index: 1;
display: flex;
align-items: center;
width: 80%;
height: calc(100% + 80px);
margin-bottom: 0;
padding-right: $hero-offset;
overflow: hidden;
// margin:0 auto;
img, picture {
width: 100%;
margin: 0 0 0 auto;
}
}
}
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.