• 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

I used one of
Ambiloquous said:
AIgorithm
A tabs code.

It's AI-gorithm with an I, get it? For the honourary commenter who I definitely didn't pay to advertise me. @AI10100

Something about this code looks really off to me, but heck if I'm going to change now. I do think it looks slightly better in dark mode though. Also, if you're wondering why the SoundCloud widget is naked, it's because I couldn't find the Nausicaä opening theme on Youtube and was too lazy to actually code it over it last minute.


Click Squares and Scroll
  • Initializing Basics...
    Model :: AI-10
    Serial Number :: 10100
    Manufacturer :: Cultists Co.
    Description :: Lab-built instead of mass manufactured, the AI-10 was made on a whim and only managed to be sold after copious reprogramming.
    Notable Features :: Humanized personality and general knowledge of biology

    Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.
    Rendering Appearance...
    Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.

    Mauris lacinia odio vitae leo hendrerit sodales. Fusce tristique placerat lorem ac volutpat. Vestibulum vitae felis fermentum mauris iaculis volutpat eget at tellus. Proin ullamcorper placerat purus eu varius. Pellentesque scelerisque turpis ac rutrum porta. Nullam bibendum felis non nunc congue, eu consectetur quam fringilla. Nullam porta mi ac rutrum vehicula. Morbi vestibulum, ligula quis hendrerit vehicula, neque quam consectetur quam, at ullamcorper justo ipsum eu ante.
Art by 18bot


Code: 
[comment][font=Exo 2][font=Exo]:x[/font][/font][/comment][border=transparent;

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

position: relative;
margin: auto;
box-sizing: border-box;
max-width: 1000px;
min-height: var(--h);
padding: 0px;

/* Accent Colours */
--c-1: #6ef8cd;
--c-2: #36d6a4;
--c-3: #329282;
--c-t: #d4fdf0; /* Text colour */
--c-b: #225452; /* Base colour */

--h: clamp(380px, 640px, 90vh); /* Height, change the center value if you want to change the height on large screens */

--img-con-w: 280px;
--con-w: 340px;

--tabs-m: calc(34vh + 60px);

--tab-t: calc((var(--h) / 2) - 64px + (var(--tabs-m) / 2));
--tab-d: 30px;
--tab-l: 19px;
--tab-w: 27px;
--tab-f-s: 1.14em;

--tab-1-p: 1px 0px 0px 1px;
--tab-2-p: 0px 0px 0px 1px;

--b-d: 12px;
--b-w: 3px;
--b-m: 1.3;

--tab-b-t: calc(var(--tab-t) + (var(--tab-w) / 2));
--tab-b-l: calc(var(--tab-l) + (var(--tab-w) / 2));
--tab-b-w: calc(var(--tab-w) + var(--b-d));

--m-img-w: 224px;
--m-img-w: 224px;
--m-img: url('https://i.pinimg.com/564x/23/38/ed/2338ed13b8ae1bb371802c4759326f97.jpg') 50% 50% / 200%; /* Main image URL */

--con-p: 20px;

--line-h: 20px;
--connect-w: min(200px, 36%);

--icon-w: calc(var(--tab-w) + (var(--b-w) * 2));

/* If you change header icons, you may want to switch around padding variables and values to center it */
--icon-1-p: 1px 0px 0px 0px;
--icon-2-p: 1px 0px 0px 1px;
--icon-3-p: 2px 0px 0px 1px;

--header-p: 4px;
--header-f-s: 1.2em; /* Header font size, increase or decrease by increments of .1 */
--header-f: 'Exo 2', sans-serif; /* Header font, change font tag above if you change this */

--p: 10px;
--body-f-s: 0.98em; /* Body font size, increase or decrease by increments of .1 or .01 */
--body-f: 'Exo 2', sans-serif;  /* Body font, change font tag above if you change this */
--l-h: 1.55; /* Line height, increase or decrease by increments of .1 */][comment]-- Note --[/comment][border=transparent;
width: 100%;
padding: 0px;
color: var(--c-2);
font-size: 0.9em;
font-family: var(--body-f);
text-align: right;
opacity: 0.88;]Click Squares and Scroll[/border][comment]-- Main Container --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
min-height: var(--h);
padding: 0px;
display: flex;
flex-flow: row wrap;][comment]-- Image Container Placeholder --[/comment][border=transparent;
flex: 1 2 var(--img-con-w);
box-sizing: border-box;
height: var(--h);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;][comment]

