SO-75074012

by David Thomas

HTML

<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>

CSS

*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,body {
  block-size: 100%;
  inline-size: 100%;
  scroll-snap-type: y mandatory;
}

body {
  counter-reset: sectionCount;
}

section {
  background-image: linear-gradient(to right, var(--gradientColor1), var(--gradientColor2));
  display: grid;
  place-content: center;
  
  height: 100vh;
  width: 100vw;
  scroll-snap-align: center;
  
}

section::before {
  border: 3px solid currentColor;
  color: #fff;
  counter-increment: sectionCount;
  content: counter(sectionCount, decimal-leading-zero);
  font-size: 6em;
  padding: 1em;
}

.page:nth-child(odd) {
  --gradientColor1: green;
  --gradientColor2: blue;
}

.page:nth-child(even) {
  --gradientColor1: red;
  --gradientColor2: orange;
}