<div class='container'>
<div class='card'>
<h2 class='name'>John Doe</h2>
<span class='founder'>Founder, Facebook</span>
<p class='testimony'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet velit interdum, aliquet nibh ac, interdum diam. Donec viverra eget turpis et interdum. Fusce ut ipsum id ipsum eleifend congue tristique in ex. In varius turpis ex, quis hendrerit dui auctor vitae. Etiam volutpat eros porttitor diam venenatis maximus. Nam metus nunc, facilisis nec arcu sit amet, dictum convallis justo. Aenean ultrices ante id facilisis lobortis. Sed aliquet ac libero in tempus. Sed lobortis augue ac tempor accumsan. Praesent rhoncus sagittis luctus. Sed aliquet ut neque vitae tristique. Praesent pretium vestibulum nulla, sit amet lacinia enim vehicula ultrices.</p>
</div>
<div class='card'>
<h2 class='name'>Mary Jane</h2>
<span class='founder'>CEO, Stack</span>
<p class='testimony'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet velit interdum, aliquet nibh ac, interdum diam. Donec viverra eget turpis et interdum. Fusce ut ipsum id ipsum eleifend congue tristique in ex. In varius turpis ex, quis hendrerit dui auctor vitae.</p>
</div>
<div class='card'>
<h2 class='name'>Dillion Megida</h2>
<span class='founder'>Founder, Deeecode</span>
<p class='testimony'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet velit interdum, aliquet nibh ac, interdum diam. Donec viverra eget turpis et interdum. Fusce ut ipsum id ipsum eleifend congue tristique in ex. In varius turpis ex, quis hendrerit dui auctor vitae. Etiam volutpat eros porttitor diam venenatis maximus. Nam metus nunc, facilisis nec arcu sit amet, dictum convallis justo. Aenean ultrices ante id facilisis lobortis. Sed aliquet ac libero in tempus. Sed lobortis augue ac tempor accumsan. Praesent rhoncus sagittis luctus. Sed aliquet ut neque vitae tristique. Praesent pretium vestibulum nulla, sit amet lacinia enim vehicula ultrices. Praesent pretium vestibulum nulla, sit amet lacinia enim vehicula ultrices.</p>
</div>
<div class='card'>
<h2 class='name'>Miles John</h2>
<span class='founder'>Founder, Website</span>
<p class='testimony'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet velit interdum, aliquet nibh ac, interdum diam. Donec viverra eget turpis et interdum. Fusce ut ipsum id ipsum eleifend congue tristique in ex. In varius turpis ex, quis hendrerit dui auctor vitae.</p>
</div>
<div class='card'>
<h2 class='name'>John Doe</h2>
<span class='founder'>Founder, Facebook</span>
<p class='testimony'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet velit interdum, aliquet nibh ac, interdum diam. Donec viverra eget turpis et interdum. Fusce ut ipsum id ipsum eleifend congue tristique in ex. In varius turpis ex, quis hendrerit dui auctor vitae. Etiam volutpat eros porttitor diam venenatis maximus. Nam metus nunc, facilisis nec arcu sit amet, dictum convallis justo. Aenean ultrices ante id facilisis lobortis. Sed aliquet ac libero in tempus. Sed lobortis augue ac tempor accumsan. Praesent rhoncus sagittis luctus. Sed aliquet ut neque vitae tristique. Praesent pretium vestibulum nulla, sit amet lacinia enim vehicula ultrices.</p>
</div>
</div>
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
padding-top: 100px;
background-color: black;
}
.container {
max-width: 300px;
width: 100%;
position: relative;
height: 600px;
overflow-y: auto;
}
.card {
position: sticky;
top: 0;
border: 1px solid color-mix(in srgb, #333, white 20%);
border-radius: 3px;
background-color: #333;
color: white;
padding: 30px;
margin-bottom: 20px;
box-shadow: 0 -5px 10px black, 0 5px 10px black;
}
.card:nth-child(2) {
top: 10px;
}
.card:nth-child(3) {
top: 20px;
}
.card:nth-child(4) {
top: 30px;
}
.card:nth-child(5) {
top: 40px;
}
.name {
margin: 0 0 5px;
color: pink;
font-size: 20px;
}
.founder {
color: darkgrey;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.