Resource Ami's Lab 2.0 | Mobile Friendly Freebies

[Ambiloquous]

hi hi ! i adapted your dnd cytus character sheet for a kingdom hearts roleplay over here if you'd like to see
i absolutely adore this sheet sooo so much that i wanted to figure out a way for it to work for my dice-light kh rp ;v; thank you so much for your hard work!

That looks amazing! I love the little icon additions hrlskjsldk Thank you for sharing your designs! (And going through the effort of using that code, bc I know it's not the most well-written :'))

 

[pookie]

That looks amazing! I love the little icon additions hrlskjsldk Thank you for sharing your designs! (And going through the effort of using that code, bc I know it's not the most well-written :'))

oh thank you !! i'm so glad you like it ;v;
and of course! thank you for making it! and omg, you're totally good
it was a little different to what i'm used to seeing in codes but
my skills stop at editing i can't write it for myself, and it was easy enough to parse through for those purposes! you do a really good job of labeling the different sections :3 i still think it's phenomenal <3

 

[Hyena]

Character Cards

Card(?) accordion.

I finished this a while back but got lazy because I didn't want to comment and so only posted now. I didn't implement any scroll feature so you have to be careful with how much text you use.

Originally, I created this with those GMs who like to put little character summaries at the top of CS threads in mind, but now I realize that there probably aren't that many of those, and this'll likely be used as a placeholder if at all.

Wrap code in [center] tag to center, and wrap it around multiple without hitting newline to center a group (like the multi-card example spoiler).

Accordion

No Scroll

Click Below

Troubadour of Yonai

Koki Najin-Oe

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Artist — GUWEIZ

Spoiler: Code

[comment]Fonts -->[font=Sarala][font=Kolker Brush]:S[/font][/font][/comment][border=0;

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

margin-right: 5px;
display: inline-block;
box-sizing: border-box;
padding: 0;
overflow: hidden;

--h: 250px; /* Height and width for background */
--w: calc(var(--h) + var(--gap)); 
--gap: 12px; /* Subtitle overflow, i.e., the amount the subtitle sticks past the background */

/* Background Variables */
--g-c: rgba(0, 0, 0, 0.5); /* Gradient base colour */
/* Image: first two percentages are x% y% position / last percentage is image size */
--img: url('https://i.pinimg.com/originals/80/cc/de/80ccdedb60dfd52638f80e6ff96bcc81.jpg') 50% 20% / 200%; 

/* Icon Variables */
--i-c: #f56423; /* Colour */
--i-s: 3em; /* Size (can be decimal) */
--i-o: 0.8; /* Opacity, between 0 and 1 */

/* Title Variables */
--t-c: #fbfdf5; /* Text colour */
--t-f-s: 4.9em; /* Font size (can be decimal) */
--t-f: 'Kolker Brush', cursive; /* Font family (change font tag above if you change this) */
--t-l-h: 1; /* Line height, change to change spacing above + below title */

/* Subtitle Variables */
--s-p: 2px 5px; /* Padding: top-bottom left-right */
--s-b-r: 3px; /* Border radius */
--s-bg: #f56423; /* Background colour */

/* Subtitle Text Variables */
--s-c: #340d22; /* Text colour */
--s-f-s: 1.2em; /* Font size (can be decimal) */
--s-f: 'Sarala', sans-serif; /* Font family (change font tag above if you change this) */

/* Body Variables */
--b-c: #eef0e9; /* Text colour */
--b-f-s: 1.1em; /* Font size (can be decimal) */
][comment]

-- Note --[/comment][border=0;
padding: 0;
font-size: 0.8em;
font-family: var(--s-f);
opacity: 0.8;]Click Below[/border][comment]

-- Main Container --[/comment][border=0;
visibility: hidden;
position: relative;
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
display: flex;
flex-flow: row nowrap;
align-items: center;
padding: 0;
overflow: hidden;][comment]

