{
  "id": "html5up-phantom",
  "kind": "site-template",
  "title": "Phantom tile portfolio",
  "summary": "A clean portfolio grid of coloured tiles that zoom on hover, with a slide-in side menu. Recoloured in Enrichr greens, violet and terracotta on cream.",
  "url": "https://enrichr.dev/templates/html5up-phantom.html",
  "section": "page",
  "techniques": [
    "pointer-interaction",
    "reveal"
  ],
  "stack": [
    "HTML",
    "CSS",
    "jQuery"
  ],
  "mood": [
    "light",
    "playful"
  ],
  "intents": [
    "portfolio grid",
    "project tiles",
    "agency work grid",
    "side menu",
    "case study index"
  ],
  "motion": [
    "The page fades up on load.",
    "Hovering a tile zooms its image and swaps the colour wash for a dark one.",
    "The menu button slides a full-height menu in from the right and dims the page."
  ],
  "demo": "https://enrichr.dev/vendor/html5up/phantom/index.html",
  "download": "https://enrichr.dev/vendor/html5up/phantom.zip",
  "source": {
    "name": "HTML5 UP",
    "author": "AJ (@ajlkn)",
    "license": "CC BY 3.0",
    "licenseUrl": "https://html5up.net/license",
    "url": "https://html5up.net/phantom"
  },
  "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",
      "#585858": "#3a4a44",
      "#c9c9c9": "#c9cbc2",
      "#f6f6f6": "#f1ede3",
      "#333333": "#0c1e18",
      "#909090": "#0c1e18",
      "#f2849e": "#005236",
      "#ee5f81": "#003d28",
      "#7ecaf6": "#4b1a9a",
      "#7bd0c1": "#1a7a4c",
      "#c75b9b": "#e54c1e",
      "#ae85ca": "#085e3d",
      "#8499e7": "#126e45"
    },
    "scoped": [
      {
        "sel": "^#menu$",
        "prop": "^background$",
        "from": "#585858",
        "to": "#0c1e18",
        "where": "the slide-in menu"
      },
      {
        "sel": "\\.primary",
        "prop": "^background-color$",
        "from": "#585858",
        "to": "#0c1e18",
        "where": "primary buttons"
      },
      {
        "sel": ":checked \\+ label:before",
        "prop": "^background$",
        "from": "#585858",
        "to": "#005236",
        "where": "ticked checkboxes and radio buttons"
      }
    ],
    "files": {
      "images/logo.svg": {
        "#585858": "#0c1e18"
      }
    }
  }
}