• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource Ami's Lab 2.0 | Mobile Friendly Freebies

Ambiloquous

Ambiloquous

Graphic Fanatic
Roleplay Type(s)
A Preface
Hello fellas, motivated by the art of procrastination and dodging responsibilities, I have coded things. The more I stress, the more I code, so if I drop a lot of codes at once... haha.

Some Info
All code is typed up on my 14-inch Mac (rip 13) with a slightly smaller Chromium browser window than is the norm of a screen of this size. My phone isn't dead, so all of these codes are as mobile usable as I can make it. If it's not so for your device, do tell me and I'll try my best to fix it. I also make bug edits every so often, so if something goes wonk, you might see it fixed later. If you have questions or concerns beyond the comments, feel free to ask.

Credits aren't required, but it would be nice to be tagged somewhere if you use it — it doesn't even have to be visible, it would simply be cool to see what people would do with my code.

Also, feel free to edit or change any parts of the code I didn't comment on, as long as you're not afraid of breaking it. Mess with values and tags, Frankenstein it with other things, do whatever you need to figure out how this works because that's the way I learned back then.

More Notes
I assume it would be pretty obvious, but just in case, all of the information, titles, headers or labels I use are placeholders. In fact, most if not all of the CS tab codes should work for interest checks as well, and many other non-tab codes work perfectly fine as IC posts. They aren't really meant to be something specific or follow a format — I honestly just put whatever text came to mind first.

Also, I don't recommend using every code in this thread. Sure, they're all "mobile friendly" and fit as much text as you can shove in a post, but not all of them are great at displaying information. About 50% of all templates are there simply because I had an idea that wasn't actually practical and wanted to code it anyway — this is a "lab". Plz don't kill people's eyes.
 
Last edited:
Circle Placeholder
First up is a very simple placeholder. I had the urge to code something circular with overlapping details, and this is the result.

Textbox
No Scroll






Artist — Janice Sung




Circle — Placeholder
“
Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring.
”




Code: 
[comment][font=Overpass].[/font][/comment][comment]-- Main font -->[/comment][font=Lato][border=transparent;

/* Probably best if you don't change anything I haven't commented next to */

display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
margin: auto;
max-width: 750px;

/* Accent colours, use rgb numbers */
--color-1: 255, 145, 0; 
--color-2: 255, 99, 71;

--base-color: 	rgba(var(--color-1), 0.35);
--border-radius: 50%;
--border: 3px solid rgba(var(--color-2), 0.8);

--i-size: 200px;
--url: url('https://i.pinimg.com/564x/eb/d9/30/ebd9306ec175e95f20a0a21ad26cb3dc.jpg'); /* Image URL */
--filter: grayscale(100%); /* Filter, decrease for less grayscale-ness -- you could also change it to another filter */

--displace-1: 15px;
--displace-2: 8px;

--margin: 25px;
--quote: 'Overpass', sans-serif; /* Font used for quotation marks, change the font tag above code if you change this */
--q-width: 60px;
--q-size: 60px;]

[comment]-- Image --[/comment]
[border=transparent;
position: relative;
top: var(--displace-1);
height: calc(var(--i-size) + var(--displace-1) +  var(--displace-2) + 25px);
padding: 0px;][border=transparent;
position: relative;
width: var(--i-size);
height: var(--i-size);
border-radius: var(--border-radius);
padding: 0px;
background-image: var(--url);
background-size: cover;
background-position: top center;
filter: var(--filter);][/border][border=transparent;
position: absolute;
top: calc(0px - var(--displace-1));
left: -10px;
width: var(--i-size);
height: var(--i-size);
border-radius: var(--border-radius);
padding: 0px;
background-color: var(--base-color);][/border]
[border=transparent;
position: absolute;
top: var(--displace-2);
left: 8px;
width: var(--i-size);
height: var(--i-size);
border-radius: var(--border-radius);
padding: 0px;
border: var(--border);][/border][border=transparent;
padding: 0px;
font-size: 0.8em;
text-align: center;][b]Artist[/b] — Janice Sung[/border]
[/border]

[comment]-- Text --[/comment]
[border=transparent;
position: relative;
flex: 2 1 550px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin-top: var(--margin);
margin-bottom: var(--margin);
height: auto;
padding: 0px;][border=transparent;
padding: 0px;
padding-left: 30px;][b]Circle[/b] — Placeholder
[border=transparent;
display: inline-block;
width: var(--q-width);
padding: 0px;
color: rgba(var(--color-1), 0.7);
font-family: var(--quote);
font-size: var(--q-size);
line-height: 100%;]“[/border][border=transparent;
display: inline-block;
width: calc(100% - var(--q-width) - var(--q-width));
padding: 0px;][b]Imperfection[/b] is beauty, [b]madness[/b] is genius and it's better to be absolutely [b]ridiculous[/b] than absolutely boring.[/border][border=transparent;
display: inline-block;
width: var(--q-width);
padding: 0px;
color: rgba(var(--color-2), 0.7);
font-family: var(--quote);
font-size: var(--q-size);
line-height: 100%;
text-align: right;]”[/border][/border]
[/border]
[/border][/font]
 
Last edited:
Clockwork Carnival
This was created a bit after I realized I could apply all sorts of fun shapes to accordions, but alas, I was not creative in this one, so it's just a rectangle.

Not going to lie, I think this one is a little busy. To whoever may use it, it's probably best not to use a gif.

If you're on Firefox, this may look a little different, I think.

Accordion
No Scroll


Clockwork Carnival
Text Here

Daily Delights
Text Here

Night Entertainment
Text Here

Artist: Jonathan Stroh

Code: 
[comment][font=Volkhov][font=Orelega One].[/font][/font][/comment][border=0px;

/* Probably best if you don't change anything I haven't commented next to */

visibility: hidden;
margin: auto;
max-width: calc(var(--width) + (2 * var(--padding-side)));
padding: 0px;

--width: 600px; /* Max width of slides */
--height: 180px;
--url: url('https://i.pinimg.com/originals/a0/45/93/a04593dc57e2e5e4d0c60573bd72d915.gif') 0% 0% / contain; /* Image/GIF URL, change contain to cover if the image is repeating and you don't want it to be (but on mobile, cover will make it look like a blurry mess) or you could mess with percentages upwards of 100% */

--padding: 10px;
--padding-side: 20px;
--color: #003a3a; /* Header text colour */
--header: 'Orelega One', serif; /* Header font, change font tag above code if you change this */
--size: 30px;
--bg-color: rgba(150, 218, 205, 1); /* Ribbon colour */

--accent: rgb(0, 128, 120); /* Triangle and body shadow colour */

--triangle-top: 55px;
--triangle-height: 10px;
--displace: 0.5px;
--triangle-left: polygon(100% 0, 0% 100%, 100% 100%);
--triangle-right: polygon(0 0, 0% 100%, 100% 100%);

--body-top: -13px;

--shadow-percent: 0.75;

--text-padding: 15px;
--text: 'Volkhov', serif; /* Body font, change font tag above code if you change this */
--text-color: #003a3a; /* Body text colour */][accordion=100% | bcenter]

[comment]-- Slide 1 --[/comment]
{slide=center | [bg=transparent;
visibility: visible;
position: relative;
margin: auto;
max-width: calc(100% - (2 * var(--padding-side)));
height: var(--height);
padding: 0px;
background: var(--url);
background-attachment: fixed;
z-index: 2;][comment]-- Triangle Left --[/comment][border=transparent;
position: absolute;
top: var(--triangle-top);
left: calc(var(--displace) - var(--padding-side));
width: var(--padding-side);
height: var(--triangle-height);
padding: 0px;
background-color: var(--accent);
-webkit-clip-path: var(--triangle-left);
clip-path: var(--triangle-left);][/border][comment]-- Triangle Right --[/comment][border=transparent;
position: absolute;
top: var(--triangle-top);
left: 100%;
width: var(--padding-side);
height: var(--triangle-height);
padding: 0px;
background-color: var(--accent);
-webkit-clip-path: var(--triangle-right);
clip-path: var(--triangle-right);][/border][comment]-- Ribbon --[/comment][border=transparent;
position: absolute;
top: calc(var(--triangle-top) + var(--triangle-height));
left: calc(0px - var(--padding-side));
box-sizing: content-box;
width: 100%;
padding: var(--padding);
padding-left: var(--padding-side);
padding-right: var(--padding-side);
color: var(--color);
font-family: var(--header);
font-size: var(--size);
font-weight: normal;
font-variant: normal;
background: var(--bg-color);
line-height: 100%;]Clockwork Carnival[/border][/bg]}[bg=transparent;
visibility: visible;
position: relative;
top: var(--body-top);
box-sizing: border-box;
margin: auto;
max-width: calc(100% - (4 * var(--padding-side)));
padding: 0px;
background:  var(--bg-color);][comment]-- Shadow --[/comment][border=transparent;
width: 100%;
height: calc(var(--triangle-height) * var(--shadow-percent));
padding: 0px;
background-color: var(--accent);][/border][comment]-- Text --[/comment][border=transparent;
padding: var(--text-padding);
color: var(--text-color);
font-family: var(--text);
line-height: 100%;]Text Here[/border]
[/bg]{/slide}

[comment]-- Slide 2 --[/comment]
{slide=center | [bg=transparent;
visibility: visible;
position: relative;
margin: auto;
max-width: calc(100% - (2 * var(--padding-side)));
height: var(--height);
padding: 0px;
background: var(--url);
background-attachment: fixed;
z-index: 2;][comment]-- Triangle Left --[/comment][border=transparent;
position: absolute;
top: var(--triangle-top);
left: calc(var(--displace) - var(--padding-side));
width: var(--padding-side);
height: var(--triangle-height);
padding: 0px;
background-color: var(--accent);
-webkit-clip-path: var(--triangle-left);
clip-path: var(--triangle-left);][/border][comment]-- Triangle Right --[/comment][border=transparent;
position: absolute;
top: var(--triangle-top);
left: 100%;
width: var(--padding-side);
height: var(--triangle-height);
padding: 0px;
background-color: var(--accent);
-webkit-clip-path: var(--triangle-right);
clip-path: var(--triangle-right);][/border][comment]-- Ribbon --[/comment][border=transparent;
position: absolute;
top: calc(var(--triangle-top) + var(--triangle-height));
left: calc(0px - var(--padding-side));
box-sizing: content-box;
width: 100%;
padding: var(--padding);
padding-left: var(--padding-side);
padding-right: var(--padding-side);
color: var(--color);
font-family: var(--header);
font-size: var(--size);
font-weight: normal;
font-variant: normal;
background: var(--bg-color);
line-height: 100%;]Daily Delights[/border][/bg]}[bg=transparent;
visibility: visible;
position: relative;
top: var(--body-top);
box-sizing: border-box;
margin: auto;
max-width: calc(100% - (4 * var(--padding-side)));
padding: 0px;
background:  var(--bg-color);][comment]-- Shadow --[/comment][border=transparent;
width: 100%;
height: calc(var(--triangle-height) * var(--shadow-percent));
padding: 0px;
background-color: var(--accent);][/border][comment]-- Text --[/comment][border=transparent;
padding: var(--text-padding);
color: var(--text-color);
font-family: var(--text);
line-height: 100%;]Text Here[/border]
[/bg]{/slide}

[comment]-- Slide 3 --[/comment]
{slide=center | [bg=transparent;
visibility: visible;
position: relative;
margin: auto;
max-width: calc(100% - (2 * var(--padding-side)));
height: var(--height);
padding: 0px;
background: var(--url);
background-attachment: fixed;
z-index: 2;][comment]-- Triangle Left --[/comment][border=transparent;
position: absolute;
top: var(--triangle-top);
left: calc(var(--displace) - var(--padding-side));
width: var(--padding-side);
height: var(--triangle-height);
padding: 0px;
background-color: var(--accent);
-webkit-clip-path: var(--triangle-left);
clip-path: var(--triangle-left);][/border][comment]-- Triangle Right --[/comment][border=transparent;
position: absolute;
top: var(--triangle-top);
left: 100%;
width: var(--padding-side);
height: var(--triangle-height);
padding: 0px;
background-color: var(--accent);
-webkit-clip-path: var(--triangle-right);
clip-path: var(--triangle-right);][/border][comment]-- Ribbon --[/comment][border=transparent;
position: absolute;
top: calc(var(--triangle-top) + var(--triangle-height));
left: calc(0px - var(--padding-side));
box-sizing: content-box;
width: 100%;
padding: var(--padding);
padding-left: var(--padding-side);
padding-right: var(--padding-side);
color: var(--color);
font-family: var(--header);
font-size: var(--size);
font-weight: normal;
font-variant: normal;
background: var(--bg-color);
line-height: 100%;]Night Entertainment[/border][/bg]}[bg=transparent;
visibility: visible;
position: relative;
top: var(--body-top);
box-sizing: border-box;
margin: auto;
max-width: calc(100% - (4 * var(--padding-side)));
padding: 0px;
background:  var(--bg-color);][comment]-- Shadow --[/comment][border=transparent;
width: 100%;
height: calc(var(--triangle-height) * var(--shadow-percent));
padding: 0px;
background-color: var(--accent);][/border][comment]-- Text --[/comment][border=transparent;
padding: var(--text-padding);
color: var(--text-color);
font-family: var(--text);
line-height: 100%;]Text Here[/border]
[/bg]{/slide}
[/accordion][border=transparent;
visibility: visible;
position: relative;
top: -25px;
width: 100%;
font-size: 0.9em;
font-family: var(--text);
text-align: center;][b]Artist:[/b] Jonathan Stroh[/border][/border]
 
Last edited:
My Terminal
One day, I looked at my terminal and thought "hey, I could code this".

It turns out I can't. The fonts don't exist in the Google library, web colours are somehow not as vibrant as system defaults and a bunch of other little things that make it just a little bit off. But the closest I could get isn't too shabby either.

Textbox
No Scroll








user — -zsh
Last login: Fri Aug 6 10:55:00 on ttys000
user@User-Mac ~ %


Code: 
[comment][font=Noto Sans]\[/font][/comment][comment]-- Body font -->[/comment][font=Roboto Mono][border=transparent;

/* Probably best if you don't change anything I haven't commented next to */

--width: max(600px, 45vw); /* Replace max(600px, 45vw) with a number and px to change the max width of the window */
--border-color: rgba(0, 0, 0, 0.2);

--bar-h: 29px;
--bar-color: rgba(242, 243, 246, 0.95);
--bar-font: 'Noto Sans', sans-serif; /* Bar font, change font tag above code if you change this */
--bar-text: #484849; /* Bar text colour */

--button-l: 8px;
--button-s: 12px;
--b-1: #ff5f57;
--b-b-1: #ea534b;
--b-2: #febd2d;
--b-b-2: #e5a218;
--b-3: #29c83f;
--b-b-3: #1ab028;

--body-h: max(200px, 35vh);
--body-color: rgba(0, 140, 140, 0.88); /* Body colour */
--text-color: rgb(208, 251, 248); /* Body text colour */
--cursor-color: #00d1c7; /* Cursor colour, the block one in the body */

margin: auto;
padding: 25px 30px 40px 20px;][border=transparent;
margin: auto;
box-sizing: border-box;
max-width: var(--width);
padding: 0px;
border: 1px solid var(--border-color);
border-radius: 10px;
box-shadow: 6px 10px 30px rgba(0, 0, 0, 0.35);
overflow: hidden;][comment]-- Bar --[/comment][border=transparent;
position: relative;
display: flex;
flex-flow: row nowrap;
align-items: center;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
border-bottom: 1px solid var(--border-color);
background-color: var(--bar-color);]
[comment]-- Button 1 --[/comment]
[border=transparent;
position: absolute;
left: var(--button-l);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: 0px;
border: 1px solid var(--b-b-1);
border-radius: 50%;
background-color: var(--b-1);][/border]
[comment]-- Button 2 --[/comment]
[border=transparent;
position: absolute;
left: calc((2 * var(--button-l)) + var(--button-s));
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: 0px;
border: 1px solid var(--b-b-2);
border-radius: 50%;
background-color: var(--b-2);][/border]
[comment]-- Button 3 --[/comment]
[border=transparent;
position: absolute;
left: calc((3 * var(--button-l)) + (2 * var(--button-s)));
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: 0px;
border: 1px solid var(--b-b-3);
border-radius: 50%;
background-color: var(--b-3);][/border][comment]-- Title --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: 0px;
padding-left: var(--button-l);
padding-right: var(--button-l);
color: var(--bar-text);
font-family: var(--bar-font);
font-size: 0.9em;
font-weight: 900;
text-align: center;
text-overflow: ellipsis;][color=#71cffb][fa]fas fa-folder[/fa][/color] user — -zsh[/border][/border][comment]-- Body --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
min-height: var(--body-h);
padding: 6px;
color: var(--text-color);
font-size: 0.78em;
line-height: 120%;
text-overflow: ellipsis;
background-color: var(--body-color);
cursor: text;]Last login: Fri Aug 6 10:55:00 on ttys000
user@User-Mac ~ % [border=transparent;
position: relative;
top: 0.3em;
display: inline-block;
width: 7px;
height: 1.15em;
padding: 0px;
background-color: var(--cursor-color);][/border][/border][/border][/border][/font]
 