-- Image --[/comment][border=0;
visibility: visible;
position: absolute;
top: 0;
left: 0;
padding: 0;
width: calc(100% - var(--gap));
height: var(--h);
background: var(--img);][/border][accordion=100%]

{slide=[comment]

-- Content Container --[/comment][border=0;
margin: 0 -7px;
box-sizing: border-box;
width: var(--w);
height: calc(var(--h) * 3);
padding: 0;
font-variant: normal;
font-weight: normal;][comment]

-- First Page --[/comment][border=0;
visibility: visible;
position: relative;
top: calc(var(--h) + 1px);
left: 0;
width: 100%;
height: var(--h);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--g-c));
background-size: calc(100% - var(--gap)) 100%;
background-repeat: no-repeat;
padding: 0;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: flex-end;][comment]

-- Icon --[/comment][border=0;
position: absolute;
top: 8px;
left: 12px;
padding: 0;
color: var(--i-c);
font-size: var(--i-s);
opacity: var(--i-o);][fa]fas fa-feather[/fa][/border][comment]

-- Subtitle --[/comment][border=0;
box-sizing: border-box;
padding: var(--s-p);
border-radius: var(--s-b-r);
background: var(--s-bg);
color: var(--s-c);
font-size: var(--s-f-s);
font-family: var(--s-f);]Troubadour of Yonai[/border][comment]

-- Title --[/comment][border=0;
box-sizing: border-box;
width: 100%;
padding: 0 calc(var(--gap) + 10px) 5px 10px;
color: var(--t-c);
font-size: var(--t-f-s);
font-family: var(--t-f);
line-height: var(--t-l-h);
text-align: end;]Koki Najin-Oe[/border][/border][comment]

-- Second Page --[/comment][border=0;
visibility: visible;
position: relative;
top: var(--h);
left: 0;
width: 100%;
height: var(--h);
padding: 0;][comment]

-- Text Container --[/comment][border=0;
margin: 0 15px;
box-sizing: border-box;
width: calc(100% - var(--gap) - 30px);
height: var(--h);
padding: 15px 10px;
background: linear-gradient(rgba(0, 0, 0, 0) 2%, var(--g-c) 15% 85%, rgba(0, 0, 0, 0) 98%);
color: var(--b-c);
font-size: var(--b-f-s);
font-family: var(--s-f);
display: flex;
flex-flow: row nowrap;
align-items: center;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/border][/border][/border]}[comment]

-- Placeholder --[/comment][border=0;
margin: -6px 0;
padding: 0;
height: calc(var(--h) * 2);][/border]{/slide}

[/accordion][/border][comment]

-- Note --[/comment][border=0;
padding: 0;
font-size: 0.8em;
font-family: var(--s-f);
opacity: 0.8;]Artist — GUWEIZ[/border][/border]

Spoiler: Multiple Card Example

Click Below

Troubadour of Yonai

Koki Najin-Oe

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Artist — GUWEIZ

Click Below

Archmagus of Revas

Lynis of Hallow

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Artist — Astri Lohne

Click Below

Clockmaker of the Tower

Vicis Tempus

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Artist — gyxycn

This is so stylish for character blurbs. I'm sure to find myself using this code for my characters later.

 

[Ambiloquous]

This is so stylish for character blurbs. I'm sure to find myself using this code for my characters later.

Thank you sm!

 

[RascalRoadkill]

Wow, these are so cool! I haven't been on a forum that uses BBCode extensively in a really long time (like, years) and this stuff has gotten so advanced now! Great stuff, I especially like the computer error message one!

 

[Ambiloquous]

Wow, these are so cool! I haven't been on a forum that uses BBCode extensively in a really long time (like, years) and this stuff has gotten so advanced now! Great stuff, I especially like the computer error message one!

Thanks so much! Ah, yes, the one I made aggressively after I spent like 8 hours trying to log into my work laptop, after hearing that a previous guy took two weeks to get on his.

 

