Problem: Fullscreen Section with Background Color

easy
15 min
Try to create a fullscreen section with centered content and a solid background color.

Problem description

Given an HTML file with a <section class="fullscreen-section">, write CSS to ensure it fills the entire viewport height and applies a solid background color (e.g., #f5f7fa). Center the content horizontally and vertically.

Goal

Fill the viewport and set a background color with centered content.

Constraints

  • Do not use JavaScript.

  • Only use the provided class.

  • Do not change the 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 Background Color

easy
15 min
Try to create a fullscreen section with centered content and a solid background color.

Problem description

Given an HTML file with a <section class="fullscreen-section">, write CSS to ensure it fills the entire viewport height and applies a solid background color (e.g., #f5f7fa). Center the content horizontally and vertically.

Goal

Fill the viewport and set a background color with centered content.

Constraints

  • Do not use JavaScript.

  • Only use the provided class.

  • Do not change the 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.