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

    Remember to credit artists when using work not your own.

Resource Just Practicing BBCode

doneanddusted

Two Thousand Club
Hi I just thought it would be nice to post the stuff I've made so that people can give constructive criticism and so I don't flood the bbcode center with stupid questions... I suppose you could uhhh use the code but like why would you
 
I would like to learn BBCode ++....
I also dk any more convenient ways to make hidden scroll boxes...


Insert Name
Subtitle


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum leo justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vel pellentesque lectus, ut hendrerit nibh. Donec aliquet, augue non bibendum gravida, libero erat finibus felis, a molestie odio diam sed arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et fringilla justo.


Code:
[centerblock=50][div=max-width: 500px; height: 500px; box-sizing: border-box; overflow: hidden; background-color: #EBE2F0; padding: 10px; border-radius: 10px;][div=width: 100%; height: 100%; overflow-y: scroll; padding-right: 150px; padding-left: 5px;][JUSTIFY]
[CENTER][FONT=mistral][SIZE=36px][COLOR=rgb(0, 0, 0)]Insert Name[/COLOR][/SIZE][/FONT]
[FONT=georgia][SIZE=20px][COLOR=rgb(0, 0, 0)]Subtitle[/COLOR][/SIZE][/FONT][/CENTER]

[div=padding: 10px; pointer-events: none; border-radius: 100%; height: 100px; width: 100px; position: relative; left: 37%; background-image: url(https://preview.ibb.co/mH5DBz/life.png); background-size: 100%;][/div]
[COLOR=rgb(0, 0, 0)][FONT=georgia]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum leo justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vel pellentesque lectus, ut hendrerit nibh. Donec aliquet, augue non bibendum gravida, libero erat finibus felis, a molestie odio diam sed arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et fringilla justo.[/FONT][/COLOR][/JUSTIFY]
[/div][/div][/centerblock]


Insert Name
Subtitle


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum leo justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vel pellentesque lectus, ut hendrerit nibh. Donec aliquet, augue non bibendum gravida, libero erat finibus felis, a molestie odio diam sed arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et fringilla justo.


Code:
[centerblock=50][div=max-width: 500px; height: 500px; box-sizing: border-box; overflow: hidden; background: linear-gradient(#ffc491,#db0f27); padding: 10px; border-radius: 10px;][div=width: 100%; height: 100%; overflow-y: scroll; padding-right: 150px; padding-left: 5px;][JUSTIFY]
[CENTER][FONT=Abril Fatface][SIZE=36px][COLOR=rgb(0, 0, 0)]Insert Name[/COLOR][/SIZE][/FONT]
[FONT=Quicksand][SIZE=20px][COLOR=rgb(0, 0, 0)]Subtitle[/COLOR][/SIZE][/FONT][/CENTER]

[div=padding: 10px; pointer-events: none; border-radius: 100%; height: 100px; width: 100px; position: relative; left: 37%; background-image: url(https://preview.ibb.co/m0q8Bz/emotion3.png); background-size: 100%;][/div]
[COLOR=rgb(0, 0, 0)][FONT=Quicksand]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum leo justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vel pellentesque lectus, ut hendrerit nibh. Donec aliquet, augue non bibendum gravida, libero erat finibus felis, a molestie odio diam sed arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et fringilla justo.[/FONT][/COLOR][/JUSTIFY]
[/div][/div][/centerblock]
 
Last edited:

Stuffy Stuff

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum leo justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vel pellentesque lectus, ut hendrerit nibh. Donec aliquet, augue non bibendum gravida, libero erat finibus felis, a molestie odio diam sed arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et fringilla justo.



Code:
[centerblock=50]
[div=max-width: 100%; height: 90px; box-sizing: border-box; overflow: auto; padding: 10px; background: url(https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=332072f9d176b37db042ab986a829577&w=1000&q=80) fixed; background-size: 100%; color: black; font-size: 36px; text-align: center;][font=Cinzel]Stuffy Stuff[/font][/div]
[font= cormorant garamond]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum leo justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vel pellentesque lectus, ut hendrerit nibh. Donec aliquet, augue non bibendum gravida, libero erat finibus felis, a molestie odio diam sed arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et fringilla justo.
[/font]
[/centerblock]


Chadrick Taylor
Insert tags and stuff like that


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum leo justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vel pellentesque lectus, ut hendrerit nibh. Donec aliquet, augue non bibendum gravida, libero erat finibus felis, a molestie odio diam sed arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et fringilla justo.




Code:
[centerblock=50]
[div=max-width: 100%; height: 100px; box-sizing: border-box; padding: 10px; background: url(http://coveteur.com/wp-content/uploads/2016/12/Gucci_Miles_Macmillan-99.jpg) fixed; background-size: 100%; color: white; text-align: center;][font=Cinzel][SIZE=36px]Chadrick Taylor[/SIZE]
[SIZE=12px]Insert tags and stuff like that[/SIZE][/font][/div]

[font= cormorant garamond]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum leo justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vel pellentesque lectus, ut hendrerit nibh. Donec aliquet, augue non bibendum gravida, libero erat finibus felis, a molestie odio diam sed arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et fringilla justo.

[/font]
[/centerblock]


Mio Choi
Insert tags and stuff like that


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum leo justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vel pellentesque lectus, ut hendrerit nibh. Donec aliquet, augue non bibendum gravida, libero erat finibus felis, a molestie odio diam sed arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et fringilla justo.



Code:
[centerblock=50]
[div=max-width: 100%; height: 100px; box-sizing: border-box; padding: 10px; background: url(http://www.klemenmarkelj.com/wp-content/uploads/2016/05/Black-White-Drum-Wallpaper-HD.jpg) fixed; background-size: 100%; color: white; text-align: center;][font=Times New Roman][SIZE=36px]Mio Choi[/SIZE]
[SIZE=12px]Insert tags and stuff like that[/SIZE][/font][/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum leo justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vel pellentesque lectus, ut hendrerit nibh. Donec aliquet, augue non bibendum gravida, libero erat finibus felis, a molestie odio diam sed arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et fringilla justo.

[/centerblock]
 
Last edited:



Nora Smith
Age: 20
Gender: Female
Sexuality: Pansexual
Power: Mimicry




  • Nora is a young woman of around 165 cm with a weight of around idk she's healthy. She leans very slightly to the chubby side. She's of Caucasian descent: her skin is subtly tanned, her hair is dark brown - and usually pulled into a ponytail- and her eyes are hazel. Nora tends to wear loose, comfortable clothing. She's practically blind without her glasses.





Code:
[row]
[div=width: 35%; height: 410px; box-sizing: border-box; overflow: hidden; padding: 10px; border: 5px dotted #ffe95e; display: inline-block;]
[div=padding: 10px; pointer-events: none; height: 190px; width: 300px; position: relative; left: 3%; background-image: url(https://static1.squarespace.com/static/576ef902d1758ef2e6dada3d/576f03126a4963e880312dde/583dccccb3db2b24516db4b7/1480445534418/FullSizeRender+182.jpg?format=500w); background-size: 100%;][/div]
[CENTER][FONT=mistral][SIZE=20px]Nora Smith[/SIZE][/FONT]
[FONT=georgia][SIZE=8px][B]Age:[/B] 20
[B]Gender:[/B] Female
[B]Sexuality:[/B] Pansexual
[B]Power:[/B] Mimicry[/SIZE]

[/FONT][/CENTER]
[/div][div=width:63%; height: 410px; box-sizing: border-box; overflow: hidden; padding: 10px; border: 5px dotted #ffe95e; display: inline-block; position: relative; left: 2%;][div=width: 100%; height: 100%; overflow-y: scroll; padding-right: 150px; padding-left: 5px;]
[Tabs]

[Tab=Appearance][FONT=georgia]
Nora is a young woman of around 165 cm with a weight of around idk she's healthy. She leans very slightly to the chubby side. She's of Caucasian descent: her skin is subtly tanned, her hair is dark brown - and usually pulled into a ponytail- and her eyes are hazel. Nora tends to wear loose, comfortable clothing. She's practically blind without her glasses.
[/FONT]
[/Tab]

[Tab=Diggin' In Deep][FONT=georgia]
[B]Biography:[/B] Nora was born into a typical suburbia as the younger sibling to a drug junkie sister. She used to be incredibly energetic, however after middle school, she began to keep mostly to herself, as a result of some petty friendship drama. She went through plenty of phases in high school, falling in and out with different friends; in the end she came out of high school as a sarcastic and apathetic but overall pleasant individual. She’d always attributed her empathy powers to some kind of godly intuition. 

Her passion had always been in food. From a young age Nora would go around cooking dinners and delicious desserts for friends and family. That was something that never left her. It was a source of pride, a source of insecurity; the only thing she thought she could make a career out of- pitiful but… oddly okay.

After coming out of high school, Nora went into a culinary college, up until she “died”.

[B]Personality:[/B] A rather chill individual. Despite her apathetic and seemingly level-headed look at things, she’s generally impulsive, spontaneous, and incredibly emotional. She spends her time lazing around, motivated only by deadlines and random bursts of 1 am inspiration. Despite her apathetic attitude, she cares a lot about people.

[SIZE=10px][B]Likes:[/B] Food, cooking, music
[B]Dislikes:[/B] Large crowds of people, confrontation, lies
[B]Biggest Fear:[/B] Failure- she knows the path of being a culinary person is a shaky one and the possibility of not turning out as well as she’d want terrifies her.
[B]Strengths:[/B] A good cook, generally chill, good person to tell secrets to, can tell if you’re lying
[B]Weaknesses:[/B] Lazy, dismisses own problems, a little dense, impulsive
[B]Quirks/Habits:[/B] Stress eats. A lot. Also has a tendency to sigh a lot.[/SIZE]
[/FONT]
[/Tab]

[Tab=Thunder Stuff][FONT=georgia]
[B]Power:[/B] Mimicry- ultimately she can shapeshift into what she sees + the classic mimicry stuff, but for now she just has heightened empathy and some very vague mind reading.
[B]Weakness:[/B] The mind reading / empathy is rather vague until she focuses on a single person; she can also get overwhelmed in a group because of how many or how powerful their thoughts / emotions may be. Additionally, the longer she focuses, the more drained she gets.
[B]Level:[/B] V
[B]Time at Thunder:[/B] She literally just got there

[/FONT][/Tab]

[Tab=Others][FONT=georgia]
[B]Theme Song:[/B] Literally anyone screaming “WHAT THE FUCK IS HAPPENING” works

[B]Relationships:[/B] N/A

[/FONT][/Tab]

[/Tabs]
[/div][/div]

[/row]
 
Last edited:
[class name=Header] max-width: 500px; height: 100px; margin: auto; display: flex; flex-direction: column; background-image: url(https://cdnb.artstation.com/p/assets/images/images/016/008/831/large/joseph-qiu-double-dagger-36.jpg?1550553498); background-size: 100%; background-position: center center; background-attachment: fixed; text-align: center; padding: 10px; [/class] [class name=Container] max-width: 500px; height: 300px; overflow: hidden; margin: auto; text-align: center; [/class] [class name=Textbox] width: 100%; height: 95%; padding: 11px; overflow-y: scroll; display: flex; flex-direction: column; [/class] [class name=Heading] display: inline; font-size: 20pt; font-family: Timelord; letter-spacing: .5em; [/class] [class name=Text] display: inline; font-size: 11pt; font-family: Georgia; [/class]

[div class=Header]
[div class=Heading]I'M BEESEXUAL[/div]
[/div][div class=Container][div class=Textbox][div class=Text]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida arcu ac tortor dignissim convallis aenean et tortor at. Fermentum et sollicitudin ac orci phasellus egestas. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Vestibulum morbi blandit cursus risus. Imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor. Faucibus ornare suspendisse sed nisi. Pellentesque adipiscing commodo elit at imperdiet dui. Purus viverra accumsan in nisl nisi scelerisque. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero id. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Dignissim sodales ut eu sem integer vitae justo eget magna. Sed arcu non odio euismod lacinia at. Lectus proin nibh nisl condimentum id venenatis. Venenatis cras sed felis eget velit aliquet sagittis id. Enim nunc faucibus a pellentesque sit amet porttitor. Pellentesque dignissim enim sit amet venenatis urna cursus. Nullam ac tortor vitae purus faucibus. Fermentum leo vel orci porta non pulvinar neque.

Integer malesuada nunc vel risus commodo viverra. Lacus vestibulum sed arcu non odio. In dictum non consectetur a erat nam. Lectus proin nibh nisl condimentum id. Semper risus in hendrerit gravida rutrum. Risus quis varius quam quisque id. Aliquam faucibus purus in massa tempor nec feugiat nisl. Ultricies leo integer malesuada nunc vel risus commodo viverra maecenas. Tempor orci dapibus ultrices in iaculis nunc sed augue. Natoque penatibus et magnis dis parturient montes nascetur.[/div][/div][/div]

figuring out bbcode + i love you koala

Code:
[nobr]
[class name=Header]
max-width: 500px;
height: 100px;
margin: auto;
display: flex;
flex-direction: column;
background-image: url(https://cdnb.artstation.com/p/assets/images/images/016/008/831/large/joseph-qiu-double-dagger-36.jpg?1550553498);
background-size: 100%;
background-position: center center;
background-attachment: fixed;
text-align: center;
padding: 10px;
[/class]

[class name=Container]
max-width: 500px;
height: 300px;
overflow: hidden;
margin: auto;
text-align: center;
[/class]

[class name=Textbox]
width: 100%;
height: 95%;
padding: 11px;
overflow-y: scroll;
display: flex;
flex-direction: column;
[/class]

[class name=Heading]
display: inline;
font-size: 20pt;
font-family: Timelord;
letter-spacing: .5em;
[/class]

[class name=Text]
display: inline;
font-size: 11pt;
font-family: Georgia;
[/class]
[/nobr]

[div class=Header]
[div class=Heading]I'M BEESEXUAL[/div]
[/div][div class=Container][div class=Textbox][div class=Text]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida arcu ac tortor dignissim convallis aenean et tortor at. Fermentum et sollicitudin ac orci phasellus egestas. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Vestibulum morbi blandit cursus risus. Imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor. Faucibus ornare suspendisse sed nisi. Pellentesque adipiscing commodo elit at imperdiet dui. Purus viverra accumsan in nisl nisi scelerisque. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero id. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Dignissim sodales ut eu sem integer vitae justo eget magna. Sed arcu non odio euismod lacinia at. Lectus proin nibh nisl condimentum id venenatis. Venenatis cras sed felis eget velit aliquet sagittis id. Enim nunc faucibus a pellentesque sit amet porttitor. Pellentesque dignissim enim sit amet venenatis urna cursus. Nullam ac tortor vitae purus faucibus. Fermentum leo vel orci porta non pulvinar neque.

Integer malesuada nunc vel risus commodo viverra. Lacus vestibulum sed arcu non odio. In dictum non consectetur a erat nam. Lectus proin nibh nisl condimentum id. Semper risus in hendrerit gravida rutrum. Risus quis varius quam quisque id. Aliquam faucibus purus in massa tempor nec feugiat nisl. Ultricies leo integer malesuada nunc vel risus commodo viverra maecenas. Tempor orci dapibus ultrices in iaculis nunc sed augue. Natoque penatibus et magnis dis parturient montes nascetur.[/div][/div][/div]
 
Last edited:
sorry i need this for my own reference

[class name=Header] max-width: 500px; height: 100px; margin: auto; display: flex; flex-direction: column; text-align: center; [/class] [class name=Container] max-width: 500px; height: 300px; overflow: hidden; margin: auto; text-align: center; [/class] [class name=Textbox] width: calc(100% - 24px); height: 90%; padding: 24px; overflow-y: scroll; display: flex; flex-direction: column; [/class] [class name=Heading] display: inline; font-size: calc(8pt + (20 - 8) * ((100vw - 320px) / (1600 - 320))); font-family: Timelord; letter-spacing: .5em; [/class] [class name=Text] display: inline; font-size: 11pt; font-family: Georgia; [/class]

[div class=Header]
[div class=Heading]MYESHA KHALIL
⋅•⋅⋅•⋅⊰∙∘☽༓☾∘∙⊱⋅•⋅⋅•⋅[/div]
[/div][div class=Container][div class=Textbox][div class=Text]Myesha made her way along the eastern wall of the city of Clarmont. In a hidden pocket (she had plenty of those) were three letters she’d received following the Knight Exams. The first was a letter of invitation from Para Noblesse. The second was a letter of invitation from the Blue Roses. The third was an apology from Para Noblesse telling her “Oops, wrong person!” So she really only received one viable letter following the Knight Exams.

There were already rumors flying around about how Blue Roses was a mercy guild for bad knights and the guildmaster was a big ol’ loaf; Myesha did her best to stop those from clouding her judgement. Her mother always told her to “Hear everything, say nothing, and learn what’s true and what isn’t.” Of course, a bad reputation would be to Myesha detriment as a Knight. But if she got along with her fellow guild members, then all would be worth it in the end.

The young girl spotted the headquarters of the Blue Roses- a rinky dinky little place that seemed to look like it needed some renovation. Around the building were flowers of various kinds, adding to the building’s run-down look in a pleasant way. Myesha stared for a moment at the vines running along the front door before opening it up just in time to hear: “BELAY THOSE STEPS, COUNTRY GIRL!”

It was in that moment that Myesha realized the true gravity of her choice to come here. The girl carefully closed the door, pushing prana around to make sure she was absolutely silent. She looked over at where all the action was: there stood the woman who’d just been yelling, armed with a rather attractive lance. She spoke softly to a short acher girl. Myesha listened to their conversation, but found it a little confusing without context. And- well, Myesha didn’t want to assume too much. Assumptions were the start of sin.

In the surrounding area was a girl and her puppy, a shadow-manipulator with cat eyes, slouching man, and a man who seemed rather disheveled. The slouching man- he said something that seemed a little arrogant, but Myesha couldn’t be sure. Then the disheveled slammed his hand on a table. Myesha felt waves of prana from him; she felt it safe to assume then that he was the guildmaster.

Myesha took out her invitation, the paper making incredibly loud crackling sounds, similar to the crack of lightning. The girl’s eyes widened in surprise. She didn’t even bother looking up; she had a feeling people’s eyes would turn to her. Fuck.
[/div][/div][/div]


Code:
[nobr]
[class name=Header]
max-width: 500px;
height: 100px;
margin: auto;
display: flex;
flex-direction: column;
text-align: center;
[/class]

[class name=Container]
max-width: 500px;
height: 300px;
overflow: hidden;
margin: auto;
text-align: center;
[/class]

[class name=Textbox]
width: calc(100% - 24px);
height: 90%;
padding: 24px;
overflow-y: scroll;
display: flex;
flex-direction: column;
[/class]

[class name=Heading]
display: inline;
font-size: calc(8pt + (20 - 8) * ((100vw - 320px) / (1600 - 320)));
font-family: Timelord;
letter-spacing: .5em;
[/class]

[class name=Text]
display: inline;
font-size: 11pt;
font-family: Georgia;
[/class]
[/nobr]

[div class=Header]
[div class=Heading]MYESHA KHALIL
⋅•⋅⋅•⋅⊰∙∘☽༓☾∘∙⊱⋅•⋅⋅•⋅[/div]
[/div][div class=Container][div class=Textbox][div class=Text]Myesha made her way along the eastern wall of the city of Clarmont. In a hidden pocket (she had plenty of those) were three letters she’d received following the Knight Exams. The first was a letter of invitation from Para Noblesse. The second was a letter of invitation from the Blue Roses. The third was an apology from Para Noblesse telling her “Oops, wrong person!” So she really only received one viable letter following the Knight Exams. 

There were already rumors flying around about how Blue Roses was a mercy guild for bad knights and the guildmaster was a big ol’ loaf; Myesha did her best to stop those from clouding her judgement. Her mother always told her to “Hear everything, say nothing, and learn what’s true and what isn’t.” Of course, a bad reputation would be to Myesha detriment as a Knight. But if she got along with her fellow guild members, then all would be worth it in the end. 

The young girl spotted the headquarters of the Blue Roses- a rinky dinky little place that seemed to look like it needed some renovation. Around the building were flowers of various kinds, adding to the building’s run-down look in a pleasant way. Myesha stared for a moment at the vines running along the front door before opening it up just in time to hear: “BELAY THOSE STEPS, COUNTRY GIRL!”

It was in that moment that Myesha realized the true gravity of her choice to come here. The girl carefully closed the door, pushing prana around to make sure she was absolutely silent. She looked over at where all the action was: there stood the woman who’d just been yelling, armed with a rather attractive lance. She spoke softly to a short acher girl. Myesha listened to their conversation, but found it a little confusing without context. And- well, Myesha didn’t want to assume too much. Assumptions were the start of sin. 

In the surrounding area was a girl and her puppy, a shadow-manipulator with cat eyes, slouching man, and a man who seemed rather disheveled. The slouching man- he said something that seemed a little arrogant, but Myesha couldn’t be sure. Then the disheveled slammed his hand on a table. Myesha felt waves of prana from him; she felt it safe to assume then that he was the guildmaster.

Myesha took out her invitation, the paper making incredibly loud crackling sounds, similar to the crack of lightning. The girl’s eyes widened in surprise. She didn’t even bother looking up; she had a feeling people’s eyes would turn to her. Fuck. 
[/div][/div][/div]
 
Last edited:
I love your codes! :D They're super clean and nice, and I think as you learn to make them more complicated they will be incredible ^_^
 
sorry i need this for my own reference

[class name=Header] max-width: 500px; height: 100px; margin: auto; display: flex; flex-direction: column; text-align: center; [/class] [class name=Container] max-width: 500px; height: 300px; overflow: hidden; margin: auto; text-align: center; [/class] [class name=Textbox] width: calc(100% - 24px); height: 90%; padding: 24px; overflow-y: scroll; display: flex; flex-direction: column; [/class] [class name=Heading] display: inline; font-size: calc(8pt + (20 - 8) * ((100vw - 320px) / (1600 - 320))); font-family: Timelord; letter-spacing: .5em; [/class] [class name=Text] display: inline; font-size: 11pt; font-family: Georgia; [/class]

[div class=Header]
[div class=Heading]MYESHA KHALIL
⋅•⋅⋅•⋅⊰∙∘☽༓☾∘∙⊱⋅•⋅⋅•⋅[/div]
[/div][div class=Container][div class=Textbox][div class=Text]Myesha made her way along the eastern wall of the city of Clarmont. In a hidden pocket (she had plenty of those) were three letters she’d received following the Knight Exams. The first was a letter of invitation from Para Noblesse. The second was a letter of invitation from the Blue Roses. The third was an apology from Para Noblesse telling her “Oops, wrong person!” So she really only received one viable letter following the Knight Exams.

There were already rumors flying around about how Blue Roses was a mercy guild for bad knights and the guildmaster was a big ol’ loaf; Myesha did her best to stop those from clouding her judgement. Her mother always told her to “Hear everything, say nothing, and learn what’s true and what isn’t.” Of course, a bad reputation would be to Myesha detriment as a Knight. But if she got along with her fellow guild members, then all would be worth it in the end.

The young girl spotted the headquarters of the Blue Roses- a rinky dinky little place that seemed to look like it needed some renovation. Around the building were flowers of various kinds, adding to the building’s run-down look in a pleasant way. Myesha stared for a moment at the vines running along the front door before opening it up just in time to hear: “BELAY THOSE STEPS, COUNTRY GIRL!”

It was in that moment that Myesha realized the true gravity of her choice to come here. The girl carefully closed the door, pushing prana around to make sure she was absolutely silent. She looked over at where all the action was: there stood the woman who’d just been yelling, armed with a rather attractive lance. She spoke softly to a short acher girl. Myesha listened to their conversation, but found it a little confusing without context. And- well, Myesha didn’t want to assume too much. Assumptions were the start of sin.

In the surrounding area was a girl and her puppy, a shadow-manipulator with cat eyes, slouching man, and a man who seemed rather disheveled. The slouching man- he said something that seemed a little arrogant, but Myesha couldn’t be sure. Then the disheveled slammed his hand on a table. Myesha felt waves of prana from him; she felt it safe to assume then that he was the guildmaster.

Myesha took out her invitation, the paper making incredibly loud crackling sounds, similar to the crack of lightning. The girl’s eyes widened in surprise. She didn’t even bother looking up; she had a feeling people’s eyes would turn to her. Fuck.
[/div][/div][/div]


Code:
[nobr]
[class name=Header]
max-width: 500px;
height: 100px;
margin: auto;
display: flex;
flex-direction: column;
text-align: center;
[/class]

[class name=Container]
max-width: 500px;
height: 300px;
overflow: hidden;
margin: auto;
text-align: center;
[/class]

[class name=Textbox]
width: calc(100% - 24px);
height: 90%;
padding: 24px;
overflow-y: scroll;
display: flex;
flex-direction: column;
[/class]

[class name=Heading]
display: inline;
font-size: calc(8pt + (20 - 8) * ((100vw - 320px) / (1600 - 320)));
font-family: Timelord;
letter-spacing: .5em;
[/class]

[class name=Text]
display: inline;
font-size: 11pt;
font-family: Georgia;
[/class]
[/nobr]

[div class=Header]
[div class=Heading]MYESHA KHALIL
⋅•⋅⋅•⋅⊰∙∘☽༓☾∘∙⊱⋅•⋅⋅•⋅[/div]
[/div][div class=Container][div class=Textbox][div class=Text]Myesha made her way along the eastern wall of the city of Clarmont. In a hidden pocket (she had plenty of those) were three letters she’d received following the Knight Exams. The first was a letter of invitation from Para Noblesse. The second was a letter of invitation from the Blue Roses. The third was an apology from Para Noblesse telling her “Oops, wrong person!” So she really only received one viable letter following the Knight Exams.

There were already rumors flying around about how Blue Roses was a mercy guild for bad knights and the guildmaster was a big ol’ loaf; Myesha did her best to stop those from clouding her judgement. Her mother always told her to “Hear everything, say nothing, and learn what’s true and what isn’t.” Of course, a bad reputation would be to Myesha detriment as a Knight. But if she got along with her fellow guild members, then all would be worth it in the end.

The young girl spotted the headquarters of the Blue Roses- a rinky dinky little place that seemed to look like it needed some renovation. Around the building were flowers of various kinds, adding to the building’s run-down look in a pleasant way. Myesha stared for a moment at the vines running along the front door before opening it up just in time to hear: “BELAY THOSE STEPS, COUNTRY GIRL!”

It was in that moment that Myesha realized the true gravity of her choice to come here. The girl carefully closed the door, pushing prana around to make sure she was absolutely silent. She looked over at where all the action was: there stood the woman who’d just been yelling, armed with a rather attractive lance. She spoke softly to a short acher girl. Myesha listened to their conversation, but found it a little confusing without context. And- well, Myesha didn’t want to assume too much. Assumptions were the start of sin.

In the surrounding area was a girl and her puppy, a shadow-manipulator with cat eyes, slouching man, and a man who seemed rather disheveled. The slouching man- he said something that seemed a little arrogant, but Myesha couldn’t be sure. Then the disheveled slammed his hand on a table. Myesha felt waves of prana from him; she felt it safe to assume then that he was the guildmaster.

Myesha took out her invitation, the paper making incredibly loud crackling sounds, similar to the crack of lightning. The girl’s eyes widened in surprise. She didn’t even bother looking up; she had a feeling people’s eyes would turn to her. Fuck.
[/div][/div][/div]
Your codes are fantastic!! Would you be alright if I used this one as an in-character sheet? It's so lovely and simple, which is what I've been looking for :3
 
Your codes are fantastic!! Would you be alright if I used this one as an in-character sheet? It's so lovely and simple, which is what I've been looking for :3

sorry for the late reply, i was on vacation. I'd be happy to let you use the code lol
 



Nora Smith
Age: 20
Gender: Female
Sexuality: Pansexual
Power: Mimicry




  • Nora is a young woman of around 165 cm with a weight of around idk she's healthy. She leans very slightly to the chubby side. She's of Caucasian descent: her skin is subtly tanned, her hair is dark brown - and usually pulled into a ponytail- and her eyes are hazel. Nora tends to wear loose, comfortable clothing. She's practically blind without her glasses.





Code:
[row]
[div=width: 35%; height: 410px; box-sizing: border-box; overflow: hidden; padding: 10px; border: 5px dotted #ffe95e; display: inline-block;]
[div=padding: 10px; pointer-events: none; height: 190px; width: 300px; position: relative; left: 3%; background-image: url(https://static1.squarespace.com/static/576ef902d1758ef2e6dada3d/576f03126a4963e880312dde/583dccccb3db2b24516db4b7/1480445534418/FullSizeRender+182.jpg?format=500w); background-size: 100%;][/div]
[CENTER][FONT=mistral][SIZE=20px]Nora Smith[/SIZE][/FONT]
[FONT=georgia][SIZE=8px][B]Age:[/B] 20
[B]Gender:[/B] Female
[B]Sexuality:[/B] Pansexual
[B]Power:[/B] Mimicry[/SIZE]

[/FONT][/CENTER]
[/div][div=width:63%; height: 410px; box-sizing: border-box; overflow: hidden; padding: 10px; border: 5px dotted #ffe95e; display: inline-block; position: relative; left: 2%;][div=width: 100%; height: 100%; overflow-y: scroll; padding-right: 150px; padding-left: 5px;]
[Tabs]

[Tab=Appearance][FONT=georgia]
Nora is a young woman of around 165 cm with a weight of around idk she's healthy. She leans very slightly to the chubby side. She's of Caucasian descent: her skin is subtly tanned, her hair is dark brown - and usually pulled into a ponytail- and her eyes are hazel. Nora tends to wear loose, comfortable clothing. She's practically blind without her glasses.
[/FONT]
[/Tab]

[Tab=Diggin' In Deep][FONT=georgia]
[B]Biography:[/B] Nora was born into a typical suburbia as the younger sibling to a drug junkie sister. She used to be incredibly energetic, however after middle school, she began to keep mostly to herself, as a result of some petty friendship drama. She went through plenty of phases in high school, falling in and out with different friends; in the end she came out of high school as a sarcastic and apathetic but overall pleasant individual. She’d always attributed her empathy powers to some kind of godly intuition.

Her passion had always been in food. From a young age Nora would go around cooking dinners and delicious desserts for friends and family. That was something that never left her. It was a source of pride, a source of insecurity; the only thing she thought she could make a career out of- pitiful but… oddly okay.

After coming out of high school, Nora went into a culinary college, up until she “died”.

[B]Personality:[/B] A rather chill individual. Despite her apathetic and seemingly level-headed look at things, she’s generally impulsive, spontaneous, and incredibly emotional. She spends her time lazing around, motivated only by deadlines and random bursts of 1 am inspiration. Despite her apathetic attitude, she cares a lot about people.

[SIZE=10px][B]Likes:[/B] Food, cooking, music
[B]Dislikes:[/B] Large crowds of people, confrontation, lies
[B]Biggest Fear:[/B] Failure- she knows the path of being a culinary person is a shaky one and the possibility of not turning out as well as she’d want terrifies her.
[B]Strengths:[/B] A good cook, generally chill, good person to tell secrets to, can tell if you’re lying
[B]Weaknesses:[/B] Lazy, dismisses own problems, a little dense, impulsive
[B]Quirks/Habits:[/B] Stress eats. A lot. Also has a tendency to sigh a lot.[/SIZE]
[/FONT]
[/Tab]

[Tab=Thunder Stuff][FONT=georgia]
[B]Power:[/B] Mimicry- ultimately she can shapeshift into what she sees + the classic mimicry stuff, but for now she just has heightened empathy and some very vague mind reading.
[B]Weakness:[/B] The mind reading / empathy is rather vague until she focuses on a single person; she can also get overwhelmed in a group because of how many or how powerful their thoughts / emotions may be. Additionally, the longer she focuses, the more drained she gets.
[B]Level:[/B] V
[B]Time at Thunder:[/B] She literally just got there

[/FONT][/Tab]

[Tab=Others][FONT=georgia]
[B]Theme Song:[/B] Literally anyone screaming “WHAT THE FUCK IS HAPPENING” works

[B]Relationships:[/B] N/A

[/FONT][/Tab]

[/Tabs]
[/div][/div]

[/row]
just want to say that this is abs amazing, would it be okay if i used this as a sheet?
 
still kinda working on this but hey i did something {thanks to fyuri who fixed a part of the code :,) }

[class name=Header] max-width: 700px; margin: auto; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; [/class] [class name=Headshot] height: 150px; width: 200px; background-image: url(https://i.ibb.co/jTw8Qhr/noam.png); background-size: 100%; background-position: center center; padding: 10px; border-radius: 10px 50px; [/class] [class name=Heading] font-size: 36pt; font-family: Cinzel; padding: 10px; [/class] [class name=Divide] margin: auto; text-align: center; max-width: 100% font-size: 12pt; font-family: Cinzel; [/class] [class name=Background] max-width: 800px; height: 500px; overflow: hidden; margin: auto; text-align: center; [/class] [class name=Scroller] width: 101%; height: 95%; padding: 10px; overflow-y: scroll; display: flex; flex-direction: column; [/class] [class name=Textbox] width: 100%; height: auto; padding: 10px; box-sizing:border-box; background-color: white; text-align: center; color: black; font-size: 16px; font-family: Forum; [/class] [class name=Image] width: 100%; height: auto; padding: 10px; box-sizing:border-box; background-image: url(https://i.ibb.co/6DbLYWs/noam3.png); background-attachment: fixed; background-size: 60%; background-position: 70% 30%; [/class] [class name=NotherImage] width: 100%; height: auto; padding: 10px; box-sizing:border-box; background-image: url(https://i.ibb.co/WVPhthq/noam4.png); background-attachment: fixed; background-size: 60%; background-position: 60% 80%; [/class] [class name=Isuckatclassesiknow] width: 100%; height: auto; padding: 10px; box-sizing:border-box; background-image: url(https://via.placeholder.com/200); background-attachment: fixed; background-size: 100%; background-position: center center; [/class] [class name=Image2] width: 40%; height: auto; padding: 10px; margin: auto; background-image: url(https://i.ibb.co/cbwZ5Fd/noam2.png); background-size: 100%; background-position: center center; border-radius: 50000px; [/class]

[div class=Header]
[div class=Headshot][/div]
[div class=Heading]Noam Asodif[/div]
[/div]
[div class=Divide]╔═══════════════╗
«──────────────────────────────────── « ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ⋅ʚ♡ɞ⋅ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ » ────────────────────────────────────»
╚═══════════════╝[/div]
[div class=Background][div class=Scroller]
[div class=Textbox]BASICS
Name: Noam Asodif (wow)
Age: 19
Gender: No (they don't really care about pronouns tho so do whatever)
Sexuality: They never really thought about that.
[/div]
[div class=Image]






[/div]
[div class=Textbox]MAGIC
Noam's studied all sorts of runes, and has put that to use by going into enchantment. In addition to that, Noam has taken an interest in dimensional magic- specifically, creating pocket dimensions for himself so that they can hide from the rest of the world. While they have a good amount of variety and they've probably practiced many runes to perfection, they've never really done much playing around with the magic they've learned. In that sense, they're very much a stick-to-the-book kind of guy.[/div]
[div class=Image2]








[/div]
[div class=Textbox]APPEARANCE
(Art coming eventually... sorry for all the gray boxes lol)
Noam looks an awful lot like some scrawny teenage kid with a mess of short, curly brown hair and rather large, tired-looking blue eyes. Their skin is rather pale, though it tans quite easily. While their sense of fashion swings between poofy dresses and suit-and-vest, they're usually too lazy to really dress up in anything more than undergarments. With boots off, Noam stands at around 5 feet and 8 inches.
[/div]
[div class=NotherImage]




[/div]
[div class=Textbox]DIVING DEEPER
Noam was born in the capital to a family of relatively wealthy and powerful witches. They lived in their family's coven for a while, learning from a young age some simple things like how to draw a straight line or how to make perfect circles. When Noam was around five, their father left and their mother took them and their older sister to the country side, enrolling them in a coven which had recently started taking in students. Noam was a bright student who absolutely loved learning new things and doing them well. Earlier on in their education, they often put himself in competitions with the others- and they usually came out on top. They found themselves often praised by everyone- their peers, their mother, sometimes their sister... it kind of got to their head and they were a little bit of an asshole about it.

However, as time passed and the coven took in new people, Noam found that they weren't the best at everything. Sometimes, they couldn't do things as well. And sometimes, others were just better than them. Disgusted and afraid of the thought of failure, Noam put themselves in a little box and stuck to what they knew they could do best. When the time came for Noam to leave their home, Noam chose to stay at the coven and watch as his peers went ahead to make a name for themselves in the Outside World.

Nowadays, Noam does enchanting gigs and studies various (somewhat niche) things. They like to hide away in their little pocket dimension, where they've possible kidnapped an animal or two.
[/div]
[div class=Isuckatclassesiknow]




[/div]
[div class=Textbox]RELATIONS
Percival Asodif, an incredibly rich and powerful witch. He was charming and funny, often showing his kids little magical pranks, until he left the family for a young and wealthy lady. He gave Noam their looks and their fear of abandonment.
Lucy Asodif, a kind yet somewhat self-centered mother who always seemed to wish for something better. Noam was never sure how to feel about her.
Annabelle Asodif, Noam's extraordinarily beautiful sister. They used to have a kind of love-hate relationship with each other, though nowadays they treat each other with reserved respect. When Annabelle reached adulthood, she went out and made a name for herself as a singer and poet. She often comes back to the Coven to learn theatrical magic from Querty. Noam envies her- she's everything Noam could've been but (in their eyes) was never good enough to be.
Nathaniel Querty, a long time mentor and a father to Noam.
[/div][/div][/div]
[div class=Divide]╔═══════════════╗
«──────────────────────────────────── « ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ⋅ʚ♡ɞ⋅ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ » ────────────────────────────────────»
╚═══════════════╝[/div]
 
Last edited:

Users who are viewing this thread

Back
Top