Command Shift
Building BlocksFurther DOM Manipulation

Viewport

Viewport

We're going to have a small letterbox-style viewport that will contain our sea/ports/ship:

Viewport

Challenge

Use HTML and CSS (including flexbox) to create the above.

To complete this challenge, you will need to:

  • Style your html and body elements so they have a height of 100%.
  • Style your body so its background is black.
  • Set the body as a flex container and ensure any children are center aligned on both the horizontal and vertical axis.
  • Create a div tag inside your body with an id attribute of viewport.
  • Style the viewport element (using an ID CSS selector) so it has the following properties:
    • a width of 640px
    • a height of 256px
    • a position of relative
    • an overflow-x of auto
    • a background-image which should be the water0.png image.

Make sure you understand what all of these style rules do before you move on!

Previous

Setting Up

Next

Walkthrough: Viewport

On this page