[Daddy Dream]

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

  
  
  
• 
  
  
  

  
  Two for the ditches

  
  
  
• 
  
  
  

  
  Three for the dirty little snitches

  
  
  
• 
  
  
  

  
  Four for the pyre, oh, so dire
  
  Is there anyone to pull us out of this fire?

  
  
  

Spoiler: 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]

Is it possible to make this bigger?

 

[Ambiloquous]

Is it possible to make this bigger?

You might be able to, but I put in some funky relative values that I don’t remember why I did to keep it mobile friendly, so I wouldn’t recommend it, unfortunately.

 

[Daddy Dream]

You might be able to, but I put in some funky relative values that I don’t remember why I did to keep it mobile friendly, so I wouldn’t recommend it, unfortunately.

That's a bummer, I was going to use it similar to a picture display that has snippets of text under the cauldron to describe the character.

 

[Daddy Dream]

Toggle Tabs

Non-toggling tabs code. Ignore the name.

I have arisen from the BBCode grave. I'm not entirely satisfied with this inconsistent looking layout, but I finished it, so I thought I'd put it out anyway. In the process, I have reminded myself again how difficult it is to put in understandable comments. (Not that my comments are understandable. :v)

Tabs

Hidden Scroll

Click Tabs

• Tab
• Tab
• Tab
• Tab

• LOREM IPSUM

  ALIAS

  Blue Moon
  

  ROLE

  Point
  

  TIER

  II–III
  

  
  

  GROUP

  Amores III
  

  BRANCH

  Little Latonia
  

  BATCH

  Noche
  

  MENTOR

  Daybreak
  

  
  

  NOTABLE SKILLS

  Aqua Scrying, Birdspeak
  

  NOTES

  Check Report on Operation Rose Train for details on patterns and expertise
  

  ARTIST

  PicardLouis

  DESCRIPTION

  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc.
  
  

  EXPANDED

  
  Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.
  
  Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.
• IPSUM LOREM

  HISTORY

  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc.
  
  Nullam non nisi est sit amet. Massa eget egestas purus viverra accumsan. Neque viverra justo nec ultrices dui. Tellus mauris a diam maecenas sed enim ut. Sed adipiscing diam donec adipiscing. Adipiscing tristique risus nec feugiat in fermentum. Lectus nulla at volutpat diam ut venenatis tellus in. Consequat mauris nunc congue nisi vitae. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Enim ut sem viverra aliquet eget sit amet tellus.
  
  

  EXPANDED

  
  Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.
  
  Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.
• DOLOR SIT

  ONE WHO GUARDS THE NIGHT

  ALIAS

  Nightingale
  

  ROLE

  Shield
  

  RELATIONSHIP

  
  Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
  

  ARTIST

  Eliot Baum

  ONE WHO PONDERS THE DUSK

  ALIAS

  Sundown
  

  ROLE

  Core
  

  RELATIONSHIP

  
  Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
  

  ARTIST

  Eliot Baum

  ONE WHO WALKS AMONG CLOUDS

  ALIAS

  Nimbus
  

  ROLE

  Step
  

  RELATIONSHIP

  
  Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
  

  ARTIST

  Eliot Baum
• SIT DOLOR

  QUOTES

  
  "There is a moon sole in the blue night."
  "Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac."
  "In tellus integer feugiat scelerisque varius morbi enim nunc faucibus."
  

  
  

  MUSIC

  
  

  
  

  MISC

  Lorem ipsum dolor sit amet elit, sed do eiusmod aliqua.

Scroll

Spoiler: Code

