Mocks

The goals of this assignment are to exercise your CSS skills and to give you practice at making a coded page match a set of provided mocks, which is a common task for a web developer.

Here, you are provided with an un-styled index.html file, an empty style.css file, and a set of mocks (actually screenshots) in the mocks/ directory. Your task is to fill out style.css so that your rendered index.html page matches the mocks as closely as possible.

A few important things to note about the design that may not be clear in the static mocks:

• The layout is responsive, in that columns are added and removed as the size of the browser window changes. Note that the "todo" notes do not change their size.
• The location of the red button to add a note does not change relative to the viewport, even as the page is scrolled.
• There are several hover interactions on the page:
  • The area around links in the navbar is subtly highlighted when that link is hovered over. The area around the link can be clicked to navigate in addition to the text itself. You can see these effects for one of the nav links in the 3-column mock.
  • When hovering over a todo note, an X (to discard the note) appears in the upper-right corner. This is illustrated in the 2-column mock.
  • Hovering directly over the X on a todo note displays the pointer cursor instead of the default arrow. This is illustrated in the 1-column mock.
  • The button to add a note is subtly highlighted when hovered over. There are two separate mocks illustrating the on and off states for this effect.

Again, your goal is to match the mocks as closely as possible. I'll show some tools in class that will help you do this.