Last edited:
Filter Icon
Filters are cool. Not as cool as gradients, but still pretty cool. I tried create something where the image had different effects overlaid over different sections. After I finished it, I thought it was kind of useless except as a placeholder, so I added some text.

Edit: Changed the spacing between the info box and the containers above.

Image
Textbox
No Scroll


Art: Crisalys


Code: 
[border=transparent; 

/* Probably best if you don't change anything I haven't commented next to */

position: relative;
margin: auto;
max-width: var(--w);
height: var(--h);
padding: calc(var(--1-top) + var(--top)) calc((100% * 0.15) + 25px) calc(var(--1-top) + var(--top) + 20px) calc(var(--1-left) + var(--left));
cursor: url(https://www.cursor.cc/cursor/304/132/cursor.png), auto; /* Cursor image URL, must be smaller than 128 x 128 or something */

--w: 290px;
--h: 280px;
--s: 8px 8px 20px rgba(0, 0, 0, 0.35);

--br: 10px; /* Border radius, increase for rounder corners, decrease for less */
--url: url('https://i.pinimg.com/564x/03/d1/75/03d1752f9ac875babe939ac6affdce0c.jpg'); /* Image URL */

--top: 30px;
--left: 35px;

--1-top: 15px;
--1-left: 15px;

--2-top: calc(var(--h) * 0.5);
--2-left: calc(100% * 0.6);

--3-top: calc(var(--h) - 20px);
--3-left: calc(var(--1-left) + 20px);][comment]-- Blur --[/comment][border=transparent;
position: absolute;
top: var(--1-top);
left: var(--1-left);
width: calc(100% * 0.28);
height: calc(var(--h) / 1.9);
padding: 0px;
border-radius: calc(2 * var(--br));
background-image: var(--url);
background-size: 190%;
filter: blur(3px);
box-shadow: var(--s);
z-index: 1;][/border][comment]-- Sepia --[/comment][border=transparent;
position: absolute;
top: var(--3-top);
left: var(--3-left);
width: calc(100% * 0.2);
height: calc(var(--h) * 0.35);
padding: 0px;
border-radius: calc(1.5 * var(--br));
background-image: var(--url);
background-size: 220%;
background-position: 0% 80%;
filter: sepia(60%);
box-shadow: var(--s);
z-index: 1;][/border][comment]-- Picture --[/comment][border=transparent;
position: relative;
margin: auto;
max-width: var(--w);
height: var(--h);
padding: 0px;
border-radius: var(--br);
background-image: var(--url);
background-size: cover;
background-position: top center;
box-shadow: var(--s);
z-index: 0;][comment]-- Hue Rotate --[/comment][border=transparent;
position: absolute;
top: var(--2-top);
left: var(--2-left);
width: calc(100% * 0.65);
height: calc(var(--h) * 0.3);
padding: 0px;
border-radius: var(--br);
background-image: var(--url);
background-size: 160%;
background-position: right 48%;
filter: hue-rotate(-50deg);
box-shadow: var(--s);][/border][/border][border=transparent;
padding: 0px;
text-align: center;][font=VT323][b]Art:[/b] Crisalys[/font][/border][/border]

Art: Crisalys
NAME:
Yuyu
GENDER:
None of your business
AGE:
Older than you
HOBBIES:
Surfing the internet
NOTE:
Stop stalking my profile
PERSONA:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum quis lectus ullamcorper convallis. Ut gravida eros at dapibus sagittis. Nam porta cursus purus quis ornare. Donec tincidunt elit elit, et ultrices ante tincidunt sed. Mauris et molestie nibh. Nulla facilisi. Suspendisse eu lectus ut dolor cursus laoreet ac ut ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque id gravida massa. Curabitur sit amet neque a arcu volutpat luctus.
BIO:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum quis lectus ullamcorper convallis. Ut gravida eros at dapibus sagittis. Nam porta cursus purus quis ornare. Donec tincidunt elit elit, et ultrices ante tincidunt sed. Mauris et molestie nibh. Nulla facilisi. Suspendisse eu lectus ut dolor cursus laoreet ac ut ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque id gravida massa. Curabitur sit amet neque a arcu volutpat luctus.
EXTRA:
You just read a bunch of bullshit



Code: 
[comment]-- Font -->[/comment][font=VT323][border=transparent;

/* Probably best if you don't change anything I haven't commented next to */

display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
margin: auto;
max-width: 1100px;
padding: 0px;
cursor: url(https://www.cursor.cc/cursor/304/132/cursor.png), auto; /* Cursor image URL, must be smaller than 128 x 128 or something */

--w: 200px;
--h: 200px;
--s: 8px 8px 20px rgba(0, 0, 0, 0.35);
--br: 10px; /* Border radius, increase for rounder corners, decrease for less */
--url: url('https://i.pinimg.com/564x/03/d1/75/03d1752f9ac875babe939ac6affdce0c.jpg'); /* Image URL */

--top: 20px;
--left: 20px;

--1-top: 12px;
--1-left: 2px;

--2-top: calc(var(--h) * 0.5);
--2-left: calc(100% * 0.6);

--3-top: calc(var(--h) - 20px);
--3-left: 30px;

--t-color: rgb(240, 251, 255); /* Text colour */

--f-padding: 4px;
--f-color: rgba(200, 255, 255, 0.2); /* Field colour */

--l-w: 80px; /* Label width, change if the label gets too long and goes to the next line (or not) */

--line-w: 1px;
--displace: 10px;
--start: calc(100% - (3 * var(--line-w)) - (3 * var(--displace)) - 30px);

/* Accent colours */
--color-1: rgba(86, 204, 204, 0.9); 
--color-2: rgba(252, 219, 136, 0.9);
--color-3: rgba(250, 104, 166, 0.9);
--color-4: rgba(192, 141, 240, 0.9);

--bg-gradient: linear-gradient(147deg, rgba(0, 0, 0, 0) calc(var(--start) + (2 * var(--displace)) + var(--line-w)), var(--color-2) calc(var(--start) + (2 * var(--displace)) + var(--line-w) + 1px) calc(var(--start) + (2 * var(--displace)) + (2 * var(--line-w))), var(--color-3) calc(var(--start) + (2 * var(--displace)) + (2 * var(--line-w)) + 1px)), 
linear-gradient(142deg, rgba(0, 0, 0, 0) calc(var(--start) + var(--displace)), var(--color-2) calc(var(--start) + var(--displace) + 1px) calc(var(--start) + var(--displace) + var(--line-w)), var(--color-3) calc(var(--start) + var(--displace) + var(--line-w) + 1px)), 
linear-gradient(137deg, var(--color-1) var(--start), var(--color-2) calc(var(--start) + 1px) calc(var(--start) + var(--line-w)), var(--color-3) calc(var(--start) + var(--line-w) + 1px));

--bg-gradient-2: linear-gradient(210deg, rgba(0, 0, 0, 0) calc(var(--start) + (2 * var(--displace)) + var(--line-w)), var(--color-2) calc(var(--start) + (2 * var(--displace)) + var(--line-w) + 1px) calc(var(--start) + (2 * var(--displace)) + (2 * var(--line-w))), var(--color-1) calc(var(--start) + (2 * var(--displace)) + (2 * var(--line-w)) + 1px)), 
linear-gradient(215deg, rgba(0, 0, 0, 0) calc(var(--start) + var(--displace)), var(--color-2) calc(var(--start) + var(--displace) + 1px) calc(var(--start) + var(--displace) + var(--line-w)), var(--color-1) calc(var(--start) + var(--displace) + var(--line-w) + 1px)), 
linear-gradient(220deg, var(--color-4) var(--start), var(--color-2) calc(var(--start) + 1px) calc(var(--start) + var(--line-w)), var(--color-1) calc(var(--start) + var(--line-w) + 1px));][comment]

-- Image + Filters --[/comment][border=transparent;
position: relative;
margin: auto;
width: var(--w);
height: var(--h);
padding: calc(var(--1-top) + var(--top)) 30px calc(var(--1-top) + var(--top) + 20px) var(--left)][comment]-- Blur --[/comment][border=transparent;
position: absolute;
top: var(--1-top);
left: var(--1-left);
width: calc(100% * 0.4);
height: calc(var(--h) / 1.9);
padding: 0px;
border-radius: calc(2 * var(--br));
background-image: var(--url);
background-size: 190%;
filter: blur(3px);
box-shadow: var(--s);
z-index: 1;][/border][comment]-- Sepia --[/comment][border=transparent;
position: absolute;
top: var(--3-top);
left: var(--3-left);
width: calc(100% * 0.28);
height: calc(var(--h) * 0.35);
padding: 0px;
border-radius: calc(1.5 * var(--br));
background-image: var(--url);
background-size: 250%;
background-position: 10% 80%;
filter: sepia(60%);
box-shadow: var(--s);
z-index: 1;][/border][comment]-- Image --[/comment][border=transparent;
position: relative;
margin: auto;
width: var(--w);
height: var(--h);
padding: 0px;
border-radius: var(--br);
background-image: var(--url);
background-size: cover;
background-position: top center;
box-shadow: var(--s);
z-index: 0;][comment]-- Hue Rotate --[/comment][border=transparent;
position: absolute;
top: var(--2-top);
left: var(--2-left);
width: calc(100% * 0.55);
height: calc(var(--h) * 0.3);
padding: 0px;
border-radius: var(--br);
background-image: var(--url);
background-size: 190%;
background-position: right 48%;
filter: hue-rotate(-50deg);
box-shadow: var(--s);][/border][/border][border=transparent;
padding: 0px;
text-align: right;][b]Art:[/b] Crisalys[border=transparent;
visibility: hidden;
padding: 0px;]A[/border][/border][/border][comment]

-- Profile --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
margin: 0px 25px 25px 25px;
flex: 3 1 60%;
max-width: 800px;
min-width: var(--w);
min-height: calc(var(--h) - 10px);
padding: 15px;
border-radius: var(--br);
color: var(--t-color);
font-size: 1.3em;
line-height: 100%;
background-image: var(--bg-gradient);
box-shadow: var(--s);][comment]-- Name --[/comment][border=transparent;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0px;][border=transparent;
box-sizing: border-box;
width: var(--l-w);
padding: var(--f-padding) var(--f-padding) var(--f-padding)  0px;][b]NAME:[/b][/border][border=transparent;
padding: var(--f-padding) calc(2 * var(--f-padding)) var(--f-padding)  calc(2 * var(--f-padding));
border-radius: calc(var(--br) / 2);
background-color: var(--f-color);]Yuyu[/border][/border][comment]-- Gender --[/comment][border=transparent;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
margin-top: calc(2 * var(--f-padding));
padding: 0px;][border=transparent;
box-sizing: border-box;
width: var(--l-w);
padding: var(--f-padding) var(--f-padding) var(--f-padding)  0px;][b]GENDER:[/b][/border][border=transparent;
padding: var(--f-padding) calc(2 * var(--f-padding)) var(--f-padding)  calc(2 * var(--f-padding));
border-radius: calc(var(--br) / 2);
background-color: var(--f-color);]None of your business[/border][/border][comment]-- Age --[/comment][border=transparent;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
margin-top: calc(2 * var(--f-padding));
padding: 0px;][border=transparent;
box-sizing: border-box;
width: var(--l-w);
padding: var(--f-padding) var(--f-padding) var(--f-padding)  0px;][b]AGE:[/b][/border][border=transparent;
padding: var(--f-padding) calc(2 * var(--f-padding)) var(--f-padding)  calc(2 * var(--f-padding));
border-radius: calc(var(--br) / 2);
background-color: var(--f-color);]Older than you[/border][/border][comment]-- Hobbies --[/comment][border=transparent;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
margin-top: calc(2 * var(--f-padding));
padding: 0px;][border=transparent;
box-sizing: border-box;
width: var(--l-w);
padding: var(--f-padding) var(--f-padding) var(--f-padding)  0px;][b]HOBBIES:[/b][/border][border=transparent;
padding: var(--f-padding) calc(2 * var(--f-padding)) var(--f-padding)  calc(2 * var(--f-padding));
border-radius: calc(var(--br) / 2);
background-color: var(--f-color);]Surfing the internet[/border][/border][comment]-- Note --[/comment][border=transparent;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
margin-top: calc(2 * var(--f-padding));
padding: 0px;][border=transparent;
box-sizing: border-box;
width: var(--l-w);
padding: var(--f-padding) var(--f-padding) var(--f-padding)  0px;][b]NOTE:[/b][/border][border=transparent;
padding: var(--f-padding) calc(2 * var(--f-padding)) var(--f-padding)  calc(2 * var(--f-padding));
border-radius: calc(var(--br) / 2);
background-color: var(--f-color);]Stop stalking my profile[/border][/border][/border][comment]

-- Info --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
margin: 5px 25px 25px 25px;
flex: 5 1 100%;
max-width: 1200px;
min-width: var(--w);
min-height: calc(var(--h) - 10px);
padding: 15px;
border-radius: var(--br);
color: var(--t-color);
font-size: 1.3em;
line-height: 100%;
background-image: var(--bg-gradient-2);
box-shadow: var(--s);][comment]-- Persona --[/comment][border=transparent;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0px;][border=transparent;
box-sizing: border-box;
width: var(--l-w);
padding: var(--f-padding) var(--f-padding) var(--f-padding)  0px;][b]PERSONA:[/b][/border][border=transparent;
padding: var(--f-padding) calc(2 * var(--f-padding)) var(--f-padding)  calc(2 * var(--f-padding));
border-radius: calc(var(--br) / 2);
background-color: var(--f-color);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum quis lectus ullamcorper convallis. Ut gravida eros at dapibus sagittis. Nam porta cursus purus quis ornare. Donec tincidunt elit elit, et ultrices ante tincidunt sed. Mauris et molestie nibh. Nulla facilisi. Suspendisse eu lectus ut dolor cursus laoreet ac ut ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque id gravida massa. Curabitur sit amet neque a arcu volutpat luctus.[/border][/border][comment]-- Bio --[/comment][border=transparent;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0px;][border=transparent;
box-sizing: border-box;
width: var(--l-w);
padding: var(--f-padding) var(--f-padding) var(--f-padding)  0px;][b]BIO:[/b][/border][border=transparent;
padding: var(--f-padding) calc(2 * var(--f-padding)) var(--f-padding)  calc(2 * var(--f-padding));
border-radius: calc(var(--br) / 2);
background-color: var(--f-color);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum quis lectus ullamcorper convallis. Ut gravida eros at dapibus sagittis. Nam porta cursus purus quis ornare. Donec tincidunt elit elit, et ultrices ante tincidunt sed. Mauris et molestie nibh. Nulla facilisi. Suspendisse eu lectus ut dolor cursus laoreet ac ut ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque id gravida massa. Curabitur sit amet neque a arcu volutpat luctus.[/border][/border][comment]-- Extra --[/comment][border=transparent;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
margin-top: calc(2 * var(--f-padding));
padding: 0px;][border=transparent;
box-sizing: border-box;
width: var(--l-w);
padding: var(--f-padding) var(--f-padding) var(--f-padding)  0px;][b]EXTRA:[/b][/border][border=transparent;
padding: var(--f-padding) calc(2 * var(--f-padding)) var(--f-padding)  calc(2 * var(--f-padding));
border-radius: calc(var(--br) / 2);
background-color: var(--f-color);]You just read a bunch of bullshit[/border][/border][/border]
[/border][/font]
 
Last edited:
Folder
Originally, I wanted to make a letter that unfolded, but I couldn't find an envelope without the top flap and I was too lazy to code it using clip-path or whatever so voila, a folder. I quite like this one.

Accordion
No Scroll


Click Tab
↓
No. 1370
TOP SECRET
Artist: helenpeanut

Code: 
[comment]-- Font -->[/comment][font=Averia Serif Libre][border=transparent;

/* Probably best if you don't change anything I haven't commented next to */

position: relative;
margin: auto;
max-width: 750px;
padding: 0px;
padding-right: 4px;

--tab-l: -5px;
--tab-w: 150px;
--tab-h: 40px;

--folder-tab-t: calc(0px - var(--tab-h) - 22px);
--folder-t: -62px;
--folder-h: 400px;
--folder-h-max: 80vh;
--folder-br: 15px;
--folder-f-c: black; /* Folder text colour */
--folder-c: linear-gradient(152deg, #f2b1a3 51%, #e29a8f 51%); /* Folder background gradient */

--body-t: 0px;
--body-o-p: 20px;
--body-p: 35px;
--body-f-c: black; /* Body text colour */
--body-c: oldlace; /* Paper colour */

--pic: url('https://i.pinimg.com/564x/4b/94/f7/4b94f7feda2644c3d182a3e7da1eefe0.jpg') 25% 8% / 260%; /* Image URL, change percentage after slash if image is sized too big or small in frame (or just default to cover) */
--pic-s: 4px 4px rgba(0, 0, 0, 0.1);][border=transparent;
position: relative;
top: 18px;
padding: 0px;
width: var(--tab-w);
text-align: center;
line-height: 130%;]Click Tab
↓[/border][comment]-- Accordion --[/comment][border=transparent;
visibility: hidden;
box-sizing: border-box;
width: 100%;
padding: 0px;][accordion=100%][comment]-- Tab --[/comment]
{slide=[border=transparent;
visibility: visible;
position: relative;
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: 0px;
border-radius: var(--folder-br) var(--folder-br) 0px 0px;][/border]}[comment]-- Body --[/comment][border=transparent;
visibility: visible;
position: relative;
top: var(--body-t);
margin: auto;
box-sizing: border-box;
width: calc(100% - var(--body-o-p));
padding: var(--body-p);
color: var(--body-f-c);
background: var(--body-c);][border=transparent;
margin: 20px;
width: 180px;
height: 220px;
padding: 0px;
border: 8px solid white;
border-top: 20px solid white;
border-bottom: 20px solid white;
background: var(--pic);
box-shadow: var(--pic-s);
float: right;
transform: rotate(10deg);][/border][b]SURNAME:[/b] DOE
[b]GIVEN NAME:[/b] JOHN
[b]SEX:[/b] MALE
[b]AGE:[/b] 40
[b]BIRTHDATE:[/b] 03/02/1981
[b]BIRTHPLACE:[/b] UNKNOWN

[b]NOTE:[/b] DO NOT APPROACH[/border]{/slide}
[/accordion][/border][comment]-- Folder --[/comment][border=transparent;
position: relative;
top: var(--folder-tab-t);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: 10px;
border-radius: var(--folder-br) var(--folder-br) 0px 0px;
color: var(--folder-f-c);
text-align: center;
background: var(--folder-c);
box-shadow: var(--pic-s);
pointer-events: none;][b]No. 1370[/b][/border][border=transparent;
position: relative;
top: var(--folder-t);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--holder-h-max);
padding: 20%;
border-radius: 0px var(--folder-br) 0px 0px;
color: var(--folder-f-c);
font-size: 1.4em;
text-align: center;
background: var(--folder-c);
box-shadow: var(--pic-s);][b]TOP SECRET[/b][/border][border=transparent;
position: relative;
top: -45px;
padding: 0px;
width: 100%;
font-size: 0.9em;
text-align: right;
line-height: 100%;][b]Artist:[/b] helenpeanut[/border][/border][/font]
 
Last edited:
Folder Tabs
If you have noticed that this code looks like the one above, you are not wrong. When I first came up with the idea of the folder design, it was supposed to be an accordion-tab combination, but suffice to say it didn't work out. Now they're separate templates with very different vibes. This also scrolls if your text overflows.

I'm not too satisfied with this one (it barely even resembles a folder), but my first tab creation was too exact to another's measurements, and I felt like I had to show off at least one tab code, so this one took the fall.

Tabs
Visible Scroll
Hidden Scroll


Click Tabs

  • SURNAME:
    Doe

    GIVEN NAME:
    Jane

    GENDER:
    Female

    AGE:
    22

    BIRTHDATE:
    03/02/1999

    BIRTHPLACE:
    Unknown


    NOTE:
    Do not approach without bubble tea
Art by bobatae


Code: 
[comment][font=Concert One][font=Tauri]:D[/font][/font][/comment][border=transparent;
margin: auto;
max-width: 750px;
padding: 0px;][border=transparent;
position: relative;
padding: 0px 0px 8px 0px;
width: calc(4 * 60px + 5px);
font-family: 'Concert One', sans-serif;
text-align: center;
line-height: 80%;]Click Tabs
[fa]fas fa-sort-down[/fa][/border][/border][border=transparent;

/* Probably best if you don't change anything I haven't commented next to */

position: relative;
left: calc(0px - var(--left));
margin: auto;
margin-top: calc(0px - var(--tab-t));
margin-bottom: min(var(--folder-h-max), var(--folder-h));
max-width: 750px;
padding: 0px;
font-size: 1.05em; /* Label font size, increase or decrease by .01 increments */

--left: 10px;

--tab-t: -3px;
--tab-w: 60px;
--tab-h: 30px;
--tab-br: 10px; /* Border radius, increase for rounder corners, decrease for less */


--folder-t: calc(var(--tab-t) + var(--tab-h));
--folder-h: 400px;
--folder-h-max: 80vh;
--folder-p: 30px;
--folder-f-c: #362f1a; /* Text colour */

--symbol-t: 1px;
--symbol-l: calc(var(--tab-w) / 2);
--symbol-s: 22px;
--symbol-c: white; /* Tab symbol colour */

--label-w: 90px; /* Label width, change if the label gets too long and goes to the next line (or not) */
--label-f: 'Concert One', sans-serif; /* Label font, change font tag above code if you change this */

--field-m: 5px 0px 0px 8px;
--field-p: 6px 8px 4px 8px;
--field-br: 0px 10px 0px 0px;
--field-b: 0px solid rgba(40, 20, 0, 0.5);
--field-f: 'Tauri', sans-serif; /* Field font, change font tag above code if you change this */
--field-f-s: 0.8em; /* Field font size, increase or decrease by .1 increments, dependent on label font size */
--field-c: rgba(255, 255, 255, 0.2); /* Field background colour */

--image-m: 20px;
--image-w: 190px;
--image-h: 230px;
--image-b-1: 8px solid white;
--image-b-2: 22px solid white;
--image-s: 5px 5px rgba(0, 0, 0, 0.15);

/* Folder background gradients */
--c-1: linear-gradient(152deg, rgb(190, 217, 91) 50%, rgb(170, 197, 71) 50%);
--c-2: linear-gradient(152deg, rgb(242, 86, 127) 50%, rgb(222, 66, 107) 50%);
--c-3: linear-gradient(152deg, rgb(83, 181, 168) 50%, rgb(63, 161, 148) 50%);
--c-4: linear-gradient(152deg, rgb(242, 208, 109) 50%, rgb(222, 188, 89) 50%);

/* Image URLs, change percentage after slash if image is sized too big or small in frame (or just default to cover) */
--img-1: url('https://i.pinimg.com/564x/cd/59/13/cd591354799b13123880267dd01a34fc.jpg') 50% 0% / cover;
--img-2: url('https://i.pinimg.com/564x/20/61/12/206112aea38842875ac18cd20257c501.jpg') 50% 0% / 150%;
--img-3: url('https://i.pinimg.com/564x/18/1f/e5/181fe5c4987998c0b5ec6e3671ddf63b.jpg') 50% 0% / 130%;
--img-4: url('https://i.pinimg.com/564x/d7/54/9b/d7549b8db90da9f594fbbd588a807519.jpg') 50% 0% / cover;][comment]-- Tab 1 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: var(--left);
box-sizing: border-box;
width: calc(var(--tab-w) + (var(--left) / 2));
height: var(--tab-h);
padding: 0px;
border-radius: var(--tab-br) var(--tab-br) 0px 0px;
background: var(--c-1);
pointer-events: none;][/border][comment]-- Tab 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-w) + (var(--left) / 2) + var(--left));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: 0px;
border-radius: var(--tab-br) var(--tab-br) 0px 0px;
background: var(--c-2);
pointer-events: none;][/border][comment]-- Tab 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc((2 * var(--tab-w)) + (var(--left) / 2) + var(--left));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: 0px;
border-radius: var(--tab-br) var(--tab-br) 0px 0px;
background: var(--c-3);
pointer-events: none;][/border][comment]-- Tab 4 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc((3 * var(--tab-w)) + (var(--left) / 2) + var(--left));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: 0px;
border-radius: var(--tab-br) var(--tab-br) 0px 0px;
background: var(--c-4);
pointer-events: none;][/border][comment]-- Actual Tabs --[/comment][tabs]