-- Tab Covers --[/comment][comment]-- Tab Cover 1 --[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--c-1);
padding: var(--tab-1-p);
color: var(--c-b);
font-size: var(--tab-f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 2;][fa]fas fa-power-off[/fa][/border][comment]-- Tab Cover 2 --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-t) + var(--tab-w) + var(--tab-d));
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--c-1);
padding: var(--tab-2-p);
color: var(--c-b);
font-size: var(--tab-f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 2;][fa]fas fa-download[/fa][/border][comment]-- Tab Cover 3 --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-t) + (var(--tab-w) * 2) + (var(--tab-d) * 2));
left: var(--tab-l);
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-w);
background: var(--c-1);
padding: var(--tab-1-p);
color: var(--c-b);
font-size: var(--tab-f-s);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 2;][fa]fas fa-archive[/fa][/border][comment]

-- Tabs Container --[/comment][border=transparent;
margin-top: var(--tabs-m);
box-sizing: border-box;
width: 44px;
height: 151px;
padding: 0px;
line-height: 4;
overflow: hidden;][tabs]

[tab=.][comment]-- Tab Body 1 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
min-height: var(--h);
padding: 0px;
display: flex;
flex-flow: row wrap;
pointer-events: none;][comment]-- Image Container --[/comment][border=transparent;
position: relative;
flex: 1 2 var(--img-con-w);
box-sizing: border-box;
height: var(--h);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Tab 1 Selected --[/comment][comment]-- Borders --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-b-t) - ((var(--tab-b-w) + (var(--b-d) * 2)) / 2));
left: calc(var(--tab-b-l) - ((var(--tab-b-w) + (var(--b-d) * 2)) / 2));
box-sizing: border-box;
width: calc(var(--tab-b-w) + (var(--b-d) * 2));
height: calc(var(--tab-b-w) + (var(--b-d) * 2));
border: var(--b-w) solid var(--c-b);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
z-index: 2;][border=transparent;
box-sizing: border-box;
width: calc(var(--tab-b-w) + var(--b-d));
height: calc(var(--tab-b-w) + var(--b-d));
border: var(--b-w) solid var(--c-3);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
box-sizing: border-box;
width: var(--tab-b-w);
height: var(--tab-b-w);
border: var(--b-w) solid var(--c-2);
padding: 0px;][/border][/border][/border][comment]-- Line --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-b-t) - (var(--b-w) / 2));
left: calc(var(--tab-b-w) + (var(--b-d) * 2));
box-sizing: border-box;
width: calc(100% - (var(--tab-b-w) + (var(--b-d) * 2)));
height: var(--b-w);
background: var(--c-b);
padding: 0px;
z-index: 1;][/border][comment]

-- Main Image --[/comment][comment]-- Borders --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3));
height: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3));
border: var(--b-w) solid var(--c-2);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
z-index: 1;][border=transparent;
box-sizing: border-box;
width: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 2));
height: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 2));
border: var(--b-w) solid var(--c-3);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
box-sizing: border-box;
width: calc(var(--m-img-w) + (var(--b-d) * var(--b-m)));
height: calc(var(--m-img-w) + (var(--b-d) * var(--b-m)));
border: var(--b-w) solid var(--c-b);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- Image --[/comment][border=transparent;
box-sizing: border-box;
width: var(--m-img-w);
height: var(--m-img-w);
background: var(--m-img);
padding: 0px;][/border][/border][/border][/border][comment]
-- Main Image End --[/comment][comment]

