Problem: Fullscreen Section with Scroll Indicator
Problem description
Given an HTML file with a <section class="fullscreen-section"> containing a <div class="scroll-indicator"></div>, use CSS to make the section fullscreen and center its content, and position the scroll indicator at the bottom center (still within the section).
Goal
Fill the viewport, center content, and show a scroll-down arrow at the bottom.
Constraints
No JavaScript is allowed.
Use the provided class names.
Do not change HTML structure.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.
Problem: Fullscreen Section with Scroll Indicator
Problem description
Given an HTML file with a <section class="fullscreen-section"> containing a <div class="scroll-indicator"></div>, use CSS to make the section fullscreen and center its content, and position the scroll indicator at the bottom center (still within the section).
Goal
Fill the viewport, center content, and show a scroll-down arrow at the bottom.
Constraints
No JavaScript is allowed.
Use the provided class names.
Do not change HTML structure.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.