elysium (ver. 2)

[comment]coded by uxie!

fonts used:
[font=Vollkorn]headers[/font]
[font=Zen Antique]quote[/font]
[font=IBM Plex Sans]body[/font]

to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )

[/comment][border=transparent;

/*gradient colour 1 (top)*/
--bg-1: #807A36;
/*gradient colour 2 (bottom)*/
--bg-2: #010001;
/*background image*/
--bg-img: url('https://i.imgur.com/xzTHpie.png');

/*text container background colour*/
--bg-3: #e8e7d0;

/*dark accent colour*/
--color-1: #2D2A15;
/*light details background*/
--color-2: #d6d5ba;
/*quote colour*/
--color-3: #797747;
/*quote outline colour*/
--color-3o: #dde0a1;

/*header colour*/
--h1: #2D2A15;
/*text colour*/
--t-color: #26250f;

/*fonts used*/
--header: 'Vollkorn', serif;
--quote: 'Zen Antique', display;
--body: 'IBM Plex Sans', sans-serif;

/*image*/
--img-1: url('https://img.youtube.com/vi/zOmCdi_P954/maxresdefault.jpg');


height:auto; width:100%; overflow-x:auto; overflow-y:hidden; margin:15px 0 20px 0; padding:0; line-height:0;][border=transparent; height:auto; min-height:410px; width:100%; max-width:610px; padding:clamp(8px, -30px + 6vw, 10px) clamp(13px, -30px + 6vw, 20px); box-sizing:border-box; margin:0 auto; background: var(--bg-2); position:relative; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; --m:clamp(12px, -30px + 6vw, 15px); --s:clamp(0px, -30px + 6vw, 10px);][comment]

----image background----

[/comment][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-img); background-position:50% 50%; background-size:cover; opacity:0.8; position:absolute; bottom:0; left:0; z-index:1; pointer-events:none;][/border]
[border=transparent; height:100%; width:100%; padding:0; background: radial-gradient(120% 380px at 50% -27%, var(--bg-1) 0%, var(--bg-2) 85%); opacity:0.95; mix-blend-mode:lighten; position:absolute; bottom:0; left:0; z-index:1; pointer-events:none;][/border]

   [comment]----left----[/comment]
   [border=transparent; height:240px; flex:39; min-width:150px; max-width:210px; padding:0; margin: var(--m); display:flex; flex-flow:column nowrap; position:relative; z-index:2; box-sizing:border-box; overflow:hidden; box-shadow:0px 0px 10px var(--bg-2);][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; position:relative; z-index:2;]

      [comment]----name----[/comment]
      [border=transparent; height:100%; width:calc(50% + var(--s)); padding:0; display:flex; flex-flow:column nowrap;][border=transparent; flex:1; width:100%; padding:10px; box-sizing:border-box; display:flex; justify-content:flex-end;][border=transparent; height:15px; width:15px; padding:0; background: var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--h1); font-size:9px; opacity:0.9; box-shadow:0 0 3px var(--color-1);][fa]fas fa-chevron-down[/fa][/border][/border][border=transparent; height:auto; min-height:40px; width:100%; padding:0 10px; box-sizing:border-box; background: var(--color-2); display:flex; align-items:center;][border=transparent; flex:1; padding:10px 0 8px 0; box-sizing:border-box; color: var(--h1); font-size:29px; font-family: var(--header); letter-spacing:1px; line-height:90%; font-variant:small-caps;][comment]

----* * * name here----

[/comment]Galleria[/border]

      [comment]----star/sparkle icon----[/comment]
      [border=transparent; height:40px; width:32px; padding:0; overflow:hidden; position:relative; margin-left:10px; flex-shrink:0;

/*add display:none; here if you want to use a fontawesome icon*/ ][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); border-radius:50%;][/border][border=transparent; height:40px; width:40px; padding:0; border-radius:5px; position:absolute; top:-19.5px; left:-24px; background: var(--color-2); transform:skewX(-5deg) skewY(-5deg);][/border][border=transparent; height:40px; width:40px; padding:0; border-radius:5px; position:absolute; top:-19.5px; right:-24px; background: var(--color-2); transform:skewX(5deg) skewY(5deg)][/border][border=transparent; height:40px; width:40px; padding:0; border-radius:5px; position:absolute; bottom:-19.5px; left:-24px; background: var(--color-2); transform:skewX(5deg) skewY(5deg)][/border][border=transparent; height:40px; width:40px; padding:0; border-radius:5px; position:absolute; bottom:-19.5px; right:-24px; background: var(--color-2); transform:skewX(-5deg) skewY(-5deg)][/border][/border]

      [comment]----fontawesome icon----[/comment]
      [border=transparent; height:40px; width:32px; padding:0; position:relative; margin-left:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;

/*remove display:none; to use fontawesome icon*/ display:none;

color: var(--color-1); font-size:21px;][comment]

----* * * icon here----

[/comment][fa]fas fa-star[/fa][/border]

      [/border][/border]
      [comment]----name end----[/comment]

      [comment]----details----[/comment]
      [border=transparent; height:auto; max-height:72px; width:100%; padding:3px 0 10px 0; box-sizing:border-box; background: var(--color-2); display:flex; flex-flow:column nowrap; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 4px 0 12px; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

         [comment]----copy this whole thing to make another detail----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:flex-start;margin-top:8px;]