-- Lines --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(100% - (var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3)));
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
z-index: 0;][comment]-- Left Line --[/comment][border=transparent;
position: absolute;
top: calc(0px - ((var(--b-d) * var(--b-m)) / 2));
left: calc(50% - var(--b-d) + (var(--b-w) / 2));
box-sizing: border-box;
width: var(--b-w);
height: calc(100% + ((var(--b-d) * var(--b-m)) / 2));
background: var(--c-3);
padding: 0px;][/border][comment]-- Right Line --[/comment][border=transparent;
position: absolute;
top: calc(0px - ((var(--b-d) * var(--b-m)) / 2));
left: calc(50% + var(--b-d) - (var(--b-w) * 1.5));
box-sizing: border-box;
width: var(--b-w);
height: calc(100% + ((var(--b-d) * var(--b-m)) / 2));
background: var(--c-3);
padding: 0px;][/border][comment]-- Center Line --[/comment][border=transparent;
position: absolute;
top: 0px;
left: calc(50% - (var(--b-w) / 2));
box-sizing: border-box;
width: var(--b-w);
height: 100%;
background: var(--c-2);
padding: 0px;][/border][/border][/border][comment]

-- Content Container --[/comment][border=transparent;
flex: 5 1 var(--con-w);
box-sizing: border-box;
height: var(--h);
background: var(--c-b);
padding: 0px;
pointer-events: auto;
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Content --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: 0px var(--con-p);
color: var(--c-t);
font-size: var(--body-f-s);
font-family: var(--body-f);
line-height: var(--l-h);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Line --[/comment][border=transparent;
width: var(--b-w);
height: var(--line-h);
background: var(--c-2);
padding: 0px;][/border][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
border: var(--b-w) solid var(--c-3);
padding: 0px;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
border-bottom: var(--b-w) solid var(--c-3);
padding: calc(var(--b-d) - (var(--b-w) * 2));
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--header-p);
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: bold;
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Initializing Basics...[/border][comment]-- Icon --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--icon-w);
height: var(--icon-w);
border: var(--b-w) solid var(--c-2);
color: var(--c-1);
padding: var(--icon-1-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-code[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--p);]Model :: AI-10
Serial Number :: 10100
Manufacturer :: Cultists Co.
Description :: Lab-built instead of mass manufactured, the AI-10 was made on a whim and only managed to be sold after copious reprogramming.
Notable Features :: Humanized personality and general knowledge of biology

Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.[/border][/border][comment]

-- Connected Lines --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(var(--line-h) * 2);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-end;][comment]-- Right Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% - var(--connect-w) - (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% + (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Right Line --[/comment][border=transparent;
margin-right: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Center Line --[/comment][border=transparent;
width: var(--b-w);
height: 100%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Line --[/comment][border=transparent;
margin-left: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][/border][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
border: var(--b-w) solid var(--c-3);
padding: 0px;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
border-bottom: var(--b-w) solid var(--c-3);
padding: calc(var(--b-d) - (var(--b-w) * 2));
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--header-p);
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: bold;
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Rendering Appearance...[/border][comment]-- Icon --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--icon-w);
height: var(--icon-w);
border: var(--b-w) solid var(--c-2);
color: var(--c-1);
padding: var(--icon-1-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-fill-drip[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--p);]Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.

Mauris lacinia odio vitae leo hendrerit sodales. Fusce tristique placerat lorem ac volutpat. Vestibulum vitae felis fermentum mauris iaculis volutpat eget at tellus. Proin ullamcorper placerat purus eu varius. Pellentesque scelerisque turpis ac rutrum porta. Nullam bibendum felis non nunc congue, eu consectetur quam fringilla. Nullam porta mi ac rutrum vehicula. Morbi vestibulum, ligula quis hendrerit vehicula, neque quam consectetur quam, at ullamcorper justo ipsum eu ante.[/border][/border][comment]

-- Line --[/comment][border=transparent;
width: var(--b-w);
height: var(--line-h);
background: var(--c-2);
padding: 0px;][/border][/border][comment]-- Content End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][/border][/tab]

[tab=.][comment]-- Tab Body 2 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
min-height: var(--h);
padding: 0px;
display: flex;
flex-flow: row wrap;
pointer-events: none;][comment]-- Image Container --[/comment][border=transparent;
position: relative;
flex: 1 2 var(--img-con-w);
box-sizing: border-box;
height: var(--h);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Tab 2 Selected --[/comment][comment]-- Borders --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-b-t) + var(--tab-w) + var(--tab-d) - ((var(--tab-b-w) + (var(--b-d) * 2)) / 2));
left: calc(var(--tab-b-l) - ((var(--tab-b-w) + (var(--b-d) * 2)) / 2));
box-sizing: border-box;
width: calc(var(--tab-b-w) + (var(--b-d) * 2));
height: calc(var(--tab-b-w) + (var(--b-d) * 2));
border: var(--b-w) solid var(--c-b);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
z-index: 2;][border=transparent;
box-sizing: border-box;
width: calc(var(--tab-b-w) + var(--b-d));
height: calc(var(--tab-b-w) + var(--b-d));
border: var(--b-w) solid var(--c-3);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
box-sizing: border-box;
width: var(--tab-b-w);
height: var(--tab-b-w);
border: var(--b-w) solid var(--c-2);
padding: 0px;][/border][/border][/border][comment]-- Line --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-b-t) + var(--tab-w) + var(--tab-d) - (var(--b-w) / 2));
left: calc(var(--tab-b-w) + (var(--b-d) * 2));
box-sizing: border-box;
width: calc(100% - (var(--tab-b-w) + (var(--b-d) * 2)));
height: var(--b-w);
background: var(--c-b);
padding: 0px;
z-index: 1;][/border][comment]

