This code was specially edited to fit the RP but it's not required. All posts must include their ranking in the survival show 1 - 50 (it's ok if you have the same number as someone else, it will be settled when the RP starts) and their bus number. Bus 1 and 3 are girls only and bus 2 is boys.
I ask for skills habits and other things to be realistic and it's fine to add some trait that might make them good at surviving the apocalypse but it should make sense and be realistic.
No need to write too much or make them too in depth we'll learn about them in the RP.
And finally, the CS's instagram/media posts should be from your character before everything went to hell.
P.S - No Character Limit and character age is 16 - 25
-
I'm covered in blood and it's not mine
Click Here
given name
answer here
s. name
answer here
age
answer here
rank #
answer here
sexuality
answer here
gender
answer here
a.
visage
hair
answer
eyes
answer
height
answer
weight
answer
Build
answer
Physicality
answer
username
username
caption!
username
username
caption!
username
username
caption!
b.
@username
sent text here
received text here
psyche
Not to long, just tell me what kind of person they are and it can be as vague as you want
skills
skill
skill
skill
habits
habit
habit
habit
likes
answer here
dislikes
answer here
quirks
answer here
fears
answer here
c.
Time - 0:00
Before the Survival Show
Seriously these can as short as you need
During the Survival Show
Seriously these can as short as you need
Currently - On Bus (Bus 1 and 3 for girls, 2 for boys)
Seriously these can as short as you need, for example = Sleeping
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat ex nibh, id accumsan lacus varius ac. Duis vel lacinia elit. Aliquam sodales, augue nec maximus interdum, urna purus interdum massa, a accumsan erat quam id mauris.
d.
song
artist
extra
hello
goodbye too loonng what happens when it gets to long
-
relationship title
-
character name
relationship
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat ex nibh, id accumsan lacus varius ac. Duis vel lacinia elit. Aliquam sodales, augue nec maximus interdum, urna purus interdum massa, a accumsan erat quam id mauris. Integer gravida est sit amet erat lobortis pharetra. Mauris sapien tortor, fermentum vel auctor in, eleifend ut enim. Nam dui nibh, suscipit vitae neque eu, imperdiet convallis dolor.
-
relationship title
-
character name
relationship
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat ex nibh, id accumsan lacus varius ac. Duis vel lacinia elit. Aliquam sodales, augue nec maximus interdum, urna purus interdum massa, a accumsan erat quam id mauris. Integer gravida est sit amet erat lobortis pharetra. Mauris sapien tortor, fermentum vel auctor in, eleifend ut enim. Nam dui nibh, suscipit vitae neque eu, imperdiet convallis dolor. Donec vitae nunc ac urna vestibulum ultrices. Nulla quis finibus ante. Nullam malesuada eros a accumsan molestie. Donec vehicula erat iaculis erat faucibus tempus. Fusce ligula leo, aliquet et posuere ut, consectetur nec sapien. Suspendisse cursus massa ac urna tempor venenatis. Nulla facilisi. Nullam cursus interdum risus quis rutrum. Ut a felis facilisis, ultrices mauris a, imperdiet turpis.
Quisque eget euismod purus. Morbi at scelerisque nunc. Sed pulvinar libero risus, sed lacinia risus imperdiet eu. In eu urna pulvinar, vehicula tortor vel, consequat nisi. Integer orci leo, fermentum ac metus a, mattis scelerisque erat. Fusce ac euismod ante, in placerat ex. Suspendisse vel faucibus ligula.
-
a.
b.
c.
d.
♡coded by uxie♡
The CS Code
Code:
[comment]coded by uxie! & edited by TerrorKitty for this RP, also tell Uxie how amazing she is or I'll be mad at u
fonts used:
[font=Inter]buttons[/font]
[font=Inter]headers[/font]
[font=Karla]body text[/font]
to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
[/comment][border=transparent;
/*top header background colour*/
--bg-color-1: #5f6b60;
/*bottom section background colour*/
--bg-color-2: #61755a;
/*text container background colour*/
--bg-color-3: #acb5af;
/*first accent colour -- make it contrast w color-2 and bg-color-1*/
--color-1: #000000;
/*second accent colour -- main splash of colour. contrast w color-1 and bg-color-2/3*/
--color-2: #ebdfce;
/*third accent colour -- not used for much, currently slightly darker variation of bg-color-2*/
--color-3: #424a42;
/*fourth accent colour -- advise to keep as bg-color-1 unless it looks weird due to other colours used*/
--color-4: var(--bg-color-1);
/*header colour 1 -- contrast w color-2 and bg-color-1*/
--h1: #000000;
/*header colour 2*/
--h2: var(--color-2);
/*text colour -- contrast w bg-color-3*/
--t-color: #000000;
/*fonts used*/
--button: 'Inter', sans-serif;
--header: 'Inter', sans-serif;
--body: 'Karla', sans-serif;
/*images/icons on each tab! img-1 is in the header, img-2 is on psyche page, img-3 is on history page*/
--img-1: url('https://i.imgur.com/JtbawEG.gif');
--img-2: url('https://i.imgur.com/JtbawEG.gif');
--img-3: url('https://i.imgur.com/JtbawEG.gif');
/*instagram gallery images -- to make a new one, just follow the format and change the numbers*/
--icon: url('https://i.imgur.com/JtbawEG.gif');
--gimg-1: url('https://i.imgur.com/JtbawEG.gif');
--gimg-2: url('https://i.imgur.com/JtbawEG.gif');
--gimg-3: url('https://i.imgur.com/JtbawEG.gif');
/*music player image*/
--music: url('https://i.imgur.com/JtbawEG.gif');
/*relationship images -- to make a new one, just follow the format and change the numbers*/
--r1: url('https://i.imgur.com/JtbawEG.gif');
--r2: url('https://i.imgur.com/JtbawEG.gif');
height:auto; width:100%; padding:0; line-height:0; overflow-x:auto; background-size:cover;][border=transparent; height:auto; width:100%; max-width:430px; padding:0; box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; position:relative; margin:20px auto; border-radius:5px; overflow:hidden;
--f1: 28; --f2: 72; --f1m: 120px; --f2m: 230px; --f1mw: 260px;]
[comment]----row one----[/comment]
[border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; justify-content:center; background: var(--bg-color-1);]
[comment]----image (basics)----[/comment]
[border=transparent; height:120px; flex: var(--f2); min-width: var(--f2m); max-width:clamp(180px, 100vw, 268px); padding:0; border-radius:5px; margin:8px;
position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-1); background-size:cover; pointer-events:none;
/*edit the following to adjust the cropping of the image*/ background-position:50% 40%;
position:absolute; top:0; left:0; z-index:2;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-color-2); opacity:0.2;][/border][/border][border=transparent; height:calc(100% + 130px); width:100%; padding:0; box-sizing:border-box; margin:15px -7px 0 -7px; display:flex; flex-flow:column nowrap; justify-content:flex-end;][accordion=100%;]
{slide=[border=transparent; height:245px; width:100%; padding:10px; box-sizing:border-box; font-weight:normal; font-variant:none; margin:20px 0 0 0; pointer-events:auto; display:flex; flex-flow:column nowrap; align-items:center;]
[comment]----slide one----[/comment]
[border=transparent; height:120px; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:flex-start; justify-content:flex-start; position:relative;][border=transparent; height:auto; width:fit-content; max-width:140px; padding:0; position:relative; z-index:3; margin:4px 0 120px 0;][border=transparent; height:auto; width:auto; display:inline; padding:3px 7px 3px 7px; box-sizing:border-box; background: var(--color-2); color: var(--color-1); font-family: var(--header); text-transform:uppercase; letter-spacing:2px; line-height:150%; font-size:11px; font-weight:bold; border-radius:3px; -webkit-box-decoration-break: clone;][comment]
----* * * name/role here----
[/comment]I'm covered in blood and it's not mine[/border]
[/border][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:8px; font-weight:bold; text-transform:uppercase; position:absolute; top:100px; left:0; z-index:3; letter-spacing:2px; opacity:0.8;][B]Click Here[/B][/border][/border]
[comment]----slide two (basics)----[/comment]
[border=transparent; height:120px; width:100%; padding:3px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-start; margin-top:auto;]
[border=transparent; height:95px; width:clamp(180px, 100vw - 20px, 241px); padding:6px 7px; box-sizing:border-box; position:relative; z-index:3; border-radius:3px; overflow:hidden; display:flex; flex-flow:row nowrap;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-color-3); opacity:0.7; position:absolute; top:0; left:0; z-index:1;][/border]
[comment]----content----[/comment]
[border=transparent; height:100%; flex:1; padding:0; margin-right:3px; position:relative; z-index:3; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:row wrap;]
[comment]----copy this whole thing to get another tag----[/comment]
[border=transparent; height:auto; flex:1 0; min-width:45%; padding:0; display:flex; flex-flow:column nowrap; margin:4px 3px;]
[border=transparent; height:fit-content; width:auto; max-width:86px; padding:1px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:14px; margin-right:auto; font-family: var(--body);][comment]
----* * * info title here----
[/comment]given name[/border]
[border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:14px; margin:4px 0 0 2px; font-family: var(--body); text-transform:uppercase;][comment]
----* * * info contents here----
[/comment]answer here[/border]
[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to get another tag----[/comment]
[border=transparent; height:auto; flex:1 0; min-width:45%; padding:0; display:flex; flex-flow:column nowrap; margin:4px 3px;]
[border=transparent; height:fit-content; width:auto; max-width:86px; padding:1px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:14px; margin-right:auto; font-family: var(--body);][comment]
----* * * info title here----
[/comment]s. name[/border]
[border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:14px; margin:4px 0 0 2px; font-family: var(--body); text-transform:uppercase;][comment]
----* * * info contents here----
[/comment]answer here[/border]
[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to get another tag----[/comment]
[border=transparent; height:auto; flex:1 0; min-width:45%; padding:0; display:flex; flex-flow:column nowrap; margin:4px 3px;]
[border=transparent; height:fit-content; width:auto; max-width:86px; padding:1px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:14px; margin-right:auto; font-family: var(--body);][comment]
----* * * info title here----
[/comment]age[/border]
[border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:14px; margin:4px 0 0 2px; font-family: var(--body); text-transform:uppercase;][comment]
----* * * info contents here----
[/comment]answer here[/border]
[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to get another tag----[/comment]
[border=transparent; height:auto; flex:1 0; min-width:45%; padding:0; display:flex; flex-flow:column nowrap; margin:4px 3px;]
[border=transparent; height:fit-content; width:auto; max-width:86px; padding:1px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:14px; margin-right:auto; font-family: var(--body);][comment]
----* * * info title here----
[/comment]rank #[/border]
[border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:14px; margin:4px 0 0 2px; font-family: var(--body); text-transform:uppercase;][comment]
----* * * info contents here----
[/comment]answer here[/border]
[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to get another tag----[/comment]
[border=transparent; height:auto; flex:1 0; min-width:45%; padding:0; display:flex; flex-flow:column nowrap; margin:4px 3px;]
[border=transparent; height:fit-content; width:auto; max-width:86px; padding:1px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:14px; margin-right:auto; font-family: var(--body);][comment]
----* * * info title here----
[/comment]sexuality[/border]
[border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:14px; margin:4px 0 0 2px; font-family: var(--body); text-transform:uppercase;][comment]
----* * * info contents here----
[/comment]answer here[/border]
[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to get another tag----[/comment]
[border=transparent; height:auto; flex:1 0; min-width:45%; padding:0; display:flex; flex-flow:column nowrap; margin:4px 3px;]
[border=transparent; height:fit-content; width:auto; max-width:86px; padding:1px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:14px; margin-right:auto; font-family: var(--body);][comment]
----* * * info title here----
[/comment]gender[/border]
[border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:14px; margin:4px 0 0 2px; font-family: var(--body); text-transform:uppercase;][comment]
----* * * info contents here----
[/comment]answer here[/border]
[/border]
[comment]----copy me too!----[/comment]
[/border][/border][/border]
[comment]----content end----[/comment]
[/border]
[/border]
[comment]----slide two end----[/comment]
[/border]}[border=transparent; height:107px; width:100%; padding:0; pointer-events:none; position:relative; z-index:3;][/border]{/slide}
[/accordion][/border][/border]
[comment]----image end----[/comment]
[comment]----tabs----[/comment]
[border=transparent; height:clamp(40px, 15vw, 115px); flex: var(--f1); min-width: var(--f1m); max-width: var(--f1mw); padding:0; box-sizing:border-box; margin:clamp(7px, 2vw, 12px) 8px 8px 8px;][border=transparent; height:100%; width:100%; padding:0; overflow:hidden;][border=transparent; padding:0; margin:7px -40px 0 -15px; letter-spacing:2px; line-height:46px;][tabs]
[comment]----tab one----[/comment]
[tab=.][border=transparent; height:100%; width:100%; padding:0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
[comment]----button select----[/comment]
[border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; justify-content:center; margin-bottom:auto;][border=transparent; height:120px; flex: var(--f2); min-width: var(--f2m); padding:0; margin:8px;][/border][border=transparent; height:clamp(40px, 16vw, 115px); flex: var(--f1); min-width: var(--f1m); max-width: var(--f1mw); padding:0; box-sizing:border-box; margin:12px 8px 8px 8px; display:flex; flex-flow:row wrap; align-items:flex-end; align-content:center; border-radius:4px; justify-content:center;]
[comment]----selected button----[/comment]
[border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; margin:3px 4px; position:relative; display:flex; justify-content:center; background: var(--bg-color-1);][border=transparent; height:37px; width:37px; padding:0; background: var(--color-2); opacity:1; position:absolute; top:-4px; left:-6px; z-index:1; border-radius:50%;][/border][border=transparent; height:auto; width:auto; padding:0; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; letter-spacing:3px; position:relative; z-index:2;]a.[/border][/border]
[comment]----filler button----[/comment]
[border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
[/border][/border]
[comment]----button select end----[/comment]
[comment]----tab contents----[/comment]
[border=transparent; min-height:306px; max-height:500px; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:auto;]
[comment]----appearance container----[/comment]
[border=transparent; height:clamp(190px, 38vw, 280px); flex:55; min-width:200px; padding:0; display:flex; flex-flow:column-reverse nowrap; margin:8px; border-radius:3px; overflow:hidden; background: var(--bg-color-3);]
[comment]----container title----[/comment]
[border=transparent; height:28px; width:100%; padding:2px 8px 10px 8px; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-end;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 7px; box-sizing:border-box; background: var(--bg-color-1); color: var(--h1); font-size:13px; font-family: var(--header); text-transform:uppercase; letter-spacing:2px; line-height:100%; font-weight:bold; border-radius:2px;][comment]
----* * * container title here----
[/comment]visage[/border][/border]
[comment]----appearance contents----[/comment]
[border=transparent; height:calc(100% - 28px); width:100%; padding:9px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 clamp(1px, 20px - 3.5vw, 9px) 0 9px; box-sizing:border-box; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-7px;][/border]
[comment]----copy this whole thing to make another tag----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
[border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
----* * * info title here----
[/comment]hair[/border][/border]
[border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
----* * * info contents here----
[/comment]answer[/border]
[/border]
[comment]---copy me too!----[/comment]
[comment]----copy this whole thing to make another tag----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
[border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
----* * * info title here----
[/comment]eyes[/border][/border]
[border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
----* * * info contents here----
[/comment]answer[/border]
[/border]
[comment]---copy me too!----[/comment]
[comment]----copy this whole thing to make another tag----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
[border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
----* * * info title here----
[/comment]height[/border][/border]
[border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
----* * * info contents here----
[/comment]answer[/border]
[/border]
[comment]---copy me too!----[/comment]
[comment]----copy this whole thing to make another tag----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
[border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
----* * * info title here----
[/comment]weight[/border][/border]
[border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
----* * * info contents here----
[/comment]answer[/border]
[/border]
[comment]---copy me too!----[/comment] [comment]----copy this whole thing to make another tag----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
[border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
----* * * info title here----
[/comment]Build[/border][/border]
[border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
----* * * info contents here----
[/comment]answer[/border]
[/border]
[comment]---copy me too!----[/comment]
[comment]---copy me too!----[/comment] [comment]----copy this whole thing to make another tag----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
[border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
----* * * info title here----
[/comment]Physicality[/border][/border]
[border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
----* * * info contents here----
[/comment]answer[/border]
[/border]
[comment]---copy me too!----[/comment]
[/border][/border][/border]
[comment]----appearance contents end----[/comment]
[/border]
[comment]----appearance container end----[/comment]
[comment]----instagram gallery----[/comment]
[border=transparent; min-height:230px; max-height:280px; flex:45; min-width:150px; max-width:250px; padding:5px 0; box-sizing:border-box; margin:8px; background: var(--bg-color-3); border-radius:4px; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type:y mandatory;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-10px;][/border]
[comment]----copy this whole thing to make another post----[/comment]
[border=transparent; height:100%; width:clamp(165px, 50% + 8px, 250px); padding:0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; scroll-snap-align:start; margin-top:10px;]
[comment]----username----[/comment]
[border=transparent; height:auto; width:100%; padding:2px 3px 7px 3px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:25px; width:25px; padding:1px; box-sizing:border-box; border:1px solid var(--color-2); border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--icon); background-size:cover; background-position:50% 50%; flex-shrink:0; border-radius:50%;][/border][/border][border=transparent; height:auto; flex:1; margin-left:8px; padding:0; flex-shrink:0; color: var(--t-color); font-size:10px; font-weight:bold; letter-spacing:1px; line-height:100%; font-family: var(--header); display:flex; align-items:flex-end;][comment]
----* * * username here----
[/comment]username[/border][/border]
[comment]----post image----[/comment]
[border=transparent; flex:1; min-height:50px; width:100%; padding:0;
/*edit the following to match the image in the variables*/ background: var(--gimg-1);
background-size:cover;
/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
[comment]----post contents----[/comment]
[border=transparent; height:auto; min-height:30px; padding:8px 3px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
[comment]----icons----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; font-size:13px;]
[border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-2);][fa]fas fa-heart[/fa][/border]
[border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-3);][fa]far fa-comment[/fa][/border]
[border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-3);][fa]far fa-paper-plane[/fa][/border]
[border=transparent; height:auto; width:auto; padding:0; margin-left:auto; color: var(--color-3);][fa]far fa-bookmark[/fa][/border]
[/border]
[comment]----caption----[/comment]
[border=transparent; height:auto; width:100%; padding:10px 0 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;]
[comment]----username----[/comment]
[border=transparent; height:auto; width:auto; margin-right:8px; padding:0; flex-shrink:0; color: var(--t-color); font-size:10px; font-weight:bold; letter-spacing:0.5px; line-height:12px; font-family: var(--header); flex-shrink:0;][comment]
----* * * username here----
[/comment]username[/border]
[border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:11px; font-family: var(--body); line-height:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:2px 0;][comment]
----* * * caption here----
[/comment]caption![/border]
[/border]
[comment]----caption end----[/comment]
[/border]
[comment]----post contents end----[/comment]
[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to make another post----[/comment]
[border=transparent; height:100%; width:clamp(165px, 50% + 8px, 250px); padding:0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; scroll-snap-align:start; margin-top:10px;]
[comment]----username----[/comment]
[border=transparent; height:auto; width:100%; padding:2px 3px 7px 3px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:25px; width:25px; padding:1px; box-sizing:border-box; border:1px solid var(--color-2); border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--icon); background-size:cover; background-position:50% 50%; flex-shrink:0; border-radius:50%;][/border][/border][border=transparent; height:auto; flex:1; margin-left:8px; padding:0; flex-shrink:0; color: var(--t-color); font-size:10px; font-weight:bold; letter-spacing:1px; line-height:100%; font-family: var(--header); display:flex; align-items:flex-end;][comment]
----* * * username here----
[/comment]username[/border][/border]
[comment]----post image----[/comment]
[border=transparent; flex:1; min-height:50px; width:100%; padding:0;
/*edit the following to match the image in the variables*/ background: var(--gimg-2);
background-size:cover;
/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
[comment]----post contents----[/comment]
[border=transparent; height:auto; min-height:30px; padding:8px 3px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
[comment]----icons----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; font-size:13px;]
[border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-2);][fa]fas fa-heart[/fa][/border]
[border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-3);][fa]far fa-comment[/fa][/border]
[border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-3);][fa]far fa-paper-plane[/fa][/border]
[border=transparent; height:auto; width:auto; padding:0; margin-left:auto; color: var(--color-3);][fa]far fa-bookmark[/fa][/border]
[/border]
[comment]----caption----[/comment]
[border=transparent; height:auto; width:100%; padding:10px 0 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;]
[comment]----username----[/comment]
[border=transparent; height:auto; width:auto; margin-right:8px; padding:0; flex-shrink:0; color: var(--t-color); font-size:10px; font-weight:bold; letter-spacing:0.5px; line-height:12px; font-family: var(--header); flex-shrink:0;][comment]
----* * * username here----
[/comment]username[/border]
[border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:11px; font-family: var(--body); line-height:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:2px 0;][comment]
----* * * caption here----
[/comment]caption![/border]
[/border]
[comment]----caption end----[/comment]
[/border]
[comment]----post contents end----[/comment]
[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to make another post----[/comment]
[border=transparent; height:100%; width:clamp(165px, 50% + 8px, 250px); padding:0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; scroll-snap-align:start; margin-top:10px;]
[comment]----username----[/comment]
[border=transparent; height:auto; width:100%; padding:2px 3px 7px 3px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:25px; width:25px; padding:1px; box-sizing:border-box; border:1px solid var(--color-2); border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--icon); background-size:cover; background-position:50% 50%; flex-shrink:0; border-radius:50%;][/border][/border][border=transparent; height:auto; flex:1; margin-left:8px; padding:0; flex-shrink:0; color: var(--t-color); font-size:10px; font-weight:bold; letter-spacing:1px; line-height:100%; font-family: var(--header); display:flex; align-items:flex-end;][comment]
----* * * username here----
[/comment]username[/border][/border]
[comment]----post image----[/comment]
[border=transparent; flex:1; min-height:50px; width:100%; padding:0;
/*edit the following to match the image in the variables*/ background: var(--gimg-3);
background-size:cover;
/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
[comment]----post contents----[/comment]
[border=transparent; height:auto; min-height:30px; padding:8px 3px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
[comment]----icons----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; font-size:13px;]
[border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-2);][fa]fas fa-heart[/fa][/border]
[border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-3);][fa]far fa-comment[/fa][/border]
[border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-3);][fa]far fa-paper-plane[/fa][/border]
[border=transparent; height:auto; width:auto; padding:0; margin-left:auto; color: var(--color-3);][fa]far fa-bookmark[/fa][/border]
[/border]
[comment]----caption----[/comment]
[border=transparent; height:auto; width:100%; padding:10px 0 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;]
[comment]----username----[/comment]
[border=transparent; height:auto; width:auto; margin-right:8px; padding:0; flex-shrink:0; color: var(--t-color); font-size:10px; font-weight:bold; letter-spacing:0.5px; line-height:12px; font-family: var(--header); flex-shrink:0;][comment]
----* * * username here----
[/comment]username[/border]
[border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:11px; font-family: var(--body); line-height:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:2px 0;][comment]
----* * * caption here----
[/comment]caption![/border]
[/border]
[comment]----caption end----[/comment]
[/border]
[comment]----post contents end----[/comment]
[/border]
[comment]----copy me too!----[/comment]
[/border][/border]
[comment]----instagram gallery end----[/comment]
[/border]
[comment]----tab contents end----[/comment]
[/border][/tab]
[comment]----tab one end----[/comment]
[comment]----tab two----[/comment]
[tab=.][border=transparent; height:100%; width:100%; padding:0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
[comment]----button select----[/comment]
[border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; justify-content:center; margin-bottom:auto;][border=transparent; height:120px; flex: var(--f2); min-width: var(--f2m); padding:0; margin:8px;][/border][border=transparent; height:clamp(40px, 16vw, 115px); flex: var(--f1); min-width: var(--f1m); max-width: var(--f1mw); padding:0; box-sizing:border-box; margin:12px 8px 8px 8px; display:flex; flex-flow:row wrap; align-items:flex-end; align-content:center; border-radius:4px; justify-content:center;]
[comment]----filler button----[/comment]
[border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
[comment]----selected button----[/comment]
[border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; margin:3px 4px; position:relative; display:flex; justify-content:center; background: var(--bg-color-1);][border=transparent; height:37px; width:37px; padding:0; background: var(--color-2); opacity:1; position:absolute; top:-4px; left:-6px; z-index:1; border-radius:50%;][/border][border=transparent; height:auto; width:auto; padding:0; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; letter-spacing:3px; position:relative; z-index:2;]b.[/border][/border]
[comment]----filler button----[/comment]
[border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
[/border][/border]
[comment]----button select end----[/comment]
[comment]----tab contents----[/comment]
[border=transparent; min-height:306px; max-height:500px; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:auto;]
[comment]----left----[/comment]
[border=transparent; min-height:200px; max-height:clamp(200px, 34vw, 306px); flex:32; min-width:150px; max-width:240px; padding:0; margin:clamp(0px, 1.5vw, 8px) clamp(0px, 25px - 3.2vw, 8px) 8px 8px; display:flex; flex-flow:column nowrap; align-items:center;]
[comment]----text message container----[/comment]
[border=transparent; height:70%; max-width:100%; width:100%; padding:0; display:flex; flex-flow:column nowrap;]
[border=transparent; height:auto; width:calc(100% - 8px); padding:7px 8px; box-sizing:border-box; background: var(--bg-color-3); border-radius:3px; font-family: var(--header); color: var(--h2); font-size:11px; text-transform:uppercase; letter-spacing:1px; line-height:100%; font-weight:bold; text-align:center; margin-right:8px; white-space:nowrap; overflow:hidden;][comment]
----* * * contact name here----
[/comment][plain]@username[/plain][/border]
[border=transparent; height:90%; width:100%; padding:0; display:flex; flex-direction:column; overflow:hidden; margin-top:8px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-6px;][/border]
[comment]----copy this whole thing to get another sent text----[/comment]
[border=transparent; height:auto; width:auto; max-width:clamp(130px, 85%, 185px); padding:4px 6px; box-sizing:border-box; background: var(--color-2); color: var(--h1); font-size:11px; line-height:14px; border-radius:6px 6px 0 6px; margin:6px 0 0 auto; font-family: var(--body);][comment]
----* * * text contents here----
[/comment]sent text here[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to get another received text----[/comment]
[border=transparent; height:auto; width:auto; max-width:clamp(130px, 85%, 185px); padding:4px 6px; box-sizing:border-box; background: var(--color-3); color: var(--t-color); font-size:11px; line-height:14px; border-radius:6px 6px 6px 0; margin:6px auto 0 0; font-family: var(--body);][comment]
----* * * text contents here----
[/comment]received text here[/border]
[comment]----copy me too!----[/comment]
[/border][/border][/border]
[/border]
[comment]----text message container end----[/comment]
[comment]----persona image----[/comment]
[border=transparent; height:clamp(45px, 30%, 80px); width:calc(100% - 8px); padding:0; background: var(--img-2); background-size:cover; margin:12px 8px 0 0;
/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
flex-shrink:0; border-radius:3px;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-color-2); opacity:0.2;][/border][/border]
[/border]
[comment]----left end----[/comment]
[comment]----right (personality container)----[/comment]
[border=transparent; height:clamp(265px, 38vw, 280px); flex:68; min-width:200px; padding:0; margin:8px clamp(0px, 25px - 3.2vw, 8px) 8px 8px; display:flex; flex-direction:column; overflow:hidden; border-radius:3px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-12px;][/border]
[comment]----personality contents container----[/comment]
[border=transparent; height:100%; width:50%; padding:2px 0; display:flex; flex-flow:column nowrap; border-radius:3px; overflow:hidden; background: var(--bg-color-3); margin-top:12px;]
[comment]----container title----[/comment]
[border=transparent; height:28px; width:100%; padding:10px 8px 2px 8px; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-end;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 7px; box-sizing:border-box; background: var(--bg-color-1); color: var(--h1); font-size:13px; font-family: var(--header); text-transform:uppercase; letter-spacing:2px; line-height:100%; font-weight:bold; border-radius:2px;][comment]
----* * * container title here----
[/comment]psyche[/border][/border]
[comment]----personality contents----[/comment]
[border=transparent; height:90%; width:100%; padding:9px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 clamp(1px, 20px - 3.5vw, 9px) 0 9px; box-sizing:border-box; color: var(--t-color); line-height:15px; text-align:justify; font-family: var(--body); font-size:11px;][comment]
----* * * text starts here----
[/comment]Not to long, just tell me what kind of person they are and it can be as vague as you want
[/border][/border][/border]
[/border]
[comment]----personality contents container end----[/comment]
[comment]----copy this whole thing to make another small container----[/comment]
[border=transparent; height:auto; width:50%; padding:0; background: var(--bg-color-3); margin-top:12px; display:flex; flex-flow:column nowrap; border-radius:3px;]
[comment]----container title----[/comment]
[border=transparent; height:23px; width:100%; padding:10px 0 2px 2px; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 7px; box-sizing:border-box; color: var(--color-4); font-size:12px; font-family: var(--header); text-transform:uppercase; letter-spacing:1px; line-height:100%; font-weight:bold; border-radius:2px;][comment]
----* * * container title here----
[/comment]skills[/border][/border]
[comment]----container contents----[/comment]
[border=transparent; height:auto; max-height:54px; width:100%; padding:5px 0 7px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 0 0 6px; box-sizing:border-box; display:flex; flex-flow:row wrap; align-content:flex-start;]
[comment]----copy this whole thing to make another item----[/comment]
[border=transparent; height:auto; width:auto; flex-shrink:0; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); margin:2px 3px; text-transform:uppercase; font-weight:bold; font-size:10px; letter-spacing:1px; line-height:15px; font-family: var(--body);][comment]
----* * * trait here----
[/comment]skill[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to make another item----[/comment]
[border=transparent; height:auto; width:auto; flex-shrink:0; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); margin:2px 3px; text-transform:uppercase; font-weight:bold; font-size:10px; letter-spacing:1px; line-height:15px; font-family: var(--body);][comment]
----* * * trait here----
[/comment]skill[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to make another item----[/comment]
[border=transparent; height:auto; width:auto; flex-shrink:0; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); margin:2px 3px; text-transform:uppercase; font-weight:bold; font-size:10px; letter-spacing:1px; line-height:15px; font-family: var(--body);][comment]
----* * * trait here----
[/comment]skill[/border]
[comment]----copy me too!----[/comment]
[/border][/border][/border]
[comment]----container contents end----[/comment]
[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to make another small container----[/comment]
[border=transparent; height:auto; width:50%; padding:0; background: var(--bg-color-3); margin-top:12px; display:flex; flex-flow:column nowrap; border-radius:3px;]
[comment]----container title----[/comment]
[border=transparent; height:23px; width:100%; padding:10px 0 2px 2px; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 7px; box-sizing:border-box; color: var(--color-4); font-size:12px; font-family: var(--header); text-transform:uppercase; letter-spacing:1px; line-height:100%; font-weight:bold; border-radius:2px;][comment]
----* * * container title here----
[/comment]habits[/border][/border]
[comment]----container contents----[/comment]
[border=transparent; height:auto; max-height:54px; width:100%; padding:5px 0 7px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 0 0 6px; box-sizing:border-box; display:flex; flex-flow:row wrap; align-content:flex-start;]
[comment]----copy this whole thing to make another item----[/comment]
[border=transparent; height:auto; width:auto; flex-shrink:0; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); margin:2px 3px; text-transform:uppercase; font-weight:bold; font-size:10px; letter-spacing:1px; line-height:15px; font-family: var(--body);][comment]
----* * * trait here----
[/comment]habit[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to make another item----[/comment]
[border=transparent; height:auto; width:auto; flex-shrink:0; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); margin:2px 3px; text-transform:uppercase; font-weight:bold; font-size:10px; letter-spacing:1px; line-height:15px; font-family: var(--body);][comment]
----* * * trait here----
[/comment]habit[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to make another item----[/comment]
[border=transparent; height:auto; width:auto; flex-shrink:0; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); margin:2px 3px; text-transform:uppercase; font-weight:bold; font-size:10px; letter-spacing:1px; line-height:15px; font-family: var(--body);][comment]
----* * * trait here----
[/comment]habit[/border]
[comment]----copy me too!----[/comment]
[/border][/border][/border]
[comment]----container contents end----[/comment]
[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to make another medium container----[/comment]
[border=transparent; height:auto; width:50%; padding:9px 0; box-sizing:border-box; background: var(--bg-color-3); margin-top:12px; display:flex; flex-flow:column nowrap; border-radius:3px; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 clamp(1px, 20px - 3.5vw, 9px) 0 9px; box-sizing:border-box; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-7px;][/border]
[comment]----copy this whole thing to make another tag----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
[border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
----* * * info title here----
[/comment]likes[/border][/border]
[border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
----* * * info contents here----
[/comment]answer here[/border]
[/border]
[comment]---copy me too!----[/comment]
[comment]----copy this whole thing to make another tag----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
[border=transparent; height:fit-content; width:auto; max-width:80px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
----* * * info title here----
[/comment]dislikes[/border][/border]
[border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
----* * * info contents here----
[/comment]answer here[/border]
[/border]
[comment]---copy me too!----[/comment]
[comment]----copy this whole thing to make another tag----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
[border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
----* * * info title here----
[/comment]quirks[/border][/border]
[border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
----* * * info contents here----
[/comment]answer here[/border]
[/border]
[comment]---copy me too!----[/comment]
[comment]----copy this whole thing to make another tag----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
[border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
----* * * info title here----
[/comment]fears[/border][/border]
[border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
----* * * info contents here----
[/comment]answer here[/border]
[/border]
[comment]---copy me too!----[/comment]
[/border][/border][/border]
[comment]----copy me too!----[/comment]
[/border][/border]
[comment]----right end----[/comment]
[/border]
[comment]----tab contents end----[/comment]
[/border][/tab]
[comment]----tab two end----[/comment]
[comment]----tab three----[/comment]
[tab=.][border=transparent; height:100%; width:100%; padding:0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
[comment]----button select----[/comment]
[border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; justify-content:center; margin-bottom:auto;][border=transparent; height:120px; flex: var(--f2); min-width: var(--f2m); padding:0; margin:8px;][/border][border=transparent; height:clamp(40px, 16vw, 115px); flex: var(--f1); min-width: var(--f1m); max-width: var(--f1mw); padding:0; box-sizing:border-box; margin:12px 8px 8px 8px; display:flex; flex-flow:row wrap; align-items:flex-end; align-content:center; border-radius:4px; justify-content:center;]
[comment]----filler button----[/comment]
[border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
[comment]----selected button----[/comment]
[border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; margin:3px 4px; position:relative; display:flex; justify-content:center; background: var(--bg-color-1);][border=transparent; height:37px; width:37px; padding:0; background: var(--color-2); opacity:1; position:absolute; top:-4px; left:-6px; z-index:1; border-radius:50%;][/border][border=transparent; height:auto; width:auto; padding:0; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; letter-spacing:3px; position:relative; z-index:2;]c.[/border][/border]
[comment]----filler button----[/comment]
[border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
[/border][/border]
[comment]----button select end----[/comment]
[comment]----tab contents----[/comment]
[border=transparent; min-height:306px; max-height:500px; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; pointer-events:auto;]
[comment]----right----[/comment]
[border=transparent; height:clamp(280px, 800px - 90vw, 355px); flex:76; padding:0; min-width:250px; display:flex; flex-flow:column nowrap; margin:8px;]
[comment]----history container----[/comment]
[border=transparent; height:90%; width:100%; padding:0; display:flex; flex-flow:column nowrap; border-radius:3px; overflow:hidden; background: var(--bg-color-3);]
[comment]----container title----[/comment]
[border=transparent; height:28px; width:100%; padding:10px 8px 2px 8px; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 7px; box-sizing:border-box; background: var(--bg-color-1); color: var(--h1); font-size:13px; font-family: var(--header); text-transform:uppercase; letter-spacing:2px; line-height:100%; font-weight:bold; border-radius:2px;][comment]
----* * * container title here----
[/comment]Time - 0:00[/border][/border]
[comment]----history contents----[/comment]
[border=transparent; height:calc(100% - 28px); width:100%; padding:9px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 clamp(1px, 20px - 3.5vw, 9px) 0 9px; box-sizing:border-box; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-12px;][/border]
[comment]----copy this whole thing to make another section----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:10px;][border=transparent; height:auto; width:90%; padding:0; text-align:right; color: var(--color-2); margin:5px 0 5px 0; font-family: var(--header); letter-spacing:1.5px; text-transform:uppercase; font-size:11px; line-height:15px; font-weight:bold; margin-left:auto;][comment]
----* * * section title here----
[/comment]Before the Survival Show[/border]
[border=transparent; height:auto; width:100%; padding:0; line-height:15px; font-size:11px; text-align:justify; color: var(--t-color); font-family: var(--body);][comment]
----* * * text starts here----
[/comment] Seriously these can as short as you need
[/border]
[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to make another section----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:10px;][border=transparent; height:auto; width:90%; padding:0; text-align:right; color: var(--color-2); margin:5px 0 5px 0; font-family: var(--header); letter-spacing:1.5px; text-transform:uppercase; font-size:11px; line-height:15px; font-weight:bold; margin-left:auto;][comment]
----* * * section title here----
[/comment]During the Survival Show[/border]
[border=transparent; height:auto; width:100%; padding:0; line-height:15px; font-size:11px; text-align:justify; color: var(--t-color); font-family: var(--body);][comment]
----* * * text starts here----
[/comment] Seriously these can as short as you need
[/border]
[/border]
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to make another section----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:10px;][border=transparent; height:auto; width:90%; padding:0; text-align:right; color: var(--color-2); margin:5px 0 5px 0; font-family: var(--header); letter-spacing:1.5px; text-transform:uppercase; font-size:11px; line-height:15px; font-weight:bold; margin-left:auto;][comment]
----* * * section title here----
[/comment]Currently - On Bus (Bus 1 and 3 for girls, 2 for boys)[/border]
[border=transparent; height:auto; width:100%; padding:0; line-height:15px; font-size:11px; text-align:justify; color: var(--t-color); font-family: var(--body);][comment]
----* * * text starts here----
[/comment] Seriously these can as short as you need, for example = [b]Sleeping[/b]
[/border]
[/border]
[comment]----copy me too!----[/comment]
[/border][/border][/border]
[comment]----history contents end----[/comment]
[/border]
[comment]----history container end----[/comment]
[comment]----quote----[/comment]
[border=transparent; height:53px; width:100%; padding:6px; box-sizing:border-box; background: var(--bg-color-3); display:flex; flex-flow:row nowrap; align-items:center; margin-top:12px; border-radius:3px; flex-shrink:0;][border=transparent; height:35px; width:35px; padding:5px; box-sizing:border-box; color: var(--h1); font-size:21px; display:flex; align-items:flex-end; justify-content:center; flex-shrink:0; position:relative;][border=transparent; height:28px; width:28px; padding:0; background: var(--color-4); position:absolute; top:1px; left:1px; z-index:1;border-radius:50%;][/border][border=transparent; height:auto; width:auto; padding:0; position:relative; z-index:2; left:3px; text-shadow:2px 2px var(--color-4);][fa]far fa-quote-left[/fa][/border][/border][border=transparent; height:auto; max-height:28px; overflow:hidden; flex:1; padding:0; margin-left:12px; color: var(--t-color); font-size:11px; font-family: var(--body); line-height:14px;][comment]
----* * * quote here----
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat ex nibh, id accumsan lacus varius ac. Duis vel lacinia elit. Aliquam sodales, augue nec maximus interdum, urna purus interdum massa, a accumsan erat quam id mauris.
[/border][/border]
[comment]----quote end----[/comment]
[/border]
[comment]----right end----[/comment]
[comment]----history image----[/comment]
[border=transparent; min-height:110px; max-height:280px; flex:24; padding:0; min-width:100px; background: var(--img-3); background-size:cover; margin:8px; border-radius:3px; overflow:hidden;
/*edit the following to adjust the cropping of the image*/ background-position:50% 20%;
flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-color-2); opacity:0.2;][/border][/border]
[/border]
[comment]----tab contents end----[/comment]
[/border][/tab]
[comment]----tab three end----[/comment]
[comment]----tab four----[/comment]
[tab=.][border=transparent; height:100%; width:100%; padding:0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
[comment]----button select----[/comment]
[border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; justify-content:center; margin-bottom:auto;][border=transparent; height:120px; flex: var(--f2); min-width: var(--f2m); padding:0; margin:8px;][/border][border=transparent; height:clamp(40px, 16vw, 115px); flex: var(--f1); min-width: var(--f1m); max-width: var(--f1mw); padding:0; box-sizing:border-box; margin:12px 8px 8px 8px; display:flex; flex-flow:row wrap; align-items:flex-end; align-content:center; border-radius:4px; justify-content:center;]
[comment]----filler button----[/comment]
[border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
[comment]----selected button----[/comment]
[border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; margin:3px 4px; position:relative; display:flex; justify-content:center; background: var(--bg-color-1);][border=transparent; height:37px; width:37px; padding:0; background: var(--color-2); opacity:1; position:absolute; top:-4px; left:-6px; z-index:1; border-radius:50%;][/border][border=transparent; height:auto; width:auto; padding:0; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; letter-spacing:3px; position:relative; z-index:2;]d.[/border][/border]
[/border][/border]
[comment]----button select end----[/comment]
[comment]----tab contents----[/comment]
[border=transparent; min-height:306px; max-height:500px; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:auto;]
[comment]----left-----[/comment]
[border=transparent; height:clamp(240px, 38vw, 280px); max-height:280px; flex:30; min-width:160px; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin:8px;]
[comment]----music player----[/comment]
[border=transparent; height:97px; width:100%; max-width:180px; padding:10px; box-sizing:border-box; border-radius:3px; background: var(--bg-color-3); display:flex; flex-flow:column nowrap;]
[comment]----music info container----[/comment]
[border=transparent; height:50px; width:100%; padding:0; display:flex; flex-flow:row nowrap;]
[comment]----music image----[/comment]
[border=transparent; height:50px; width:50px; padding:3px; box-sizing:border-box; border:3px solid transparent; border-top:3px solid var(--color-3); animation:fa-spin 5s linear infinite; border-radius:50%; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--music); background-size:cover; background-position:50% 50%; animation:fa-spin 5s linear infinite reverse; border-radius:50%; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-color-2); opacity:0.2;][/border][/border][/border]
[comment]----music info----[/comment]
[border=transparent; height:auto; max-height:50px; flex:1; padding:0 5px 0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center;]
[border=transparent; height:auto; max-height:26px; overflow:hidden; width:100%; padding:0; color: var(--t-color); font-size:13px; font-weight:bold; letter-spacing:0.5px; font-family: var(--header); line-height:100%; text-align:center;][comment]
----* * * song title here----
[/comment]song[/border]
[border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-size:9px; text-transform:uppercase; font-family: var(--body); line-height:100%; margin-top:3px; letter-spacing:1px; text-align:center; opacity:0.7;][comment]
----* * * song artist here----
[/comment]artist[/border]
[/border]
[comment]----music info end----[/comment]
[/border]
[comment]----music info container end----[/comment]
[comment]----play button----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; color: var(--color-2); pointer-events:none; margin-top:3px;]
[border=transparent; height:auto; width:auto; padding:0; font-size:13px;][fa]fas fa-backward[/fa][/border]
[border=transparent; height:25px; width:25px; padding:0; overflow:hidden; position:relative; margin:0 10px 0 12px]
[border=transparent; height:100%; width:100%; padding:0; position:relative; z-index:2; display:flex; align-items:center; justify-content:center; font-size:17px; background: var(--bg-color-3);][fa]fas fa-play[/fa][/border]
[comment]----actual media player----[/comment]
[border=transparent; height:100%; width:100%; padding:0; pointer-events:auto; position:absolute; top:0; left:0; z-index:1; opacity:0.1%;]
[comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
[border=transparent; height:80px; width:180px; padding:0; margin-top:-20px; margin-left:-20px; position:absolute; top:0; left:0;]
[media=soundcloud]replace with soundcloud link[/media]
[/border]
[comment]----google drive (replace the google file code within media tag with your own)----[/comment]
[border=transparent; height:500px; width:500px; margin-top:-175px; margin-left:-99px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
[media=googledrive]replace with google file code[/MEDIA]
[/border]
[/border]
[comment]----actual media player end----[/comment]
[/border]
[border=transparent; height:auto; width:auto; padding:0; font-size:13px;][fa]fas fa-forward[/fa][/border]
[/border]
[comment]----play button end----[/comment]
[/border]
[comment]----music player end----[/comment]
[comment]----misc container----[/comment]
[border=transparent; height:calc(100% - 97px); width:100%; max-width:230px; padding:0; display:flex; flex-flow:column nowrap; margin-top:12px; border-radius:3px; overflow:hidden; background: var(--bg-color-3);]
[comment]----container title----[/comment]
[border=transparent; height:28px; width:100%; padding:10px 8px 2px 8px; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-end;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 7px; box-sizing:border-box; background: var(--bg-color-1); color: var(--h1); font-size:13px; font-family: var(--header); text-transform:uppercase; letter-spacing:2px; line-height:100%; font-weight:bold; border-radius:2px;][comment]
----* * * container title here----
[/comment]extra[/border][/border]
[comment]----misc contents----[/comment]
[border=transparent; height:calc(100% - 28px); width:100%; padding:9px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 clamp(1px, 20px - 3.5vw, 9px) 0 9px; box-sizing:border-box; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]
[comment]----copy this whole thing to make another tag----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top:7px;]
[border=transparent; height:fit-content; width:auto; max-width:80px; padding:1px 0; box-sizing:border-box; flex-shrink:0; margin:1px 10px 1px 0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
----* * * info title here----
[/comment]hello[/border][/border]
[border=transparent; height:auto; flex:1; min-width:fit-content; padding:0; margin:2px 0 0 0; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
----* * * info contents here----
[/comment]goodbye too loonng what happens when it gets to long[/border]
[/border]
[comment]---copy me too!----[/comment]
[/border][/border][/border]
[comment]----misc contents end----[/comment]
[/border]
[comment]----misc container end----[/comment]
[/border]
[comment]----left end----[/comment]
[comment]----right----[/comment]
[border=transparent; min-height:227px; max-height:clamp(227px, 35vw, 280px); flex:70; min-width:200px; padding:0; display:flex; flex-direction:column; overflow:hidden; margin:8px clamp(0px, 30px - 4.5vw, 8px) 8px 8px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type:y mandatory; scroll-padding:38.5px; scroll-behavior: smooth;][border=transparent; height:auto; width:50%; padding:0; position:relative; font-size:0; visibility:hidden;][accordion=100%]
[comment]----copy this whole thing to make another relationship----[/comment]
{slide=[border=transparent; height:auto; max-height:30px; width:auto; padding:9px 12px; background: var(--color-2); border-radius:4px; font-family: var(--header); font-weight:bold; font-variant: normal; line-height:100%; text-transform:uppercase; margin:-7px -7px 0px -7px; visibility:visible; color: var(--h1); font-size:13px; letter-spacing:2px; white-space:nowrap; overflow:hidden; position:relative; z-index:10;][comment]
---* * * relationship title here---
[/comment]relationship title[/border]
}[border=transparent; height:auto; width:auto; padding:0; background: var(--bg-color-3); visibility:visible; margin:-5px -7px 4px -7px; position:relative; overflow:hidden; border-radius:4px; scroll-snap-align:start;][border=transparent; max-height:clamp(190px, 29vw, 242px); width:100%; padding:8px 0 8px 8px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
[comment]----top----[/comment]
[border=transparent; height:71px; width:100%; padding:0 8px 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; flex-shrink:0; align-items:center;]
[comment]----icon----[/comment]
[border=transparent; height:71px; width:71px; padding:0; border-radius:3px; flex-shrink:0;
/*edit the number in rX to match the variables*/ background: var(--r1);
background-size:cover;
/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
[comment]----details----[/comment]
[border=transparent; height:auto; max-height:71px; flex:1; max-width:190px; padding:0; margin-left:12px; display:flex; flex-flow:column nowrap;]
[border=transparent; height:auto; max-height:28px; width:100%; padding:0; color: var(--h2); font-size:13px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; line-height:14px; font-family: var(--header); overflow:hidden;][comment]
----* * * character name here----
[/comment]character name[/border]
[border=transparent; height:auto; width:100%; padding:0; box-sizing:border-box; color: var(--color-4); font-size:10px; text-transform:uppercase; font-weight:bold; line-height:14px; font-family: var(--header); letter-spacing:1px; margin-top:3px; white-space:nowrap; overflow:hidden;][comment]
----* * * character relationship here----
[/comment]relationship[/border]
[border=transparent; height:14px; width:100%; padding:0 3px 0 0; display:flex; flex-flow:row-reverse nowrap; align-items:center; margin-top:5px;][border=transparent; height:auto; width:auto; padding:0; flex-shrink:0; color: var(--color-3); font-size:13px;][fa]fas fa-heart[/fa][/border][border=transparent; height:14px; flex:1; margin-right:8px; padding:2px 2px 2px 2px; box-sizing:border-box; border:1px solid var(--color-3); border-radius:2px;][border=transparent; height:100%; padding:0; border-radius:1px;
/*edit the following to adjust the relationship bar*/ width:30%;
background: var(--color-4);][/border][/border][/border]
[/border]
[comment]----details end----[/comment]
[/border]
[comment]----top end----[/comment]
[comment]----bottom (character description)----[/comment]
[border=transparent; height:70%; width:100%; padding:0; display:flex; flex-direction:column; overflow:hidden; margin-top:12px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; text-align:justify; font-family: var(--body); line-height:15px;][comment]
----* * * text starts here----
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat ex nibh, id accumsan lacus varius ac. Duis vel lacinia elit. Aliquam sodales, augue nec maximus interdum, urna purus interdum massa, a accumsan erat quam id mauris. Integer gravida est sit amet erat lobortis pharetra. Mauris sapien tortor, fermentum vel auctor in, eleifend ut enim. Nam dui nibh, suscipit vitae neque eu, imperdiet convallis dolor.
[/border][/border][/border]
[comment]----bottom end----[/comment]
[/border][/border]
{/slide}
[comment]----copy me too!----[/comment]
[comment]----copy this whole thing to make another relationship----[/comment]
{slide=[border=transparent; height:auto; max-height:30px; width:auto; padding:9px 12px; background: var(--color-2); border-radius:4px; font-family: var(--header); font-weight:bold; font-variant: normal; line-height:100%; text-transform:uppercase; margin:-7px -7px 0px -7px; visibility:visible; color: var(--h1); font-size:13px; letter-spacing:2px; white-space:nowrap; overflow:hidden; position:relative; z-index:10;][comment]
---* * * relationship title here---
[/comment]relationship title[/border]
}[border=transparent; height:auto; width:auto; padding:0; background: var(--bg-color-3); visibility:visible; margin:-5px -7px 4px -7px; position:relative; overflow:hidden; border-radius:4px; scroll-snap-align:start;][border=transparent; height:clamp(190px, 29vw, 243px); width:100%; padding:8px 0 8px 8px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
[comment]----top----[/comment]
[border=transparent; height:71px; width:100%; padding:0 8px 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; flex-shrink:0; align-items:center;]
[comment]----icon----[/comment]
[border=transparent; height:71px; width:71px; padding:0; border-radius:3px; flex-shrink:0;
/*edit the number in rX to match the variables*/ background: var(--r2);
background-size:cover;
/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
[comment]----details----[/comment]
[border=transparent; height:auto; max-height:71px; flex:1; max-width:190px; padding:0; margin-left:12px; display:flex; flex-flow:column nowrap;]
[border=transparent; height:auto; max-height:28px; width:100%; padding:0; color: var(--h2); font-size:13px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; line-height:14px; font-family: var(--header); overflow:hidden;][comment]
----* * * character name here----
[/comment]character name[/border]
[border=transparent; height:auto; width:100%; padding:0; box-sizing:border-box; color: var(--color-4); font-size:10px; text-transform:uppercase; font-weight:bold; line-height:14px; font-family: var(--header); letter-spacing:1px; margin-top:3px; white-space:nowrap; overflow:hidden;][comment]
----* * * character relationship here----
[/comment]relationship[/border]
[border=transparent; height:14px; width:100%; padding:0 3px 0 0; display:flex; flex-flow:row-reverse nowrap; align-items:center; margin-top:5px;][border=transparent; height:auto; width:auto; padding:0; flex-shrink:0; color: var(--color-3); font-size:13px;][fa]fas fa-heart[/fa][/border][border=transparent; height:14px; flex:1; margin-right:8px; padding:2px 2px 2px 2px; box-sizing:border-box; border:1px solid var(--color-3); border-radius:2px;][border=transparent; height:100%; padding:0; border-radius:1px;
/*edit the following to adjust the relationship bar*/ width:30%;
background: var(--color-4);][/border][/border][/border]
[/border]
[comment]----details end----[/comment]
[/border]
[comment]----top end----[/comment]
[comment]----bottom (character description)----[/comment]
[border=transparent; height:70%; width:100%; padding:0; display:flex; flex-direction:column; overflow:hidden; margin-top:12px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; text-align:justify; font-family: var(--body); line-height:15px;][comment]
----* * * text starts here----
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat ex nibh, id accumsan lacus varius ac. Duis vel lacinia elit. Aliquam sodales, augue nec maximus interdum, urna purus interdum massa, a accumsan erat quam id mauris. Integer gravida est sit amet erat lobortis pharetra. Mauris sapien tortor, fermentum vel auctor in, eleifend ut enim. Nam dui nibh, suscipit vitae neque eu, imperdiet convallis dolor. Donec vitae nunc ac urna vestibulum ultrices. Nulla quis finibus ante. Nullam malesuada eros a accumsan molestie. Donec vehicula erat iaculis erat faucibus tempus. Fusce ligula leo, aliquet et posuere ut, consectetur nec sapien. Suspendisse cursus massa ac urna tempor venenatis. Nulla facilisi. Nullam cursus interdum risus quis rutrum. Ut a felis facilisis, ultrices mauris a, imperdiet turpis.
Quisque eget euismod purus. Morbi at scelerisque nunc. Sed pulvinar libero risus, sed lacinia risus imperdiet eu. In eu urna pulvinar, vehicula tortor vel, consequat nisi. Integer orci leo, fermentum ac metus a, mattis scelerisque erat. Fusce ac euismod ante, in placerat ex. Suspendisse vel faucibus ligula.
[/border][/border][/border]
[comment]----bottom end----[/comment]
[/border][/border]
{/slide}
[comment]----copy me too!----[/comment]
[/accordion][/border][/border][/border]
[comment]----right end----[/comment]
[/border]
[comment]----tab contents end----[/comment]
[/border][/tab]
[comment]----tab four end----[/comment]
[/tabs][/border][/border][/border]
[comment]----tabs end----[/comment]
[/border]
[comment]----row one end----[/comment]
[comment]----tab cover----[/comment]
[border=transparent; height:100%; width:100%; padding:0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none;][border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; justify-content:center;][border=transparent; height:120px; flex: var(--f2); min-width: var(--f2m); padding:0; margin:8px;][/border][border=transparent; height:clamp(40px, 16vw, 115px); flex: var(--f1); min-width: var(--f1m); max-width: var(--f1mw); padding:0; box-sizing:border-box; margin:12px 8px 8px 8px; display:flex; flex-flow:row wrap; align-items:flex-end; align-content:center; border-radius:4px; justify-content:center; background: var(--bg-color-1);]
[comment]----button----[/comment]
[border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; margin:3px 4px; border-radius:50%; position:relative; letter-spacing:3px; display:flex; justify-content:center;]a.[/border]
[comment]----button----[/comment]
[border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; margin:3px 4px; border-radius:50%; position:relative; letter-spacing:3px; display:flex; justify-content:center;]b.[/border]
[comment]----button----[/comment]
[border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; margin:3px 4px; border-radius:50%; position:relative; background:transparent; letter-spacing:3px; display:flex; justify-content:center;]c.[/border]
[comment]----button----[/comment]
[border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; margin:3px 4px; border-radius:50%; position:relative; background:transparent; letter-spacing:3px; display:flex; justify-content:center;]d.[/border]
[/border][/border]
[comment]----filler/row two----[/comment]
[border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row wrap;]
[border=transparent; height:280px; flex:1; min-width:180px; padding:0; margin:8px;][/border]
[border=transparent; min-height:200px; flex:1; min-width:180px; padding:0;margin:8px;][/border]
[/border][/border]
[comment]----tab cover end----[/comment]
[comment]----filler/row two----[/comment]
[border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row wrap; background: var(--bg-color-2);]
[border=transparent; height:280px; flex:1; min-width:180px; padding:0; margin:8px;][/border]
[border=transparent; min-height:200px; flex:1; min-width:180px; padding:0; margin:8px;][/border]
[/border]
[comment]
----signature! do not remove
[/comment][bg=transparent; height:auto; width:auto; padding:0; position:absolute;z-index:6;opacity:0.2;color: var(--color-1); font-size:clamp(9px, 1.2vw, 10px); top:14px; left:15px; line-height:100%;][font=Open Sans][b]♡coded by uxie♡[/b][/font][/bg][/border][/border]
Last edited: