Closed Ria's -- code dump?

RI.a · May 11, 2018

[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Simple CS Codes
Not mobile friendly.
Here's a bunch of simple scrollable CS codes
Features: Hidden scroll, overlay texts.
You can add as many sections of texts you want. To do so, follow this order:

Code:

[div class=titleblock]title.[/div][div class=textbox]text here[/div]

I've left a comment in the code where you can place any additional sections.
[/div]
[class=background] max-width:900px; height:520px; margin:auto;center; background-color: #eee; overflow:hidden; [/class] [class=imagebox] width:350px; height:450px; background:url('https://i.imgur.com/OYbw438.jpg'); background-size:120%; border:5px solid #222; position:relative; top:30px; left:510px; [/class] [class=overlaytext] width:330px; text-align:right; font-family

swald; font-size:25px; color:#c93030; text-shadow:2px 2px 0px #222; position:relative; top:400px; left:0px; [/class] [class=maintextwrapper] width:900px; height:460px; overflow-y:auto; padding:0px; position:relative; top:-430px; left:40px; [/class] [class=textbox] width:450px; background:#fff; font-family:Roboto; font-size:12px; color:#222; padding:10px; position:relative; top:-40px; [/class] [class=titleblock] width:450px; text-align:right; font-family

swald; font-size:25px; color:#eee; text-shadow:2px 2px 0px #222; position:relative; top:-50px; [/class]
[div class=background][div class=imagebox][div class=overlaytext]something here[/div][/div][div class=maintextwrapper]

[div class=titleblock]basics.[/div][div class=textbox]Name:
Nickname(s):
Age:
Gender:
Race:
Year:
Role:
Occupation: [/div]

[div class=titleblock]personality.[/div][div class=textbox]PERSONALITY HERE
Strengths:
Weaknesses:
Likes:
Dislikes: [/div]

[div class=titleblock]history.[/div][div class=textbox]HISTORY HERE
Relationships:[/div][/div]

credits

RI.a

[/div]

Code:

[nobr]
[class=background]
max-width:900px;
height:520px;
margin:auto;center;
background-color: #eee;
overflow:hidden;
[/class]

[class=imagebox]
width:350px;
height:450px;
background:url('https://i.imgur.com/OYbw438.jpg');
background-size:120%;
border:5px solid #222;
position:relative;
top:30px;
left:510px;
[/class]

[class=overlaytext]
width:330px;
text-align:right;
font-family:Oswald;
font-size:25px;
color:#c93030;
text-shadow:2px 2px 0px #222;
position:relative;
top:400px;
left:0px;
[/class]

[class=maintextwrapper]
width:900px;
height:460px;
overflow-y:auto;
padding:0px;
position:relative;
top:-430px;
left:40px;
[/class]

[class=textbox]
width:450px;
background:#fff;
font-family:Roboto;
font-size:12px;
color:#222;
padding:10px;
position:relative;
top:-40px;
[/class]

[class=titleblock]
width:450px;
text-align:right;
font-family:Oswald;
font-size:25px;
color:#eee;
text-shadow:2px 2px 0px #222;
position:relative;
top:-50px;
[/class]
[/nobr]
[div class=background][div class=imagebox][div class=overlaytext]something here[/div][/div][div class=maintextwrapper][div=width:470px;height:200px;background:url('https://i.imgur.com/vXz0wBb.png');background-size:100%;][/div][div class=titleblock]basics.[/div][div class=textbox][b]Name:[/b] 
[b]Nickname(s):[/b] 
[b]Age:[/b] 
[b]Gender:[/b]
[b]Race:[/b]
[b]Year:[/b]
[b]Role:[/b] 
[b]Occupation:[/b] [/div][div=width:470px;height:200px;background:url('https://i.imgur.com/t2bT7GJ.jpg');background-size:100%;][/div][div class=titleblock]personality.[/div][div class=textbox]PERSONALITY HERE
[b]Strengths:[/b] 
[b]Weaknesses:[/b] 
[b]Likes:[/b] 
[b]Dislikes:[/b] [/div][div=width:470px;height:200px;background:url('https://i.imgur.com/l7bUCCM.jpg?1');background-size:100%;][/div][div class=titleblock]history.[/div][div class=textbox]HISTORY HERE
[b]Relationships:[/b][/div][comment]you can add more sections here[/comment][/div][div=font-family:Heebo;font-size:9px;color:#aaa;opacity:0.7;position:relative;top:-412px;left:2px;]credits [USER=55064]@RI.a[/USER][/div][/div]

RI.a · May 11, 2018

[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Simple CS Codes 'cont
Not mobile friendly. This is my character, and I'm sure it doesn't need to be said, but no part of it is to be recreated (with exception to the code of course). Thanks.
I could possibly make this mobile friendly if anyone wants it to be. Or when I feel like coming back to it to edit haha
Features: Single hidden scroll, overlay texts, borders, crazy colours. I apologise if the colours give you a headache ahaha
Like the above, you can add as many sections of texts you want. To do so, follow this order:

Code:

[div class=titleblock]title.[/div][div class=textbox]text here[/div]

I've left a comment in the code where you can place any additional sections.
[/div]
[class=background] max-width:500px; height:500px; margin:auto;center; padding:50px; background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0, linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0, linear-gradient(315deg, #ECEDDC 25%, transparent 25%), linear-gradient(45deg, #ECEDDC 25%, transparent 25%); background-size: 100px 100px; background-color: #EC173A; border-top-right-radius:50px; border-top-left-radius:50px; border-bottom-left-radius:50px; border-bottom-right-radius:50px; overflow:hidden; [/class] [class=scrollbox] width:500px; height:510px; overflow-y:auto; padding:0px; position:relative; top:0px; left:70px; [/class] [class=imagebox] width:360px; height:500px; background:url('https://i.imgur.com/TUaZuUe.jpg') no-repeat; background-size:100%; border:5px solid #631766; [/class] [class=gifbox] width:360px; height:100px; background:url('https://78.media.tumblr.com/7d1802db9b40404b00e9d5f164c605c6/tumblr_ounfra4e4e1v4r38fo1_540.gif') no-repeat; background-size:100%; border:5px solid #631766; [/class] [class=textbox] width:350px; padding:10px; background:#fff; font:Montserrat; font-size:12px; color:black; [/class] [class=titleblock] width:350px; background:#631766; font:Montserrat; font-size:20px; color:#fff; padding:10px; [/class] [class=overlaytext] width:230px; position:relative; top:-25px; left:120px; text-align:right; font

T Sans Narrow; font-size:30px; color:#222; text-shadow: -1px -2px 0px #930707; [/class]
[div class=background][div class=scrollbox][div class=imagebox][/div][div class=titleblock]basics.[/div][div class=textbox]
Name: Rumi Kozuke
Age: 18
Gender: Female
Race: Japanese
Sexuality: Heterosexual
Occupation: High school student
Hobbies: Choreography, dancing (hip-hop, contemporary)[/div]

[div class=titleblock]personality.[/div][div class=textbox]
Rumi's personality is rather.... ambiguous. Most of the time, she has a happy-go-lucky attitude and is no different from any other high school girl. She studies, has a healthy social life with her classmates and family, talks about boys and celebrities, all in all she's like a typical nice girl next door type. However, this just masks her other side. Almost like an alter-ego, this side is dark, cunning and an intelligent psychopath who likes control and gets a high from bloodshed. Rumi sees the other face of her as another entity, referring to 'Her' or 'She'. She secretly knows that she enjoys it too, the excitement she gets from draining the life of another in her hands is dangerously addictive. Her dark side is rather flirty and likes to play with her victims.[/div]

[div class=titleblock]history.[/div][div class=textbox]
Her friends and classmates know her as the dance junkie- always listening to the latest music with her ear phones and dancing randomly along the corridor or when she's alone in school. Her social circle doesn't really know much else about her as she pretty much talk passionately about her hobby. [/div]

[div class=gifbox][/div][div class=overlaytext]Come and play[/div][div class=titleblock]others.[/div][div class=textbox]
Along with dance club in school, she joined a dance studio in the city that she goes to a few times a week.
[/div][/div]

credits

RI.a

[/div]

Code:

[nobr]
[class=background]
max-width:500px;
height:500px;
margin:auto;center;
padding:50px;
background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);   
background-size: 100px 100px;
background-color: #EC173A;
border-top-right-radius:50px;
border-top-left-radius:50px;
border-bottom-left-radius:50px;
border-bottom-right-radius:50px;
overflow:hidden;
[/class]

[class=scrollbox]
width:500px;
height:510px;
overflow-y:auto;
padding:0px;
position:relative;
top:0px;
left:70px;
[/class]

[class=imagebox]
width:360px;
height:500px;
background:url('https://i.imgur.com/TUaZuUe.jpg') no-repeat;
background-size:100%;
border:5px solid #631766;
[/class]

[class=gifbox]
width:360px;
height:100px;
background:url('https://78.media.tumblr.com/7d1802db9b40404b00e9d5f164c605c6/tumblr_ounfra4e4e1v4r38fo1_540.gif') no-repeat;
background-size:100%;
border:5px solid #631766;
[/class]

[class=textbox]
width:350px;
padding:10px;
background:#fff;
font:Montserrat;
font-size:12px;
color:black;
[/class]

[class=titleblock]
width:350px;
background:#631766;
font:Montserrat;
font-size:20px;
color:#fff;
padding:10px;
[/class]

[class=overlaytext]
width:230px;
position:relative;
top:-25px;
left:120px;
text-align:right;
font:PT Sans Narrow;
font-size:30px;
color:#222;
text-shadow: -1px -2px 0px #930707;
[/class]

[/nobr]
[div class=background][div class=scrollbox][div class=imagebox][/div][div class=titleblock]basics.[/div][div class=textbox]
[/div]

[div class=titleblock]personality.[/div][div class=textbox]
[/div]

[div class=titleblock]history.[/div][div class=textbox]
[/div]

[div class=gifbox][/div][div class=overlaytext][i]Come and play[/i][/div][div class=titleblock]others.[/div][div class=textbox]

[MEDIA=youtube]3hFKppDtUqc[/MEDIA][/div][/div]
[comment]add any additional sections here[/comment]
[div=font-family:Heebo;font-size:9px;color:black;position:relative;left:245px;opacity:0.6;]credits [USER=55064]@RI.a[/USER] [/div][/div]

RI.a · May 11, 2018

[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Simple CS Codes 'cont
Mobile friendly!
Features: Script for tabs, hidden scroll, hovers.
Another one of my charas that I've never got to play with much.
I don't own the image.[/div] [class=container] display:flex; height:70vh; max-width:900px; border:1px solid #9abfe0; margin:auto;center; flex-wrap:wrap; align-items:flex-start; overflow:hidden; flex-direction:row; [/class] [class=scrollbox] width:101%; height:60vh; overflow-y:scroll; [/class] [class=text] margin-left:5px; font-family:Heebo, regular; font-size:1em; color:#4f4f4f; [/class] [class=tabs] display:inline-block; width:100px; padding:.2em; text-align:center; font-size:1em; color:#9abfe0; font-family:Heebo, regular; cursor:pointer; transition: all 0.3s ease-in-out; [/class] [class name=tabs state=hover] letter-spacing:.3em; [/class] [script class=tabone on=click] removeClass select tabs addClass select tabone hide scrollbox show pageone [/script] [script class=tabone] addClass select tabone [/script] [script class=none] hide pagetwo hide pagethree hide pagefour hide pagefive [/script] [script class=tabtwo on=click] removeClass select tabs addClass select tabtwo hide scrollbox show pagetwo [/script] [script class=tabthree on=click] removeClass select tabs addClass select tabthree hide scrollbox show pagethree [/script] [script class=tabfour on=click] removeClass select tabs addClass select tabfour hide scrollbox show pagefour [/script] [script class=tabfive on=click] removeClass select tabs addClass select tabfive hide scrollbox show pagefive [/script]
[div class=container]

[div class="tabs tabone"]main

[div class="tabs tabtwo"]basic[/div][div class="tabs tabthree"]persona[/div][div class="tabs tabfour"]powers[/div][div class="tabs tabfive"]extra[/div][/div]

[div class="scrollbox pageone"]

[/div][div class="scrollbox pagetwo"]
[div class=text]Name: Spiar (read as spear) Ruesial

Age: 16

Sexuality: Heterosexual

Alignment: Good

Species: Kinnara (half bird, half human)

Height: 5'/152 cm

Weight: 99 lb/45 kg

Build: Lean
[/div][/div][div class="scrollbox pagethree"]
[div class=text]Personality: Spiar isn't particularly sociable, nor is she a closed book. She's nice and generally approachable. She's not very good at introducing herself or small talk with people she's just met and due to her history, she's never had a friend before. Given the opportunity of a fresh start, she'll push herself to make friends with everyone and hopes experience many new things. Her innocent mind may take things literally, or unable to understand meaning behind words. She's humble to a fault, to a point where someone may lose patience with her. But when a fight breaks out involving someone she knows, she'll try her best to stop it and mediate the situation- even if it means putting herself in danger.

Habits: Bites her nails when upset or stressed.

Bio: The Kinnara are half human and half bird, where they have bright, colourful wings on their backs and their bottom half is like a bird with strong legs and talons while their upper half is human. Spiar is the youngest in her family, born the smallest of her 5 older siblings and abnormal as she only has dull, dark wings on her back. Deemed the weakest, she has to live with a stigma of 'the first to die' in her clan. The clan origins dates back to centuries ago in the far east. Where the humans called them fallen, sinful angels or messengers of demons because of their black wings. But they were just as any clan would be, they worked to survive together; gathering food, learning to fight to defend the clan and etc. Spiar's family is known to have the strongest fighters in the clan- many questioned how Spiar could exist and blamed her mother for being unfaithful. Outcasted, she trains herself daily with her wings, a long pole and practices archery. She did notice that her endurance is much less compared to her siblings and found out she has the ability to hypotise living creatures- though this caused another uproar, calling her a witch. Her father had enough of his defect daughter and sent her to Luxor Academy and she was not allowed back until she proved herself a "full-fledged Kinnara".

Likes: Warm places, sweets, exploring, cats.

Dislikes: Thunderstorms, bullying, unnecessary violence, stereotypes.
[/div][/div][div class="scrollbox pagefour"]
[div class=text]Weapons: Retractable staff

Powers:
FLIGHT :
SPEAR :
ARCHERY :
HYPNOTISM :

Weakness:
STAMINA :
HUNGER :
MIND LOSS :
CLOSE COMBAT :

Her lack of stamina limits her fighting skills and the length of time in the air. She gets hungry easily and will need plenty of nourishment to regain her strength.
Her hypnotism is only triggered when a target hears her singing, and will be compelled by her and follow her commands till completed. The only way to dispel this is to knock out the victim or the caster. However, the longer she holds control over her victim(s), the more vulnerable she is to losing her mind and self control. It's as if another dark force takes control of her body. Spiar does not like using this ability and refrains from singing when others are present.[/div][/div][div class="scrollbox pagefive"]
[div class=text]Extra:

[/div][/div]

[/div]

credit

RI.a

Code:

[nobr]
[class=container]
display:flex;
height:70vh;
max-width:900px;
border:1px solid #9abfe0;
margin:auto;center;
flex-wrap:wrap;
align-items:flex-start;
overflow:hidden;
flex-direction:row;
[/class]

[class=scrollbox]
width:101%;
height:60vh;
overflow-y:scroll;
[/class]

[class=text]
margin-left:5px;
font-family:Heebo, regular;
font-size:1em;
color:#4f4f4f;
[/class]

[class=tabs]
display:inline-block;
width:100px;
padding:.2em;
text-align:center;
font-size:1em;
color:#9abfe0;
font-family:Heebo, regular;
cursor:pointer;
transition: all 0.3s ease-in-out;
[/class]

[class name=tabs state=hover]
letter-spacing:.3em;
[/class]

[script class=tabone on=click]
removeClass select tabs
addClass select tabone
hide scrollbox
show pageone
[/script]

[script class=tabone]
addClass select tabone
[/script]

[script class=none]
hide pagetwo
hide pagethree
hide pagefour
hide pagefive
[/script]

[script class=tabtwo on=click]
removeClass select tabs
addClass select tabtwo
hide scrollbox
show pagetwo
[/script]

[script class=tabthree on=click]
removeClass select tabs
addClass select tabthree
hide scrollbox
show pagethree
[/script]

[script class=tabfour on=click]
removeClass select tabs
addClass select tabfour
hide scrollbox
show pagefour
[/script]

[script class=tabfive on=click]
removeClass select tabs
addClass select tabfive
hide scrollbox
show pagefive
[/script]
[/nobr]
[div class=container][row][div=min-width:300px;max-width:900px;][div class="tabs tabone"][font=Heebo][U]main[/U][/font][/div][div class="tabs tabtwo"][U]basic[/U][/div][div class="tabs tabthree"][U]persona[/U][/div][div class="tabs tabfour"][U]powers[/U][/div][div class="tabs tabfive"][U]extra[/U][/div][/div][/row][row][div class="scrollbox pageone"][div=width:100%;height:100%;background:url('https://i.imgur.com/n7d1J3g.png');background-size:100%;background-position:center;background-repeat:no-repeat;][/div][/div][div class="scrollbox pagetwo"]
[div class=text][u]Name:[/u] 

[u]Age:[/u]

[u]Sexuality:[/u]

[u]Alignment:[/u]

[u]Species:[/u] 

[u]Height:[/u] 

[u]Weight:[/u] 

[u]Build:[/u]
[/div][/div][div class="scrollbox pagethree"]
[div class=text][u]Personality:[/u] HELLO

[u]Habits:[/u] 

[u]Bio:[/u] TEXT HERE

[u]Likes:[/u] 

[u]Dislikes:[/u] 
[/div][/div][div class="scrollbox pagefour"]
[div class=text][u]Weapons:[/u] 

[u]Powers:[/u]
GNIWPVR : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE][COLOR=#9abfe0][/COLOR]
GNWIPVR : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE][COLOR=#9abfe0][/COLOR]
GIWVRW : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE][COLOR=#9abfe0][/COLOR]
GWIOVNRW : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE]

[u]Weakness:[/u]
GWIOVW : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE][COLOR=#9abfe0][/COLOR]
GHWOINWR : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE][COLOR=#9abfe0][/COLOR]
GNWOVW : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE]
HAOWS : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE]

More text here[/div][/div][div class="scrollbox pagefive"]
[div class=text][u]Extra:[/u] 
[MEDIA=youtube]IC7ba9WDCn8[/MEDIA]
[MEDIA=youtube]mrKMDqVwRaU[/MEDIA]
[/div][/div]
[/row][/div][div=max-width:900px;margin:auto;font:Heebo;font-size:0.5em;opacity:0.5;]credit [USER=55064]@RI.a[/USER] [/div]

RI.a · Jun 3, 2018

[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Simple CS Codes 'cont
What's this? More CS codes? Yes... yes it is. I made this for DC/Marvel University RP.
Mobile friendly!
Features: Single hidden scroll, banner/header.[/div]

Raven

Artist: Picolo

Faceclaim: Julia Goldani Telles

Basics
Name: Rachel Roth
Age: 18 years old
Gender: Female
Sexuality: Heterosexual
Character: Raven
Universe: DC
Affliation: Teen Titans

Appearance
Eye Color: Blue
Hair Color: Black
Height: 5' 4"/165cm
Weight: 121 lbs/55 kg
Body Type: Lean
Tattoos/Piercings: None
Distinguishing marks: A small red jewel on her forehead, known as chakra; pale, porcelein skin.

Personality
Likes: Reading | Alone time | Herbal Tea | Meditating
Dislikes: Loud noises | Surprises | Anyone going through her things | Trigon
Vices: Emotionally cold | Distant | Untrusting
Virtues: Independent | Caring | Mature

Powers
Soul-Self: Raven can manifest her "Soul-Self" through astral projection. It normally takes the form of a giant raven.

Astral Projection: Through the use of her soul-self, Raven can project her consciousness into the mind, for therapeutic purposes (to aid in her own meditation, or to help calm an agitated ally), or for offensive attacks, rendering her enemies unconscious.

Empathy: Psionic ability of empathy, the power to absorb emotions, enabling her to feel the feelings of others.

Darkness/Shadows Control: Raven has the power to create and control the element of pure darkness and shadows and bend it to her will; usually using it in conjunction with her telekinesis.

Telekinesis: Raven has the ability to move objects with mind. She is able to move a collative total of one person at a time.

Biography
Arella, Raven's human mother, was chosen to bear the demon Trigon a child. A group of pacifist disciples of Temple Azarath, took Arella in before she could commit suicide. In their inter-dimensional world, the child was born. Among Trigon's children, Raven was the only daughter. The disciples feared that Raven would bring destruction under her father's orders, and a spiritual leader, Azar took her as a disciple. She taught her of her parentage, in pacifism, meditation and push her emotions to resist Trigon's dark influence, while perfecting her powers of astral projection and empathic healing.

After her tutor's death, Raven had dreams of Trigon saying that when she reached adulthood, he would persuade her to be his ally. At the age of 18, she felt a significant surge in Trigon's powers and fled to earth. There, she found an institution for super-powered youths and decided to enrol. Hopefully able to hide away from her father and grow strong enough to defeat him before he could attempt to take over the universe.

Relationships
N/A

Extra
Evanescence - Bring Me To Life
Imagine Dragons - Demons

code by Ri.a

Code:

[centerblock=60][div=border:.1em solid black;overflow:hidden;background:white;padding:.8em;][div=margin:auto;center;width:95%;background:url('http://moziru.com/images/drawn-raven-minimalist-13.jpg');background-size:100%;background-repeat:none;background-position:center;opacity:0.8;text-align:right;font:Skranji;font-size:2em;color:black;padding:.2em;]
[font=Skranji]Raven[/font][/div]
[div=width:103%;height:70vh;overflow-y:scroll;padding:.3em;][div=width:95%;font:Lato;font-size:.8em;color:black;][div=width:70%;margin:auto;text-align:left;font-size:.5em;color:#aaa;][img]https://s-media-cache-ak0.pinimg.com/originals/fe/b7/e4/feb7e4a0f4f09c1362cae4754a651ec9.jpg[/img]
Artist: Picolo[/div]
[div=width:50%;float:right;text-align:right;font-size:.5em;color:#aaa;][img]http://s1.lprs1.fr/images/2017/03/23/6789246_000-iu1rv-15d89114033-original_300x356.jpg[/img]
Faceclaim: Julia Goldani Telles[/div][font=Skranji]Basics[/font]
[font=Lato]Name:[/font] Rachel Roth
Age: 18 years old
Gender: Female
Sexuality: Heterosexual
Character: Raven
Universe: DC
Affliation: Teen Titans

[font=Skranji]Appearance[/font]
Eye Color: Blue
Hair Color: Black
Height: 5' 4"/165cm
Weight: 121 lbs/55 kg
Body Type: Lean
Tattoos/Piercings: None
Distinguishing marks: A small red jewel on her forehead, known as chakra; pale, porcelein skin.

[font=Skranji]Personality[/font]
Likes: Reading | Alone time | Herbal Tea | Meditating
Dislikes: Loud noises | Surprises | Anyone going through her things | Trigon 
Vices: Emotionally cold | Distant | Untrusting
Virtues: Independent | Caring | Mature 

[font=Skranji]Powers[/font]
Soul-Self: Raven can manifest her "Soul-Self" through astral projection. It normally takes the form of a giant raven.

Astral Projection: Through the use of her soul-self, Raven can project her consciousness into the mind, for therapeutic purposes (to aid in her own meditation, or to help calm an agitated ally), or for offensive attacks, rendering her enemies unconscious.

Empathy: Psionic ability of empathy, the power to absorb emotions, enabling her to feel the feelings of others. 

Darkness/Shadows Control: Raven has the power to create and control the element of pure darkness and shadows and bend it to her will; usually using it in conjunction with her telekinesis.

Telekinesis: Raven has the ability to move objects with mind. She is able to move a collative total of one person at a time. 

[font=Skranji]Biography[/font]
Arella, Raven's human mother, was chosen to bear the demon Trigon a child. A group of pacifist disciples of Temple Azarath, took Arella in before she could commit suicide. In their inter-dimensional world, the child was born. Among Trigon's children, Raven was the only daughter. The disciples feared that Raven would bring destruction under her father's orders, and a spiritual leader, Azar took her as a disciple. She taught her of her parentage, in pacifism, meditation and push her emotions to resist Trigon's dark influence, while perfecting her powers of astral projection and empathic healing.

After her tutor's death, Raven had dreams of Trigon saying that when she reached adulthood, he would persuade her to be his ally. At the age of 18, she felt a significant surge in Trigon's powers and fled to earth. There, she found an institution for super-powered youths and decided to enrol. Hopefully able to hide away from her father and grow strong enough to defeat him before he could attempt to take over the universe.

[font=Skranji]Relationships[/font] 
N/A

[font=Skranji]Extra[/font] 
[url=https://youtu.be/3YxaaGgTQYM]Evanescence - Bring Me To Life[/url]
[URL="http://Imagine Dragons - Demons"]Imagine Dragons - Demons[/URL]
[/div][/div][/div][div=margin:auto;font-size:.5em;letter-spacing:0.3em;opacity:0.5;]code by Ri.a[/div][/centerblock]

RI.a · Jun 3, 2018

[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Simple CS Codes 'cont
Made this one for E.R.A.A. RP. Used the same code for Akatsuki no Yona RP.
Click the name to open!
Mobile friendly!
Features: Open button, close button, single scroll, animation.[/div]

[class=openwindow] height:70vh; background:url('https://cdna.artstation.com/p/assets/images/images/003/103/838/large/kang-joo-sung-galgoo-louise-top-web.jpg?1469714011'); background-size:fit; background-position:top; background-repeat:no-repeat; padding:1em; margin:auto;center; [/class] [class=openbutton] margin:auto;center; border:2px solid white; width:150px; padding:.2em; font-family:Unica One; font-size:4em; color:white; text-align:center; text-shadow: 1px 2px 0px #7b78a5; animation:{post_id}loop 2s linear infinite; cursor:pointer; [/class] [animation=loop] [keyframe=0]opacity:0.25[/keyframe] [keyframe=25]opacity:0.5[/keyframe] [keyframe=50]opacity:0.75[/keyframe] [keyframe=75]opacity:0.5[/keyframe] [keyframe=100]opacity:0.25[/keyframe] [/animation] [class=mainpage] height:70vh; padding:1em; overflow:hidden; overflow-y:scroll; background:url('https://i.imgur.com/iZ5LYWJ.png'); background-size:fit; background-position:center; background-lock:fixed; background-repeat:no-repeat; margin:auto;center; font-family:Karla; font-size:0.9em; color:black; text-align:center; [/class] [class=closebutton] font-size:2em; width:10px; cursor:pointer; position:absolute; [/class] [script class=none] hide mainpage hide closebutton [/script] [script class=openbutton on=click] slideUp 500 openwindow show mainpage show closebutton hide openbutton [/script] [script class=closebutton on=click] slideDown 500 openwindow hide closebutton hide mainpage fadeIn 500 openbutton [/script] [class=textbox] margin:auto;center; background:white; opacity:0.9; width:80%; [/class]

[div class=openwindow]

[div class=openbutton]JUZO

[/div][div class=mainpage][div class=closebutton][/div]

[div class=textbox]

basics

Name: Juzo Iida
Code Number: tbd
Age: 17 years old
How long have you been at the facility: 10 years
Gender: Male
Sexuality: Heterosexual
Dream: To find people that won't use him for their own gain.[/div]

[div class=textbox]

appearance

Height: 175cm
Weight: 75kg
Hair Colour: Ash blue
Eye Colour: Black
Complexion: Fair
Features: Diamond skin (currently able to activate at will)[/div]

[div class=textbox]

powers

Natural: Able to produce diamonds (similar to hair growth, but slower), it does not cause him harm when removing the small stones.
Artificial: Self-hardness Manipulation: Juzo is able to harden his entire body and able to take attacks and deflect bullets, but this limits his movement and if an attack hits a pressure point, it will falter this form and revert him back.
Diamond Mimicry:
Juzo is able to harden parts of his body at will (hands up to elbows, feet up to knees) to keep his mobility and use his hardened limbs to attack.

Future: Diamond form-organic: His right arm, left leg, patches on his back, and chest are permanently diamond. Movement of his joints is not limited as it fused with his tissues and ligaments. Giving him the hardness to attack and defend.

Control:
Danger Level: tbd
Experiment Effects: Enhancements applied during early experimentation gave him his powers mentioned above. Future-a strong dosage left his body permanently damaged, with parts of it diamond. He's no longer able to turn it back to normal. It is not yet known if damage to diamond areas are treatable.
Medication Trail: tbd[/div]

[div class=textbox]

abilities

Martial Arts:
Hand-to-Hand Combat: [/div]

[div class=textbox]

weaknesses

Current
Durability: Under immense amounts of pressure and/or at pressure points, his diamond form is liable to crack and will cause Juzo intense pain (varying degrees of pains similar to sprains or broken bones, depending on severity of the damage)
Time Limit: Juzo is only able to activate his powers for a maximum of 10 minutes at a time, and will only able to reactivate it after 30 minutes.

Future (after strong dosage of enhancements)
As parts of his body is permanently diamond, his 'normal' human parts are defenceless and are his weak points
[/div]

[div class=textbox]

personality

- Independent
- Cautious
- Reserved
- Loyal
- Kind
- Empathatic
- Untrusting
- Just
- Disciplined
[/div]

[div class=textbox]

bio

At the age of 5, Juzo's harmless ability to grow diamonds emerged. His family got rich at a very unnatural pace, harvesting his diamonds and selling them. His parents started treating him as their gold mine instead of their son. Within two years, they've limited his interaction to the outside world from not being able to play outside, unable to meet his friends or children his age, to denying him his education. Juzo doesn't know why his parents became so strict with him, he did what he was told, and always gave them the shiny rocks that appeared on his body. One day, during a temper tantrum, he managed to slip by his parents. Laughing as he ran away from them as he thought of it as a game of tag. Just like how he grows, the rate of producing the diamonds increased and would grow at random places. It was no longer possible to hide his shiny composition and he stuck out like a sore thumb in the watchful gaze of the government.

He got taken away from his parents that day. Scared, the scientists told him he would be treated better, that he would be able to go out and play- such simple lies are able to sway a 7 year old. At first, he enjoyed it. He had a roommate, the scientists were nice and only asked for the diamonds which he happily gave. It all changed when greed started to corrupt them and the officials. They started injecting him with enhancements, trying to quicken the production... which only resulted in a mutation and giving him his powers. He now could change his entire body into diamond at will. Chipping off the hard stone now was hell. He didn't want to do it anymore, but if he didn't meet his daily quota, the guards will torture him.

Fed up of being used, Juzo diamond punched a few scientists and threatened them, only to get restrained and detained by the guards soon after. More physical experiments would be done, testing his durability, testing if he could transplant his natural ability to others. They taught him martial arts and hand to hand combat, testing if his diamond form could be useful in a fight. [/div]

[div class=textbox]

extra

Roommate: tbd
Theme:
Faceclaim: Kang Joo Song[/div]

[/div][/div]

code by Ri.a

Code:

[nobr]
[class=openwindow]
height:70vh;
background:url('https://cdna.artstation.com/p/assets/images/images/003/103/838/large/kang-joo-sung-galgoo-louise-top-web.jpg?1469714011');
background-size:fit;
background-position:top;
background-repeat:no-repeat;
padding:1em;
margin:auto;center;
[/class]

[class=openbutton]
margin:auto;center;
border:2px solid white;
width:150px;
padding:.2em;
font-family:Unica One;
font-size:4em;
color:white;
text-align:center;
text-shadow: 1px 2px 0px #7b78a5;
animation:{post_id}loop 2s linear infinite;
cursor:pointer;
[/class]

[animation=loop]
[keyframe=0]opacity:0.25[/keyframe]
[keyframe=25]opacity:0.5[/keyframe]
[keyframe=50]opacity:0.75[/keyframe]
[keyframe=75]opacity:0.5[/keyframe]
[keyframe=100]opacity:0.25[/keyframe]
[/animation]

[class=mainpage]
height:70vh;
padding:1em;
overflow:hidden;
overflow-y:scroll;
background:url('https://i.imgur.com/iZ5LYWJ.png');
background-size:fit;
background-position:center;
background-lock:fixed;
background-repeat:no-repeat;
margin:auto;center;
font-family:Karla;
font-size:0.9em;
color:black;
text-align:center;
[/class]

[class=closebutton]
font-size:2em;
width:10px;
cursor:pointer;
position:absolute;
[/class]

[script class=none]
hide mainpage
hide closebutton
[/script]

[script class=openbutton on=click]
slideUp 500 openwindow
show mainpage
show closebutton
hide openbutton
[/script]

[script class=closebutton on=click]
slideDown 500 openwindow
hide closebutton
hide mainpage
fadeIn 500 openbutton
[/script]

[class=textbox]
margin:auto;center;
background:white;
opacity:0.9;
width:80%;
[/class]
[/nobr]

[centerblock=70][div=overflow:hidden;height:70vh;padding:1em;][div class=openwindow]








[div class=openbutton][font=Unica One]JUZO[/font][/div][/div][div class=mainpage][div class=closebutton][fa]fa-times-circle[/fa][/div][div=margin:auto;center;width:50%;][img]https://cdna.artstation.com/p/assets/images/images/003/103/840/large/kang-joo-sung-galgoo-louisl01-web.jpg?1469711451jpg[/img][/div]

[div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]basics[/div][font=Karla]Name: Juzo Iida[/font]
Code Number: tbd
Age: 17 years old
How long have you been at the facility: 10 years
Gender: Male
Sexuality: Heterosexual
Dream: To find people that won't use him for their own gain.[/div]

[div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]appearance[/div]Height: 175cm
Weight: 75kg
Hair Colour: Ash blue
Eye Colour: Black
Complexion: Fair
Features: Diamond skin (currently able to activate at will)[/div]

[div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]powers[/div]Natural: Able to produce diamonds (similar to hair growth, but slower), it does not cause him harm when removing the small stones.
Artificial: [url=http://powerlisting.wikia.com/wiki/Self-Hardness_Manipulation]Self-hardness Manipulation[/url]: [color=#43416d][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/color] Juzo is able to harden his entire body and able to take attacks and deflect bullets, but this limits his movement and if an attack hits a pressure point, it will falter this form and revert him back.
[url=http://powerlisting.wikia.com/wiki/Diamond_Mimicry]Diamond Mimicry[/url]: [color=#43416d][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/color]
Juzo is able to harden parts of his body at will (hands up to elbows, feet up to knees) to keep his mobility and use his hardened limbs to attack.

Future: Diamond form-organic: His right arm, left leg, patches on his back, and chest are permanently diamond. Movement of his joints is not limited as it fused with his tissues and ligaments. Giving him the hardness to attack and defend.

[div=margin:auto;center;width:100%;][img]https://cdna.artstation.com/p/assets/images/images/003/103/846/large/kang-joo-sung-galgoo-luis02-web.jpg?1469711504[/img][/div]

Control: [color=#43416d][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/color]
Danger Level: tbd
Experiment Effects: Enhancements applied during early experimentation gave him his powers mentioned above. [i]Future-a strong dosage left his body permanently damaged, with parts of it diamond. He's no longer able to turn it back to normal. It is not yet known if damage to diamond areas are treatable. 
Medication Trail: tbd[/i][/div]

[div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]abilities[/div]Martial Arts: [color=#43416d][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/color]
Hand-to-Hand Combat: [color=#43416d][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/color][/div]

[div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]weaknesses[/div][u]Current[/u]
Durability: Under immense amounts of pressure and/or at pressure points, his diamond form is liable to crack and will cause Juzo intense pain (varying degrees of pains similar to sprains or broken bones, depending on severity of the damage)
Time Limit: Juzo is only able to activate his powers for a maximum of 10 minutes at a time, and will only able to reactivate it after 30 minutes.

[u]Future[/u] (after strong dosage of enhancements)
As parts of his body is permanently diamond, his 'normal' human parts are defenceless and are his weak points
[/div]

[div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]personality[/div]- Independent
- Cautious
- Reserved
- Loyal
- Kind
- Empathatic
- Untrusting
- Just
- Disciplined
[/div]

[div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]bio[/div]At the age of 5, Juzo's harmless ability to grow diamonds emerged. His family got rich at a very unnatural pace, harvesting his diamonds and selling them. His parents started treating him as their gold mine instead of their son. Within two years, they've limited his interaction to the outside world from not being able to play outside, unable to meet his friends or children his age, to denying him his education. Juzo doesn't know why his parents became so strict with him, he did what he was told, and always gave them the shiny rocks that appeared on his body. One day, during a temper tantrum, he managed to slip by his parents. Laughing as he ran away from them as he thought of it as a game of tag. Just like how he grows, the rate of producing the diamonds increased and would grow at random places. It was no longer possible to hide his shiny composition and he stuck out like a sore thumb in the watchful gaze of the government. 

He got taken away from his parents that day. Scared, the scientists told him he would be treated better, that he would be able to go out and play- such simple lies are able to sway a 7 year old. At first, he enjoyed it. He had a roommate, the scientists were nice and only asked for the diamonds which he happily gave. It all changed when greed started to corrupt them and the officials. They started injecting him with enhancements, trying to quicken the production... which only resulted in a mutation and giving him his powers. He now could change his entire body into diamond at will. Chipping off the hard stone now was hell. He didn't want to do it anymore, but if he didn't meet his daily quota, the guards will torture him. 

Fed up of being used, Juzo diamond punched a few scientists and threatened them, only to get restrained and detained by the guards soon after. More physical experiments would be done, testing his durability, testing if he could transplant his natural ability to others. They taught him martial arts and hand to hand combat, testing if his diamond form could be useful in a fight. [/div]

[div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]extra[/div]Roommate: tbd
Theme: [MEDIA=youtube]WR7U7_cKJw4[/MEDIA]
Faceclaim: [url=https://www.artstation.com/galgoo]Kang Joo Song[/url][/div]

[/div][/div][div=text-align:center;font-family:Karla;font-size:0.5em;letter-spacing:0.3em;opacity:0.6;]code by Ri.a[/div][/centerblock]

RI.a · Jun 3, 2018

[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Simple CS Codes 'cont
When you find so many good images for your character and you wanna use them all, you make tons of tabs of course!
Made this one for In-Laws RP. Yes- I do tend to make new codes for every RP I join. xD
Not mobile friendly.
Features: tabs galore, header & footer, scroll.[/div]

[class=wrapper] height:auto; overflow:hidden; width:100%; [/class] [class=headerimage] background:url('https://i.pinimg.com/564x/2d/b8/be/2db8be7ead5aaf0984858fc1609c6e87.jpg'); background-size:fit; background-position:center; background-repeat:no-repeat; height:5vh; width:100%; [/class] [class=tabbox] height:auto; width:100%; display:flex; flex:flex-wrap; [/class] [class=tabs] display:flex; flex:0.2; border:1px solid #305087; opacity:0.7; font-family:Satisfy; color:black; text-shadow: 0.5px 0.5px 0px #305087; font-size:1.2em; text-align:center; cursor:pointer; justify-content:center; [/class] [class=container] width:100%; height:80vh; overflow-y:scroll; background:white; display:flex; flex:wrap; [/class] [class=leftside] width:50%; pointer-events:none; [/class] [class=rightside] width:50%; padding:1em; background:white; font-family:Karla; font-size:1em; color:black; [/class] [class=title] font-family:Satisfy; font-size:1.2em; color:#305087; display:inline-block; text-transform:lowercase; [/class] [script class=tab1 on=click] show page1 hide page2 hide page3 hide page4 hide page5 hide page6 hide page7 [/script] [script class=none] show page1 hide page2 hide page3 hide page4 hide page5 hide page6 hide page7 [/script] [script class=tab2 on=click] show page2 hide page1 hide page3 hide page4 hide page5 hide page6 hide page7 [/script] [script class=tab3 on=click] show page3 hide page1 hide page2 hide page4 hide page5 hide page6 hide page7 [/script] [script class=tab4 on=click] show page4 hide page1 hide page2 hide page3 hide page5 hide page6 hide page7 [/script] [script class=tab5 on=click] show page5 hide page1 hide page2 hide page3 hide page4 hide page6 hide page7 [/script] [script class=tab6 on=click] show page6 hide page1 hide page2 hide page3 hide page4 hide page5 hide page7 [/script] [script class=tab7 on=click] show page7 hide page1 hide page2 hide page3 hide page4 hide page5 hide page6 [/script]

[div class=wrapper][div class=headerimage][/div]
[div class=tabbox][div class="tabs tab1"]requisite[/div][div class="tabs tab2"]appearance[/div][div class="tabs tab3"]abilities[/div][div class="tabs tab4"]personality[/div][div class="tabs tab5"]history[/div][div class="tabs tab6"]relationships[/div][div class="tabs tab7"]extra[/div][/div] [div class="container page1"][div class="leftside img1"]

[/div][div class="rightside content1"][div class=title]"quote quote"[/div]

[div class=title]name:[/div] Character name
[div class=title]title(s):[/div]
[div class=title]age:[/div]
[div class=title]gender:[/div] [/div][/div] [div class="container page2"][div class="leftside img2"]

[/div][div class="rightside content2"][div class=title]height:[/div]
[div class=title]weight:[/div]
[div class=title]body type:[/div]
[div class=title]tattoos:[/div]
[div class=title]distinguishing features:[/div] [/div][/div] [div class="container page3"][div class="leftside img3"]

[/div][div class="rightside content3"][div class=title]inventory:[/div]
[div class=title]skills/abilities:[/div]
[div class=title]magic:[/div] [/div][/div] [div class="container page4"][div class="leftside img4"]

[/div][div class="rightside content4"][div class=title]personality:[/div]
[div class=title]virtues:[/div]
[div class=title]vices:[/div]
[div class=title]hobbies:[/div]
[div class=title]likes:[/div]
[div class=title]dislikes:[/div]
[div class=title]fears:[/div]
[div class=title]struggle:[/div] [/div][/div] [div class="container page5"][div class="leftside img5"]

[/div][div class="rightside content5"][div class=title]bio:[/div] [/div][/div] [div class="container page6"][div class="leftside img6"]

[/div][div class="rightside content6"][div class=title]grudge:[/div]
[div class=title]bond:[/div]
[div class=title]secret:[/div]
[div class=title]relationships:[/div] [/div][/div] [div class="container page7"][div class="leftside img7"]

[/div][div class="rightside content7"] [div class=title]theme:[/div]
[div class=title]faceclaim:[/div] Ibuki Satsuki[/div][/div]
[div class=headerimage][/div]

code by Ri.a

[/div]

Code:

[nobr]
[class=wrapper]
height:auto;
overflow:hidden;
width:100%;
[/class]

[class=headerimage]
background:url('https://i.pinimg.com/564x/2d/b8/be/2db8be7ead5aaf0984858fc1609c6e87.jpg');
background-size:fit;
background-position:center;
background-repeat:no-repeat;
height:5vh;
width:100%;
[/class]

[class=tabbox]
height:auto;
width:100%;
display:flex;
flex:flex-wrap;
[/class]

[class=tabs]
display:flex;
flex:0.2;
border:1px solid #305087;
opacity:0.7;
font-family:Satisfy;
color:black;
text-shadow: 0.5px 0.5px 0px #305087;
font-size:1.2em;
text-align:center;
cursor:pointer;
justify-content:center;
[/class]

[class=container]
width:100%;
height:80vh;
overflow-y:scroll;
background:white;
display:flex;
flex:wrap;
[/class]

[class=leftside]
width:50%;
pointer-events:none;
[/class]

[class=rightside]
width:50%;
padding:1em;
background:white;
font-family:Karla;
font-size:1em;
color:black;
[/class]

[class=title]
font-family:Satisfy;
font-size:1.2em;
color:#305087;
display:inline-block;
text-transform:lowercase;
[/class]

[script class=tab1 on=click]
show page1
hide page2
hide page3
hide page4
hide page5
hide page6
hide page7
[/script]

[script class=none]
show page1
hide page2
hide page3
hide page4
hide page5
hide page6
hide page7
[/script]

[script class=tab2 on=click]
show page2
hide page1
hide page3
hide page4
hide page5
hide page6
hide page7
[/script]

[script class=tab3 on=click]
show page3
hide page1
hide page2
hide page4
hide page5
hide page6
hide page7
[/script]

[script class=tab4 on=click]
show page4
hide page1
hide page2
hide page3
hide page5
hide page6
hide page7
[/script]

[script class=tab5 on=click]
show page5
hide page1
hide page2
hide page3
hide page4
hide page6
hide page7
[/script]

[script class=tab6 on=click]
show page6
hide page1
hide page2
hide page3
hide page4
hide page5
hide page7
[/script]

[script class=tab7 on=click]
show page7
hide page1
hide page2
hide page3
hide page4
hide page5
hide page6
[/script]

[centerblock=80][div class=wrapper][div class=headerimage][/div]
[br][/br]
[div class=tabbox][div class="tabs tab1"][font=Satisfy]requisite[/font][/div][div class="tabs tab2"]appearance[/div][div class="tabs tab3"]abilities[/div][div class="tabs tab4"]personality[/div][div class="tabs tab5"]history[/div][div class="tabs tab6"]relationships[/div][div class="tabs tab7"]extra[/div][/div]
[div class="container page1"][div class="leftside img1"][center][img]https://i.imgur.com/zEhi1Nv.jpg[/img][/center][/div][div class="rightside content1"][div class=title]"quote quote"[/div]
[br][/br][br][/br]
[div class=title]name:[/div] [font=Karla]Character name[/font]
[br][/br]
[div class=title]title(s):[/div] 
[br][/br]
[div class=title]age:[/div] 
[br][/br]
[div class=title]gender:[/div] [/div][/div]

[div class="container page2"][div class="leftside img2"][center][img]https://wx2.sinaimg.cn/mw690/6aa3df83gy1fr0oh0rcxxj20gj0rkqq4.jpg[/img][/center][/div][div class="rightside content2"][div class=title]height:[/div]
[br][/br]
[div class=title]weight:[/div] 
[br][/br]
[div class=title]body type:[/div] 
[br][/br]
[div class=title]tattoos:[/div] 
[br][/br]
[div class=title]distinguishing features:[/div] [/div][/div]

[div class="container page3"][div class="leftside img3"][center][img]https://i.imgur.com/WNK4jw8.jpg[/img][/center][/div][div class="rightside content3"][div class=title]inventory:[/div] 
[br][/br]
[div class=title]skills/abilities:[/div] 
[br][/br]
[div class=title]magic:[/div] [/div][/div]

[div class="container page4"][div class="leftside img4"][center][img]https://i.imgur.com/IBMPXrR.jpg[/img][/center][/div][div class="rightside content4"][div class=title]personality:[/div] 
[br][/br]
[div class=title]virtues:[/div] 
[br][/br]
[div class=title]vices:[/div] 
[br][/br]
[div class=title]hobbies:[/div] 
[br][/br]
[div class=title]likes:[/div]
[br][/br]
[div class=title]dislikes:[/div] 
[br][/br]
[div class=title]fears:[/div] 
[br][/br]
[div class=title]struggle:[/div] [/div][/div]

[div class="container page5"][div class="leftside img5"][center][img]https://i.imgur.com/K2M25D6.jpg[/img][img] https://i.pinimg.com/564x/17/fd/9f/17fd9f5d8d3bafb57894b4466ae2a2ae.jpg[/img][/center][/div][div class="rightside content5"][div class=title]bio:[/div]

[/div][/div]

[div class="container page6"][div class="leftside img6"][center][img]https://i.imgur.com/LG6YwQf.jpg[/img][img]https://i.imgur.com/PSISYDu.jpg[/img][img]https://i.imgur.com/LKgU7eb.jpg[/img][/center][/div][div class="rightside content6"][div class=title]grudge:[/div] 
[br][/br]
[div class=title]bond:[/div]
[br][/br]
[div class=title]secret:[/div]
[br][/br]
[div class=title]relationships:[/div] 
[/div][/div]

[div class="container page7"][div class="leftside img7"][center][img]https://i.imgur.com/8jFUM5K.jpg[/img][/center][/div][div class="rightside content7"]
[div class=title]theme:[/div] 
[br][/br]
[div class=title]faceclaim:[/div] Ibuki Satsuki[/div][/div]
[br][/br][div class=headerimage][/div][br][/br][div=font:Karla;font-size:0.5em;opacity:0.6;margin:auto;center;letter-spacing:0.3em;text-align:center;]code by Ri.a[/div]
[/div][/centerblock][/nobr]

RI.a · Jun 4, 2018

[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Simple IC codes
IC code I made for DC/Marvel University. Tweaked it for In-Laws RP too. Scroll at the main chunk of text!
Mobile friendly! Free to use with credits.
Features: Single scroll, banner/header with picture, name and tags.[/div]

Character Name

Location: | Interacting with: | Mentions:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at laoreet odio. Etiam aliquet elementum velit et fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac justo vitae ipsum sagittis tempor. Donec in semper mi. Nunc tincidunt tempor lacus ut maximus. Mauris pretium ultrices purus non elementum. Sed at luctus arcu. Sed tempor, neque eget mollis euismod, augue lorem interdum urna, sed egestas ante odio ac diam.

Vestibulum quis commodo eros. Etiam erat eros, semper ac mauris et, laoreet malesuada nisi. Ut euismod augue sem, interdum gravida velit feugiat sed. Nam hendrerit dui eget ligula sodales varius. Mauris vel mi vel nisi tincidunt pharetra. Integer et cursus orci, a ornare neque. In in risus eu neque ullamcorper tempor malesuada vel arcu. Donec lobortis justo in magna consequat aliquet. Pellentesque sed justo vitae est auctor tempor.

Quisque eleifend sapien eu efficitur laoreet. Nulla interdum consectetur ante id semper. Morbi nec consequat tellus, vitae volutpat sem. Aenean pretium semper dui, vel bibendum nisl vehicula sed. Sed tempor eros eget leo dignissim volutpat. Nam eget nibh ac nunc vestibulum viverra ac et ante. Etiam vitae dapibus risus. Aenean at hendrerit tortor.

Sed fermentum ut sapien nec ultricies. In nec ligula laoreet, malesuada mi in, aliquam purus. Aliquam dapibus pharetra cursus. Suspendisse a elit tempor, tristique ipsum vitae, tincidunt turpis. Integer molestie sem ultrices leo suscipit sagittis. Mauris iaculis ex eu dignissim dictum. Aenean faucibus vestibulum semper. Vivamus tempor nunc quis sollicitudin accumsan. Pellentesque interdum porta pulvinar.

code by Ri.a

Code:

[centerblock=60][div=height:auto;display:flex;overflow:hidden;align-items:center;justify-content:space-evenly;][div=width:150px;height:150px;background:url('http://margaretzhang.com.au/wp-content/uploads/2014/04/MARGARETZHANG_HannahWaites_8626-800x1199.jpg');background-size:100%;background-repeat:no-repeat;border-radius:100px;][/div][div=flex:1;overflow-y:scroll;text-align:center;][div=font-size:2em;][font=Righteous]Character Name[/font][/div]
[font=Lato][div=font-size:0.8em;opacity:0.5;]Location: | Interacting with: | Mentions: [/div][/font][/div]
[/div]
[div=flex:1;height:40vh;overflow-y:scroll;font-size:0.9em;padding:0.7em;][font=Lato]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at laoreet odio. Etiam aliquet elementum velit et fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac justo vitae ipsum sagittis tempor. Donec in semper mi. Nunc tincidunt tempor lacus ut maximus. Mauris pretium ultrices purus non elementum. Sed at luctus arcu. Sed tempor, neque eget mollis euismod, augue lorem interdum urna, sed egestas ante odio ac diam.

Vestibulum quis commodo eros. Etiam erat eros, semper ac mauris et, laoreet malesuada nisi. Ut euismod augue sem, interdum gravida velit feugiat sed. Nam hendrerit dui eget ligula sodales varius. Mauris vel mi vel nisi tincidunt pharetra. Integer et cursus orci, a ornare neque. In in risus eu neque ullamcorper tempor malesuada vel arcu. Donec lobortis justo in magna consequat aliquet. Pellentesque sed justo vitae est auctor tempor.

Quisque eleifend sapien eu efficitur laoreet. Nulla interdum consectetur ante id semper. Morbi nec consequat tellus, vitae volutpat sem. Aenean pretium semper dui, vel bibendum nisl vehicula sed. Sed tempor eros eget leo dignissim volutpat. Nam eget nibh ac nunc vestibulum viverra ac et ante. Etiam vitae dapibus risus. Aenean at hendrerit tortor.

Sed fermentum ut sapien nec ultricies. In nec ligula laoreet, malesuada mi in, aliquam purus. Aliquam dapibus pharetra cursus. Suspendisse a elit tempor, tristique ipsum vitae, tincidunt turpis. Integer molestie sem ultrices leo suscipit sagittis. Mauris iaculis ex eu dignissim dictum. Aenean faucibus vestibulum semper. Vivamus tempor nunc quis sollicitudin accumsan. Pellentesque interdum porta pulvinar.
[/font][/div][div=text-align:right;font:Karla;font-size:0.5em;letter-spacing:0.3em;opacity:0.6;][comment]DO NOT REMOVE[/comment]code by Ri.a[/div][/centerblock]

The Witch Son · Jun 5, 2018

your codes are basically l i f e
thank you so much for making them I'm using one as an rp main setup and some others as character profiles and a good IC post code

The only technical feedback I can think of is I especially love the ones that are bigger because any content I put out in an rp tends to be 500 words plus, but that's neither here nor there and really just a stylistic choice lol, none the less I certainly appreciate it because I can't code worth a damn that's for sure.

RI.a · Jun 5, 2018

The Word Witch said:
your codes are basically l i f e
thank you so much for making them I'm using one as an rp main setup and some others as character profiles and a good IC post code

The only technical feedback I can think of is I especially love the ones that are bigger because any content I put out in an rp tends to be 500 words plus, but that's neither here nor there and really just a stylistic choice lol, none the less I certainly appreciate it because I can't code worth a damn that's for sure.

Thank you so much! Will definitely keep that in mind!

If you do want to change the sizes, I don't mind helping you out! ^^

The Witch Son · Jun 5, 2018

really? that would be awesome! how would one change the width of that IC post's body?

JayfeatherRaven · Jun 23, 2018

RI.a said:
[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Simple CS Codes 'cont
Mobile friendly!
Features: Script for tabs, hidden scroll, hovers.
Another one of my charas that I've never got to play with much.
I don't own the image.[/div] [class=container] display:flex; height:70vh; max-width:900px; border:1px solid #9abfe0; margin:auto;center; flex-wrap:wrap; align-items:flex-start; overflow:hidden; flex-direction:row; [/class] [class=scrollbox] width:101%; height:60vh; overflow-y:scroll; [/class] [class=text] margin-left:5px; font-family:Heebo, regular; font-size:1em; color:#4f4f4f; [/class] [class=tabs] display:inline-block; width:100px; padding:.2em; text-align:center; font-size:1em; color:#9abfe0; font-family:Heebo, regular; cursor:pointer; transition: all 0.3s ease-in-out; [/class] [class name=tabs state=hover] letter-spacing:.3em; [/class] [script class=tabone on=click] removeClass select tabs addClass select tabone hide scrollbox show pageone [/script] [script class=tabone] addClass select tabone [/script] [script class=none] hide pagetwo hide pagethree hide pagefour hide pagefive [/script] [script class=tabtwo on=click] removeClass select tabs addClass select tabtwo hide scrollbox show pagetwo [/script] [script class=tabthree on=click] removeClass select tabs addClass select tabthree hide scrollbox show pagethree [/script] [script class=tabfour on=click] removeClass select tabs addClass select tabfour hide scrollbox show pagefour [/script] [script class=tabfive on=click] removeClass select tabs addClass select tabfive hide scrollbox show pagefive [/script]
[div class=container]
[div class="tabs tabone"]main
[div class="tabs tabtwo"]basic[/div][div class="tabs tabthree"]persona[/div][div class="tabs tabfour"]powers[/div][div class="tabs tabfive"]extra[/div][/div]
[div class="scrollbox pageone"]
[/div][div class="scrollbox pagetwo"]
[div class=text]Name: Spiar (read as spear) Ruesial

Age: 16

Sexuality: Heterosexual

Alignment: Good

Species: Kinnara (half bird, half human)

Height: 5'/152 cm

Weight: 99 lb/45 kg

Build: Lean
[/div][/div][div class="scrollbox pagethree"]
[div class=text]Personality: Spiar isn't particularly sociable, nor is she a closed book. She's nice and generally approachable. She's not very good at introducing herself or small talk with people she's just met and due to her history, she's never had a friend before. Given the opportunity of a fresh start, she'll push herself to make friends with everyone and hopes experience many new things. Her innocent mind may take things literally, or unable to understand meaning behind words. She's humble to a fault, to a point where someone may lose patience with her. But when a fight breaks out involving someone she knows, she'll try her best to stop it and mediate the situation- even if it means putting herself in danger.

Habits: Bites her nails when upset or stressed.

Bio: The Kinnara are half human and half bird, where they have bright, colourful wings on their backs and their bottom half is like a bird with strong legs and talons while their upper half is human. Spiar is the youngest in her family, born the smallest of her 5 older siblings and abnormal as she only has dull, dark wings on her back. Deemed the weakest, she has to live with a stigma of 'the first to die' in her clan. The clan origins dates back to centuries ago in the far east. Where the humans called them fallen, sinful angels or messengers of demons because of their black wings. But they were just as any clan would be, they worked to survive together; gathering food, learning to fight to defend the clan and etc. Spiar's family is known to have the strongest fighters in the clan- many questioned how Spiar could exist and blamed her mother for being unfaithful. Outcasted, she trains herself daily with her wings, a long pole and practices archery. She did notice that her endurance is much less compared to her siblings and found out she has the ability to hypotise living creatures- though this caused another uproar, calling her a witch. Her father had enough of his defect daughter and sent her to Luxor Academy and she was not allowed back until she proved herself a "full-fledged Kinnara".

Likes: Warm places, sweets, exploring, cats.

Dislikes: Thunderstorms, bullying, unnecessary violence, stereotypes.
[/div][/div][div class="scrollbox pagefour"]
[div class=text]Weapons: Retractable staff

Powers:
FLIGHT :
SPEAR :
ARCHERY :
HYPNOTISM :

Weakness:
STAMINA :
HUNGER :
MIND LOSS :
CLOSE COMBAT :

Her lack of stamina limits her fighting skills and the length of time in the air. She gets hungry easily and will need plenty of nourishment to regain her strength.
Her hypnotism is only triggered when a target hears her singing, and will be compelled by her and follow her commands till completed. The only way to dispel this is to knock out the victim or the caster. However, the longer she holds control over her victim(s), the more vulnerable she is to losing her mind and self control. It's as if another dark force takes control of her body. Spiar does not like using this ability and refrains from singing when others are present.[/div][/div][div class="scrollbox pagefive"]
[div class=text]Extra:

[/div][/div]

[/div]
credit RI.a

Code:

[nobr] [class=container] display:flex; height:70vh; max-width:900px; border:1px solid #9abfe0; margin:auto;center; flex-wrap:wrap; align-items:flex-start; overflow:hidden; flex-direction:row; [/class] [class=scrollbox] width:101%; height:60vh; overflow-y:scroll; [/class] [class=text] margin-left:5px; font-family:Heebo, regular; font-size:1em; color:#4f4f4f; [/class] [class=tabs] display:inline-block; width:100px; padding:.2em; text-align:center; font-size:1em; color:#9abfe0; font-family:Heebo, regular; cursor:pointer; transition: all 0.3s ease-in-out; [/class] [class name=tabs state=hover] letter-spacing:.3em; [/class] [script class=tabone on=click] removeClass select tabs addClass select tabone hide scrollbox show pageone [/script] [script class=tabone] addClass select tabone [/script] [script class=none] hide pagetwo hide pagethree hide pagefour hide pagefive [/script] [script class=tabtwo on=click] removeClass select tabs addClass select tabtwo hide scrollbox show pagetwo [/script] [script class=tabthree on=click] removeClass select tabs addClass select tabthree hide scrollbox show pagethree [/script] [script class=tabfour on=click] removeClass select tabs addClass select tabfour hide scrollbox show pagefour [/script] [script class=tabfive on=click] removeClass select tabs addClass select tabfive hide scrollbox show pagefive [/script] [/nobr] [div class=container][row][div=min-width:300px;max-width:900px;][div class="tabs tabone"][font=Heebo][U]main[/U][/font][/div][div class="tabs tabtwo"][U]basic[/U][/div][div class="tabs tabthree"][U]persona[/U][/div][div class="tabs tabfour"][U]powers[/U][/div][div class="tabs tabfive"][U]extra[/U][/div][/div][/row][row][div class="scrollbox pageone"][div=width:100%;height:100%;background:url('https://i.imgur.com/n7d1J3g.png');background-size:100%;background-position:center;background-repeat:no-repeat;][/div][/div][div class="scrollbox pagetwo"] [div class=text][u]Name:[/u] [u]Age:[/u] [u]Sexuality:[/u] [u]Alignment:[/u] [u]Species:[/u] [u]Height:[/u] [u]Weight:[/u] [u]Build:[/u] [/div][/div][div class="scrollbox pagethree"] [div class=text][u]Personality:[/u] HELLO [u]Habits:[/u] [u]Bio:[/u] TEXT HERE [u]Likes:[/u] [u]Dislikes:[/u] [/div][/div][div class="scrollbox pagefour"] [div class=text][u]Weapons:[/u] [u]Powers:[/u] GNIWPVR : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE][COLOR=#9abfe0][/COLOR] GNWIPVR : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE][COLOR=#9abfe0][/COLOR] GIWVRW : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE][COLOR=#9abfe0][/COLOR] GWIOVNRW : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE] [u]Weakness:[/u] GWIOVW : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE][COLOR=#9abfe0][/COLOR] GHWOINWR : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE][COLOR=#9abfe0][/COLOR] GNWOVW : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE] HAOWS : [SIZE=2][COLOR=#9abfe0][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/COLOR][/SIZE] More text here[/div][/div][div class="scrollbox pagefive"] [div class=text][u]Extra:[/u] [MEDIA=youtube]IC7ba9WDCn8[/MEDIA] [MEDIA=youtube]mrKMDqVwRaU[/MEDIA] [/div][/div] [/row][/div][div=max-width:900px;margin:auto;font:Heebo;font-size:0.5em;opacity:0.5;]credit [USER=55064]@RI.a[/USER] [/div]

Hi, stumbled across your thread after seeing one of your credits (and stalking you for a bit xd) Mind if I use this code of yours? :angel:

I suck when it comes to coding but your work looks amazing to a noob like me :bishiesparklesl:

RI.a · Jun 23, 2018

JayfeatherRaven said:
Hi, stumbled across your thread after seeing one of your credits (and stalking you for a bit xd) Mind if I use this code of yours? I suck when it comes to coding but your work looks amazing to a noob like me

Hahaha not at all! Go ahead!

varda · Jul 1, 2018

RI.a said:
[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Good Morning MAJOR WIP
CS
Not mobile-friendly
New features: animation, script, clip-paths.
Thank you to Alteras senpai for being so patient and answering all my queries! There's something glitching up the script. I'm not sure what. :/ So I'm not going to include the code for now. If you are a kind soul and are willing to find out what's going on, bless you. And you have my eternal thanks if you solve wtv is going on hahahha If you want to use it anyway, go ahead. You can remove the background and replace it with your own etc. I've added a "class=centerimage" for your character image so you just gotta add the image url into that and add it into the class. Toggle with the dims if you wish. (:
I don't own the image.[/div]
[class=background] width:900px; height:60vh; background:url('https://i.imgur.com/tV41r9H.jpg') no-repeat; background-size:100%; overflow:hidden; display:flex; flex-wrap:wrap; margin:auto;center; [/class] [class=loadpage] width:900px; height:60vh; background:black; opacity:0.8; position:absolute; align-self:flex-start; [/class] [class=greeting] width:350px; height:50px; margin:auto; margin-top:20vh; font-family:Gothic A1, regular; font-size:3em; color:#99f3ff; text-align:center; [/class] [class=enter] width:75px; font-family:Unica One, display; font-size;0.5em; color:white; text-align:center; border:1px solid #99f3ff; padding:.3em; cursor:pointer; margin:auto; margin-top:10px; transition:all .3s ease-in; animation:{post_id}flash 3s linear infinite; [/class] [class name=enter state=hover] letter-spacing:0.1em; [/class] [animation=flash] [keyframe=0]opacity:0.2;[/keyframe] [keyframe=25]opacity:0.6;[/keyframe] [keyframe=50]opacity:0.3;[/keyframe] [keyframe=75]opacity:0.7;[/keyframe] [keyframe=100]opacity:0.2;[/keyframe] [/animation] [class=slider] width:270px; height:100%; clip-path: polygon(0 0, 87% 0, 100% 100%, 0 100%); background:white; opacity:0.6; padding:1em; align-self:flex-start; display:flex; flex-direction:column; justify-content:space-evenly; animation-name:{post_id}slideright; animation-duration:1.2s; animation-timing-function:ease-out; animation-delay:0s; animation-direction:normal; [/class] [animation=slideright] [keyframe=0]transform:translateX(-100%);[/keyframe] [keyframe=100]transform:translateX(0);[/keyframe] [/animation] [class=centerimage] clip-path: polygon(100% 0, 94% 100%, 16% 100%, 0 0%); width:230px; height:100%; background-size:100%; background-position:center; background-repeat:no-repeat; opacity:0.5; [/class] [class=contentwrap] width:369px; height:101%; background:white; clip-path: polygon(6% 0, 100% 0, 100% 100%, 3% 100%); opacity:0.9; [/class] [class=slidein] animation:{post_id}slideleft 1.2s ease-in-out 1; [/class] [animation=slideleft] [keyframe=0]transform:translateX(100%);[/keyframe] [keyframe=100]transform:translateX(0);[/keyframe] [/animation] [class=Tabs] width:210px; padding:0.5em; border:1px solid #bbb; font-family:Unica One, display: font-size:1.6em; text-align:center; color:#222; text-shadow:1px 1px 0px #99f3ff; letter-spacing:.6em; transition:all 0.3s linear; cursor:pointer; [/class] [class name=Tabs state=hover] letter-spacing:0.8em; [/class] [class=scrollbox] width:338px; height:90%; overflow-y:scroll; padding:.8em; margin-left:15px; [/class] [class=text] font-family:Karla, regular; font-size:0.8em; color:black; display:inline-block; margin-left: 5px; [/class] [class=title] display:inline-block; font-family:Unica One, display; font-size:0.8em; color:black; text-shadow:1px 1px 0px #99f3ff; [/class] [script class=enter on=click] fadeOut 800 loadpage addClass slider show slider addClass slidein contentwrap show contentwrap show centerimage [/script] [script class=tab01 on=click] removeClass select Tabs addClass select tab01 fadeOut 200 contentwrap fadeIn 800 page01 [/script] [script class=none] hide contentwrap hide slider hide centerimage [/script] [script class=tab02 on=click] removeClass select Tabs addClass select tab02 fadeOut 200 contentwrap fadeIn 800 page02 [/script] [script class=tab03 on=click] removeClass select Tabs addClass select tab03 fadeOut 200 contentwrap fadeIn 800 contentwrap fadeIn 800 page03 [/script]
[div class=background][div class=slider][div class="Tabs tab01"]basic[/div][div class="Tabs tab02"]personality[/div][div class="Tabs tab03"]history[/div][/div][div class=centerimage][/div][div class="contentwrap page01"][div class=scrollbox][div class=title]title[/div][div class=text] something here[/div]
[div class=title]title[/div][div class=text] something here[/div]
[div class=title]title[/div][div class=text] something here[/div]
[div class=title]title[/div][div class=text] something here[/div]
[div class=title]title[/div][div class=text] [/div]
[div class=title]title[/div][div class=text] [/div]
[div class=title]title[/div][div class=text] [/div][/div][/div][div class="contentwrap page02"][div class=scrollbox][div class=title]title[/div][div class=text] something here[/div]
[div class=title]title[/div][div class=text] something here[/div]
[div class=title]title[/div][div class=text] something here[/div]

[div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper vel lorem sed interdum. Pellentesque bibendum, est nec congue fermentum, risus magna sollicitudin quam, sed vestibulum lacus tortor pellentesque urna. Cras ultrices facilisis tellus nec tristique. Duis nec hendrerit leo, sed mollis orci. Etiam sed ligula nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ante lectus, tincidunt in semper id, consectetur vel ex. Nam eu pulvinar magna. Morbi viverra orci odio, vel feugiat ligula commodo a. Cras interdum tortor vel iaculis imperdiet. Quisque pharetra efficitur justo vel consequat. Proin porttitor nisl iaculis sagittis volutpat. Integer ut augue nisi. Sed rutrum consectetur libero, a viverra dui tincidunt eu. Pellentesque vitae libero non mauris tempus luctus vel in lectus. Sed vehicula vestibulum neque sit amet tincidunt.

Quisque dignissim nunc a erat accumsan, in molestie ligula ultricies. Duis ullamcorper risus massa, a facilisis purus gravida id. Aliquam et neque arcu. Suspendisse quis leo metus. Nam gravida tincidunt lorem, vitae mollis mauris condimentum ac. Etiam sed scelerisque quam, et dapibus neque. Maecenas luctus libero sit amet tincidunt accumsan. Ut in arcu leo. Duis in urna lectus. Suspendisse nec nisi odio. Fusce aliquam orci velit, eget vulputate lectus consectetur vel. Sed interdum vulputate purus placerat vestibulum. Phasellus tristique rhoncus tellus, sed vehicula nunc luctus eget. Ut arcu mauris, feugiat quis ullamcorper in, bibendum sed enim. Donec et sagittis neque.[/div][/div][div class="contentwrap page03"][div class=scrollbox][div class=title]title[/div][div class=text] something here[/div]
[div class=title]title[/div][div class=text] something here[/div]
[div class=title]title[/div][div class=text] something here[/div]
[div class=text]bla bla[/div]
[/div][/div]
[/div][div class=loadpage][div class=greeting]おはいよう[/div][div class=enter]click me[/div][/div]
[/div]
credits RI.a

this is the freaking coolest, I hope you find the bug(s)

Mio · Jul 4, 2018

hello, just dropping by to say that your codes are lovely!

I really like the creativity in all of these cs/ic codes, and they're all super pretty to stare at~
it's all truly amazing, and I want to thank you so much for these fantastic freebies;;

I've used one of your cs codes here:
Fandom - Fate of All Worlds Character Sign-Up

keep up the great work! I'm in awe at your creations.
and the fact that you used snow white from sinoalice for one of your cs codes makes me the happiest person ever oh my

RI.a · Jul 4, 2018

Mio said:
hello, just dropping by to say that your codes are lovely!
I really like the creativity in all of these cs/ic codes, and they're all super pretty to stare at~
it's all truly amazing, and I want to thank you so much for these fantastic freebies;;

I've used one of your cs codes here:
Fandom - Fate of All Worlds Character Sign-Up

keep up the great work! I'm in awe at your creations.
and the fact that you used snow white from sinoalice for one of your cs codes makes me the happiest person ever oh my

Ahh thank you! I'm glad you are enjoying the codes ^^

Night-Hawk · Jul 4, 2018

RI.a said:
[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Simple IC codes
IC code I made for DC/Marvel University. Tweaked it for In-Laws RP too. Scroll at the main chunk of text!
Mobile friendly! Free to use with credits.
Features: Single scroll, banner/header with picture, name and tags.[/div]

Character Name

Location: | Interacting with: | Mentions:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at laoreet odio. Etiam aliquet elementum velit et fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac justo vitae ipsum sagittis tempor. Donec in semper mi. Nunc tincidunt tempor lacus ut maximus. Mauris pretium ultrices purus non elementum. Sed at luctus arcu. Sed tempor, neque eget mollis euismod, augue lorem interdum urna, sed egestas ante odio ac diam.

Vestibulum quis commodo eros. Etiam erat eros, semper ac mauris et, laoreet malesuada nisi. Ut euismod augue sem, interdum gravida velit feugiat sed. Nam hendrerit dui eget ligula sodales varius. Mauris vel mi vel nisi tincidunt pharetra. Integer et cursus orci, a ornare neque. In in risus eu neque ullamcorper tempor malesuada vel arcu. Donec lobortis justo in magna consequat aliquet. Pellentesque sed justo vitae est auctor tempor.

Quisque eleifend sapien eu efficitur laoreet. Nulla interdum consectetur ante id semper. Morbi nec consequat tellus, vitae volutpat sem. Aenean pretium semper dui, vel bibendum nisl vehicula sed. Sed tempor eros eget leo dignissim volutpat. Nam eget nibh ac nunc vestibulum viverra ac et ante. Etiam vitae dapibus risus. Aenean at hendrerit tortor.

Sed fermentum ut sapien nec ultricies. In nec ligula laoreet, malesuada mi in, aliquam purus. Aliquam dapibus pharetra cursus. Suspendisse a elit tempor, tristique ipsum vitae, tincidunt turpis. Integer molestie sem ultrices leo suscipit sagittis. Mauris iaculis ex eu dignissim dictum. Aenean faucibus vestibulum semper. Vivamus tempor nunc quis sollicitudin accumsan. Pellentesque interdum porta pulvinar.

code by Ri.a

Code:

[centerblock=60][div=height:auto;display:flex;overflow:hidden;align-items:center;justify-content:space-evenly;][div=width:150px;height:150px;background:url('http://margaretzhang.com.au/wp-content/uploads/2014/04/MARGARETZHANG_HannahWaites_8626-800x1199.jpg');background-size:100%;background-repeat:no-repeat;border-radius:100px;][/div][div=flex:1;overflow-y:scroll;text-align:center;][div=font-size:2em;][font=Righteous]Character Name[/font][/div] [font=Lato][div=font-size:0.8em;opacity:0.5;]Location: | Interacting with: | Mentions: [/div][/font][/div] [/div] [div=flex:1;height:40vh;overflow-y:scroll;font-size:0.9em;padding:0.7em;][font=Lato]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at laoreet odio. Etiam aliquet elementum velit et fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac justo vitae ipsum sagittis tempor. Donec in semper mi. Nunc tincidunt tempor lacus ut maximus. Mauris pretium ultrices purus non elementum. Sed at luctus arcu. Sed tempor, neque eget mollis euismod, augue lorem interdum urna, sed egestas ante odio ac diam. Vestibulum quis commodo eros. Etiam erat eros, semper ac mauris et, laoreet malesuada nisi. Ut euismod augue sem, interdum gravida velit feugiat sed. Nam hendrerit dui eget ligula sodales varius. Mauris vel mi vel nisi tincidunt pharetra. Integer et cursus orci, a ornare neque. In in risus eu neque ullamcorper tempor malesuada vel arcu. Donec lobortis justo in magna consequat aliquet. Pellentesque sed justo vitae est auctor tempor. Quisque eleifend sapien eu efficitur laoreet. Nulla interdum consectetur ante id semper. Morbi nec consequat tellus, vitae volutpat sem. Aenean pretium semper dui, vel bibendum nisl vehicula sed. Sed tempor eros eget leo dignissim volutpat. Nam eget nibh ac nunc vestibulum viverra ac et ante. Etiam vitae dapibus risus. Aenean at hendrerit tortor. Sed fermentum ut sapien nec ultricies. In nec ligula laoreet, malesuada mi in, aliquam purus. Aliquam dapibus pharetra cursus. Suspendisse a elit tempor, tristique ipsum vitae, tincidunt turpis. Integer molestie sem ultrices leo suscipit sagittis. Mauris iaculis ex eu dignissim dictum. Aenean faucibus vestibulum semper. Vivamus tempor nunc quis sollicitudin accumsan. Pellentesque interdum porta pulvinar. [/font][/div][div=text-align:right;font:Karla;font-size:0.5em;letter-spacing:0.3em;opacity:0.6;][comment]DO NOT REMOVE[/comment]code by Ri.a[/div][/centerblock]

Awesome codes!

I'm really interested in using this IC, but is there a way to hide the scroll bars?

RI.a · Jul 4, 2018

Night-Hawk said:
Awesome codes!

I'm really interested in using this IC, but is there a way to hide the scroll bars?

Yeah! I'll send you a PM ^^

graphic_biscuit · Aug 1, 2018

RI.a said:
[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Simple IC codes
IC code I made for DC/Marvel University. Tweaked it for In-Laws RP too. Scroll at the main chunk of text!
Mobile friendly! Free to use with credits.
Features: Single scroll, banner/header with picture, name and tags.[/div]

Character Name

Location: | Interacting with: | Mentions:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at laoreet odio. Etiam aliquet elementum velit et fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac justo vitae ipsum sagittis tempor. Donec in semper mi. Nunc tincidunt tempor lacus ut maximus. Mauris pretium ultrices purus non elementum. Sed at luctus arcu. Sed tempor, neque eget mollis euismod, augue lorem interdum urna, sed egestas ante odio ac diam.

Vestibulum quis commodo eros. Etiam erat eros, semper ac mauris et, laoreet malesuada nisi. Ut euismod augue sem, interdum gravida velit feugiat sed. Nam hendrerit dui eget ligula sodales varius. Mauris vel mi vel nisi tincidunt pharetra. Integer et cursus orci, a ornare neque. In in risus eu neque ullamcorper tempor malesuada vel arcu. Donec lobortis justo in magna consequat aliquet. Pellentesque sed justo vitae est auctor tempor.

Quisque eleifend sapien eu efficitur laoreet. Nulla interdum consectetur ante id semper. Morbi nec consequat tellus, vitae volutpat sem. Aenean pretium semper dui, vel bibendum nisl vehicula sed. Sed tempor eros eget leo dignissim volutpat. Nam eget nibh ac nunc vestibulum viverra ac et ante. Etiam vitae dapibus risus. Aenean at hendrerit tortor.

Sed fermentum ut sapien nec ultricies. In nec ligula laoreet, malesuada mi in, aliquam purus. Aliquam dapibus pharetra cursus. Suspendisse a elit tempor, tristique ipsum vitae, tincidunt turpis. Integer molestie sem ultrices leo suscipit sagittis. Mauris iaculis ex eu dignissim dictum. Aenean faucibus vestibulum semper. Vivamus tempor nunc quis sollicitudin accumsan. Pellentesque interdum porta pulvinar.

code by Ri.a

Code:

[centerblock=60][div=height:auto;display:flex;overflow:hidden;align-items:center;justify-content:space-evenly;][div=width:150px;height:150px;background:url('http://margaretzhang.com.au/wp-content/uploads/2014/04/MARGARETZHANG_HannahWaites_8626-800x1199.jpg');background-size:100%;background-repeat:no-repeat;border-radius:100px;][/div][div=flex:1;overflow-y:scroll;text-align:center;][div=font-size:2em;][font=Righteous]Character Name[/font][/div] [font=Lato][div=font-size:0.8em;opacity:0.5;]Location: | Interacting with: | Mentions: [/div][/font][/div] [/div] [div=flex:1;height:40vh;overflow-y:scroll;font-size:0.9em;padding:0.7em;][font=Lato]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at laoreet odio. Etiam aliquet elementum velit et fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac justo vitae ipsum sagittis tempor. Donec in semper mi. Nunc tincidunt tempor lacus ut maximus. Mauris pretium ultrices purus non elementum. Sed at luctus arcu. Sed tempor, neque eget mollis euismod, augue lorem interdum urna, sed egestas ante odio ac diam. Vestibulum quis commodo eros. Etiam erat eros, semper ac mauris et, laoreet malesuada nisi. Ut euismod augue sem, interdum gravida velit feugiat sed. Nam hendrerit dui eget ligula sodales varius. Mauris vel mi vel nisi tincidunt pharetra. Integer et cursus orci, a ornare neque. In in risus eu neque ullamcorper tempor malesuada vel arcu. Donec lobortis justo in magna consequat aliquet. Pellentesque sed justo vitae est auctor tempor. Quisque eleifend sapien eu efficitur laoreet. Nulla interdum consectetur ante id semper. Morbi nec consequat tellus, vitae volutpat sem. Aenean pretium semper dui, vel bibendum nisl vehicula sed. Sed tempor eros eget leo dignissim volutpat. Nam eget nibh ac nunc vestibulum viverra ac et ante. Etiam vitae dapibus risus. Aenean at hendrerit tortor. Sed fermentum ut sapien nec ultricies. In nec ligula laoreet, malesuada mi in, aliquam purus. Aliquam dapibus pharetra cursus. Suspendisse a elit tempor, tristique ipsum vitae, tincidunt turpis. Integer molestie sem ultrices leo suscipit sagittis. Mauris iaculis ex eu dignissim dictum. Aenean faucibus vestibulum semper. Vivamus tempor nunc quis sollicitudin accumsan. Pellentesque interdum porta pulvinar. [/font][/div][div=text-align:right;font:Karla;font-size:0.5em;letter-spacing:0.3em;opacity:0.6;][comment]DO NOT REMOVE[/comment]code by Ri.a[/div][/centerblock]

Oh my lord, I absolutely love your codes! I was wondering if it'd be okay if I used the code above IC? I'll leave the credit, of course.

RI.a · Aug 1, 2018

graphic_biscuit said:
Oh my lord, I absolutely love your codes! I was wondering if it'd be okay if I used the code above IC? I'll leave the credit, of course.

Thank you! Yes, feel free!

graphic_biscuit · Aug 1, 2018

RI.a said:
Thank you! Yes, feel free!

Thank you so much!

PotatoTruffles · Aug 2, 2018

RI.a , I wanted to be able to type over my image, so your second template is absolutely perfect for me. I sort of used your codes as reference to do my own codes. I've scanned through many other BBcodes around here, but you arranged yours so nicely, I was able to learn it very quickly! Thank you!

Edit: Oh and, I've added the credits section into mine too, to credit you. Thanks again.

Chione · Aug 7, 2018

RI.a said:
Yeah! I'll send you a PM ^^

Hi there! I absolutely adore your codes but do you mind revealing the secret of hiding the scroll bars to me too? ^^

RI.a · Aug 7, 2018

Chione said:
Hi there! I absolutely adore your codes but do you mind revealing the secret of hiding the scroll bars to me too? ^^

Ahahaha sure. I think I'll do a tutorial for it here. Hopefully that will be helpful? I'll get to it after work ^^

RI.a · Aug 7, 2018

Tutorial: Hidden Scrolls

Heya! So you wanna include scrolls in your code but you don't want that horrible looking scrollbar? Then you've come to the right place-~~maybe~~. I've been asked this twice, (it's not a lot of times) but thought I should make a general tutorial here so anyone else who wants to include hidden scrollbars would appreciate this, ya know? xD

There are probably a lot of other ways to hide 'em scrollbars, and my way may not be the most efficient. But it's how I understand and it works 100%, so... *shrug*

EDIT: I just remembered I figured out another way to hide scrollbars with padding. xD But this still applies more to the codes here. If anyone wants me to do another tutorial with padding, let me know!

Alright, enough dilly-dally. Here's how I make hidden scrollbars using classes. If you don't know what that means and all this coding jargon is too much, Uxie explains this nice and simply here. Or if you don't want to spend more time reading; using div classes sorts your code neatly, and if you wish to repeat a div, you don't need to write the whole thing again.

So first, we have our normal div box with visible scrollbars.

code:

[nobr][class=container1]
width:100%;
height:30vh;
border:2px solid black;
overflow:hidden;
[/class]

[class=scrollbar1]
width:100%;
height:30vh;
overflow-y:scroll;
[/class][/nobr][div class=container1][div class=scrollbar1]insert text here[/div][/div]

what it looks like:
[class=container1] width:100%; height:30vh; border:2px solid black; overflow:hidden; [/class] [class=scrollbar1] width:100%; height:30vh; overflow-y:scroll; [/class][div class=container1][div class=scrollbar1]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla elit a pretium pellentesque. Donec egestas, lacus et egestas suscipit, nisl purus sollicitudin turpis, egestas pretium neque magna nec nisl. Nulla odio eros, finibus quis euismod ut, lobortis ac mi. Vivamus vel tortor metus. Fusce id metus id nisl viverra suscipit ac eu nibh. Fusce in dignissim urna. Quisque imperdiet malesuada nulla non placerat. Ut maximus a quam in convallis. Vivamus sodales diam et est congue viverra. Sed consectetur a ex eget viverra. In vitae molestie erat. Cras efficitur a tortor nec sodales. Curabitur in odio id turpis aliquam ultricies. In ac leo scelerisque, vestibulum justo nec, faucibus tortor. Pellentesque ut accumsan dolor. Praesent eleifend eget odio vitae pretium. Suspendisse finibus arcu sapien, dignissim eleifend quam molestie vitae. Curabitur ex felis, egestas eu nibh a, tincidunt facilisis tellus. Suspendisse potenti. Fusce id est aliquam, ultrices nibh ut, interdum tellus. Nunc quis nunc at risus volutpat volutpat sed in velit. Pellentesque malesuada sollicitudin odio nec feugiat. Maecenas arcu erat, fringilla venenatis elit eget, venenatis luctus orci. Nulla vitae elit tortor.

SO, to make the scrollbar "hidden" we'll make the scrollbar class a bigger width than the container.

"but won't that cut the text off too?": You

Yeap, it does. To counter that, we make another class for the text to sit within [div class=scrollbar]. (:

This works no matter what width your container class is, whether a 68%, 250px, 48vw width size. Because [div class=scrollbar] is a child of [div class=container], if we increase the width of the scrollbar class to 105% (or whatever number, as long as it's greater than a 100%). The [div class=container] hides the scrollbar because it's not within the visible parts of the container anymore. Hmm.. Think of the container as a physical window and imagine you are looking in from outside. There's blinds on the other side of the window, and the string thing to pull your blinds up and down isn't visible from the outside because the blinds have a wider width than the window. Is that a good example? xD

As [div class=textbox] is a child of [div class=scrollbar] (remember it has a bigger width than container), means that width of textbox class must now be a smaller value.

Below, you'll notice that the with of the scrollbar class is 105%, and the width of the textbox class is 92% (play with the numbers as you wish so it fits your container nicely. the preview button is your best friend)

code:

[nobr][class=container2]
width:100%;
height:30vh;
border:2px solid black;
overflow:hidden;
[/class]

[class=scrollbar2]
width:105%;
height:30vh;
overflow-y:scroll;
[/class]

[class=textbox2]
width:92%;
[/class][/nobr][div class=container2][div class=scrollbar2][div class=textbox2]insert text here[/div][/div][/div]

what it looks like:
[class=container2] width:100%; height:30vh; border:2px solid black; overflow:hidden; [/class] [class=scrollbar2] width:105%; height:30vh; overflow-y:scroll; [/class] [class=textbox2] width:93%; [/class][div class=container2][div class=scrollbar2][div class=textbox2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla elit a pretium pellentesque. Donec egestas, lacus et egestas suscipit, nisl purus sollicitudin turpis, egestas pretium neque magna nec nisl. Nulla odio eros, finibus quis euismod ut, lobortis ac mi. Vivamus vel tortor metus. Fusce id metus id nisl viverra suscipit ac eu nibh. Fusce in dignissim urna. Quisque imperdiet malesuada nulla non placerat. Ut maximus a quam in convallis. Vivamus sodales diam et est congue viverra. Sed consectetur a ex eget viverra. In vitae molestie erat. Cras efficitur a tortor nec sodales. Curabitur in odio id turpis aliquam ultricies. In ac leo scelerisque, vestibulum justo nec, faucibus tortor. Pellentesque ut accumsan dolor. Praesent eleifend eget odio vitae pretium. Suspendisse finibus arcu sapien, dignissim eleifend quam molestie vitae. Curabitur ex felis, egestas eu nibh a, tincidunt facilisis tellus. Suspendisse potenti. Fusce id est aliquam, ultrices nibh ut, interdum tellus. Nunc quis nunc at risus volutpat volutpat sed in velit. Pellentesque malesuada sollicitudin odio nec feugiat. Maecenas arcu erat, fringilla venenatis elit eget, venenatis luctus orci. Nulla vitae elit tortor.

[/div][/div]

And that's it! Feel free to ask any questions, and if someone have a better way to hide scrollbars feel free to share! ^^ Hope this was helpful!

xxx Ri.a
[/div][/div][/div]

Here ya go buddy

Chione

Svisttt · Aug 7, 2018

These are all beautiful oh my goshhhh good work

Closed Ria's -- code dump?

"愛を知りたいのです."

"愛を知りたいのです."

"愛を知りたいのです."

"愛を知りたいのです."

"愛を知りたいのです."

"愛を知りたいのです."

"愛を知りたいのです."

and a swift justice to those that got away with it

"愛を知りたいのです."

and a swift justice to those that got away with it

Guardian of the Three Moons

"愛を知りたいのです."

queen of the stars

(´• ω •`)

"愛を知りたいのです."

Things are about to get Hawkward...

"愛を知りたいのです."

tis i, the frenchiest fry.

"愛を知りたいのです."

tis i, the frenchiest fry.

(needs a title)

ᴡɪꜱᴇ ᴍᴇɴ ꜱᴀʏ ᴏɴʟʏ ғᴏᴏʟꜱ ʀᴜꜱʜ ɪɴ

"愛を知りたいのです."

"愛を知りたいのです."

trash~

Users who are viewing this thread

Similar threads