[tab=.][comment]-- Tab Symbols 1 --[/comment][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(var(--symbol-l) + 2px);
padding: 0px;
color: var(--symbol-c);
font-size: var(--symbol-s);
line-height: 100%;
pointer-events: none;][fa]fas fa-info-circle[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(3 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 3px);
line-height: 100%;
pointer-events: none;][fa]fas fa-lock[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(5 * var(--symbol-l) + 6px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-address-book[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(7 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-file-alt[/fa][/border][comment]-- Tab Body 1 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: var(--folder-p);
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-1);
overflow: auto;][comment]-- Image 1 --[/comment][border=transparent;
margin: var(--image-m);
width: var(--image-w);
height: var(--image-h);
padding: 0px;
border: var(--image-b-1);
border-top: var(--image-b-2);
border-bottom: var(--image-b-2);
background: var(--img-1);
box-shadow: var(--image-s);
float: right;
transform: rotate(10deg);][/border][comment]-- Text --[/comment]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]SURNAME:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Doe[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]GIVEN NAME:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Jane[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]GENDER:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Female[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]AGE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]22[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]BIRTHDATE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]03/02/1999[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]BIRTHPLACE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Unknown[/border]

[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]NOTE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Do not approach without bubble tea[/border][/border][/tab]


[tab=.][comment]-- Tab Symbols 2 --[/comment][border=transparent;
position: absolute;
top: calc(var(--symbol-t) + 4px);
left: calc(var(--symbol-l) + 10px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 8px);
line-height: 100%;
pointer-events: none;][fa]fas fa-info[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(3 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 3px);
line-height: 100%;
pointer-events: none;][fa]fas fa-unlock-alt[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(5 * var(--symbol-l) + 6px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-address-book[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(7 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-file-alt[/fa][/border][comment]-- Tab Body 2 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: var(--folder-p);
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-2);
overflow: auto;][comment]-- Image 2 --[/comment][border=transparent;
margin: var(--image-m);
width: var(--image-w);
height: var(--image-h);
padding: 0px;
border: var(--image-b-1);
border-top: var(--image-b-2);
border-bottom: var(--image-b-2);
background: var(--img-2);
box-shadow: var(--image-s);
float: right;
transform: rotate(-10deg);][/border][comment]-- Text --[/comment]PERSONALITY:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Blah blah lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit et augue placerat suscipit. Aenean gravida lacus dui, euismod eleifend tellus maximus sed. Nulla ultricies tincidunt auctor. Mauris fringilla at dui sit amet dapibus. Duis consectetur eros eu nibh accumsan sagittis. Quisque sed mauris non purus eleifend pulvinar vitae ut arcu. Curabitur vitae porttitor mauris. Aliquam erat volutpat. Phasellus in leo augue. Fusce sed vehicula massa. Fusce erat neque, auctor laoreet efficitur sed, sodales a tellus.[/border]
BIOGRAPHY:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Blah blah average life dolor sit amet, consectetur adipiscing elit. Aliquam vel velit et augue placerat suscipit. Aenean gravida lacus dui, euismod eleifend tellus maximus sed. Nulla ultricies tincidunt auctor. Mauris fringilla at dui sit amet dapibus. Duis consectetur eros eu nibh accumsan sagittis. Quisque sed mauris non purus eleifend pulvinar vitae ut arcu. Curabitur vitae porttitor mauris. Aliquam erat volutpat. Phasellus in leo augue. Fusce sed vehicula massa. Fusce erat neque, auctor laoreet efficitur sed, sodales a tellus. Nunc lectus diam, dignissim sit amet pellentesque placerat, gravida vitae risus. Aliquam gravida commodo ex vitae lacinia. Donec et quam lectus. Sed ut convallis mauris, aliquet tristique tellus.[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]NOTE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]There is no concrete evidence of her accepted past[/border][/border][/tab]


[tab=.][comment]-- Tab Symbols 3 --[/comment][border=transparent;
position: absolute;
top: calc(var(--symbol-t) + 4px);
left: calc(var(--symbol-l) + 10px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 8px);
line-height: 100%;
pointer-events: none;][fa]fas fa-info[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(3 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 3px);
line-height: 100%;
pointer-events: none;][fa]fas fa-lock[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(5 * var(--symbol-l) + 6px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]fas fa-address-book[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(7 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-file-alt[/fa][/border][comment]-- Tab Body 3 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: var(--folder-p);
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-3);
overflow: auto;][comment]-- Image 3 --[/comment][border=transparent;
margin: var(--image-m);
width: var(--image-w);
height: var(--image-h);
padding: 0px;
border: var(--image-b-1);
border-top: var(--image-b-2);
border-bottom: var(--image-b-2);
background: var(--img-3);
box-shadow: var(--image-s);
float: right;
transform: rotate(10deg);][/border][comment]-- Text --[/comment]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]PARENTS:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]John Doe, Jessica Doe[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]SIBLINGS:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Joe Doe[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]PARTNER:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]N/A[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]FRIENDS:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Lulu Ly, Carell Kirishima[/border]

