Input Template

[nobr]
   [div=display: none;]
      [font=Familjen Grotesk]@fluticasone[/font]
      [font=Monomakh]@fluticasone[/font]
   [/div]
   [div=display: block;
   --bfont: 'Familjen Grotesk', sans-serif;
   --tfont: 'Monomakh', serif;
   --mainimg: url(&Image URL \ text&) center center/cover no-repeat;
   --imgfilter: saturate(0%) brightness(140%) contrast(155%);
   --color1: #e0e0e0;
   --color2: #141414;
   --color3: #808080;
   position: relative;
   box-sizing: border-box;
   font-size: 0;
   width: clamp(300px,100% - 2rem,1000px);
   margin: 1rem auto;
   height: auto;
   --lighttexture: url(https://i.imgur.com/7WTyOMP.jpeg) center center/auto repeat;
   --darktexture: url(https://i.imgur.com/VOjLJaA.jpeg) center center/auto repeat;
   --noise: url(https://i.imgur.com/UdjBt1F.png) center center/auto repeat;]
      [div=display: flex;
      width: 100%;
      flex-flow: row wrap;
      justify-content: flex-end;
      align-items: flex-start;
      box-sizing: border-box;
      font-family: var(--tfont);
      font-size: .75rem;
      line-height: 1;
      gap: 1rem;
      padding: 0px 1rem;
      text-transform: uppercase;
      color: var(--color1);
      text-shadow: var(--color2) 1px 0px 0;
      margin-bottom: .65rem;]
         [div=flex: 0 auto;]
            &Word List \ text \ word1 word2 word3&
         [/div]
         [div=flex: 0 auto;]
            &Art Credit \ text&
         [/div]
      [/div]
      [div=display: flex;
      flex-flow: row wrap;
      box-sizing: border-box;
      border: 1px solid var(--color2);
      background: var(--lighttexture), var(--color1);
      background-blend-mode: multiply;
      position: relative;
      container-type: inline-size;
      overflow: hidden;]
         [div=position: absolute;
         z-index: 1;
         top: 0px;
         left: 0px;
         height: 100%;
         width: 100%;
         background: var(--mainimg);
         filter: var(--imgfilter);
         mix-blend-mode: darken;]
            img layer
         [/div]
         [div=position: absolute;
         z-index: 2;
         top: 0px;
         left: 0px;
         height: 100%;
         width: 100%;
         opacity: .1;
         background: var(--noise);
         mix-blend-mode: soft-light;]
            texture noise
         [/div]
         [div=position: absolute;
         top: 0px;
         left: 0px;
         z-index: 3;
         width: 100%;
         height: auto;
         display: flex;
         flex-flow: row wrap-reverse;
         justify-content: flex-start;
         align-items: stretch;
         mix-blend-mode: difference;]
            [div=flex: 2 100px;
            min-height: 12.75rem;
            background: var(--color3);]
               spacer
            [/div]
            [div=flex: 3 300px;
            aspect-ratio: 4/3;]
               spacer
            [/div]
         [/div]
         [div=container-type: size;
         height: 100%;
         width: 100%;
         top: 0;
         left: 0;
         position: absolute;
         z-index: 4;
         pointer-events: none;
         mix-blend-mode: difference;]
            [div=position: absolute;
            left: 0px;
            bottom: 0px;
            width: 100cqh;
            height: auto;
            font-size: clamp(2rem,3.25cqw,100px);
            line-height: .95;
            transform: rotate(-90deg) translate(0%,100%);
            transform-origin: bottom left;
            padding: 1.15rem 1rem;
            box-sizing: border-box;
            color: var(--color1);
            font-family: var(--tfont);]
               &Name \ text \ LastName, FirstName&
            [/div]
         [/div]
         [div=position: relative;
         z-index: 5;
         width: 100%;
         height: auto;
         display: flex;
         flex-flow: row wrap-reverse;
         justify-content: flex-start;
         align-items: stretch;]
            [div=flex: 2 100px;
            height: 12.75rem;
            box-sizing: border-box;
            padding: 2.25rem;
            padding-left: clamp(2rem + 1.85rem,3.25cqw + 1.85rem,100px);
            padding-right: 1.5rem;
            position: relative;]
               [div=display: flex;
               flex-flow: column nowrap;
               align-items: flex-start;
               justify-content: flex-end;
               gap: .75rem;
               width: 100%;
               height: 100%;
               container-type: inline-size;
               font-family: var(--bfont);
               color: var(--color1);
               overflow: hidden;]
                  [div=flex: 0 auto;
                  width: 100cqw;
                  font-size: 1.25rem;
                  line-height: 1;]
                     &Age in Text \ text& (&Age \ text&)[br][/br]
                     &Power \ text&
                  [/div]
                  [div=flex: 1 3rem;
                  height: auto;
                  box-sizing: content-box;
                  width: 100cqw;
                  padding-right: 75px;
                  overflow-x: hidden;
                  overflow-y: auto;
                  font-size: 1rem;
                  line-height: 1.2;
                  text-wrap: pretty;]
                     &Short Blurb \ content&
                  [/div]
               [/div]
            [/div]
            [div=flex: 3 300px;
            aspect-ratio: 4/3;]
               spacer
            [/div]
         [/div]
         [div=position: absolute;
         pointer-events: none;
         z-index: 6;
         top: 0px;
         left: 0px;
         height: 100%;
         width: 100%;
         background: var(--darktexture);
         mix-blend-mode: screen;]
            texture dark
         [/div]
      [/div]
   [/div]
[/nobr]
csblurb.txt
6 KB

Debug Mode

[
  "[nobr]\r\n   [div=display: none;]\r\n      [font=Familjen Grotesk]@fluticasone[/font]\r\n      [font=Monomakh]@fluticasone[/font]\r\n   [/div]\r\n   [div=display: block;\r\n   --bfont: 'Familjen Grotesk', sans-serif;\r\n   --tfont: 'Monomakh', serif;\r\n   --mainimg: url(",
  {
    "type": "text",
    "description": "Image URL",
    "marker": {
      "type": "text",
      "description": "Image URL",
      "defaultValue": "",
      "original": "&Image URL \\ text&",
      "indices": [
        256,
        273
      ]
    }
  },
  ") center center/cover no-repeat;\r\n   --imgfilter: saturate(0%) brightness(140%) contrast(155%);\r\n   --color1: #e0e0e0;\r\n   --color2: #141414;\r\n   --color3: #808080;\r\n   position: relative;\r\n   box-sizing: border-box;\r\n   font-size: 0;\r\n   width: clamp(300px,100% - 2rem,1000px);\r\n   margin: 1rem auto;\r\n   height: auto;\r\n   --lighttexture: url(https://i.imgur.com/7WTyOMP.jpeg) center center/auto repeat;\r\n   --darktexture: url(https://i.imgur.com/VOjLJaA.jpeg) center center/auto repeat;\r\n   --noise: url(https://i.imgur.com/UdjBt1F.png) center center/auto repeat;]\r\n      [div=display: flex;\r\n      width: 100%;\r\n      flex-flow: row wrap;\r\n      justify-content: flex-end;\r\n      align-items: flex-start;\r\n      box-sizing: border-box;\r\n      font-family: var(--tfont);\r\n      font-size: .75rem;\r\n      line-height: 1;\r\n      gap: 1rem;\r\n      padding: 0px 1rem;\r\n      text-transform: uppercase;\r\n      color: var(--color1);\r\n      text-shadow: var(--color2) 1px 0px 0;\r\n      margin-bottom: .65rem;]\r\n         [div=flex: 0 auto;]\r\n            ",
  {
    "type": "text",
    "description": "Word List",
    "marker": {
      "type": "text",
      "description": "Word List",
      "defaultValue": "word1 word2 word3",
      "original": "&Word List \\ text \\ word1 word2 word3&",
      "indices": [
        1322,
        1359
      ]
    },
    "value": "word1 word2 word3"
  },
  "\r\n         [/div]\r\n         [div=flex: 0 auto;]\r\n            ",
  {
    "type": "text",
    "description": "Art Credit",
    "marker": {
      "type": "text",
      "description": "Art Credit",
      "defaultValue": "",
      "original": "&Art Credit \\ text&",
      "indices": [
        1421,
        1439
      ]
    }
  },
  "\r\n         [/div]\r\n      [/div]\r\n      [div=display: flex;\r\n      flex-flow: row wrap;\r\n      box-sizing: border-box;\r\n      border: 1px solid var(--color2);\r\n      background: var(--lighttexture), var(--color1);\r\n      background-blend-mode: multiply;\r\n      position: relative;\r\n      container-type: inline-size;\r\n      overflow: hidden;]\r\n         [div=position: absolute;\r\n         z-index: 1;\r\n         top: 0px;\r\n         left: 0px;\r\n         height: 100%;\r\n         width: 100%;\r\n         background: var(--mainimg);\r\n         filter: var(--imgfilter);\r\n         mix-blend-mode: darken;]\r\n            img layer\r\n         [/div]\r\n         [div=position: absolute;\r\n         z-index: 2;\r\n         top: 0px;\r\n         left: 0px;\r\n         height: 100%;\r\n         width: 100%;\r\n         opacity: .1;\r\n         background: var(--noise);\r\n         mix-blend-mode: soft-light;]\r\n            texture noise\r\n         [/div]\r\n         [div=position: absolute;\r\n         top: 0px;\r\n         left: 0px;\r\n         z-index: 3;\r\n         width: 100%;\r\n         height: auto;\r\n         display: flex;\r\n         flex-flow: row wrap-reverse;\r\n         justify-content: flex-start;\r\n         align-items: stretch;\r\n         mix-blend-mode: difference;]\r\n            [div=flex: 2 100px;\r\n            min-height: 12.75rem;\r\n            background: var(--color3);]\r\n               spacer\r\n            [/div]\r\n            [div=flex: 3 300px;\r\n            aspect-ratio: 4/3;]\r\n               spacer\r\n            [/div]\r\n         [/div]\r\n         [div=container-type: size;\r\n         height: 100%;\r\n         width: 100%;\r\n         top: 0;\r\n         left: 0;\r\n         position: absolute;\r\n         z-index: 4;\r\n         pointer-events: none;\r\n         mix-blend-mode: difference;]\r\n            [div=position: absolute;\r\n            left: 0px;\r\n            bottom: 0px;\r\n            width: 100cqh;\r\n            height: auto;\r\n            font-size: clamp(2rem,3.25cqw,100px);\r\n            line-height: .95;\r\n            transform: rotate(-90deg) translate(0%,100%);\r\n            transform-origin: bottom left;\r\n            padding: 1.15rem 1rem;\r\n            box-sizing: border-box;\r\n            color: var(--color1);\r\n            font-family: var(--tfont);]\r\n               ",
  {
    "type": "text",
    "description": "Name",
    "marker": {
      "type": "text",
      "description": "Name",
      "defaultValue": "LastName, FirstName",
      "original": "&Name \\ text \\ LastName, FirstName&",
      "indices": [
        3697,
        3731
      ]
    },
    "value": "LastName, FirstName"
  },
  "\r\n            [/div]\r\n         [/div]\r\n         [div=position: relative;\r\n         z-index: 5;\r\n         width: 100%;\r\n         height: auto;\r\n         display: flex;\r\n         flex-flow: row wrap-reverse;\r\n         justify-content: flex-start;\r\n         align-items: stretch;]\r\n            [div=flex: 2 100px;\r\n            height: 12.75rem;\r\n            box-sizing: border-box;\r\n            padding: 2.25rem;\r\n            padding-left: clamp(2rem + 1.85rem,3.25cqw + 1.85rem,100px);\r\n            padding-right: 1.5rem;\r\n            position: relative;]\r\n               [div=display: flex;\r\n               flex-flow: column nowrap;\r\n               align-items: flex-start;\r\n               justify-content: flex-end;\r\n               gap: .75rem;\r\n               width: 100%;\r\n               height: 100%;\r\n               container-type: inline-size;\r\n               font-family: var(--bfont);\r\n               color: var(--color1);\r\n               overflow: hidden;]\r\n                  [div=flex: 0 auto;\r\n                  width: 100cqw;\r\n                  font-size: 1.25rem;\r\n                  line-height: 1;]\r\n                     ",
  {
    "type": "text",
    "description": "Age in Text",
    "marker": {
      "type": "text",
      "description": "Age in Text",
      "defaultValue": "",
      "original": "&Age in Text \\ text&",
      "indices": [
        4866,
        4885
      ]
    }
  },
  " (",
  {
    "type": "text",
    "description": "Age",
    "marker": {
      "type": "text",
      "description": "Age",
      "defaultValue": "",
      "original": "&Age \\ text&",
      "indices": [
        4888,
        4899
      ]
    }
  },
  ")[br][/br]\r\n                     ",
  {
    "type": "text",
    "description": "Power",
    "marker": {
      "type": "text",
      "description": "Power",
      "defaultValue": "",
      "original": "&Power \\ text&",
      "indices": [
        4933,
        4946
      ]
    }
  },
  "\r\n                  [/div]\r\n                  [div=flex: 1 3rem;\r\n                  height: auto;\r\n                  box-sizing: content-box;\r\n                  width: 100cqw;\r\n                  padding-right: 75px;\r\n                  overflow-x: hidden;\r\n                  overflow-y: auto;\r\n                  font-size: 1rem;\r\n                  line-height: 1.2;\r\n                  text-wrap: pretty;]\r\n                     ",
  {
    "type": "content",
    "description": "Short Blurb",
    "marker": {
      "type": "content",
      "description": "Short Blurb",
      "original": "&Short Blurb \\ content&",
      "indices": [
        5373,
        5395
      ]
    }
  },
  "\r\n                  [/div]\r\n               [/div]\r\n            [/div]\r\n            [div=flex: 3 300px;\r\n            aspect-ratio: 4/3;]\r\n               spacer\r\n            [/div]\r\n         [/div]\r\n         [div=position: absolute;\r\n         pointer-events: none;\r\n         z-index: 6;\r\n         top: 0px;\r\n         left: 0px;\r\n         height: 100%;\r\n         width: 100%;\r\n         background: var(--darktexture);\r\n         mix-blend-mode: screen;]\r\n            texture dark\r\n         [/div]\r\n      [/div]\r\n   [/div]\r\n[/nobr]\r\ncsblurb.txt\r\n6 KB"
]

[]

ivorydeuce.template 1.1

By glucoseguardian

Image URL

Word List

Art Credit

Name

Age in Text

Age

Power

Short Blurb

Output