<h1 class="logo">Logo</h1>
<section style="--headerColor: #A5D6A7;">
<header class="sticky-bar">
<h2>Introduction</h2>
</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab iure cum facilis. Dicta quis nostrum, distinctio ab dolores perspiciatis neque odit eveniet commodi. </p>
<p>Numquam voluptate assumenda quos harum sed in quas asperiores incidunt animi vero fuga, quaerat, veritatis, beatae dolorem. </p>
<img src="https://picsum.photos/id/1001/600/250" alt="">
</section>
<section style="--headerColor: #64B5F6;">
<header class="sticky-bar">
<h2>Content</h2>
</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab iure cum facilis. Dicta quis nostrum, distinctio ab dolores perspiciatis neque odit eveniet commodi. </p>
<p>Numquam voluptate assumenda quos harum sed in quas asperiores incidunt animi vero fuga, quaerat, veritatis, beatae dolorem. </p>
<img src="https://picsum.photos/id/1015/600/275" alt="">
<ul>
<li>Temporibus magni nam perspiciatis in natus debitis</li>
<li>Itaque esse veniam possimus asperiores.</li> <li>Minima eligendi necessitatibus odit nostrum dolorum sed.</li>
<li>Molestias ratione, ab eveniet quibusdam similique veritatis quos.</li>
</ul>
<h2>Corporis voluptatem harum</h2>
<img src="https://picsum.photos/id/1018/600/300" alt="">
<p>Dignissimos in molestiae cum excepturi vel dolores mollitia ab omnis sunt consequatur possimus qui maiores</p>
<p>Rerum officiis assumenda maxime, est similique deleniti! Nam explicabo, enim nisi quam recusandae corrupti corporis.</p>
</section>
<section style="--headerColor: #9575CD;">
<header class="sticky-bar">
<h2>Conclusion</h2>
</header>
<img src="https://picsum.photos/id/1020/550/200" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab iure cum facilis. Dicta quis nostrum, distinctio ab dolores perspiciatis neque odit eveniet commodi. </p>
<p>Assumenda quos harum sed in quas asperiores incidunt animi vero fuga, quaerat, veritatis, beatae dolorem. </p>
<p>Numquam voluptate assumenda quos harum sed in quas asperiores incidunt animi vero fuga, quaerat, veritatis, beatae dolorem. </p>
<ul>
<li>Temporibus magni nam perspiciatis in natus debitis</li>
<li>Itaque esse veniam possimus asperiores.</li> <li>Minima eligendi necessitatibus odit nostrum dolorum sed.</li>
<li>Molestias ratione, ab eveniet quibusdam similique veritatis quos.</li>
</ul>
<img src="https://picsum.photos/id/1039/550/250" alt="">
</section>
<footer>
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium esse eligendi doloremque laborum vitae voluptatem</p>
<p><strong>Copyright 2020</strong></p>
</footer>
.sticky-bar {
position: sticky;
top: 0;
max-width: 100%;
background-color: var(--headerColor);
padding: 0.5rem;
margin-bottom: 0.5rem;
color: white;
text-align: center;
}
.sticky-bar h2 {
margin: 0;
font-size: 20px;
}
/* Other styles */
body {
background-color: #E1F5FE;
}
.logo {
text-transform: uppercase;
text-align: center;
}
section {
margin: 2rem 0;
}
section > *,
footer > * {
display: block;
max-width: 500px;
margin-right: auto;
margin-left: auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
line-height: 1.65;
}
section img {
max-width: 100%;
}
footer {
padding: 0.125rem 0;
background-color: #1565C0;
color: white;
font-size: 14px;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.