{
  "id": "showcase-image-coding-concept-cheatsheet",
  "name": "Coding Concept Cheatsheet",
  "format": "jsoncut-html",
  "compositionKind": "image",
  "width": 1600,
  "height": 1600,
  "fps": 1,
  "duration": 1,
  "version": 1,
  "html": "<div id=\"bg\" data-jc-clip=\"\" data-jc-kind=\"shape\" data-jc-name=\"Data canvas\" data-jc-track=\"0\" data-jc-start=\"0\" data-jc-duration=\"1\" style=\"position:absolute;box-sizing:border-box;left:0px;top:0px;width:1600px;height:1600px;background:#1B1120\"></div><img id=\"photo\" data-jc-clip=\"\" data-jc-kind=\"image\" data-jc-name=\"Wide image strip\" data-jc-track=\"1\" data-jc-start=\"0\" data-jc-duration=\"1\" src=\"https://jsoncut.com/showcase/examples/coding-concept-cheatsheet/assets/hero-75efeaed3e.jpg\" alt=\"\" style=\"position:absolute;display:block;box-sizing:border-box;object-fit:cover;left:101px;top:176px;width:1398px;height:480px;border-radius:19px;filter:saturate(.72)\"><div id=\"chart-a\" data-jc-clip=\"\" data-jc-kind=\"shape\" data-jc-name=\"Metric bar one\" data-jc-track=\"3\" data-jc-start=\"0\" data-jc-duration=\"1\" style=\"position:absolute;box-sizing:border-box;left:880px;top:912px;width:544px;height:72px;background:#F4673B;border-radius:999px\"></div><div id=\"chart-b\" data-jc-clip=\"\" data-jc-kind=\"shape\" data-jc-name=\"Metric bar two\" data-jc-track=\"3\" data-jc-start=\"0\" data-jc-duration=\"1\" style=\"position:absolute;box-sizing:border-box;left:880px;top:1040px;width:384px;height:72px;background:#3F8E8A;border-radius:999px\"></div><div id=\"chart-c\" data-jc-clip=\"\" data-jc-kind=\"shape\" data-jc-name=\"Metric bar three\" data-jc-track=\"3\" data-jc-start=\"0\" data-jc-duration=\"1\" style=\"position:absolute;box-sizing:border-box;left:880px;top:1168px;width:256px;height:72px;background:#FCE8DB;border-radius:999px\"></div><div id=\"kicker\" data-jc-clip=\"\" data-jc-kind=\"text\" data-jc-name=\"Category label\" data-jc-track=\"5\" data-jc-start=\"0\" data-jc-duration=\"1\" style=\"position:absolute;display:grid;box-sizing:border-box;align-content:center;overflow:hidden;white-space:pre-wrap;left:101px;top:101px;width:704px;height:96px;color:#F4673B;font-family:Roboto Mono;font-size:21px;font-weight:760;line-height:1.35;letter-spacing:-.01em;text-align:left\">40 · EDUCATION</div><div id=\"headline\" data-jc-clip=\"\" data-jc-kind=\"text\" data-jc-name=\"Primary headline\" data-jc-track=\"6\" data-jc-start=\"0\" data-jc-duration=\"1\" style=\"position:absolute;display:grid;box-sizing:border-box;align-content:center;overflow:hidden;white-space:pre-wrap;left:101px;top:720px;width:704px;height:496px;color:#FCE8DB;font-family:Space Grotesk;font-size:74px;font-weight:800;line-height:.92;letter-spacing:-.055em;text-align:left\">Coding Concept\nCheatsheet</div><div id=\"body\" data-jc-clip=\"\" data-jc-kind=\"text\" data-jc-name=\"Supporting copy\" data-jc-track=\"6\" data-jc-start=\"0\" data-jc-duration=\"1\" style=\"position:absolute;display:grid;box-sizing:border-box;align-content:center;overflow:hidden;white-space:pre-wrap;left:101px;top:1216px;width:704px;height:128px;color:#FCE8DBB8;font-family:Inter;font-size:27px;font-weight:550;line-height:1.35;letter-spacing:-.01em;text-align:left\">structured code tokens ·  flow arrows</div><div id=\"cta\" data-jc-clip=\"\" data-jc-kind=\"text\" data-jc-name=\"Call to action\" data-jc-track=\"7\" data-jc-start=\"0\" data-jc-duration=\"1\" style=\"position:absolute;display:grid;box-sizing:border-box;align-content:center;overflow:hidden;white-space:pre-wrap;left:101px;top:1395px;width:704px;height:104px;color:#F4673B;font-family:Roboto Mono;font-size:19px;font-weight:800;line-height:1.35;letter-spacing:-.01em;text-align:left\">START THE LESSON</div><div id=\"edition-mark\" data-jc-clip=\"\" data-jc-kind=\"shape\" data-jc-name=\"Edition marker\" data-jc-track=\"8\" data-jc-start=\"0\" data-jc-duration=\"1\" style=\"position:absolute;box-sizing:border-box;left:1440px;top:64px;width:35px;height:35px;background:#3F8E8A;transform:rotate(4deg)\"></div>",
  "css": "",
  "values": {},
  "variables": [],
  "customBlocks": [],
  "aspectVariants": [],
  "safeArea": {
    "top": 0,
    "right": 0,
    "bottom": 0,
    "left": 0
  },
  "canvasBackground": "#1B1120"
}