CSS, HTML, JavaScript

Basic Flexbox Form

For this exercise, you will produce a basic layout and wire up a very basic interactivity.

You will code all the HTML & CSS.


First of all, download the image you need for the exercise.

I am not specifying the font, but you must chose one that looks as close as possible to what’s used in the screenshots. This includes sizes (as seen most completely in the third screenshot).

Document Structure

When the document loads, the user should see a layout like this, which covers the entire height and width of the browser.

Layout with header, main, footer areas.

Layout with header, main, footer areas. Click for a very large example, if you need it.

There are three areas in the above layout. Combined, they take the entire height of the browser.

  • a header with a menu with four links (to the right). There is a border between links, but not at the beginning or the end of the menu.
  • a main content area with, as a background image, the image you downloaded above. This main area should take approximately 80% of the browser height. Depending on browser height or width, the user may see the photo more or less times.
  • a footer with a menu identical to the menu in the header

When the user clicks either contact link, a form should appear, fading in over 1 second, looking like this once fully faded in.

Screen Shot 2016-03-30 at 2.34.11 AM

Form revealed upon click of CONTACT link in menu. Click if you need a large example.

When the user types into the form, the size of the type must be close to the size in the screenshot below. When the user hovers over the SUBMIT button, it must turn salmon color (just use that color name) over 1 second.

Type size, hover effect. Click for (much) bigger example, if needed.

Type size, hover effect. Click for (much) bigger example, if needed.

Responsive Component

Under 600px, the form must arrange itself like this:

Screen Shot 2016-03-30 at 3.11.24 AM

Download Completed Exercise