[comment]-- Fonts --> [font=Macondo][font=Heebo]:>[/font][/font][/comment][border=0; 

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

margin: auto; 
max-width: 950px;
padding: 0;

--h: clamp(380px, 90vh, 900px);

/* Colours */
--base: #4A6491; /* #3f98c9 */
--outline: #D0E4F2;
--accent: #30395C; /* #12619D */
--accent-2: #85A5CC; /* #89C2E1 */

/* Images -- image URL in url(''), percentages are x-value y-value image positioning */
/* Tab 1 Image */
--img-1: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c9aa5b64-52aa-4d3f-85c2-366bd57804bc/ddatbzg-bb7eb3a5-ff48-4edf-bbd8-6860c9df322b.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2M5YWE1YjY0LTUyYWEtNGQzZi04NWMyLTM2NmJkNTc4MDRiY1wvZGRhdGJ6Zy1iYjdlYjNhNS1mZjQ4LTRlZGYtYmJkOC02ODYwYzlkZjMyMmIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bWn_j0HI_JgX_II9d0OUx9pGYF8QDP6yVPesmNSsyjk') 50% 100% / cover;
/* Tab 3 Images */
--img-2: url('https://pbs.twimg.com/media/ErkL6MHW8AIheQn?format=jpg&name=large') 50% 25% / cover;
--img-3: url('https://pbs.twimg.com/media/ErkL6NNXAAExA29?format=jpg&name=large') 50% 70% / cover;
--img-4: url('https://images.squarespace-cdn.com/content/v1/5f15cec690ad1413ae255f7e/1601332574045-P8HM3NEM3W08PP9TTG5A/image-asset.png?format=1500w') 50% 30% / cover;

/* Border Properties */
--b-r: 8px; /* Border radius -- a greater number makes it rounder and vice versa */
--b-w: 8px; /* Border width */
--bg-w: (var(--icon-s) + (2 * var(--b-w)));

--tabs-h: 250px;
--tab-f-s: 25px;

/* Icon Properties */
--icon-s: 90px; /* Background box size -- changing it might mess up code */
--icon-f-s: 55px; /* Icon size */

--bar-w: 72px;

/* Title Properties */
--title-f-s: 2em; /* Font size -- change by .1 increments, increasing size might mess it up on smaller screens */
--title-f: 'Macondo', sans-serif; /* Font family -- change font tag above if you change this */
--title-p: max(10px, 5%);

/* Gradient Opacity */
--grad-o: 50%; 

/* Content Properties */
--con-p: clamp(10px, 2%, 20px); /* Padding */
--con-c: azure; /* Text colour */
--con-f-s: 1.05em; /* Font size -- change by .1 increments */
--con-f: 'Heebo', sans-serif; /* Font family -- change font tag above if you change this */

/* Divider Height */
--div-h: 2px;

/* Header Properties */
--head-f-s: 1.3em; /* Font size -- change by .1 increments */
--head-p: 6px;
][comment]-- Tab Note --[/comment][border=0;
padding: 0;
color: var(--outline);
font-family: var(--con-f);
line-height: 1.8;]Click Tabs [fa]fa-solid fa-arrow-down[/fa][/border][comment]-- Main --[/comment][border=0;
position: relative; 
display: flex; 
flex-flow: row nowrap; 
align-items: center; 
box-sizing: border-box; 
width: 100%;
height: var(--h); 
padding: calc(var(--bg-w)) 0 0 0;][comment]-- Icon Border --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][comment]
-- Icon Box --[/comment][border=0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: var(--icon-s);
height: var(--icon-s);
border-radius: var(--b-r);
background: var(--base);
padding: 0;][/border][comment]
-- Icon Box End --[/comment][/border][comment]
-- Icon Border End --[/comment][comment]

-- Title Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0;
overflow: hidden;][comment]-- Title Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent) -80%, rgba(0, 0, 0, 0), var(--accent));
padding: 0;][/border][/border][comment]
-- Header Box End --[/comment][comment]

-- Tab Bar Background --[/comment][border=0;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: var(--accent-2);
pointer-events: none;][/border][comment]
-- Tab Bar Background End --[/comment][comment]