-- Main Image --[/comment][comment]-- Borders --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3));
height: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3));
border: var(--b-w) solid var(--c-2);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
z-index: 1;][border=transparent;
box-sizing: border-box;
width: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 2));
height: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 2));
border: var(--b-w) solid var(--c-3);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
box-sizing: border-box;
width: calc(var(--m-img-w) + (var(--b-d) * var(--b-m)));
height: calc(var(--m-img-w) + (var(--b-d) * var(--b-m)));
border: var(--b-w) solid var(--c-b);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- Image --[/comment][border=transparent;
box-sizing: border-box;
width: var(--m-img-w);
height: var(--m-img-w);
background: var(--m-img);
padding: 0px;][/border][/border][/border][/border][comment]
-- Main Image End --[/comment][comment]

-- Lines --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(100% - (var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3)));
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
z-index: 0;][comment]-- Left Line --[/comment][border=transparent;
position: absolute;
top: calc(0px - ((var(--b-d) * var(--b-m)) / 2));
left: calc(50% - var(--b-d) + (var(--b-w) / 2));
box-sizing: border-box;
width: var(--b-w);
height: calc(100% + ((var(--b-d) * var(--b-m)) / 2));
background: var(--c-3);
padding: 0px;][/border][comment]-- Right Line --[/comment][border=transparent;
position: absolute;
top: calc(0px - ((var(--b-d) * var(--b-m)) / 2));
left: calc(50% + var(--b-d) - (var(--b-w) * 1.5));
box-sizing: border-box;
width: var(--b-w);
height: calc(100% + ((var(--b-d) * var(--b-m)) / 2));
background: var(--c-3);
padding: 0px;][/border][comment]-- Center Line --[/comment][border=transparent;
position: absolute;
top: 0px;
left: calc(50% - (var(--b-w) / 2));
box-sizing: border-box;
width: var(--b-w);
height: 100%;
background: var(--c-2);
padding: 0px;][/border][/border][/border][comment]

-- Content Container --[/comment][border=transparent;
flex: 5 1 var(--con-w);
box-sizing: border-box;
height: var(--h);
background: var(--c-b);
padding: 0px;
pointer-events: auto;
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Content --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: 0px var(--con-p);
color: var(--c-t);
font-size: var(--body-f-s);
font-family: var(--body-f);
line-height: var(--l-h);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Line --[/comment][border=transparent;
width: var(--b-w);
height: var(--line-h);
background: var(--c-2);
padding: 0px;][/border][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
border: var(--b-w) solid var(--c-3);
padding: 0px;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
border-bottom: var(--b-w) solid var(--c-3);
padding: calc(var(--b-d) - (var(--b-w) * 2));
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--header-p);
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: bold;
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Parsing Personality...[/border][comment]-- Icon --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--icon-w);
height: var(--icon-w);
border: var(--b-w) solid var(--c-2);
color: var(--c-1);
padding: var(--icon-1-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-chart-network[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--p);]Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit. Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.

Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.[/border][/border][comment]

