Problem: Fullscreen Section with Content Alignment
Problem description
Given a <section class="fullscreen-section"><div class="top-left"></div><div class="top-right"></div><div class="bottom-left"></div><div class="bottom-right"></div></section>, write CSS so each div is always visually aligned with its respective corner of the viewport, even as the section resizes.
Goal
Pin four elements to each corner of the fullscreen section, regardless of window size.
Constraints
No JavaScript is allowed.
Do not modify HTML.
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 Content Alignment
Problem description
Given a <section class="fullscreen-section"><div class="top-left"></div><div class="top-right"></div><div class="bottom-left"></div><div class="bottom-right"></div></section>, write CSS so each div is always visually aligned with its respective corner of the viewport, even as the section resizes.
Goal
Pin four elements to each corner of the fullscreen section, regardless of window size.
Constraints
No JavaScript is allowed.
Do not modify HTML.
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.