<div class="container">
  <section class="child">First Slide</section>
  <section class="child">Second Slide</section>
  <section class="child">Third Slide</section>
</div>
body {
  margin: 0;
}

.container {
  height: 300px;
  width: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.child {
  border-top: 3px solid #121212;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Arial';
  scroll-snap-align: start;
}

.child:nth-child(1) {
  background-color: #121212;
  color: #ffffff;
}

.child:nth-child(3) {
  background-color: #ff4163;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.