-- Connected Lines --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(var(--line-h) * 2);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-end;][comment]-- Right Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% - var(--connect-w) - (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% + (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Right Line --[/comment][border=transparent;
margin-right: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Center Line --[/comment][border=transparent;
width: var(--b-w);
height: 100%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Line --[/comment][border=transparent;
margin-left: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][/border][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
border: var(--b-w) solid var(--c-3);
padding: 0px;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
border-bottom: var(--b-w) solid var(--c-3);
padding: calc(var(--b-d) - (var(--b-w) * 2));
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--header-p);
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: bold;
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Assembling Biography...[/border][comment]-- Icon --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--icon-w);
height: var(--icon-w);
border: var(--b-w) solid var(--c-2);
color: var(--c-1);
padding: var(--icon-2-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-user-clock[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--p);]Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.

Mauris lacinia odio vitae leo hendrerit sodales. Fusce tristique placerat lorem ac volutpat. Vestibulum vitae felis fermentum mauris iaculis volutpat eget at tellus. Proin ullamcorper placerat purus eu varius. Pellentesque scelerisque turpis ac rutrum porta. Nullam bibendum felis non nunc congue, eu consectetur quam fringilla. Nullam porta mi ac rutrum vehicula. Morbi vestibulum, ligula quis hendrerit vehicula, neque quam consectetur quam, at ullamcorper justo ipsum eu ante.[/border][/border][comment]

-- Connected Lines --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(var(--line-h) * 2);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-end;][comment]-- Right Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% - var(--connect-w) - (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% + (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Right Line --[/comment][border=transparent;
margin-right: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Center Line --[/comment][border=transparent;
width: var(--b-w);
height: 100%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Line --[/comment][border=transparent;
margin-left: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][/border][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
border: var(--b-w) solid var(--c-3);
padding: 0px;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
border-bottom: var(--b-w) solid var(--c-3);
padding: calc(var(--b-d) - (var(--b-w) * 2));
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--header-p);
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: bold;
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Querying Relationships...[/border][comment]-- Icon --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--icon-w);
height: var(--icon-w);
border: var(--b-w) solid var(--c-2);
color: var(--c-1);
padding: var(--icon-1-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-user-friends[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--p);]Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.

Mauris lacinia odio vitae leo hendrerit sodales. Fusce tristique placerat lorem ac volutpat. Vestibulum vitae felis fermentum mauris iaculis volutpat eget at tellus. Proin ullamcorper placerat purus eu varius. Pellentesque scelerisque turpis ac rutrum porta. Nullam bibendum felis non nunc congue, eu consectetur quam fringilla. Nullam porta mi ac rutrum vehicula. Morbi vestibulum, ligula quis hendrerit vehicula, neque quam consectetur quam, at ullamcorper justo ipsum eu ante.[/border][/border][comment]

-- Line --[/comment][border=transparent;
width: var(--b-w);
height: var(--line-h);
background: var(--c-2);
padding: 0px;][/border][/border][comment]-- Content End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][/border][/tab]

[tab=.][comment]-- Tab Body 3 --[/comment][border=transparent;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
min-height: var(--h);
padding: 0px;
display: flex;
flex-flow: row wrap;
pointer-events: none;][comment]-- Image Container --[/comment][border=transparent;
position: relative;
flex: 1 2 var(--img-con-w);
box-sizing: border-box;
height: var(--h);
padding: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Tab 3 Selected --[/comment][comment]-- Borders --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-b-t) + ((var(--tab-w) + var(--tab-d)) * 2) - ((var(--tab-b-w) + (var(--b-d) * 2)) / 2));
left: calc(var(--tab-b-l) - ((var(--tab-b-w) + (var(--b-d) * 2)) / 2));
box-sizing: border-box;
width: calc(var(--tab-b-w) + (var(--b-d) * 2));
height: calc(var(--tab-b-w) + (var(--b-d) * 2));
border: var(--b-w) solid var(--c-b);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
z-index: 2;][border=transparent;
box-sizing: border-box;
width: calc(var(--tab-b-w) + var(--b-d));
height: calc(var(--tab-b-w) + var(--b-d));
border: var(--b-w) solid var(--c-3);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
box-sizing: border-box;
width: var(--tab-b-w);
height: var(--tab-b-w);
border: var(--b-w) solid var(--c-2);
padding: 0px;][/border][/border][/border][comment]-- Line --[/comment][border=transparent;
position: absolute;
top: calc(var(--tab-b-t) + ((var(--tab-w) + var(--tab-d)) * 2) - (var(--b-w) / 2));
left: calc(var(--tab-b-w) + (var(--b-d) * 2));
box-sizing: border-box;
width: calc(100% - (var(--tab-b-w) + (var(--b-d) * 2)));
height: var(--b-w);
background: var(--c-b);
padding: 0px;
z-index: 1;][/border][comment]

-- Main Image --[/comment][comment]-- Borders --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3));
height: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3));
border: var(--b-w) solid var(--c-2);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
z-index: 1;][border=transparent;
box-sizing: border-box;
width: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 2));
height: calc(var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 2));
border: var(--b-w) solid var(--c-3);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=transparent;
box-sizing: border-box;
width: calc(var(--m-img-w) + (var(--b-d) * var(--b-m)));
height: calc(var(--m-img-w) + (var(--b-d) * var(--b-m)));
border: var(--b-w) solid var(--c-b);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- Image --[/comment][border=transparent;
box-sizing: border-box;
width: var(--m-img-w);
height: var(--m-img-w);
background: var(--m-img);
padding: 0px;][/border][/border][/border][/border][comment]
-- Main Image End --[/comment][comment]