-- Actual Tabs --[/comment][border=0;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
margin-left: 20px;
box-sizing: border-box;
width: 66px;
height: var(--tabs-h);
padding: 0;
line-height: 60px;
overflow: hidden;][tabs]

[tab=0][comment]

------------ Tab 1 Body ------------

[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]

-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]

-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]LOREM IPSUM[/border][comment]
-- Title End --[/comment][comment]

-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) -20%, rgba(0, 0, 0, 0) 40%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]

-- Tab Border --[/comment][border=0;
position: absolute;
top: calc(0px - 14px);
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]

-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-user fa-fade[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]

-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Image + Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: stretch;
padding: calc(var(--con-p) / 2);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
margin: calc(var(--con-p) / 2);
flex: 1 1 200px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
min-height: 280px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-1);
padding: 0;][/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: calc(var(--con-p) / 1.75);
flex: 2 1 300px;
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Blue Moon [fa]fa-solid fa-moon[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Point
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]TIER[/border] II–III
[comment]-- Divider --[/comment][border=0; padding: 0; 
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]GROUP[/border] Amores III
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]BRANCH[/border] Little Latonia
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]BATCH[/border] Noche
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MENTOR[/border] Daybreak
[comment]-- Divider --[/comment][border=0; padding: 0; 
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]NOTABLE SKILLS[/border] Aqua Scrying, Birdspeak
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]NOTES[/border] Check [i]Report on Operation Rose Train[/i] for details on patterns and expertise
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] PicardLouis[/border][/border][comment]
-- Image + Text End --[/comment][comment]
-- More Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]DESCRIPTION[/border]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc. 

[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]EXPANDED[/border]
Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.

Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.[/border][comment]-- More Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]

[tab=0][comment]

------------ Tab 2 Body ------------

[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]

-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]

-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]IPSUM LOREM[/border][comment]
-- Title End --[/comment][comment]

-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) -10%, rgba(0, 0, 0, 0) 50%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]

-- Tab Border --[/comment][border=0;
position: absolute;
top: 50px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]

-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-clock fa-fade[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]

-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]HISTORY[/border]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc. 

Nullam non nisi est sit amet. Massa eget egestas purus viverra accumsan. Neque viverra justo nec ultrices dui. Tellus mauris a diam maecenas sed enim ut. Sed adipiscing diam donec adipiscing. Adipiscing tristique risus nec feugiat in fermentum. Lectus nulla at volutpat diam ut venenatis tellus in. Consequat mauris nunc congue nisi vitae. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Enim ut sem viverra aliquet eget sit amet tellus. 

[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]EXPANDED[/border]
Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.

Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.[/border][comment]-- Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]

[tab=0][comment]

------------ Tab 3 Body ------------

[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]

-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]

-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]DOLOR SIT[/border][comment]
-- Title End --[/comment][comment]

-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent), rgba(0, 0, 0, 0) 60%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]

-- Tab Border --[/comment][border=0;
position: absolute;
top: 115px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]

-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-users fa-fade[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]

-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]

-- Image + Header + Text 1 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-2);
padding: 0;][/border][/border][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent), rgba(0, 0, 0, 0), var(--accent) 180%);
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO GUARDS THE NIGHT[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) 0 0 var(--con-p);
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Nightingale [fa]fa-solid fa-crow[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Shield
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border] 
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][/border][comment]
-- Image + Header + Text 1 End --[/comment][comment]

-- Header + Text + Image 2 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap-reverse;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-left-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent) -80%, rgba(0, 0, 0, 0), var(--accent));
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO PONDERS THE DUSK[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) var(--con-p) 0 0;
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Sundown [fa]fa-solid fa-sun-haze[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Core
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border] 
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][comment]-- Header + Text End --[/comment][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-3);
padding: 0;][/border][/border][/border][comment]
-- Header + Text + Image 2 End --[/comment][comment]

