Overview

No need to follow a strict demo script. index.html and styles.css are commented inline with instructions.

PSD

Upload play_final.psd in this folder to your CC account, or use the version of this PSD in a shared FOWD folder that I'll invite you to.

Reset Demo

Be sure to delete /images to start with a clean demo.

Demo

Open live preview on index.html

In no particular order:

• index.html

  • PLAY logo
    1. Select the "PLAY" logo in the top left and extract as an image
    2. Type <img then hint for src.
  • h1 header
    1. Select the "INSPIRE. CREATE. PLAY." header text
    2. Set cursor in h1
    3. CTRL+Space to show text code hints
    4. Insert text
  • Inline editor
    1. Open an inline editor on line 17 on stereo (make sure you edit styles.css and not styles-FINAL.css
    2. Select the 2 layers for the stereo graphic
    3. Use code hints to extract background: url(...)
    4. Rename file using an .svg extension
    5. Verify SVG contents

• styles.css

  • .header image
    1. Select the hero image
    2. Use code hints to extract background: url(...)
  • .header h1
    1. Select the "INSPIRE. CREATE. PLAY." header text
    2. SHIFT+select the hero image to show measurements
    3. In the heads up display, switch from PX to %
    4. Copy the percent value to use as top:
  • instruments a
    1. Select any 2 of the instrument circle graphics
    2. Copy the horizontal distance to use as margin-right