-- Lines --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(100% - (var(--m-img-w) + ((var(--b-d) * var(--b-m)) * 3)));
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
z-index: 0;][comment]-- Left Line --[/comment][border=transparent;
position: absolute;
top: calc(0px - ((var(--b-d) * var(--b-m)) / 2));
left: calc(50% - var(--b-d) + (var(--b-w) / 2));
box-sizing: border-box;
width: var(--b-w);
height: calc(100% + ((var(--b-d) * var(--b-m)) / 2));
background: var(--c-3);
padding: 0px;][/border][comment]-- Right Line --[/comment][border=transparent;
position: absolute;
top: calc(0px - ((var(--b-d) * var(--b-m)) / 2));
left: calc(50% + var(--b-d) - (var(--b-w) * 1.5));
box-sizing: border-box;
width: var(--b-w);
height: calc(100% + ((var(--b-d) * var(--b-m)) / 2));
background: var(--c-3);
padding: 0px;][/border][comment]-- Center Line --[/comment][border=transparent;
position: absolute;
top: 0px;
left: calc(50% - (var(--b-w) / 2));
box-sizing: border-box;
width: var(--b-w);
height: 100%;
background: var(--c-2);
padding: 0px;][/border][/border][/border][comment]

-- Content Container --[/comment][border=transparent;
flex: 5 1 var(--con-w);
box-sizing: border-box;
height: var(--h);
background: var(--c-b);
padding: 0px;
pointer-events: auto;
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0px;
overflow: auto;][comment]-- Content --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - 30px);
padding: 0px var(--con-p);
color: var(--c-t);
font-size: var(--body-f-s);
font-family: var(--body-f);
line-height: var(--l-h);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;][comment]

-- Line --[/comment][border=transparent;
width: var(--b-w);
height: var(--line-h);
background: var(--c-2);
padding: 0px;][/border][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
border: var(--b-w) solid var(--c-3);
padding: 0px;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
border-bottom: var(--b-w) solid var(--c-3);
padding: calc(var(--b-d) - (var(--b-w) * 2));
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--header-p);
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: bold;
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Consolidating Information...[/border][comment]-- Icon --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--icon-w);
height: var(--icon-w);
border: var(--b-w) solid var(--c-2);
color: var(--c-1);
padding: var(--icon-1-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-alien-monster[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--p);]Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit. Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.