-- Image + Header + Text 3 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-4);
padding: 0;][/border][/border][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent), rgba(0, 0, 0, 0), var(--accent) 180%);
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO WALKS AMONG CLOUDS[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) 0 0 var(--con-p);
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Nimbus [fa]fa-solid fa-cloud[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Step
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border] 
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][/border][comment]
-- Image + Header + Text 3 End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]

[tab=0][comment]

------------ Tab 4 Body ------------

[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]

-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]

-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]SIT DOLOR[/border][comment]
-- Title End --[/comment][comment]

-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) 10%, rgba(0, 0, 0, 0) 70%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]

-- Tab Border --[/comment][border=0;
position: absolute;
top: 180px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]

-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-list fa-fade[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]

-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]QUOTES[/border]
"There is a moon sole in the blue night."
"Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac."
"In tellus integer feugiat scelerisque varius morbi enim nunc faucibus."
[comment]-- Divider --[/comment][border=0; padding: 0; 
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MUSIC[/border] [MEDIA=youtube]4kVO6PQyVhY[/MEDIA]
[comment]-- Divider --[/comment][border=0; padding: 0; 
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MISC[/border] Lorem ipsum dolor sit amet elit, sed do eiusmod aliqua.[/border][comment]-- Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]

[/tabs][/border][comment]
-- Actual Tabs End --[/comment][/border][comment]
-- Main End --[/comment][comment]-- Scroll Note --[/comment][border=0;
padding: 0;
color: var(--base);
font-family: var(--con-f);
text-align: right;
line-height: 1.8;]Scroll [fa]fa-solid fa-arrow-down[/fa][/border][/border]

Hello, I was wondering how would you make an extra set of pretty tabs inside the fourth tab? I was trying to figure it out on my own, but I could only get the basic looking tabs and it throws the flow of the design off a bit.

 

[Ambiloquous]

Hello, I was wondering how would you make an extra set of pretty tabs inside the fourth tab? I was trying to figure it out on my own, but I could only get the basic looking tabs and it throws the flow of the design off a bit.

Did you mean something like coloured tabs? Or did you mean coding over tabs like all of the tab codes in this thread? If you mean coding over tabs, there are definitely other tutorials in BBCode Center if you do a little searching, but just in case, I'll put an example-tutorial I gave to someone else in a spoiler below. It was in reply to a question they asked, but a lot of the same principles apply.

Spoiler

Tabs Example

This is a simplified explanation of the way I code tabs, and it'll probably be different from the way other coders do it. I'll use the code below which has no tab lines to cover, as can be seen with the transparent colour values. The values for

max-width

and

height

in the outer container are arbitrary, they're just there to show how certain features work.

• 1
• 2

• 1
• 2

Position Property

The highlighted purple code is the text is the outer container with

position: relative;

, and the highlighted blue code is the inner tab body with

position: absolute;

. Bolded are the position values, and you can see the tab bodies are positioned relative to the outer container because the code above doesn't show the tab body floating at the top of this post (i.e., where your quote would be).

It's good to set a specific

top

and

left

value in the tab body container if you don't want it to be positioned by default around the place that the tab body would go or act inconsistent in general.

[border=0;
position: relative;
max-width: 400px;
height: 300px;
background: rgba(190, 0, 190, 0.3); /* Purple, 30% opacity */
padding: 0;][border=0;
height: 30px;
padding: 0;
background: rgba(255, 0, 0, 0.3); /* Red, 30% opacity */
overflow: hidden;][tabs]

[tab=1][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 255, 0, 0.3); /* Green, 30% opacity */
padding: 0;]1[/border][/tab]

[tab=2][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 0, 255, 0.3); /* Blue, 30% opacity */
padding: 0;]2[/border][/tab]

[/tabs][/border][/border]

Hidden Tab Lines

The highlighted red code is the container wrapping the tabs with

overflow: hidden;

(shown in bold) that allows the tab lines to disappear. It's a separate border tag from the outermost container because it can't have a set

position

property. The

height

