Project 3

Five Sentences, Five Buttons

In this project, you will tell a short story through language, typography, and button behavior.

You will write a five-sentence story and design a small website consisting of five pages. Each page contains one sentence and one button. The button links to the next page, moving the reader through the story one sentence at a time.

The story should be inspired by something that has happened in your life.

Structure

• The website must consist of 5 pages. The first page must be called index.html.
• Each page must include exactly:
  • One sentence
  • One button
• Clicking the button moves to the next page

The Button

On each page, the button must repeat exactly one word from the sentence on that page. Think about which word deserves to be repeated.

Interaction & Motion

On hover, the button should “act” in a way that feels appropriate to the story being told.

Use motion and timing to reinforce meaning.

Utilize the following CSS properties:

• transform
• transition
• animation

Typography

Typography is part of the storytelling.

The sentences should all be in the same typeface across all pages.

Each of the buttons, however, should have a different typeface. Choose typefaces that reinforce the tone of the repeated word. Be subtle rather than obvious.

Use Google Fonts. Make sure to embed the fonts in your pages.

Layout

Keep it simple, but make it look refined. Make your pages look great on small and big screens. Code mobile first!

Delivery

Upload the project to GitHub pages:
project3.ixp2.yourdomain.com