[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]NOTE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Her friends are strangely tight-lipped about her[/border][/border][/tab]


[tab=.][comment]-- Tab Symbols 4 --[/comment][border=transparent;
position: absolute;
top: calc(var(--symbol-t) + 4px);
left: calc(var(--symbol-l) + 10px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 8px);
line-height: 100%;
pointer-events: none;][fa]fas fa-info[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(3 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 3px);
line-height: 100%;
pointer-events: none;][fa]fas fa-lock[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(5 * var(--symbol-l) + 6px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-address-book[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(7 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]fas fa-file-alt[/fa][/border][comment]-- Tab Body 4 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: var(--folder-p);
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-4);
overflow: auto;][comment]-- Image 4 --[/comment][border=transparent;
margin: var(--image-m);
width: var(--image-w);
height: var(--image-h);
padding: 0px;
border: var(--image-b-1);
border-top: var(--image-b-2);
border-bottom: var(--image-b-2);
background: var(--img-4);
box-shadow: var(--image-s);
float: right;
transform: rotate(-10deg);][/border][comment]-- Text --[/comment]LIKES:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]This, that, do be polite[/border]
DISLIKES:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]This, that, don't be dumb[/border]
HOBBIES:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Blah blah, tennis, roller skating[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]NOTE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);] Money seems to be her greatest motivator[/border][/border][/tab]


[/tabs][/border][border=transparent;
position: relative;
top: -35px;
margin: auto;
max-width: 750px;
padding: 0px;
font-family: 'Concert One', sans-serif;
font-size: 0.9em;
text-align: right;]Art by bobatae[/border]

Click Tabs

  • SURNAME:
    Doe

    GIVEN NAME:
    Jane

    GENDER:
    Female

    AGE:
    22

    BIRTHDATE:
    03/02/1999

    BIRTHPLACE:
    Unknown


    NOTE:
    Do not approach without bubble tea
Art by bobatae


Code: 
[comment][font=Concert One][font=Tauri]:D[/font][/font][/comment][border=transparent;
margin: auto;
max-width: 750px;
padding: 0px;][border=transparent;
position: relative;
padding: 0px 0px 8px 0px;
width: calc(4 * 60px + 5px);
font-family: 'Concert One', sans-serif;
text-align: center;
line-height: 80%;]Click Tabs
[fa]fas fa-sort-down[/fa][/border][/border][border=transparent;

/* Probably best if you don't change anything I haven't commented next to */

position: relative;
left: calc(0px - var(--left));
margin: auto;
margin-top: calc(0px - var(--tab-t));
margin-bottom: min(var(--folder-h-max), var(--folder-h));
max-width: 750px;
padding: 0px;
font-size: 1.05em; /* Label font size, increase or decrease by .01 increments */

--left: 10px;

--tab-t: -3px;
--tab-w: 60px;
--tab-h: 30px;
--tab-br: 10px; /* Border radius, increase for rounder corners, decrease for less */


--folder-t: calc(var(--tab-t) + var(--tab-h));
--folder-h: 400px;
--folder-h-max: 80vh;
--folder-p: 30px;
--folder-f-c: #362f1a; /* Text colour */

--symbol-t: 1px;
--symbol-l: calc(var(--tab-w) / 2);
--symbol-s: 22px;
--symbol-c: white; /* Tab symbol colour */

--label-w: 90px; /* Label width, change if the label gets too long and goes to the next line (or not) */
--label-f: 'Concert One', sans-serif; /* Label font, change font tag above code if you change this */

--field-m: 5px 0px 0px 8px;
--field-p: 6px 8px 4px 8px;
--field-br: 0px 10px 0px 0px;
--field-b: 0px solid rgba(40, 20, 0, 0.5);
--field-f: 'Tauri', sans-serif; /* Field font, change font tag above code if you change this */
--field-f-s: 0.8em; /* Field font size, increase or decrease by .1 increments, dependent on label font size */
--field-c: rgba(255, 255, 255, 0.2); /* Field background colour */

--image-m: 20px;
--image-w: 190px;
--image-h: 230px;
--image-b-1: 8px solid white;
--image-b-2: 22px solid white;
--image-s: 5px 5px rgba(0, 0, 0, 0.15);

/* Folder background gradients */
--c-1: linear-gradient(152deg, rgb(190, 217, 91) 50%, rgb(170, 197, 71) 50%);
--c-2: linear-gradient(152deg, rgb(242, 86, 127) 50%, rgb(222, 66, 107) 50%);
--c-3: linear-gradient(152deg, rgb(83, 181, 168) 50%, rgb(63, 161, 148) 50%);
--c-4: linear-gradient(152deg, rgb(242, 208, 109) 50%, rgb(222, 188, 89) 50%);

/* Image URLs, change percentage after slash if image is sized too big or small in frame (or just default to cover) */
--img-1: url('https://i.pinimg.com/564x/cd/59/13/cd591354799b13123880267dd01a34fc.jpg') 50% 0% / cover;
--img-2: url('https://i.pinimg.com/564x/20/61/12/206112aea38842875ac18cd20257c501.jpg') 50% 0% / 150%;
--img-3: url('https://i.pinimg.com/564x/18/1f/e5/181fe5c4987998c0b5ec6e3671ddf63b.jpg') 50% 0% / 130%;
--img-4: url('https://i.pinimg.com/564x/d7/54/9b/d7549b8db90da9f594fbbd588a807519.jpg') 50% 0% / cover;][comment]-- Tab 1 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: var(--left);
box-sizing: border-box;
width: calc(var(--tab-w) + (var(--left) / 2));
height: var(--tab-h);
padding: 0px;
border-radius: var(--tab-br) var(--tab-br) 0px 0px;
background: var(--c-1);
pointer-events: none;][/border][comment]-- Tab 2 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-w) + (var(--left) / 2) + var(--left));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: 0px;
border-radius: var(--tab-br) var(--tab-br) 0px 0px;
background: var(--c-2);
pointer-events: none;][/border][comment]-- Tab 3 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc((2 * var(--tab-w)) + (var(--left) / 2) + var(--left));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: 0px;
border-radius: var(--tab-br) var(--tab-br) 0px 0px;
background: var(--c-3);
pointer-events: none;][/border][comment]-- Tab 4 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc((3 * var(--tab-w)) + (var(--left) / 2) + var(--left));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: 0px;
border-radius: var(--tab-br) var(--tab-br) 0px 0px;
background: var(--c-4);
pointer-events: none;][/border][comment]-- Actual Tabs --[/comment][tabs]

[tab=.][comment]-- Tab Symbols 1 --[/comment][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(var(--symbol-l) + 2px);
padding: 0px;
color: var(--symbol-c);
font-size: var(--symbol-s);
line-height: 100%;
pointer-events: none;][fa]fas fa-info-circle[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(3 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 3px);
line-height: 100%;
pointer-events: none;][fa]fas fa-lock[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(5 * var(--symbol-l) + 6px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-address-book[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(7 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-file-alt[/fa][/border][comment]-- Tab Body 1 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: 0px;
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-1);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: var(--folder-p) calc(30px + var(--folder-p)) var(--folder-p) var(--folder-p);
overflow: auto;][comment]-- Image 1 --[/comment][border=transparent;
margin: var(--image-m);
width: var(--image-w);
height: var(--image-h);
padding: 0px;
border: var(--image-b-1);
border-top: var(--image-b-2);
border-bottom: var(--image-b-2);
background: var(--img-1);
box-shadow: var(--image-s);
float: right;
transform: rotate(10deg);][/border][comment]-- Text --[/comment]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]SURNAME:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]Doe[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]GIVEN NAME:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]Jane[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]GENDER:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]Female[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]AGE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]22[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]BIRTHDATE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]03/02/1999[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]BIRTHPLACE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]Unknown[/border]

[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]NOTE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]Do not approach without bubble tea[/border][/border][/border][/tab]


[tab=.][comment]-- Tab Symbols 2 --[/comment][border=transparent;
position: absolute;
top: calc(var(--symbol-t) + 4px);
left: calc(var(--symbol-l) + 10px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 8px);
line-height: 100%;
pointer-events: none;][fa]fas fa-info[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(3 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 3px);
line-height: 100%;
pointer-events: none;][fa]fas fa-unlock-alt[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(5 * var(--symbol-l) + 6px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-address-book[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(7 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-file-alt[/fa][/border][comment]-- Tab Body 2 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: 0px;
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-2);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: var(--folder-p) calc(30px + var(--folder-p)) var(--folder-p) var(--folder-p);
overflow: auto;][comment]-- Image 2 --[/comment][border=transparent;
margin: var(--image-m);
width: var(--image-w);
height: var(--image-h);
padding: 0px;
border: var(--image-b-1);
border-top: var(--image-b-2);
border-bottom: var(--image-b-2);
background: var(--img-2);
box-shadow: var(--image-s);
float: right;
transform: rotate(-10deg);][/border][comment]-- Text --[/comment]PERSONALITY:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Blah blah lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit et augue placerat suscipit. Aenean gravida lacus dui, euismod eleifend tellus maximus sed. Nulla ultricies tincidunt auctor. Mauris fringilla at dui sit amet dapibus. Duis consectetur eros eu nibh accumsan sagittis. Quisque sed mauris non purus eleifend pulvinar vitae ut arcu. Curabitur vitae porttitor mauris. Aliquam erat volutpat. Phasellus in leo augue. Fusce sed vehicula massa. Fusce erat neque, auctor laoreet efficitur sed, sodales a tellus.[/border]
BIOGRAPHY:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Blah blah average life dolor sit amet, consectetur adipiscing elit. Aliquam vel velit et augue placerat suscipit. Aenean gravida lacus dui, euismod eleifend tellus maximus sed. Nulla ultricies tincidunt auctor. Mauris fringilla at dui sit amet dapibus. Duis consectetur eros eu nibh accumsan sagittis. Quisque sed mauris non purus eleifend pulvinar vitae ut arcu. Curabitur vitae porttitor mauris. Aliquam erat volutpat. Phasellus in leo augue. Fusce sed vehicula massa. Fusce erat neque, auctor laoreet efficitur sed, sodales a tellus. Nunc lectus diam, dignissim sit amet pellentesque placerat, gravida vitae risus. Aliquam gravida commodo ex vitae lacinia. Donec et quam lectus. Sed ut convallis mauris, aliquet tristique tellus.[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]NOTE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]There is no concrete evidence of her accepted past[/border][/border][/border][/tab]


[tab=.][comment]-- Tab Symbols 3 --[/comment][border=transparent;
position: absolute;
top: calc(var(--symbol-t) + 4px);
left: calc(var(--symbol-l) + 10px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 8px);
line-height: 100%;
pointer-events: none;][fa]fas fa-info[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(3 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 3px);
line-height: 100%;
pointer-events: none;][fa]fas fa-lock[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(5 * var(--symbol-l) + 6px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]fas fa-address-book[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(7 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-file-alt[/fa][/border][comment]-- Tab Body 3 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: 0px;
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-3);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: var(--folder-p) calc(30px + var(--folder-p)) var(--folder-p) var(--folder-p);
overflow: auto;][comment]-- Image 3 --[/comment][border=transparent;
margin: var(--image-m);
width: var(--image-w);
height: var(--image-h);
padding: 0px;
border: var(--image-b-1);
border-top: var(--image-b-2);
border-bottom: var(--image-b-2);
background: var(--img-3);
box-shadow: var(--image-s);
float: right;
transform: rotate(10deg);][/border][comment]-- Text --[/comment]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]PARENTS:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]John Doe, Jessica Doe[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]SIBLINGS:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]Joe Doe[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]PARTNER:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]N/A[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]FRIENDS:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]Lulu Ly, Carell Kirishima[/border]