is just a random height I set that would fit the tabs while squeezing the tab lines out of the container.

[border=0;
position: relative;
max-width: 400px;
height: 300px;
background: rgba(190, 0, 190, 0.3); /* Purple, 30% opacity */
padding: 0;][border=0;
height: 30px;
padding: 0;
background: rgba(255, 0, 0, 0.3); /* Red, 30% opacity */
overflow: hidden;][tabs]

[tab=1][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 255, 0, 0.3); /* Green, 30% opacity */
padding: 0;]1[/border][/tab]

[tab=2][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 0, 255, 0.3); /* Blue, 30% opacity */
padding: 0;]2[/border][/tab]

[/tabs][/border][/border]

Responsive Width

The code discussed here is in orange, and the tab body with the

width: 100%;

means that it follows the width of the outer container with relative positioning (

max-width: 400px;

). Since the outer container is responsive to different screen sizes by using max-width and not width, the inner tab body becomes responsive to different screen sizes as well.

[border=0;
position: relative;
max-width: 400px;
height: 300px;
background: rgba(190, 0, 190, 0.3); /* Purple, 30% opacity */
padding: 0;][border=0;
height: 30px;
padding: 0;
background: rgba(255, 0, 0, 0.3); /* Red, 30% opacity */
overflow: hidden;][tabs]

[tab=1][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 255, 0, 0.3); /* Green, 30% opacity */
padding: 0;]1[/border][/tab]

[tab=2][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 0, 255, 0.3); /* Blue, 30% opacity */
padding: 0;]2[/border][/tab]

[/tabs][/border][/border]

Calc() Function

Here's where

calc()

comes into play, and I've displayed the related code in green. I set the

top

to 40px because the tab container height itself was 30px and I added 10px to show that there was no tab line (and so the purple of the outer container could peek out). I didn't want the tab body container to overflow the outer container, but I still wanted it to fill the remaining space, so I subtracted the top value (40px) from 100% of the container's height (300px). You can mix different measurement values and use variables to calculate a single value for a property when using calc.

Note: Percentage only works for height when the parent container (in this case the outermost container) has a set height value.

[border=0;
position: relative;
max-width: 400px;
height: 300px;
background: rgba(190, 0, 190, 0.3); /* Purple, 30% opacity */
padding: 0;][border=0;
height: 30px;
padding: 0;
background: rgba(255, 0, 0, 0.3); /* Red, 30% opacity */
overflow: hidden;][tabs]

[tab=1][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 255, 0, 0.3); /* Green, 30% opacity */
padding: 0;]1[/border][/tab]

[tab=2][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 0, 255, 0.3); /* Blue, 30% opacity */
padding: 0;]2[/border][/tab]

[/tabs][/border][/border]

 

[Daddy Dream]

Did you mean something like coloured tabs? Or did you mean coding over tabs like all of the tab codes in this thread? If you mean coding over tabs, there are definitely other tutorials in BBCode Center if you do a little searching, but just in case, I'll put an example-tutorial I gave to someone else in a spoiler below. It was in reply to a question they asked, but a lot of the same principles apply.

Spoiler

Tabs Example

This is a simplified explanation of the way I code tabs, and it'll probably be different from the way other coders do it. I'll use the code below which has no tab lines to cover, as can be seen with the transparent colour values. The values for

max-width

and

height

in the outer container are arbitrary, they're just there to show how certain features work.

• 1
• 2

• 1
• 2

Position Property

The highlighted purple code is the text is the outer container with

position: relative;

, and the highlighted blue code is the inner tab body with

position: absolute;

. Bolded are the position values, and you can see the tab bodies are positioned relative to the outer container because the code above doesn't show the tab body floating at the top of this post (i.e., where your quote would be).

It's good to set a specific

top

and

left

value in the tab body container if you don't want it to be positioned by default around the place that the tab body would go or act inconsistent in general.

