{
  "id": "html5up-story",
  "kind": "site-template",
  "title": "Story scroll page",
  "summary": "A light, modular long page: banner, alternating spotlights, a gallery with a lightbox and a contact form, each fading in as you scroll. Recoloured in Enrichr cream, ink and greens.",
  "url": "https://enrichr.dev/templates/html5up-story.html",
  "section": "page",
  "techniques": [
    "scroll-driven",
    "reveal"
  ],
  "stack": [
    "HTML",
    "CSS",
    "jQuery"
  ],
  "mood": [
    "light",
    "editorial"
  ],
  "intents": [
    "long landing page",
    "scroll reveal page",
    "product story page",
    "photo gallery page",
    "about page"
  ],
  "motion": [
    "The banner image fades in and its text slides in from the side on load.",
    "Spotlight images and the gallery fade in as each one scrolls into view.",
    "Gallery thumbnails open a full-size lightbox with a fade; links scroll smoothly to their section."
  ],
  "demo": "https://enrichr.dev/vendor/html5up/story/index.html",
  "download": "https://enrichr.dev/vendor/html5up/story.zip",
  "source": {
    "name": "HTML5 UP",
    "author": "AJ (@ajlkn)",
    "license": "CC BY 3.0",
    "licenseUrl": "https://html5up.net/license",
    "url": "https://html5up.net/story"
  },
  "license": "CC BY 3.0 by HTML5 UP (https://html5up.net/license); keep the HTML5 UP credit. Recoloured by Enrichr: only colour values changed.",
  "colours": {
    "map": {
      "#ffffff": "#fbf8f1",
      "#000000": "#0c1e18",
      "#eeeeee": "#efeadf",
      "#222222": "#173229",
      "#30363d": "#1c3a30",
      "#db8992": "#e54c1e",
      "#ab7aad": "#4b1a9a",
      "#897cad": "#005236",
      "#7794ce": "#126e45",
      "#64abb4": "#1a7a4c",
      "#6ba78c": "#085e3d",
      "#47d3e5": "#005236",
      "#1ebdd1": "#003d28"
    },
    "scoped": [
      {
        "sel": "\\.invert|\\.gallery\\.style[12]",
        "from": "#47d3e5",
        "to": "#e6ff55",
        "where": "the dark (inverted) sections and the gallery"
      },
      {
        "sel": "\\.invert|\\.gallery\\.style[12]",
        "from": "#1ebdd1",
        "to": "#d2eb3c",
        "where": "the dark (inverted) sections and the gallery, when pressed"
      }
    ]
  }
}