[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]NOTE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]Her friends are strangely tight-lipped about her[/border][/border][/border][/tab]


[tab=.][comment]-- Tab Symbols 4 --[/comment][border=transparent;
position: absolute;
top: calc(var(--symbol-t) + 4px);
left: calc(var(--symbol-l) + 10px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 8px);
line-height: 100%;
pointer-events: none;][fa]fas fa-info[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(3 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 3px);
line-height: 100%;
pointer-events: none;][fa]fas fa-lock[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(5 * var(--symbol-l) + 6px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]far fa-address-book[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(7 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 1px);
line-height: 100%;
pointer-events: none;][fa]fas fa-file-alt[/fa][/border][comment]-- Tab Body 4 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: 0px;
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-4);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: var(--folder-p) calc(30px + var(--folder-p)) var(--folder-p) var(--folder-p);
overflow: auto;][comment]-- Image 4 --[/comment][border=transparent;
margin: var(--image-m);
width: var(--image-w);
height: var(--image-h);
padding: 0px;
border: var(--image-b-1);
border-top: var(--image-b-2);
border-bottom: var(--image-b-2);
background: var(--img-4);
box-shadow: var(--image-s);
float: right;
transform: rotate(-10deg);][/border][comment]-- Text --[/comment]LIKES:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]This, that, do be polite[/border]
DISLIKES:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]This, that, don't be dumb[/border]
HOBBIES:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Blah blah, tennis, roller skating[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]NOTE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);] Money seems to be her greatest motivator[/border][/border][/border][/tab]


[/tabs][/border][border=transparent;
position: relative;
top: -35px;
margin: auto;
max-width: 750px;
padding: 0px;
font-family: 'Concert One', sans-serif;
font-size: 0.9em;
text-align: right;]Art by bobatae[/border]
 
Last edited:
Sushimunch
It's a sushi code. And there's tabs. That's it, that's all.

If you want this to be mobile friendly, it's probably best to keep your message short. I didn't add scroll to this one because I only remembered it existed after I'd coded everything else, and then it made Pusheen and the chopsticks wonk, and lazy as I was, I gave up and called it a day. Besides, I made this for fun, not for actual use smh. Utility? What's that? Don't know her.

Edit: Plz forgive me, I was sleep deprived when I posted this. I've added auto scrolling, so make your message as long as you like.

😌 If you think it reminds you of a certain username floating above this, you may be right. Pilgrim59 Pilgrim59

Tabs
Hidden Scroll


Click Sushi!


  • Name: Sushimunch
    Favourite Food: Sushi
    Hobby: Munching sushi

    Message: Munching sushi is an art form of the highest degree. You are still green, young one.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis dui dui. Ut ipsum mi, gravida eget velit a, commodo bibendum libero. Ut placerat ante sed elit fermentum, id egestas neque laoreet. Praesent gravida vestibulum lorem, laoreet accumsan ante mollis vestibulum. Nam eu congue ipsum, vitae rutrum est. Fusce auctor enim nec justo sollicitudin ornare. Fusce ultrices tincidunt elit.

    Praesent gravida vestibulum lorem, laoreet accumsan ante mollis vestibulum. Nam eu congue ipsum, vitae rutrum est. Fusce auctor enim nec justo sollicitudin ornare. Fusce ultrices tincidunt elit. Praesent convallis dui dui. Ut ipsum mi, gravida eget velit a, commodo bibendum libero. Ut placerat ante sed elit fermentum, id egestas neque laoreet.