[border=0;
position: relative;
max-width: 400px;
height: 300px;
background: rgba(190, 0, 190, 0.3); /* Purple, 30% opacity */
padding: 0;][border=0;
height: 30px;
padding: 0;
background: rgba(255, 0, 0, 0.3); /* Red, 30% opacity */
overflow: hidden;][tabs]

[tab=1][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 255, 0, 0.3); /* Green, 30% opacity */
padding: 0;]1[/border][/tab]

[tab=2][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 0, 255, 0.3); /* Blue, 30% opacity */
padding: 0;]2[/border][/tab]

[/tabs][/border][/border]

Hidden Tab Lines

The highlighted red code is the container wrapping the tabs with

overflow: hidden;

(shown in bold) that allows the tab lines to disappear. It's a separate border tag from the outermost container because it can't have a set

position

property. The

height

is just a random height I set that would fit the tabs while squeezing the tab lines out of the container.

[border=0;
position: relative;
max-width: 400px;
height: 300px;
background: rgba(190, 0, 190, 0.3); /* Purple, 30% opacity */
padding: 0;][border=0;
height: 30px;
padding: 0;
background: rgba(255, 0, 0, 0.3); /* Red, 30% opacity */
overflow: hidden;][tabs]

[tab=1][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 255, 0, 0.3); /* Green, 30% opacity */
padding: 0;]1[/border][/tab]

[tab=2][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 0, 255, 0.3); /* Blue, 30% opacity */
padding: 0;]2[/border][/tab]

[/tabs][/border][/border]

Responsive Width

The code discussed here is in orange, and the tab body with the

width: 100%;

means that it follows the width of the outer container with relative positioning (

max-width: 400px;

). Since the outer container is responsive to different screen sizes by using max-width and not width, the inner tab body becomes responsive to different screen sizes as well.

[border=0;
position: relative;
max-width: 400px;
height: 300px;
background: rgba(190, 0, 190, 0.3); /* Purple, 30% opacity */
padding: 0;][border=0;
height: 30px;
padding: 0;
background: rgba(255, 0, 0, 0.3); /* Red, 30% opacity */
overflow: hidden;][tabs]

[tab=1][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 255, 0, 0.3); /* Green, 30% opacity */
padding: 0;]1[/border][/tab]

[tab=2][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 0, 255, 0.3); /* Blue, 30% opacity */
padding: 0;]2[/border][/tab]

[/tabs][/border][/border]

Calc() Function

Here's where

calc()

comes into play, and I've displayed the related code in green. I set the

top

to 40px because the tab container height itself was 30px and I added 10px to show that there was no tab line (and so the purple of the outer container could peek out). I didn't want the tab body container to overflow the outer container, but I still wanted it to fill the remaining space, so I subtracted the top value (40px) from 100% of the container's height (300px). You can mix different measurement values and use variables to calculate a single value for a property when using calc.

Note: Percentage only works for height when the parent container (in this case the outermost container) has a set height value.

[border=0;
position: relative;
max-width: 400px;
height: 300px;
background: rgba(190, 0, 190, 0.3); /* Purple, 30% opacity */
padding: 0;][border=0;
height: 30px;
padding: 0;
background: rgba(255, 0, 0, 0.3); /* Red, 30% opacity */
overflow: hidden;][tabs]

[tab=1][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 255, 0, 0.3); /* Green, 30% opacity */
padding: 0;]1[/border][/tab]

[tab=2][border=0;
position: absolute;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
background: rgba(0, 0, 255, 0.3); /* Blue, 30% opacity */
padding: 0;]2[/border][/tab]

[/tabs][/border][/border]

Oh, oh boy lol I will definitely have to practice this, though colored tabs seem much easier. I was wanting to have a bit more personality to the tabs besides just having them as rectangles, maybe a different shape (for here and future codes). However, I do want to thank you for the resources ^^ and I will come back if I have more questions or concerns about them as I practice.