Widget:QuestCard

<script> var app = ()=>{

 console.log('test');

}

if(!window.widgets) window.widgets = []; window.widgets.push(app); </script> <style> .questCard{

 --cc-quest-wid: 42em;
 --cc-quest-hgt: 33em;
 --cc-quest-rad: 2em;
 --cc-quest-border: 1em;
 --cc-quest-title: 5em;
 --quest-cont-wid: calc(var(--cc-quest-wid) - 2 * var(--cc-quest-border));
 --quest-cont-hgt: calc(var(--cc-quest-hgt) - var(--cc-quest-border) - var(--cc-quest-title));
 position: relative;
 background-color: var(--cc-blue);
 width: var(--cc-quest-wid);
 height: var(--cc-quest-hgt);
 border-radius: var(--cc-quest-rad);

}

.questContent {

 background-color: var(--cc-white);
 border-radius: calc(var(--cc-quest-rad) - var(--cc-quest-border));
 position: absolute;
 left: var(--cc-quest-border);
 top: var(--cc-quest-title);
 width: var(--quest-cont-wid);
 height: var(--quest-cont-hgt);
 overflow: hidden;

}

.bgLogo {

 position: absolute;
 left: calc(-.33 * var(--quest-cont-hgt));
 top: calc(.33 * var(--quest-cont-hgt));
 width: var(--quest-cont-hgt);
 height: var(--quest-cont-hgt);
 filter: opacity(.25);

} </style>

   <img class='bgLogo' src='images/logos/logoBoW.png'></img>
   <img src=https://quickchart.io/qr?text=&centerImageUrl=http://makerspace.cc/images/logos/logoBoW.png&size=200x200&dark=003069&light=FFFFFF"