Problem: Fullscreen Section with Content Alignment

hard
40 min
Try to pin elements to each corner of a fullscreen section that resizes with the viewport.

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

hard
40 min
Try to pin elements to each corner of a fullscreen section that resizes with the viewport.

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.