CSS Layouts 201

Table of Contents

• CSS Layouts 201
  • 1.0 Chessboard
    • 1.1 Bonus - Tile Identifiers
    • 1.2 Bonus Bonus - Chess pieces
  • 2.0 Make a Modal Dialog
    • 3.1 Bonus - Fullscreen Overlay
  • 3.0 Mondrian

1.0 Chessboard

Inside the file called chessboard.html, create a chessboard using HTML and flexbox. The board should work at any width for the outermost container.

1.1 Bonus - Tile Identifiers

See if you can add a border with the row letters and column numbers for the board. It has been pointed out that the numbers and letters on the below chessboard are in wrong places (numbers should be on sides, letters across top/bottom) so if you want to fix it, do it in your code!

1.2 Bonus Bonus - Chess pieces

For an extra challenge, add some chess pieces on their starting positions. How can you do this semantically? There are images you can use in the images folder.

2.0 Make a Modal Dialog

Using fixed positioning and absolute positioning, you can create a modal dialog that sits in the middle of the page and appears on top of the rest of the page content.

You have a page with some place holder content in it. Also, there's the following markup for a pop-up modal dialog:

<div class="modal-dialog">
  <div class="modal-header">
    <label class="modal-title">Hello</label>
  </div>
  <div class="modal-content">
    <p>Would you like to subscribe to our email newsletter?</p>
  </div>
  <div class="modal-buttons">
    <button>Ok</button>
    <button>Cancel</button>
  </div>
</div>

Use the modal-dialog.html file to use as a template. Apply CSS rules to make this modal be centered on the page as it appears in the screenshot below.

*N.B. You will have to add your own css file and use the <link> tag load it into your HTML file.*

2.1 Bonus - Fullscreen Overlay

Semi-gray out the rest of the content on the page, and add a drop shadow to the modal dialog, as is shown in the bonus challenge screenshot. And while we are at it might as well add a little rounded corner to the dialog. You may need to add additional HTML element(s) to the page to achieve this effect.

*Hint: research the CSS properties opacity and box-shadow.*

3.0 Mondrian

Inside the file called mondrian.html, create the painting below using HTML and flexbox.

If you're having trouble creating the whole thing, pick a "chunk" of the painting that aligns well and work on just that section. Then pick another "chunk" and do that, etc. How can you combine your chunks into a single layout? (think: HTML tree structure)