<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<div class="slider">
<div class="slider-images">
<div class="slider-image" style="background-image: url('https://i.pinimg.com/564x/07/4f/d8/074fd8b19657ad9af587653672e3d67c.jpg')">
</div>
<div class="slider-image" style="background-image: url('https://i.pinimg.com/564x/5e/fb/28/5efb289ceff71f0d0959162054d99133.jpg')">
</div>
<div class="slider-image" style="background-image: url('https://i.pinimg.com/564x/f7/a2/45/f7a24510f006ac1b7e78bfd7b8ca982b.jpg')">
</div>
</div>
<div class="slider-contents">
<div class="slider-content__wrapper">
<div class="slider-content__text">
<p>
The Calathea orbifolia’s oversized leaves are striped with silvery bands that are tastefully beautiful in a simple way.
</p>
</div>
</div>
<div class="slider-content__wrapper">
<div class="slider-content__text">
<p>
Syngonium varieties are easy care plants as long as you remember to water them. They are low light tolerant houseplants and will grow virtually anywhere in your home.
</p>
</div>
</div>
<div class="slider-content__wrapper">
<div class="slider-content__text">
<p>
Monstera are species of evergreen tropical vines/shrubs that are native to Central America.
</p>
</div>
</div>
</div>
</div>
$small-tablet:"max-width:60em";
* {
margin: 0;
padding: 0;
}
.slider {
position: relative;
display: flex;
flex-flow: row nowrap;
width: 100%;
.slider-images {
display: flex;
flex: 0 1 50%;
height: 100%;
width: 50%;
flex-direction: column;
}
.slider-image {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
}
.slider-contents {
display: flex;
flex: 0 1 50%;
flex-direction: column;
height: 100%;
width: 50%;
}
.slider-content__wrapper {
display: flex;
align-items: center;
height: 100vh;
}
.slider-content__text {
max-width: 500px;
padding: 50px 115px;
position: sticky;
top: 0;
p {
font-family: Lato,sans-serif;
font-weight: 400;
line-height: 1.6;
}
}
@media screen and ($small-tablet) {
flex-wrap: wrap;
.slider-images, .slider-contents {
width: 100%;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.