Code: 
[comment]-- Font -->[/comment][font=Didact Gothic][border=transparent;
position: relative;
margin: auto;
max-width: 775px;
padding: 0px;][border=transparent;
visibility: hidden;
display: inline-block;
padding: 0px;]A[/border]Click Sushi![/border][border=transparent;

/* Break code, break code! */

position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
margin: auto;
margin-top: calc(0px - var(--chop-t));
margin-bottom: 2vh;
box-sizing: border-box;
max-width: 775px;
height: var(--h);
padding: 0px;
border-radius: var(--br);
border: var(--b);
background: var(--board);
box-shadow: 5px 5px rgba(255, 250, 250, 0.7);

--color: #673d2f; /* Border and text colour */

--h: max(370px, 55vh);
--br: 10px;
--b: 2px solid var(--color);
--board: linear-gradient(rgba(255, 255, 250, 0.2), rgba(255, 255, 250, 0.2)), radial-gradient(circle at top right, rgba(0, 0, 0, 0) calc(100% - 115px), rgba(205,144, 76, 0.2) calc(100% - 115px)), url('https://static.vecteezy.com/system/resources/previews/000/360/749/non_2x/wood-texture-vector.jpg') 50% 50% / cover;

--tabs-w: 100px;

--sushi-t: calc((var(--h) / 2) - 125px);
--sushi-d: 49px;
--sushi-l: 28px;
--sushi-s: 54px;
--sushi-bg: url('https://images.vexels.com/media/users/3/230800/isolated/preview/6fae7b492e567aae76ab5220a894087c-cute-sushi-cartoon.png') 50% 50% / 110%, linear-gradient(to bottom, rgb(255, 255, 255, 0) 22%, #af9187 22% 70%, rgb(255, 255, 255, 0) 70%);
--sushi-f: blur(1px);

--dish-t: calc((var(--h) / 2) + 83px);
--dish-l: 17px;
--dish-s: 70px;
--dish-bg: radial-gradient(circle at top right, rgb(238, 83, 79) 65%, rgb(228, 73, 69) 65%);  /* Dish gradient */
--dish-sh: -3px 3px rgba(0, 0, 0, 0.1);

--dish-d-s: 48%;
--dish-c-bg: radial-gradient(circle at top right, rgb(202, 65, 62) 70%, rgb(182, 45, 42) 70%); /* Dish circle gradient */

--chop-t: -1vh;
--chop-l: calc(100% - var(--chop-s) + var(--body-e) + 6.2vh);
--chop-s: 32vh;
--chop-bg: url('http://icons.iconarchive.com/icons/google/noto-emoji-food-drink/1024/32444-chopsticks-icon.png') 50% 50% / 100%;
--chop-c: polygon(0 0, 100% 0, 100% 26%, 26% 100%, 0 100%);
--chop-tr: scaleX(-1) rotate(-35deg);

--sticker-t: calc(max(370px, 55vh) - (var(--sticker-s) / 1.15));
--sticker-l: calc(100% - var(--sticker-s));
--sticker-s: 20vh;

/* Pusheen image URLs */
--sticker-1: url('https://cdn130.picsart.com/256429381027212.png?r1024x1024') no-repeat 50% 50% / 100%;
--sticker-2: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F5d%2F34%2Fff%2F5d34ff495c8b919ce281461ddda10c1b.png&f=1&nofb=1') no-repeat 50% 50% / 80%;
--sticker-3: url('https://cdn.custom-cursor.com/packs/2582/pusheen-and-fish-cursor-pack.png') no-repeat 95% 50% / cover;
--sticker-4: url('https://cdn131.picsart.com/287157513004211.png') no-repeat 50% 50% / 75%;

--body-t: calc((var(--h) - var(--body-h)) / 2);
--body-h: calc(var(--h) - var(--body-e));
--body-e: 5vh;
--body-p: 20px;
--body-f-c: var(--color);
--body-f-s: 1em; /* Font size, increase or decrease by .1 increments */
--body-bg: rgba(250, 250, 240, 0.4);]

[border=transparent;
box-sizing: border-box;
width: var(--tabs-w);
line-height: 3.5;][comment]-- Dish --[/comment][border=transparent;
position: absolute;
top: var(--dish-t);
left: var(--dish-l);
width: var(--dish-s);
height: var(--dish-s);
padding: 0px;
border-radius: var(--br);
border: var(--b);
background: var(--dish-bg);
box-shadow: var(--dish-sh);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
flex: 0 0 var(--dish-d-s);
height: var(--dish-d-s);
padding: 0px;
border-radius: 50%;
border: var(--b);
background: var(--dish-c-bg);][/border][/border][comment]-- Actual Tabs --[/comment][tabs]

[comment]-- Tab 1 --[/comment]
[tab=.][comment]-- Sushi Tabs --[/comment][border=transparent;
position: absolute;
top: var(--sushi-t);
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + var(--sushi-d));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (2 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (3 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent;
position: absolute;
top: var(--chop-t);
left: var(--chop-l);
width: var(--chop-s);
height: var(--chop-s);
float: right;
padding: 0px;
background: var(--chop-bg);
-webkit-clip-path: var(--chop-c);
clip-path: var(--chop-c);
-webkit-transform: var(--chop-tr);
transform: var(--chop-tr);
z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent;
position: absolute;
top: var(--sticker-t);
left: var(--sticker-l);
width: var(--sticker-s);
height: var(--sticker-s);
padding: 0px;
background: var(--sticker-1);
z-index: 2;][/border][comment]-- Body --[/comment][border=transparent;
position: absolute;
top: var(--body-t);
left: var(--tabs-w);
box-sizing: border-box;
width: calc(100% - var(--tabs-w) - var(--body-t));
height: var(--body-h);
border-radius: var(--br);
border: var(--b);
padding: 0px;
background: var(--body-bg);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--body-p);
color: var(--color);
font-size: var(--body-f-s);
line-height: 130%;][b]Name:[/b] Sushimunch
[b]Favourite Food:[/b] Sushi
[b]Hobby:[/b] Munching sushi

[b]Message:[/b] Munching sushi is an art form of the highest degree. You are still green, young one.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis dui dui. Ut ipsum mi, gravida eget velit a, commodo bibendum libero. Ut placerat ante sed elit fermentum, id egestas neque laoreet. Praesent gravida vestibulum lorem, laoreet accumsan ante mollis vestibulum. Nam eu congue ipsum, vitae rutrum est. Fusce auctor enim nec justo sollicitudin ornare. Fusce ultrices tincidunt elit.

Praesent gravida vestibulum lorem, laoreet accumsan ante mollis vestibulum. Nam eu congue ipsum, vitae rutrum est. Fusce auctor enim nec justo sollicitudin ornare. Fusce ultrices tincidunt elit. Praesent convallis dui dui. Ut ipsum mi, gravida eget velit a, commodo bibendum libero. Ut placerat ante sed elit fermentum, id egestas neque laoreet.[comment]-- Spacing --[/comment][border=transparent;
box-sizing: border-box;
height: calc(var(--sticker-s) - var(--body-p) - var(--body-e));
padding: 0px;][/border][/border][/border][/border][/tab]

[comment]-- Tab 2 --[/comment]
[tab=.][comment]-- Sushi Tabs --[/comment][border=transparent;
position: absolute;
top: var(--sushi-t);
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + var(--sushi-d));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (2 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (3 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent;
position: absolute;
top: var(--chop-t);
left: var(--chop-l);
width: var(--chop-s);
height: var(--chop-s);
float: right;
padding: 0px;
background: var(--chop-bg);
-webkit-clip-path: var(--chop-c);
clip-path: var(--chop-c);
-webkit-transform: var(--chop-tr);
transform: var(--chop-tr);
z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent;
position: absolute;
top: var(--sticker-t);
left: var(--sticker-l);
width: var(--sticker-s);
height: var(--sticker-s);
padding: 0px;
background: var(--sticker-2);
z-index: 2;][/border][comment]-- Body --[/comment][border=transparent;
position: absolute;
top: var(--body-t);
left: var(--tabs-w);
box-sizing: border-box;
width: calc(100% - var(--tabs-w) - var(--body-t));
height: var(--body-h);
border-radius: var(--br);
border: var(--b);
padding: 0px;
background: var(--body-bg);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--body-p);
color: var(--color);
font-size: var(--body-f-s);
line-height: 130%;]Sushimunch munch[comment]-- Spacing --[/comment][border=transparent;
box-sizing: border-box;
height: calc(var(--sticker-s) - var(--body-p) - var(--body-e));
padding: 0px;][/border][/border][/border][/border][/tab]

[comment]-- Tab 3 --[/comment]
[tab=.][comment]-- Sushi Tabs --[/comment][border=transparent;
position: absolute;
top: var(--sushi-t);
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + var(--sushi-d));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (2 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (3 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent;
position: absolute;
top: var(--chop-t);
left: var(--chop-l);
width: var(--chop-s);
height: var(--chop-s);
float: right;
padding: 0px;
background: var(--chop-bg);
-webkit-clip-path: var(--chop-c);
clip-path: var(--chop-c);
-webkit-transform: var(--chop-tr);
transform: var(--chop-tr);
z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent;
position: absolute;
top: var(--sticker-t);
left: var(--sticker-l);
width: var(--sticker-s);
height: var(--sticker-s);
padding: 0px;
background: var(--sticker-3);
z-index: 2;][/border][comment]-- Body --[/comment][border=transparent;
position: absolute;
top: var(--body-t);
left: var(--tabs-w);
box-sizing: border-box;
width: calc(100% - var(--tabs-w) - var(--body-t));
height: var(--body-h);
border-radius: var(--br);
border: var(--b);
padding: 0px;
background: var(--body-bg);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--body-p);
color: var(--color);
font-size: var(--body-f-s);
line-height: 130%;]Sushimunch munch munch[comment]-- Spacing --[/comment][border=transparent;
box-sizing: border-box;
height: calc(var(--sticker-s) - var(--body-p) - var(--body-e));
padding: 0px;][/border][/border][/border][/border][/tab]

[comment]-- Tab 4 --[/comment]
[tab=.][comment]-- Sushi Tabs --[/comment][border=transparent;
position: absolute;
top: var(--sushi-t);
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + var(--sushi-d));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (2 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (3 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent;
position: absolute;
top: var(--chop-t);
left: var(--chop-l);
width: var(--chop-s);
height: var(--chop-s);
float: right;
padding: 0px;
background: var(--chop-bg);
-webkit-clip-path: var(--chop-c);
clip-path: var(--chop-c);
-webkit-transform: var(--chop-tr);
transform: var(--chop-tr);
z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent;
position: absolute;
top: var(--sticker-t);
left: var(--sticker-l);
width: var(--sticker-s);
height: var(--sticker-s);
padding: 0px;
background: var(--sticker-4);
z-index: 2;][/border][comment]-- Body --[/comment][border=transparent;
position: absolute;
top: var(--body-t);
left: var(--tabs-w);
box-sizing: border-box;
width: calc(100% - var(--tabs-w) - var(--body-t));
height: var(--body-h);
border-radius: var(--br);
border: var(--b);
padding: 0px;
background: var(--body-bg);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--body-p);
color: var(--color);
font-size: var(--body-f-s);
line-height: 130%;]Sushimunch munch munch munch[comment]-- Spacing --[/comment][border=transparent;
box-sizing: border-box;
height: calc(var(--sticker-s) - var(--body-p) - var(--body-e));
padding: 0px;][/border][/border][/border][/border][/tab]

[/tabs][/border]

[/border][/font]
 
Last edited:
Potion Trouble
Potion-cauldron-witch-esque tab code with the addition of a terrible poem from yours truly.

Just like the code above, it's too specific to be used in practice. Also way tiny.

Tabs
Hidden Scroll


Click Potions







  • One for the witches






Code: 
[comment]-- Font -->[/comment][font=Poppins][border=transparent;
padding: 0px;
font-size: 0.9em;
text-align: center;
line-height: 3;]Click Potions[/border][border=transparent;

/* Probably best if you don't change anything I haven't commented next to */

position: relative;
margin: auto;
margin-top: calc(0px - var(--potion-t));
margin-bottom: var(--cauld-h);
max-width: var(--cauld-h);
padding: 0px;

display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;

--tabs-w: 260px;

--shelf-t: 0px;
--shelf-l: calc(50% - (var(--shelf-w) / 2));
--shelf-w: 260px;
--shelf-h: calc(var(--cauld-t) + var(--cauld-h) - 3.5vh);
--shelf-c: linear-gradient(rgba(211, 149, 114, 1) 70%, rgba(191, 129, 94, 1)); /* Shelf back gradient */

--shelf-u-t: 28px;
--shelf-u-l: calc(0px - (var(--shelf-u-displace) / 2));
--shelf-u-displace: 20px; /* Length that shelf ledge sticks out */
--shelf-u-w: calc(100% + var(--shelf-u-displace));
--shelf-u-h: 18px; /* Shelf ledge height */
--shelf-u-br: 6px;
--shelf-u-c: rgba(181, 109, 74, 1); /* Shelf ledge colour */
--shelf-u-s: 0px 6px rgba(10, 0, 0, 0.15); /* Shelf ledge shadow */

--potion-t: calc(0px - (var(--potion-s) / 2) + 2px);
--potion-l: calc(50% - 116px);
--potion-s: 60px;
--potion-img: url('http://icons.iconarchive.com/icons/chanut/role-playing/1024/Potion-icon.png') no-repeat 50% 50% / contain; /* Potion image URL */

--cauld-t: 40px;
--cauld-w: 100%;
--cauld-h: 50vh;
--cauld-img: url('https://cdn-icons-png.flaticon.com/512/1232/1232036.png') no-repeat 50% 50% / contain; /* Cauldron image URL */
/* <a href="https://www.flaticon.com/free-icons/cauldron" title="cauldron icons">Cauldron icons created by Chanut-is-Industries - Flaticon</a> */

--text-t: 6.5vh;
--text-w: 70%;
--text-h: 20vh;
--text-p: 15px; /* Text padding */
--text-br: 60px; /* Text border radius, increase for rounder corners, decrease for less */
--text-f-c: white; /* Text colour */
--text-c: rgba(0, 0, 0, 0.1); /* Text background colour */]

[comment]-- Tabs --[/comment]
[border=transparent;
min-width: var(--tabs-w);
padding: 0px;][comment]-- Shelf --[/comment][border=transparent;
position: absolute;
top: var(--shelf-t);
left: var(--shelf-l);
width: var(--shelf-w);
height: var(--shelf-h);
padding: 0px;
border-radius: var(--shelf-u-br);
background: var(--shelf-c);
pointer-events: none;][border=transparent;
position: relative;
top: var(--shelf-u-t);
left: var(--shelf-u-l);
width: var(--shelf-u-w);
height: var(--shelf-u-h);
padding: 0px;
border-radius: var(--shelf-u-br);
background: var(--shelf-u-c);
box-shadow: var(--shelf-u-s);][/border][/border][comment]-- Actual Tabs --[/comment][tabs]

[comment]-- Tab 1 --[/comment]
[tab=.][comment]-- Potions --[/comment][border=transparent;
position: absolute;
top: calc(var(--potion-t) + 11px);
left: var(--potion-l);
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-20deg);
transform: rotate(111deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + var(--potion-s));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(40deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + (2 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(160deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + (3 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-120deg);
pointer-events: none;][/border][comment]-- Cauldron --[/comment][border=transparent;
position: absolute;
top: var(--cauld-t);
left: 0px;
width: var(--cauld-w);
height: var(--cauld-h);
padding: 0px;
background: var(--cauld-img);
filter: hue-rotate(210deg);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]

[comment]-- Text --[/comment]
[border=transparent;
position: relative;
top: var(--text-t);
box-sizing: border-box;
width: var(--text-w);
height: var(--text-h);
padding: var(--text-p);
border-radius: var(--text-br);
color: var(--text-f-c);
line-height: 130%;
text-align: center;
background: var(--text-c);
overflow: auto;]
One for the witches[/border]

[/border][/tab]

[comment]-- Tab 2 --[/comment]
[tab=.][comment]-- Potions --[/comment][border=transparent;
position: absolute;
top: var(--potion-t);
left: var(--potion-l);
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-20deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--potion-t) + 11px);
left: calc(var(--potion-l) + var(--potion-s));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(40deg);
transform: rotate(111deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + (2 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(160deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + (3 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-120deg);
pointer-events: none;][/border][comment]-- Cauldron --[/comment][border=transparent;
position: absolute;
top: var(--cauld-t);
left: 0px;
width: var(--cauld-w);
height: var(--cauld-h);
padding: 0px;
background: var(--cauld-img);
filter: hue-rotate(275deg);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]

[comment]-- Text --[/comment]
[border=transparent;
position: relative;
top: var(--text-t);
box-sizing: border-box;
width: var(--text-w);
height: var(--text-h);
padding: var(--text-p);
border-radius: var(--text-br);
color: var(--text-f-c);
line-height: 130%;
text-align: center;
background: var(--text-c);
overflow: auto;]
Two for the ditches[/border]

[/border][/tab]

[comment]-- Tab 3 --[/comment]
[tab=.][comment]-- Potions --[/comment][border=transparent;
position: absolute;
top: var(--potion-t);
left: var(--potion-l);
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-20deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + var(--potion-s));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(40deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--potion-t) + 11px);
left: calc(var(--potion-l) + (2 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(160deg);
transform: rotate(111deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + (3 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-120deg);
pointer-events: none;][/border][comment]-- Cauldron --[/comment][border=transparent;
position: absolute;
top: var(--cauld-t);
left: 0px;
width: var(--cauld-w);
height: var(--cauld-h);
padding: 0px;
background: var(--cauld-img);
filter: hue-rotate(10deg);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]

[comment]-- Text --[/comment]
[border=transparent;
position: relative;
top: var(--text-t);
box-sizing: border-box;
width: var(--text-w);
height: var(--text-h);
padding: var(--text-p);
border-radius: var(--text-br);
color: var(--text-f-c);
line-height: 130%;
text-align: center;
background: var(--text-c);
overflow: auto;]
Three for the dirty little snitches[/border]

[/border][/tab]

[comment]-- Tab 4 --[/comment]
[tab=.][comment]-- Potions --[/comment][border=transparent;
position: absolute;
top: var(--potion-t);
left: var(--potion-l);
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-20deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + var(--potion-s));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(40deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + (2 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(160deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--potion-t) + 11px);
left: calc(var(--potion-l) + (3 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-120deg);
transform: rotate(111deg);
pointer-events: none;][/border][comment]-- Cauldron --[/comment][border=transparent;
position: absolute;
top: var(--cauld-t);
left: 0px;
width: var(--cauld-w);
height: var(--cauld-h);
padding: 0px;
background: var(--cauld-img);
filter: hue-rotate(130deg);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]

[comment]-- Text --[/comment]
[border=transparent;
position: relative;
top: var(--text-t);
box-sizing: border-box;
width: var(--text-w);
height: var(--text-h);
padding: var(--text-p);
border-radius: var(--text-br);
color: var(--text-f-c);
line-height: 130%;
text-align: center;
background: var(--text-c);
overflow: auto;]
Four for the pyre, oh, so dire

Is there anyone to pull us out of this fire?[/border]

[/border][/tab]

[/tabs][/border]

[/border][/font]
 
Last edited:

These codes belong in a museum
 
Ambiloquous said:
Sushimunch
It's a sushi code. And there's tabs. That's it, that's all.

If you want this to be mobile friendly, it's probably best to keep your message short. I didn't add scroll to this one because I only remembered it existed after I'd coded everything else, and then it made Pusheen and the chopsticks wonk, and lazy as I was, I gave up and called it a day. Besides, I made this for fun, not for actual use smh. Utility? What's that? Don't know her.

Edit: Plz forgive me, I was sleep deprived when I posted this. I've added auto scrolling, so make your message as long as you like.

😌
If you think it reminds you of a certain username floating above this, you may be right. Pilgrim59 Pilgrim59


AClick Sushi!


  • Name: Sushimunch
    Favourite Food: Sushi
    Hobby: Munching sushi

    Message: Munching sushi is an art form of the highest degree. You are still green, young one.




Code: 
[comment]-- Font -->[/comment][font=Didact Gothic][border=transparent;
position: relative;
margin: auto;
max-width: 775px;
padding: 0px;][color=transparent]A[/color]Click Sushi![/border][border=transparent;

/* Break code, break code! */

position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
margin: auto;
margin-top: calc(0px - var(--chop-t));
margin-bottom: 2vh;
box-sizing: border-box;
max-width: 775px;
height: var(--h);
padding: 0px;
border-radius: var(--br);
border: var(--b);
background: var(--board);
box-shadow: 5px 5px rgba(255, 250, 250, 0.7);

--color: #673d2f; /* Border and text colour */

--h: max(370px, 55vh);
--br: 10px;
--b: 2px solid var(--color);
--board: linear-gradient(rgba(255, 255, 250, 0.2), rgba(255, 255, 250, 0.2)), radial-gradient(circle at top right, rgba(0, 0, 0, 0) calc(100% - 115px), rgba(205,144, 76, 0.2) calc(100% - 115px)), url('https://static.vecteezy.com/system/resources/previews/000/360/749/non_2x/wood-texture-vector.jpg') 50% 50% / cover;

--tabs-w: 100px;

--sushi-t: calc((var(--h) / 2) - 125px);
--sushi-d: 49px;
--sushi-l: 28px;
--sushi-s: 54px;
--sushi-bg: url('https://images.vexels.com/media/users/3/230800/isolated/preview/6fae7b492e567aae76ab5220a894087c-cute-sushi-cartoon.png') 50% 50% / 110%, linear-gradient(to bottom, rgb(255, 255, 255, 0) 22%, #af9187 22% 70%, rgb(255, 255, 255, 0) 70%);
--sushi-f: blur(1px);

--dish-t: calc((var(--h) / 2) + 83px);
--dish-l: 17px;
--dish-s: 70px;
--dish-bg: radial-gradient(circle at top right, rgb(238, 83, 79) 65%, rgb(228, 73, 69) 65%);  /* Dish gradient */
--dish-sh: -3px 3px rgba(0, 0, 0, 0.1);

--dish-d-s: 48%;
--dish-c-bg: radial-gradient(circle at top right, rgb(202, 65, 62) 70%, rgb(182, 45, 42) 70%); /* Dish circle gradient */

--chop-t: -1vh;
--chop-l: calc(100% - var(--chop-s) + var(--body-e) + 6.2vh);
--chop-s: 32vh;
--chop-bg: url('http://icons.iconarchive.com/icons/google/noto-emoji-food-drink/1024/32444-chopsticks-icon.png') 50% 50% / 100%;
--chop-c: polygon(0 0, 100% 0, 100% 26%, 26% 100%, 0 100%);
--chop-tr: scaleX(-1) rotate(-35deg);

--sticker-t: calc(max(370px, 55vh) - (var(--sticker-s) / 1.15));
--sticker-l: calc(100% - var(--sticker-s));
--sticker-s: 20vh;

/* Pusheen image URLs */
--sticker-1: url('https://cdn130.picsart.com/256429381027212.png?r1024x1024') no-repeat 50% 50% / 100%;
--sticker-2: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F5d%2F34%2Fff%2F5d34ff495c8b919ce281461ddda10c1b.png&f=1&nofb=1') no-repeat 50% 50% / 80%;
--sticker-3: url('https://cdn.custom-cursor.com/packs/2582/pusheen-and-fish-cursor-pack.png') no-repeat 95% 50% / cover;
--sticker-4: url('https://cdn131.picsart.com/287157513004211.png') no-repeat 50% 50% / 75%;

--body-t: calc((var(--h) - var(--body-h)) / 2);
--body-h: calc(var(--h) - var(--body-e));
--body-e: 5vh;
--body-p: 20px;
--body-f-c: var(--color);
--body-f-s: 1em; /* Font size, increase or decrease by .1 increments */
--body-bg: rgba(250, 250, 240, 0.4);]

[border=transparent;
box-sizing: border-box;
width: var(--tabs-w);
line-height: 3.5;][comment]-- Dish --[/comment][border=transparent;
position: absolute;
top: var(--dish-t);
left: var(--dish-l);
width: var(--dish-s);
height: var(--dish-s);
padding: 0px;
border-radius: var(--br);
border: var(--b);
background: var(--dish-bg);
box-shadow: var(--dish-sh);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
flex: 0 0 var(--dish-d-s);
height: var(--dish-d-s);
padding: 0px;
border-radius: 50%;
border: var(--b);
background: var(--dish-c-bg);][/border][/border][comment]-- Actual Tabs --[/comment][tabs]

[comment]-- Tab 1 --[/comment]
[tab=.][comment]-- Sushi Tabs --[/comment][border=transparent;
position: absolute;
top: var(--sushi-t);
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + var(--sushi-d));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (2 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (3 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent;
position: absolute;
top: var(--chop-t);
left: var(--chop-l);
width: var(--chop-s);
height: var(--chop-s);
float: right;
padding: 0px;
background: var(--chop-bg);
-webkit-clip-path: var(--chop-c);
clip-path: var(--chop-c);
-webkit-transform: var(--chop-tr);
transform: var(--chop-tr);
z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent;
position: absolute;
top: var(--sticker-t);
left: var(--sticker-l);
width: var(--sticker-s);
height: var(--sticker-s);
padding: 0px;
background: var(--sticker-1);
z-index: 2;][/border][comment]-- Body --[/comment][border=transparent;
position: absolute;
top: var(--body-t);
left: var(--tabs-w);
box-sizing: border-box;
width: calc(100% - var(--tabs-w) - var(--body-t));
height: var(--body-h);
border-radius: var(--br);
border: var(--b);
padding: var(--body-p);
background: var(--body-bg);
overflow: auto;
display: flex;
flex-flow: row nowrap;
align-items: center;][comment]-- Text --[/comment][border=transparent;
padding: 0px;
color: var(--color);
font-size: var(--body-f-s);
line-height: 130%;][b]Name:[/b] Sushimunch
[b]Favourite Food:[/b] Sushi
[b]Hobby:[/b] Munching sushi

[b]Message:[/b] Munching sushi is an art form of the highest degree. You are still green, young one.[/border][/border][/tab]

[comment]-- Tab 2 --[/comment]
[tab=.][comment]-- Sushi Tabs --[/comment][border=transparent;
position: absolute;
top: var(--sushi-t);
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + var(--sushi-d));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (2 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (3 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent;
position: absolute;
top: var(--chop-t);
left: var(--chop-l);
width: var(--chop-s);
height: var(--chop-s);
float: right;
padding: 0px;
background: var(--chop-bg);
-webkit-clip-path: var(--chop-c);
clip-path: var(--chop-c);
-webkit-transform: var(--chop-tr);
transform: var(--chop-tr);
z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent;
position: absolute;
top: var(--sticker-t);
left: var(--sticker-l);
width: var(--sticker-s);
height: var(--sticker-s);
padding: 0px;
background: var(--sticker-2);
z-index: 2;][/border][comment]-- Body --[/comment][border=transparent;
position: absolute;
top: var(--body-t);
left: var(--tabs-w);
box-sizing: border-box;
width: calc(100% - var(--tabs-w) - var(--body-t));
height: var(--body-h);
border-radius: var(--br);
border: var(--b);
padding: var(--body-p);
background: var(--body-bg);
overflow: auto;
display: flex;
flex-flow: row nowrap;
align-items: center;][comment]-- Text --[/comment][border=transparent;
padding: 0px;
color: var(--color);
font-size: var(--body-f-s);
line-height: 130%;]Sushimunch munch[/border][/border][/tab]

[comment]-- Tab 3 --[/comment]
[tab=.][comment]-- Sushi Tabs --[/comment][border=transparent;
position: absolute;
top: var(--sushi-t);
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + var(--sushi-d));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (2 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (3 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent;
position: absolute;
top: var(--chop-t);
left: var(--chop-l);
width: var(--chop-s);
height: var(--chop-s);
float: right;
padding: 0px;
background: var(--chop-bg);
-webkit-clip-path: var(--chop-c);
clip-path: var(--chop-c);
-webkit-transform: var(--chop-tr);
transform: var(--chop-tr);
z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent;
position: absolute;
top: var(--sticker-t);
left: var(--sticker-l);
width: var(--sticker-s);
height: var(--sticker-s);
padding: 0px;
background: var(--sticker-3);
z-index: 2;][/border][comment]-- Body --[/comment][border=transparent;
position: absolute;
top: var(--body-t);
left: var(--tabs-w);
box-sizing: border-box;
width: calc(100% - var(--tabs-w) - var(--body-t));
height: var(--body-h);
border-radius: var(--br);
border: var(--b);
padding: var(--body-p);
background: var(--body-bg);
overflow: auto;
display: flex;
flex-flow: row nowrap;
align-items: center;][comment]-- Text --[/comment][border=transparent;
padding: 0px;
color: var(--color);
font-size: var(--body-f-s);
line-height: 130%;]Sushimunch munch munch[/border][/border][/tab]

[comment]-- Tab 4 --[/comment]
[tab=.][comment]-- Sushi Tabs --[/comment][border=transparent;
position: absolute;
top: var(--sushi-t);
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + var(--sushi-d));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (2 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
filter: var(--sushi-f);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--sushi-t) + (3 * var(--sushi-d)));
left: var(--sushi-l);
width: var(--sushi-s);
height: var(--sushi-s);
padding: 0px;
background: var(--sushi-bg);
pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent;
position: absolute;
top: var(--chop-t);
left: var(--chop-l);
width: var(--chop-s);
height: var(--chop-s);
float: right;
padding: 0px;
background: var(--chop-bg);
-webkit-clip-path: var(--chop-c);
clip-path: var(--chop-c);
-webkit-transform: var(--chop-tr);
transform: var(--chop-tr);
z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent;
position: absolute;
top: var(--sticker-t);
left: var(--sticker-l);
width: var(--sticker-s);
height: var(--sticker-s);
padding: 0px;
background: var(--sticker-4);
z-index: 2;][/border][comment]-- Body --[/comment][border=transparent;
position: absolute;
top: var(--body-t);
left: var(--tabs-w);
box-sizing: border-box;
width: calc(100% - var(--tabs-w) - var(--body-t));
height: var(--body-h);
border-radius: var(--br);
border: var(--b);
padding: var(--body-p);
background: var(--body-bg);
overflow: auto;
display: flex;
flex-flow: row nowrap;
align-items: center;][comment]-- Text --[/comment][border=transparent;
padding: 0px;
color: var(--color);
font-size: var(--body-f-s);
line-height: 130%;]Sushimunch munch munch munch[/border][/border][/tab]

[/tabs][/border]

[/border][/font]
Click to expand...

I am honored to be the inspiration for the code. Rofl.
I love it, it's so cute! Aawfdsd <3
 
Nanobytes
The first code is an accordion-tab combination in the hacker/shell(?) aesthetic. Eye-killing colours, bad padding and all. You're welcome. 😌 The second came about because I realized I could make the bar above the accordion instead — it's also a lot simpler. The code for the first one is... really long. Like scroll for 20 seconds long. Now that I think about it, you could probably take the tabs out to use on its own — if that’s what you’re looking for, just pop me a note and I’ll add that version up.

It's best to keep the tab titles at 6 characters or less, and if you change one of them, remember to change all four versions of that single tab (use Ctrl+F).

If you think this reminds you of a username above this, you're probably right. Nano Nano

I was planning to make a code for every commenter bc I thought like, there would be maybe one comment. But no, y'all just had to comment more. Since I don't have the energy for that, I quit this self-assigned mission. To that one commenter, plz forgive me. Know that I love y’all anyway.

Tabs
Visible Scroll
Accordion
No Scroll


Click Fingerprint



  • Basic
    Bio
    People
    Extra
    Art \\ Eh Macmillan
    Alias \\ xViva
    Age \\ unknown
    Gender \\ unknown
    Motto \\ Vivat Libertas

    Exploits \\
    - Omni Corp Database Incident -
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

    - Ladonine Research Removal -
    Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.




Code: 
[font=Overpass Mono][border=transparent;
position: relative;
top: 5px;
margin: auto;
max-width: 900px;
padding: 0px;
text-align: center;]Click Fingerprint[/border][border=transparent;

/* Probably best if you don't change anything I haven't commented next to */

visibility: hidden;
position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: flex-start;
margin: auto;
box-sizing: border-box;
max-width: 900px;
padding: 0px;

--c-a: #6bcfd4; /* Accent colour */
--c-b: black; /* Base colour */
--b-w: 1px; /* Border width */
--b: var(--b-w) solid var(--c-a);

--scan-w: 160px;
--scan-h: 180px;
--scan-bg: url('https://www.raspberrypi.org/app/uploads/2018/11/KindheartedSimpleAppaloosa-size_restricted.gif') no-repeat 50% 55% / 140%, var(--c-b);  /* Fingerprint GIF URL , if you change the image and it's too big or small in window, change percentage after slash (or default to cover) */

--bar-h: 22px;
--bar-p: 3px;

--button-m: 2px;
--button-s: 18px;
--button-p: 2px 0px 0px 1px;
--min-s: 12px;
--max-s: 12px;

--tabs-l: -10px;

--tab-l: calc(0px - var(--tabs-l) + 5px);
--tab-w: 64px;
--tab-h: 26px;
--tab-p: 2px;
--tab-b: calc(2 * var(--b-w)) solid var(--c-b);

--win-t: var(--tab-h);
--win-l: calc(0px - var(--tabs-l));
--win-w: 100%;
--win-h: min(400px, 76vh); /* Main window height, change px number for a longer or shorter content window on desktop */

--img-m: 10px 10px var(--text-p) 10px;
--img-w: 220px;
--img-h: 300px;

/* Image URLs */
--img-1: url('https://64.media.tumblr.com/54b5e64e43cee9f92c47c02a2ac46d16/tumblr_no89ppCLcw1qgrqdko1_1280.png') 50% -10% / cover;
--img-2: url('https://cdna.artstation.com/p/assets/images/images/007/635/920/large/a-04.jpg?1507515544') 50% -10% / cover;
--img-3: url('https://i.pinimg.com/originals/57/41/0c/57410ce7bd93683d95e404af331aeee0.jpg') 50% -10% / cover;

--art-p: 5px;
--art-s: 0.9em; /* Art credit font size */
--art-c: rgba(0, 0, 0, 0.5); /* Art credit background colour */

--text-p: 10px; /* Text padding */
--text-c: #9fe0e3; /* Text colour */]

[comment]-- Accordion --[/comment]
[accordion=100%]
{slide=[comment]-- Fingerprint Window --[/comment][border=transparent;
visibility: visible;
margin: auto;
box-sizing: border-box;
max-width: var(--scan-w);
height: var(--scan-h);
padding: 0px;
border: var(--b);
background: var(--scan-bg);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][/border]}[comment]-- Slide Body --[/comment][border=transparent;
visibility: visible;
position: relative;
left: var(--tabs-l);
margin: auto;
margin-bottom: calc(var(--win-h) - var(--tab-h));
box-sizing: border-box;
width: 100%;
padding: 0px;][comment]-- Actual Tabs --[/comment][tabs]

[comment]-- Tab 1 --[/comment]
[tab=.][comment]-- Tabs --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--text-c);
text-align: center;
background: var(--c-b);
pointer-events: none;]Basic[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + var(--tab-w));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Bio[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (2 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]People[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (3 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Extra[/border][comment]-- Tab Window --[/comment][border=transparent;
position: absolute;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
height: var(--win-h);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;
overflow: auto;][comment]-- Image Window --[/comment][border=transparent;
margin: var(--img-m);
box-sizing: border-box;
width: var(--img-w);
height: var(--img-h);
float: right;
padding: 0px;
border: var(--b);
background: var(--img-1);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Art \\[/b] Eh Macmillan[/border][/border][b]Alias \\[/b] xViva
[b]Age \\[/b] unknown
[b]Gender \\[/b] unknown
[b]Motto \\[/b] Vivat Libertas

[b]Exploits \\[/b]
- Omni Corp Database Incident -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

- Ladonine Research Removal -
Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.[/border][/border][/tab]


[comment]-- Tab 2 --[/comment]
[tab=.][comment]-- Tabs --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Basic[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + var(--tab-w));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--text-c);
text-align: center;
background: var(--c-b);
pointer-events: none;]Bio[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (2 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]People[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (3 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Extra[/border][comment]-- Tab Window --[/comment][border=transparent;
position: absolute;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
height: var(--win-h);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;
overflow: auto;][comment]-- Image Window --[/comment][border=transparent;
margin: var(--img-m);
box-sizing: border-box;
width: var(--img-w);
height: var(--img-h);
float: left;
padding: 0px;
border: var(--b);
background: var(--img-2);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Art \\[/b] 手指断了 a[/border][/border][b]Persona \\[/b]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

[b]Bio \\[/b]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet. Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.

 Maecenas vulputate mi id nisl suscipit imperdiet. Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor.[/border][/border][/tab]

[comment]-- Tab 3 --[/comment]
[tab=.][comment]-- Tabs --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Basic[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + var(--tab-w));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Bio[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (2 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--text-c);
text-align: center;
background: var(--c-b);
pointer-events: none;]People[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (3 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Extra[/border][comment]-- Tab Window --[/comment][border=transparent;
position: absolute;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
height: var(--win-h);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;
overflow: auto;][comment]-- Image Window --[/comment][border=transparent;
margin: var(--img-m);
box-sizing: border-box;
width: var(--img-w);
height: var(--img-h);
float: right;
padding: 0px;
border: var(--b);
background: var(--img-3);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Art \\[/b] Eh Macmillan[/border][/border][b]Acquaintances \\[/b] loADer, 396_, wen

[b]Family \\[/b] unknown[/border][/border][/tab]

[tab=.][comment]-- Tabs --[/comment][border=transparent;
position: absolute;
top: 0px;
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Basic[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + var(--tab-w));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]Bio[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (2 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-left: var(--tab-b);
border-bottom: var(--tab-b);
color: var(--c-b);
text-align: center;
background: var(--c-a);
pointer-events: none;]People[/border][border=transparent;
position: absolute;
top: 0px;
left: calc(var(--tab-l) + (3 * var(--tab-w)));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: var(--tab-p);
border: var(--b);
border-bottom: var(--tab-b);
color: var(--text-c);
text-align: center;
background: var(--c-b);
pointer-events: none;]Extra[/border][comment]-- Tab Window --[/comment][border=transparent;
position: absolute;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
height: var(--win-h);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;
overflow: auto;][b]Music \\[/b]

[comment]-- Music Window --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
max-width: calc(2 * var(--img-w));
height: auto;
padding: 0px;
border: var(--b);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Youtube link characters after = sign -->[/comment][MEDIA=youtube]UnIhRpIT7nc[/MEDIA][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Music \\[/b] inabakumori[/border][/border][/border][/border][/tab]

[/tabs][/border]{/slide}
[/accordion]

[/border][/font]

Click Bar
Art \\ Eh Macmillan
Alias \\ xViva
Age \\ unknown
Gender \\ unknown
Motto \\ Vivat Libertas

---​

Persona \\
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

Exploits \\
- Omni Corp Database Incident -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

- Ladonine Research Removal -
Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.


Code: 
[font=Overpass Mono][border=transparent;
position: relative;
top: 10px;
margin: auto;
max-width: 900px;
padding: 0px;
text-align: center;]Click Bar[/border][border=transparent;

/* Probably best if you don't change anything I haven't commented next to */

visibility: hidden;
position: relative;
margin: auto;
max-width: 900px; /* Max width */
padding: 0px;

--c-a: #6bcfd4; /* Accent colour */
--c-b: black; /* Base colour */
--b-w: 1px; /* Border width */
--b: var(--b-w) solid var(--c-a);

--bar-h: 22px;
--bar-p: 3px;

--button-m: 2px;
--button-s: 18px;
--button-p: 1px 0px 0px 1px;
--min-s: 12px;
--max-s: 12px;

--win-t: -13px;
--win-l: 0px;
--win-w: 100%;

--img-m: 10px 10px var(--text-p) 10px;
--img-w: 240px;
--img-h: 320px;
--img: url('https://64.media.tumblr.com/54b5e64e43cee9f92c47c02a2ac46d16/tumblr_no89ppCLcw1qgrqdko1_1280.png') 50% -10% / cover; /* Image URL */

--art-p: 5px;
--art-s: 0.9em; /* Art credit font size */
--art-c: rgba(0, 0, 0, 0.5); /* Art credit background colour */

--text-p: 10px; /* Text padding */
--text-c: #9fe0e3; /* Text colour */][accordion=100%]
{slide=[comment]-- Bar --[/comment][border=transparent;
visibility: visible;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border]}[comment]-- Slide Body --[/comment][comment]-- Tab Window --[/comment][border=transparent;
visibility: visible;
position: relative;
top: var(--win-t);
left: var(--win-l);
box-sizing: border-box;
width: var(--win-w);
padding: 0px;
border: var(--b);
background: var(--c-b);][comment]-- Text --[/comment][border=transparent;
margin: auto;
box-sizing: border-box;
width: 100%;
height: calc(var(--win-h) - var(--bar-h) - (2 * var(--b-w)));
padding: var(--text-p);
color: var(--text-c);
line-height: 130%;][comment]-- Image Window --[/comment][border=transparent;
margin: var(--img-m);
box-sizing: border-box;
width: var(--img-w);
height: var(--img-h);
float: right;
padding: 0px;
border: var(--b);
background: var(--img);
display: flex;
flex-flow: row wrap;
justify-content: flex-end;][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 100%;
height: var(--bar-h);
padding: 0px;
padding-right: var(--bar-p);
border-bottom: var(--b);
background: var(--c-a);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Minimize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--min-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-window-minimize[/fa][/border][comment]-- Maximize --[/comment][border=transparent;
margin-right: var(--button-m);
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
font-size: var(--max-s);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]far fa-window-maximize[/fa][/border][comment]-- x --[/comment][border=transparent;
box-sizing: border-box;
width: var(--button-s);
height: var(--button-s);
padding: var(--button-p);
color: var(--c-a);
line-height: 0;
background: var(--c-b);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-times[/fa][/border][/border][comment]-- Artist Credit --[/comment][border=transparent;
align-self: flex-end;
padding: var(--art-p);
font-size: var(--art-s);
background: var(--art-c);][b]Art \\[/b] Eh Macmillan[/border][/border][comment]-- Text --[/comment][b]Alias \\[/b] xViva
[b]Age \\[/b] unknown
[b]Gender \\[/b] unknown
[b]Motto \\[/b] Vivat Libertas

[center]---[/center]

[b]Persona \\[/b]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

[b]Exploits \\[/b]
- Omni Corp Database Incident -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim neque eget ex condimentum dapibus. Integer finibus metus at risus facilisis tincidunt. Donec nec faucibus ante, at lacinia metus. Maecenas vulputate mi id nisl suscipit imperdiet.

- Ladonine Research Removal -
Nullam massa mi, laoreet ut est a, tempus tincidunt nibh. Ut eu bibendum dolor, sit amet lobortis est. Suspendisse consectetur lorem sit amet nisl hendrerit, sed fringilla quam commodo.[/border][/border]{/slide}
[/accordion][/border][/font]
 
Last edited:
Wow this coding is gorgeous. The clockwork one up top is basically exactly what I was looking for.
Do you think it would be possible to swap the gif for pictures of natural landscapes n such like a forest a mountain and a lake? If so how would I do so without breaking it?
Ambiloquous Ambiloquous
 
WeaselThor said:
Wow this coding is gorgeous. The clockwork one up top is basically exactly what I was looking for.
Do you think it would be possible to swap the gif for pictures of natural landscapes n such like a forest a mountain and a lake? If so how would I do so without breaking it?
Ambiloquous Ambiloquous
Click to expand...

It's definitely possible! If you look at the code in spoilers there's a line that looks like this up top:

--url: url('https://i.pinimg.com/originals/a0/45/93/a04593dc57e2e5e4d0c60573bd72d915.gif'); /* Image/GIF URL */

Just change the url in-between the url('') to your image's url and all of them will change to one image. If you want three separate ones, you'll have to Ctrl+F and go to the lines that say:

background: var(--url);

And change all of them manually to url('-- your url here --') by taking out var(--url) and replacing it with that. First one is the first slide, second one is the second and so on.
 
Last edited:
Ambiloquous said:
It's definitely possible! If you look at the code in spoilers there's a line that looks like this up top:

--url: url('https://i.pinimg.com/originals/a0/45/93/a04593dc57e2e5e4d0c60573bd72d915.gif'); /* Image/GIF URL */

Just change the url in-between the url('') to your image's url and all of them will change to one image. If you want three separate ones, you'll have to Ctrl+F and go to the lines that say:

background: var(--url);

And change all of them manually to url('-- your url here --') by taking out var(--url) and replacing it with that. First one is the first slide, second one is the second and so on.
Click to expand...
Thanks I’ll try my best to get it done but I reserve the right to come crawling back and beg should I fail :grinningteeth:
 
Ok so I’ve got good news and bad news. I was indeed able to get the main image up there as I had initially hoped…unfortunately I can’t seem to make the images work on a slide by slide basis. Your directions were very good so I’m sure it’s an issue on my end, any thoughts?

Actually I got it. OMG THANKS. Your the first person to explain the code in a way my smooth brain would understand. Thank you kindly.
 
Last edited:
Ambiloquous said:
Potion Trouble
Potion-cauldron-witch-esque tab code with the addition of a terrible poem from yours truly.

Just like the code above, it's too specific to be used in practice. Also way tiny.


Click Potions







  • One for the witches






Code: 
[comment]-- Font -->[/comment][font=Poppins][border=transparent;
padding: 0px;
font-size: 0.9em;
text-align: center;
line-height: 3;]Click Potions[/border][border=transparent;

/* Probably best if you don't change anything I haven't commented next to */

position: relative;
margin: auto;
margin-top: calc(0px - var(--potion-t));
margin-bottom: var(--cauld-h);
max-width: var(--cauld-h);
padding: 0px;

display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;

--tabs-w: 260px;

--shelf-t: 0px;
--shelf-l: calc(50% - (var(--shelf-w) / 2));
--shelf-w: 260px;
--shelf-h: calc(var(--cauld-t) + var(--cauld-h) - 3.5vh);
--shelf-c: linear-gradient(rgba(211, 149, 114, 1) 70%, rgba(191, 129, 94, 1)); /* Shelf back gradient */

--shelf-u-t: 28px;
--shelf-u-l: calc(0px - (var(--shelf-u-displace) / 2));
--shelf-u-displace: 20px; /* Length that shelf ledge sticks out */
--shelf-u-w: calc(100% + var(--shelf-u-displace));
--shelf-u-h: 18px; /* Shelf ledge height */
--shelf-u-br: 6px;
--shelf-u-c: rgba(181, 109, 74, 1); /* Shelf ledge colour */
--shelf-u-s: 0px 6px rgba(10, 0, 0, 0.15); /* Shelf ledge shadow */

--potion-t: calc(0px - (var(--potion-s) / 2) + 2px);
--potion-l: calc(50% - 116px);
--potion-s: 60px;
--potion-img: url('http://icons.iconarchive.com/icons/chanut/role-playing/1024/Potion-icon.png') 50% 50% / contain; /* Potion image URL */

--cauld-t: 40px;
--cauld-w: 100%;
--cauld-h: 50vh;
--cauld-img: url('https://image.flaticon.com/icons/png/512/1232/premium/1232036.png') 50% 50% / contain; /* Cauldron image URL */

--text-t: 6.5vh;
--text-w: 70%;
--text-h: 20vh;
--text-p: 15px; /* Text padding */
--text-br: 60px; /* Text border radius, increase for rounder corners, decrease for less */
--text-f-c: white; /* Text colour */
--text-c: rgba(0, 0, 0, 0.1); /* Text background colour */]

[comment]-- Tabs --[/comment]
[border=transparent;
width: var(--tabs-w);
padding: 0px;][comment]-- Shelf --[/comment][border=transparent;
position: absolute;
top: var(--shelf-t);
left: var(--shelf-l);
width: var(--shelf-w);
height: var(--shelf-h);
padding: 0px;
border-radius: var(--shelf-u-br);
background: var(--shelf-c);
pointer-events: none;][border=transparent;
position: relative;
top: var(--shelf-u-t);
left: var(--shelf-u-l);
width: var(--shelf-u-w);
height: var(--shelf-u-h);
padding: 0px;
border-radius: var(--shelf-u-br);
background: var(--shelf-u-c);
box-shadow: var(--shelf-u-s);][/border][/border][comment]-- Actual Tabs --[/comment][tabs]

[comment]-- Tab 1 --[/comment]
[tab=.][comment]-- Potions --[/comment][border=transparent;
position: absolute;
top: calc(var(--potion-t) + 11px);
left: var(--potion-l);
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-20deg);
transform: rotate(111deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + var(--potion-s));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(40deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + (2 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(160deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + (3 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-120deg);
pointer-events: none;][/border][comment]-- Cauldron --[/comment][border=transparent;
position: absolute;
top: var(--cauld-t);
left: 0px;
width: var(--cauld-w);
height: var(--cauld-h);
padding: 0px;
background: var(--cauld-img);
filter: hue-rotate(210deg);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]

[comment]-- Text --[/comment]
[border=transparent;
position: relative;
top: var(--text-t);
box-sizing: border-box;
width: var(--text-w);
height: var(--text-h);
padding: var(--text-p);
border-radius: var(--text-br);
color: var(--text-f-c);
line-height: 130%;
text-align: center;
background: var(--text-c);
overflow: auto;]
One for the witches[/border]

[/border][/tab]

[comment]-- Tab 2 --[/comment]
[tab=.][comment]-- Potions --[/comment][border=transparent;
position: absolute;
top: var(--potion-t);
left: var(--potion-l);
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-20deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--potion-t) + 11px);
left: calc(var(--potion-l) + var(--potion-s));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(40deg);
transform: rotate(111deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + (2 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(160deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + (3 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-120deg);
pointer-events: none;][/border][comment]-- Cauldron --[/comment][border=transparent;
position: absolute;
top: var(--cauld-t);
left: 0px;
width: var(--cauld-w);
height: var(--cauld-h);
padding: 0px;
background: var(--cauld-img);
filter: hue-rotate(275deg);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]

[comment]-- Text --[/comment]
[border=transparent;
position: relative;
top: var(--text-t);
box-sizing: border-box;
width: var(--text-w);
height: var(--text-h);
padding: var(--text-p);
border-radius: var(--text-br);
color: var(--text-f-c);
line-height: 130%;
text-align: center;
background: var(--text-c);
overflow: auto;]
Two for the ditches[/border]

[/border][/tab]

[comment]-- Tab 3 --[/comment]
[tab=.][comment]-- Potions --[/comment][border=transparent;
position: absolute;
top: var(--potion-t);
left: var(--potion-l);
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-20deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + var(--potion-s));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(40deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--potion-t) + 11px);
left: calc(var(--potion-l) + (2 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(160deg);
transform: rotate(111deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + (3 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-120deg);
pointer-events: none;][/border][comment]-- Cauldron --[/comment][border=transparent;
position: absolute;
top: var(--cauld-t);
left: 0px;
width: var(--cauld-w);
height: var(--cauld-h);
padding: 0px;
background: var(--cauld-img);
filter: hue-rotate(10deg);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]

[comment]-- Text --[/comment]
[border=transparent;
position: relative;
top: var(--text-t);
box-sizing: border-box;
width: var(--text-w);
height: var(--text-h);
padding: var(--text-p);
border-radius: var(--text-br);
color: var(--text-f-c);
line-height: 130%;
text-align: center;
background: var(--text-c);
overflow: auto;]
Three for the dirty little snitches[/border]

[/border][/tab]

[comment]-- Tab 4 --[/comment]
[tab=.][comment]-- Potions --[/comment][border=transparent;
position: absolute;
top: var(--potion-t);
left: var(--potion-l);
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-20deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + var(--potion-s));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(40deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: var(--potion-t);
left: calc(var(--potion-l) + (2 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(160deg);
pointer-events: none;][/border][border=transparent;
position: absolute;
top: calc(var(--potion-t) + 11px);
left: calc(var(--potion-l) + (3 * var(--potion-s)));
width: var(--potion-s);
height: var(--potion-s);
padding: 0px;
background: var(--potion-img);
filter: hue-rotate(-120deg);
transform: rotate(111deg);
pointer-events: none;][/border][comment]-- Cauldron --[/comment][border=transparent;
position: absolute;
top: var(--cauld-t);
left: 0px;
width: var(--cauld-w);
height: var(--cauld-h);
padding: 0px;
background: var(--cauld-img);
filter: hue-rotate(130deg);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;]

[comment]-- Text --[/comment]
[border=transparent;
position: relative;
top: var(--text-t);
box-sizing: border-box;
width: var(--text-w);
height: var(--text-h);
padding: var(--text-p);
border-radius: var(--text-br);
color: var(--text-f-c);
line-height: 130%;
text-align: center;
background: var(--text-c);
overflow: auto;]
Four for the pyre, oh, so dire

Is there anyone to pull us out of this fire?[/border]

[/border][/tab]

[/tabs][/border]

[/border][/font]
Click to expand...
This is smackingly cute!
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 6 (members: 0, guests: 6)

Similar threads

StardustTroubadour
Help I am looking for a sci-fi template.
Replies
2
Views
130
StardustTroubadour
StardustTroubadour
BloopNoodle
Help Help resizing an image that just… won’t
Replies
8
Views
209
BloopNoodle
BloopNoodle
Back
Top