📜Awesome Page Scroll Effect | HTML & CSS✨

1️⃣ Importing Google Fonts:
The @import rule imports the "Poppins" font from Google Fonts. It makes the font available for use throughout the stylesheet.

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

2️⃣ Global Styles:
The following styles are applied to all elements on the page using the universal selector (*):

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

• margin: 0; and padding: 0; set the margin and padding of all elements to zero, removing any default spacing.
• box-sizing: border-box; ensures that the width and height properties include padding and borders, avoiding unexpected layout issues.
• font-family: "Poppins", sans-serif; sets the font family to "Poppins", a sans-serif font from Google Fonts. If Poppins is not available, it falls back to a generic sans-serif font.

3️⃣ Container Styles:

.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

• scroll-snap-type: y mandatory; enables the container to scroll vertically in a snap manner, meaning it will align its children sections neatly.
• overflow-y: scroll; enables vertical scrolling within the container.
• height: 100vh; sets the height of the container to 100% of the viewport height, ensuring it takes up the entire screen.

4️⃣ Section Styles:

section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
}

• height: 100vh; sets each section's height to 100% of the viewport height, making them fill the entire screen.
• display: flex; enables flexbox layout for the sections.
• justify-content: center; centers the contents horizontally within each section.
• align-items: center; centers the contents vertically within each section.
• scroll-snap-align: start; ensures each section aligns at the start of the scroll position, creating the snapping effect.

5️⃣ Styling for Different Sections:
There are four different sections with class selectors: .one, .two, .three, and .four. Each section has a different background color.

.one {
  background-color: rgb(36, 164, 138);
}
.two {
  background-color: rgb(211, 79, 79);
}
.three {
  background-color: rgb(67, 91, 175);
}
.four {
  background-color: rgb(191, 64, 191);
}

• .one has a background color of rgb(36, 164, 138).
• .two has a background color of rgb(211, 79, 79).
• .three has a background color of rgb(67, 91, 175).
• .four has a background color of rgb(191, 64, 191).

These styles define the layout, scrolling behavior, and appearance of sections within a container. They create a visually pleasing and engaging scrolling experience with distinct section colors.