console
<main>
<section>
<img src="/img/1.png" alt="" />
</section>
<section>
<img src="/img/2.png" alt="" />
</section>
<section>
<img src="/img/3.png" alt="" />
</section>
</main>
img{
height: 100%;
widows: 100%;
display: block;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
line-height: 1.4;
font-weight: 400;
font-family: 'Archivo Black', sans-serif;
overflow: hidden;
}
main {
overflow: auto;
scroll-snap-type: y proximity;
height: 100vh;
}
section {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
scroll-snap-align: center;
overflow: hidden;
}
section:nth-child(1) {
background-color: #e91e63;
}
section:nth-child(2) {
background-color: #e2b815;
}
section:nth-child(3) {
background-color: #204233;
}