Skip to content

Latest commit

 

History

History
48 lines (40 loc) · 1.57 KB

README.md

File metadata and controls

48 lines (40 loc) · 1.57 KB
Raw

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