Curabitur id rhoncus ex. Mauris est urna, tempus sed ligula non, suscipit fermentum augue. Mauris et elit eget neque interdum consectetur et in quam. Aenean vestibulum convallis est eu consectetur. In suscipit ipsum quis ligula porttitor, accumsan tristique ligula tincidunt. Fusce a leo non est aliquam viverra. Integer facilisis massa in tellus ultricies, sit amet tristique erat hendrerit.[/border][/border][comment]

-- Connected Lines --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
width: 100%;
height: calc(var(--line-h) * 2);
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-end;][comment]-- Right Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% - var(--connect-w) - (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Connector --[/comment][border=transparent;
position: absolute;
top: 50%;
left: calc(50% + (var(--b-w) / 2));
width: var(--connect-w);
height: var(--b-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Right Line --[/comment][border=transparent;
margin-right: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Center Line --[/comment][border=transparent;
width: var(--b-w);
height: 100%;
background: var(--c-2);
padding: 0px;][/border][comment]-- Left Line --[/comment][border=transparent;
margin-left: var(--connect-w);
width: var(--b-w);
height: 50%;
background: var(--c-2);
padding: 0px;][/border][/border][comment]

-- Text Box --[/comment][border=transparent;
box-sizing: border-box;
border: var(--b-w) solid var(--c-3);
padding: 0px;][comment]-- Header --[/comment][border=transparent;
box-sizing: border-box;
border-bottom: var(--b-w) solid var(--c-3);
padding: calc(var(--b-d) - (var(--b-w) * 2));
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
padding: var(--header-p);
color: var(--c-1);
font-size: var(--header-f-s);
font-family: var(--header-f);
font-weight: bold;
line-height: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;]Browsing Music...[/border][comment]-- Icon --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 var(--icon-w);
height: var(--icon-w);
border: var(--b-w) solid var(--c-2);
color: var(--c-1);
padding: var(--icon-3-p);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][fa]fas fa-headphones[/fa][/border][/border][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
padding: var(--p);][MEDIA=soundcloud]gaggag/opening-theme-from-nausicaa-of-the-valley-of-the-wind-studiohq#track_id=321273303[/MEDIA][/border][/border][comment]

-- Line --[/comment][border=transparent;
width: var(--b-w);
height: var(--line-h);
background: var(--c-2);
padding: 0px;][/border][/border][comment]-- Content End --[/comment][/border][comment]
-- Hidden Scroll End --[/comment][/border][/border][/tab]

[/tabs][/border][comment]
-- Tabs Container End --[/comment][/border][comment]
-- Content Container Placeholder --[/comment][border=transparent;
flex: 5 1 var(--con-w);
box-sizing: border-box;
height: var(--h);
padding: 0px;][/border][/border][comment]
-- Main Container End --[/comment][comment]-- Note --[/comment][border=transparent;
width: 100%;
padding: 0px;
color: var(--c-2);
font-size: 0.9em;
font-family: var(--body-f);
text-align: left;
opacity: 0.88;]Art by 18bot[/border][/border]
Click to expand...

I took your code, altered the colours and used it here - Futuristic - 𝐞𝐥𝐲𝐬𝐢𝐮𝐦 - cs You're awesome, thank you so much for this! Otherwise I'd have no idea how to make beautiful posts like everyone else.. hehe
 
Okay i just gotta say, i love your codes. Sometimes I just look at this thread just to look at your codes cause they are soooo good
 
Normally I would just lurk around and look at this thread a gazillion times because all your codes are so beautiful, but I just had to say something! Everything you make is so pretty like jbdsjbfsa you're so talented! Thank you for making so many beginner-friendly ones so us, less talented folk, can have pretty posts too<3
 
I did coding!!!!! I feel accomplished!!!! I linkie here, I'm really proud!! (okay, it was a tutorial on Youtube, but I'm learning!)
 
Shut-In-Fae said:
Normally I would just lurk around and look at this thread a gazillion times because all your codes are so beautiful, but I just had to say something! Everything you make is so pretty like jbdsjbfsa you're so talented! Thank you for making so many beginner-friendly ones so us, less talented folk, can have pretty posts too<3
Click to expand...
Thank you! 💕 I thought I was known for unintelligible code and too many variables, but I'm glad there's some beginner friendly code in there too lkjslfkjsd.
 
Irakma said:
I did coding!!!!! I feel accomplished!!!! I linkie here, I'm really proud!! (okay, it was a tutorial on Youtube, but I'm learning!)
Click to expand...
o7 I'm proud of you too! It looks super clean, and I'm sure you'll get to the point where you can mess around with code on your own soon.
 
Ambiloquous said:
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)