[border=transparent; height:auto; width:auto; padding:0; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:auto; width:auto; padding:0; box-sizing:border-box; font-family: var(--header); font-size:13px; letter-spacing:0.5px; color: var(--h1); line-height:100%; text-transform:lowercase; font-weight:bold;][comment]

----* * * detail title here----

[/comment]mood.[/border]
[border=transparent; height:0; width:15px; padding:0; border-top:2px solid var(--color-3); margin:0 7px 0 5px;][/border][/border]
[border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; font-family: var(--body); line-height:15px; margin-top:-1.5px;][comment]

----* * * detail info here---

[/comment]???[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another detail----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:flex-start;margin-top:8px;]
[border=transparent; height:auto; width:auto; padding:0; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:auto; width:auto; padding:0; box-sizing:border-box; font-family: var(--header); font-size:13px; letter-spacing:0.5px; color: var(--h1); line-height:100%; text-transform:lowercase; font-weight:bold;][comment]

----* * * detail title here----

[/comment]location.[/border]
[border=transparent; height:0; width:15px; padding:0; border-top:2px solid var(--color-3); margin:0 7px 0 5px;][/border][/border]
[border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; font-family: var(--body); line-height:15px; margin-top:-1.5px;][comment]

----* * * detail info here---

[/comment]???[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another detail----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:flex-start;margin-top:8px;]
[border=transparent; height:auto; width:auto; padding:0; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:auto; width:auto; padding:0; box-sizing:border-box; font-family: var(--header); font-size:13px; letter-spacing:0.5px; color: var(--h1); line-height:100%; text-transform:lowercase; font-weight:bold;][comment]

----* * * detail title here----

[/comment]tags.[/border]
[border=transparent; height:0; width:15px; padding:0; border-top:2px solid var(--color-3); margin:0 7px 0 5px;][/border][/border]
[border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; font-family: var(--body); line-height:15px; margin-top:-1.5px;][comment]

----* * * detail info here---

[/comment]@ user[/border]
         [/border]
         [comment]----copy me too!----[/comment]

      [/border][/border][/border]
      [comment]----details end----[/comment]

   [/border]
      [comment]----image----[/comment]
      [border=transparent; height:200px; width:100%; padding:0; background: var(--img-1); background-size:cover; border:2px solid var(--color-2); border-bottom:0; box-sizing:border-box;

/*edit the following to adjust the cropping of the image*/ background-position:20% 50%;

position:absolute; top:0; left:0; z-index:1;][/border]
   [/border]
   [comment]----left end----[/comment]

   [comment]----right----[/comment]
   [border=transparent; height:350px; flex:61; min-width:200px; padding:0; margin: var(--m); position:relative; z-index:3; box-shadow:0px 0px 10px var(--bg-2);][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-3); opacity:0.9; position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:100%; width:100%; padding:15px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; overflow:hidden; position:relative; z-index:2;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 clamp(7px, 40px - 7vw, 15px) 0 15px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:16px; font-family: var(--body);][comment]

----* * * text starts here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu dolor est. Fusce venenatis metus eu leo efficitur, vitae consequat arcu venenatis. Praesent magna sem, efficitur quis magna eu, congue eleifend nisl. Phasellus ullamcorper nunc a felis feugiat, sed facilisis erat pulvinar. Morbi eu consectetur ipsum, nec fermentum sapien. Nunc bibendum dolor sed augue tristique maximus. Proin mauris ante, finibus id varius sit amet, elementum eu odio. Nullam rutrum ultrices finibus. Sed sit amet magna diam. Nam risus nulla, facilisis et erat eget, congue pretium sem. Aliquam consectetur consectetur sodales. Aliquam nibh diam, cursus nec augue sed, finibus egestas sapien. Maecenas vehicula ligula a egestas condimentum. Aliquam in ipsum ipsum. Nullam vitae elementum ipsum. Vivamus malesuada lectus eu odio tristique, eu finibus mauris tincidunt.

Praesent tortor sapien, auctor consequat luctus eget, semper quis elit. Praesent dictum suscipit erat, vitae eleifend lorem malesuada non. Pellentesque sagittis nisl elit, vel gravida enim porta ac. Donec at nunc tortor. Sed elementum venenatis arcu, ac sagittis mi porta sit amet. Ut suscipit aliquam nunc. Integer consequat justo ut varius lobortis. Donec non ante sit amet diam condimentum malesuada eu vel purus.
   [/border][/border][/border][/border]
   [comment]----right end----[/comment]

   [comment]----quote----[/comment]
   [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center;][border=transparent; height:auto; max-height:350px; overflow:hidden; width:70px; padding:0; color: var(--color-3); font-family: var(--quote); letter-spacing:0; font-size:68px; line-height:68px; margin:0 clamp(0px, -80px + 20vw, 112px) 10px 0; -webkit-text-stroke:1px var(--color-3o); pointer-events:none; text-align:center; writing-mode: vertical-rl; text-orientation:upright; white-space:nowrap;][comment]

----* * * quote here----

[/comment]ギャラリア[/border][/border]

[comment]
----signature! do not remove
[/comment][bg=transparent; height:fit-content; width:auto; padding:0; position:absolute;z-index:15;opacity:0.4;color: var(--color-2); font-size:clamp(9px, -30px + 5vw, 10px);text-align:center; bottom:15px; left:15px; line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/bg][/border][/border]