1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import·{·design·}·from·"https://unpkg.com/artis@1.1.0/artis.js";
class·MainComponent·extends·HTMLElement·{
··constructor()·{
····super();
··}
··connectedCallback()·{
····const·cardStyle·=·`stack:2·position:relative·h:200·w:300·display:flex·
justifyContent:center·alignItems:center·bgColor:rgba(63,70,78,1)·
curveRadius:30·overflow:hidden`;
····const·imageStyle·=·`stack:3·position:absolute·top:-60·right:-60·
transform:rotate(25deg)·h:200·w:200·imageFit:cover·imagePosition:center·
filter:saturate(3)`;
····const·outerShapeStyle·=·`stack:1·position:absolute·h:200·w:200·top:-60·
right:-60·bgColor:white·curveRadius:60·transform:rotate(45deg)·opacity:0.
05`;
····const·shapeStyle·=·`stack:2·position:absolute·h:150·w:150·
bgColor:transparent·curveRadius:100·curveWidth:40·curveStyle:solid·
curveColor:white·opacity:0.1`;
····const·textStyle·=·`stack:3·mt:10·p:30·textSize:30·textColor:white·
fontFamily:sans,serif`;
····const·footerTextStyle·=·`position:absolute·bottom:-30·left:0·textColor:rgba
(255,255,255,0.40)·textAlign:center·vWidth:100%`;
····const·tmpl·=·document.createElement("template");
····tmpl.innerHTML·=·`<div·class="position:relative">
········<div·class="${outerShapeStyle}"></div>
········<img·class="${imageStyle}·filter:contrast(0)·opacity:0.5"·src="https://
artisjs.netlify.app/logo.svg"·alt="Artis"·loading="lazy"·/>
········<div·class="${cardStyle}">
··········<img·class="${imageStyle}"·src="https://artisjs.netlify.app/logo.svg"·
alt="Artis"·/>
··········<div·class="${shapeStyle}·top:-60·right:-60"></div>
··········<div·class="${shapeStyle}·top:-40·right:-30"></div>
··········<div·class="${shapeStyle}·top:-20·right:-20"></div>
Enter to Rename, Shift+Enter to Preview