Click Tabs
  • 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.
Scroll


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]
Click to expand...

Perfection as always.
 
Your codes are a literal work of art my jaw is on the floor and so is the rest of me I'm flabbergasted.
 
Dang, your codes are too amaziiing! Where did u learn how to code like that? I mess with bbcode a bit but code keeps breaking ^^"
 
Elowyn said:
Dang, your codes are too amaziiing! Where did u learn how to code like that? I mess with bbcode a bit but code keeps breaking ^^"
Click to expand...
Thank youuu! Mainly just messing with and breaking code as you said, as well as reading CSS documentation. I'm going to quote a slightly older post from this thread because some of the stuff I said before still applies, though you might've seen it before. We no longer need to inject CSS into [border] or [bg] tags as we used to do, since RPN revived the [div], but sometimes you still might want to style a tag with an existing function like [accordion]. Also, if your code frequently breaks, you might want to check if you've toggled the [ ] button on the bar at the top of your text editor so all other buttons are greyed out. 👀 With rich text editor on (i.e., with the buttons un-greyed out and clickable), the tag autocomplete function can ruin your code if you accidentally forget one by trying to overcompensate.

Ambiloquous said:
When I first started here, I looked over the Tutorial - RpNation - BBcode Guide thread first — though I'm sure you've seen it, being that it's pinned to this center. There used to be a BBCode+ intro thread or something like that, but then that died, so we all started using CSS injections in background and border tags. Here's a slightly older thread that I think still is pretty relevant: Tutorial - BBCode CSS Injection. If you've used HTML before, you probably know a bit of CSS, so it shouldn't be too unfamiliar (but if it is, MDN and the general internet has a lot of CSS documentation). I believe some other BBCoders have tutorials that you can filter out in the BBCode Center as well? Also, I think the thing that helped me the most was looking at other people's code and breaking down the components, so feel free to take apart, break, wreck, sift through any of my codes if you feel like that's your jam.
Click to expand...
 
Dude I know you’ve heard it before but this is some of the coolest shit I’ve ever seen I can’t even begin to understand how you make these things so dynamic props to you.

(None of these fit what I’m looking for rn but this thread is DEFINITELY going in my bookmarks)
 
thecrownchaos said:
Dude I know you’ve heard it before but this is some of the coolest shit I’ve ever seen I can’t even begin to understand how you make these things so dynamic props to you.

(None of these fit what I’m looking for rn but this thread is DEFINITELY going in my bookmarks)
Click to expand...
Hjsfjdjsd thank you sm! <3 It's just experience from a lot of trial and error ngl 😭

(🥺)
 
Update
No new code here, folks. Just bug fixes.

I FINALLY FIXED THE WONKY PERSPECTIVE IN THE RELATIONSHIP/SKILL SECTION IN THE CODE. (This is totally not because someone reminded me through showing me their code, no.) I usually don't make posts about fixes (or without code in general), but this mf has been bothering me since 2021 and I know people use that code a lot more than some others.

tenor.gif


Also there are tags in the description now, though I don't know if they're actually useful. But I spent more than three hours changing it all so I can't not mention it.
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 8 (members: 1, guests: 7)

Similar threads

Bill123456789
Help How do I make code for Japanese
Replies
2
Views
130
Uxie
Uxie
CHUUYAS_HAT
Help What images to add in BBCode - FIXED
Replies
5
Views
172
Otto Levin
Otto Levin
Back
Top