SCSS
html {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 30px;
text-transform: uppercase;
}
section {
block-size: 100vh;
scroll-snap-align: center;
scroll-snap-stop: always;
display: grid;
place-items: center;
&:nth-child(1) {
background-color: #CCCCFF;
color: black;
}
&:nth-child(2) {
background-color: #381D2A;
color: white;
}
&:nth-child(3) {
background-color: #3E6990;
color: white;
}
&:nth-child(4) {
background-color: #AABD8C;
color: black;
}
&:nth-child(5) {
background-color: #E9E3B4;
color: black;
}
&:nth-child(6) {
background-color: #F39B6D;
color: black;
}
}
