What's new
  • 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 ๐šƒ๐™ท๐™ด ๐™ฒ๐š๐š„๐™ฒ๐™ธ๐™ฑ๐™ป๐™ด โ”Šโ—œ๐œ๐จ๐๐ž๐ฌโ—ž

๐‡๐€๐•๐„๐

crucially

๐˜†๐—ผ๐˜‚โ€™๐—ฟ๐—ฒ ๐—ฎ๐˜€ ๐˜€๐—ฎ๐—ป๐—ฒ ๐—ฎ๐˜€ ๐—ถ ๐—ฎ๐—บ
[div=font-size: 60px; margin: auto; text-align: center; text-shadow: 3px 3px 2px black;]HAVEN[/div]
[div=background-color: #fcfcfc; padding: 50px;][div=max-width: 980px; margin: auto;]

[div=float: left; display: inline-block; border: solid 10px white; line-height: 0; border-size: border-box; box-shadow: 2px 2px 3px black; margin-left: 25px; margin-top: auto; margin-right: auto; margin-bottom: auto;]
[/div] [div=display: inline-block; border: solid 10px white; line-height: 0; border-size: border-box; box-shadow: 2px 2px 3px black; margin-left: 25px; margin-top: auto; margin-right: auto; margin-bottom: auto;]
[/div] [div=display: inline-block; border: solid 10px white; line-height: 0; border-size: border-box; box-shadow: 2px 2px 3px black; margin-left: 25px; margin-top: auto; margin-right: auto; margin-bottom: auto;]
[/div]
[div=margin-left: 15px; margin-top: auto; margin-right: auto; margin-bottom: auto;]
[div=position: relative; width: calc(100% - 0); height: 310px; overflow: hidden;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll;]BASIC INFORMATION -
[div=line-height: 15px; font-size: 20px;]Name:
Nickname:
Age:
Gender:
Sexuality:
West or East:

APPEARANCE -
Face Claim:
Eye Color:
Hair Color:
Height/Weight:
Body Type:
Tattoos/Piercings/Etc:

WRITING SAMPLE -
From: Meow
meow meow meow
[/div][/div][/div]
[div=position: relative; width: calc(100% - 0); height: 310px; overflow: hidden;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll;][div=line-height: 15px; font-size: 20px;]
PERSONA -
Likes:
Dislikes:
Personality:

Virtues:
Vices:
Quirks:
Fears:

BACKGROUND -

"quote hereโ€

Theirstory:
[/div][/div][/div]
[/div]

[div=float: left; display: inline-block; border: solid 10px white; line-height: 0; border-size: border-box; box-shadow: 2px 2px 3px black; margin-left: 15px; margin-top: auto; margin-right: auto; margin-bottom: auto;]
[/div] [div=display: inline-block; border: solid 10px white; line-height: 0; border-size: border-box; box-shadow: 2px 2px 3px black; margin-left: 15px;]
[/div] [div=display: inline-block; border: solid 10px white; line-height: 0; border-size: border-box; box-shadow: 2px 2px 3px black; margin-left: 15px;]
[/div] [div=display: inline-block; border: solid 10px white; line-height: 0; border-size: border-box; box-shadow: 2px 2px 3px black; margin-left: 15px;]
[/div]
codedbycrucialstar || hidden scroll on both sides
pastebin: x | live preview: x
[/div][/div]
 
๐’๐๐Ž๐–

crucially

๐˜†๐—ผ๐˜‚โ€™๐—ฟ๐—ฒ ๐—ฎ๐˜€ ๐˜€๐—ฎ๐—ป๐—ฒ ๐—ฎ๐˜€ ๐—ถ ๐—ฎ๐—บ
[div=font-size: 50px; margin: auto; text-align: center; text-shadow: 3px 3px 2px lightgrey;]SNOW[/div]
[div=max-width: 980px; margin: auto;]
[nobr]
[class=picture]
position: relative;
display: inline-block;
[/class]

[class=text]
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0,0,0,0.2);
color: white;
z-index: 2;
[/class]

[class name=text state=hover]
opacity: 1;
[/class]

[div class=picture]
[div class=text]
[div=margin-top: 300px; text-shadow: 2px 2px 4px black; padding: 5px;]โ€œquote hereโ€[/div]
[/div]
[div=background: url('https://via.placeholder.com/300x450'); width: 300px; height: 450px; margin: auto;][/div][/div][/nobr]​
  • [div=color: transparent; background: none; margin: auto;].[/div][div=margin-top: -10px; font-size: 15px; line-height: 18px;]
    WORD.เซฑ
    โ 'quote here โž

    [div=margin-top: -10px;][/div]heyhey! i'm back with another. . . . dun dun , code ! woo ! anyways, this code is very simple and easy to use with tabs and lots of pictures for your aesthetic pleasure! this code will most likely be used as a character sheet! you can definitely write whatever you'd like in this area that'll make your character sheet "pop!" don't hesitate to check out the live preview!

    note: i did use a collage for my photos in the live preview, so if you'd like that look instead on mobile, let me know!
    [/div]

[/div]
codedbycrucialstar | hover over big photo | pastebin: x | live preview: x
 
Last edited:
๐๐”๐๐๐‹๐˜

crucially

๐˜†๐—ผ๐˜‚โ€™๐—ฟ๐—ฒ ๐—ฎ๐˜€ ๐˜€๐—ฎ๐—ป๐—ฒ ๐—ฎ๐˜€ ๐—ถ ๐—ฎ๐—บ
[div=font-size: 50px; margin: auto; text-align: center; text-shadow: 3px 3px 2px lightgrey;]BUBBLY[/div]
[div=max-width: 600px; margin: auto;][div=border-left: 1px solid #C9D2C5;][div=padding: 10px;]
[div=background-color: #DADBCD; color: #6C7B79; text-align: center; font-size: 15px; font-family: 'Old Standard TT'; text-transform: uppercase]Name Here[/div][div=position: relative; width: calc(100% - 0px) ; height: 330px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll;][div=font-size: 12px; margin-top: 5px;]
[div=line-height: 15px;]
"quote hereโ€​
[/div]

Hey there RPers! Guess what? Here's an in character code! It's not the most extravagant but it's quite simple and easy to use! Tags and other needed in character shenanigans can be written at the bottom of the post itself or even at the top ! The code does have hidden scrolls ! Also, for the "header" | "banner" image, you can do a collage with three or four images that are 200x200 ! Feel free to change the colour of the text and borders as well !

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet nulla facilisi morbi tempus iaculis. Malesuada bibendum arcu vitae elementum curabitur. Ut lectus arcu bibendum at varius vel pharetra vel. Sit amet dictum sit amet justo donec enim. Dolor sit amet consectetur adipiscing elit ut aliquam. Est lorem ipsum dolor sit. Nibh praesent tristique magna sit. Phasellus vestibulum lorem sed risus ultricies. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus.
mentions: || with: || location:
[/div]
[/div][/div][/div][/div][/div]
codedbycrucialstar | hidden scroll | pastebin: x | live preview: un deux trois
 

crucially

๐˜†๐—ผ๐˜‚โ€™๐—ฟ๐—ฒ ๐—ฎ๐˜€ ๐˜€๐—ฎ๐—ป๐—ฒ ๐—ฎ๐˜€ ๐—ถ ๐—ฎ๐—บ
[div=max-width: 500px; margin: auto;][div=border: 1px solid; padding: 10px;][div=line-height: 18px;] MadamStriga MadamStriga ; Thank you so much and that makes my heart so full ! I'm so glad I could inspire you and hope it goes swimmingly ! If you have any questions don't hesitate to send a message ! I'll do my best to help out ![/div][/div][/div]
 
๐Œ๐„๐‹

crucially

๐˜†๐—ผ๐˜‚โ€™๐—ฟ๐—ฒ ๐—ฎ๐˜€ ๐˜€๐—ฎ๐—ป๐—ฒ ๐—ฎ๐˜€ ๐—ถ ๐—ฎ๐—บ
[div=font-size: 50px; margin: auto; text-align: center; text-shadow: 3px 3px 2px lightgrey;]MEL[/div][div=max-width: 980px; margin: auto;][div=font-size: 50px; text-align: center; text-shadow: 2px 2px 2px black; color: pink;]name here[/div]
[div=background: url(http://via.placeholder.com/170x170); border-radius: 100%; border: 3px solid #111111; height: 170px; width: 170px; margin: auto;][/div]

[div=background: url(http://via.placeholder.com/170x170); border-radius: 100%; border: 3px solid #111111; height: 170px; width: 170px; margin: auto;][/div][div=margin-top: 10px; font-size: 13px;][/div][nobr]
[class=tabs]
line-height: 1;
margin: 20px auto;
text-align: center;
width: 100%;
color: black;
display: inline-block;
font-family: 'Times New Roman';
[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 45%;
[/class]

[class name=tab state=hover]
background-color: rgba(255, 192, 203, 0.2);
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} Basics) (show tabsContentInformation)
if (eq ${currentTab} Persona) (show tabsContentPersonality)
if (eq ${currentTab} Biography) (show tabsContentAbout)
if (eq ${currentTab} Miscellaneous) (show tabsContentOthers)
[/script]

[div class=tabs][div class=tab style="border: 1px solid black; margin: auto"]Basics[/div][div class=tab style="border: 1px solid black; margin-left: 10px; margin-top: auto; margin-bottom: auto; margin-right: auto"]Persona[/div][div class=tab style="border: 1px solid black; margin-left: auto; margin-top: 10px; margin-bottom: auto; margin-right: auto""]Biography[/div][div class=tab style="border: 1px solid black; margin-left: 10px; margin-top: 10px; margin-bottom: auto; margin-right: auto"]Miscellaneous[/div][/div][/nobr]
[nobr]

[div class="tabsContent tabsContentInformation"][div=width: calc(100% - 0%); height: 515px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll; line-height: 19px; font-size: 14x;]basic information:
[br][/br]
name: bloop.
[br][/br]
position: bloop
[br][/br]
species: bloop
[br][/br]
sexuality: bloop
[br][/br][br][/br]
note: made for and design by: Stardust Galaxy Stardust Galaxy ; all thanks to this bean! the code is named after her: Mel. this code is used for character sheets!
[br][/br][br][/br]
appearance: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien
[/div][/div][/div]

[div class="tabsContent tabsContentPersonality" style="display: none;"][div=width: calc(100% - 0%); height: 515px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll; line-height: 19px; font-size: 14x;]persona:[br][/br]
personality: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
likes: bloop
[br][/br]
dislikes: bloop
[br][/br]
strengths: bloop
[br][/br]
weaknesses: bloop
[/div][/div][/div]

[div class="tabsContent tabsContentAbout" style="display: none;"][div=width: calc(100% - 0%); height: 515px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll; line-height: 19px; font-size: 14x;]biography:
[br][/br]
herstory: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[/div][/div][/div]

[div class="tabsContent tabsContentOthers" style="display: none;"][div=width: calc(100% - 0%); height: 515px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll; line-height: 19px; font-size: 14x;]other:
[br][/br]
important information:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[/div][/div][/div][/nobr]
[div=background: url(http://via.placeholder.com/150x150); border-radius: 100%; border: 3px solid #111111; height: 150px; width: 150px; margin: auto;][/div]
[div=background: url(http://via.placeholder.com/150x150); border-radius: 100%; border: 3px solid #111111; height: 150px; width: 150px; margin-top: -5px; margin-left: auto; margin-bottom: auto; margin-right: auto;][/div]
[div=background: url(http://via.placeholder.com/150x150); border-radius: 100%; border: 3px solid #111111; height: 150px; width: 150px; margin-top: -5px; margin-left: auto; margin-bottom: auto; margin-right: auto;][/div]
[/div][div=margin-top: -10px;]
codedbycrucialstar | pastebin: x
[/div]
 
๐’๐€๐•๐€๐†๐„

crucially

๐˜†๐—ผ๐˜‚โ€™๐—ฟ๐—ฒ ๐—ฎ๐˜€ ๐˜€๐—ฎ๐—ป๐—ฒ ๐—ฎ๐˜€ ๐—ถ ๐—ฎ๐—บ
[div=font-size: 50px; margin: auto; text-align: center; text-shadow: 3px 3px 2px lightgrey;]SAVAGE[/div]
[div=max-width: 800px; margin: auto;][div=border-top: 5px solid; border-bottom: 5px solid;]
[div=margin-top: -2px; font-size: 40px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px grey;]WORD[/div][div=line-height: 0; height: 2px; background-color: black; margin-top: -4px;][/div][div=margin-top: 10px;][/div]
[nobr]
[class=tabs]
text-shadow: 1px 1px 2px grey;
font-size: 16px;
font-weight: bold;
line-height: 6px;
text-align: center;
text-transform: uppercase;
width: 100%;
margin-left: -12px;
[/class]

[class=tab]
cursor: pointer;
display: inline-block;
padding: 10px;
width: 100%;
[/class]

[class name=tab state=hover]
background-color: none;
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} About) (show tabsContentCoded)
if (eq ${currentTab} Persona) (show tabsContentBy)
if (eq ${currentTab} History) (show tabsContentCrucial)
if (eq ${currentTab} Other) (show tabsContentStar)
[/script]

[div class=tabs]
[div class=tab style=";"]About[/div][br][/br][div class=tab]Persona[/div]
[div class=tab style=";"]History[/div][br][/br][div class=tab style=";"]Other[/div][br][/br]
[/div]
[/nobr]
[nobr]
[div=border-bottom: 1px solid; padding: 2px;]
[/div]​


[div class="tabsContent tabsContentCoded"][div=width: calc(100% - 0%); height: 326px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div=font-size: 12px; line-height: 15px;][div=font-size: 20px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px grey;] basic information[/div]
[br][/br]
Note: To add a line break use [br][/br] , to separate between paragraphs, use [br][/br][br][/br] , words [ about, history, persona, other ] are all tabs, hidden scroll in each tabs. Also, the [ 4 ] pictures are collages and the image overall is also [ 250x250 ]
[br][/br][br][/br]
Full Name:
[br][/br]
Alias:
[br][/br]
Age:
[br][/br]
Gender:
[br][/br]
Sexuality:
[br][/br]
Role:
[br][/br]
Face Claim:
[br][/br][br][/br]
[div=font-size: 20px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px grey;] appearances[/div]
[br][/br]
Eye Color:
[br][/br]
Hair Color:
[br][/br]
Height:
[br][/br]
Weight:
[br][/br]
Tattoos/Piercings/Etc:
[/div][/div][/div][/div]

[div class="tabsContent tabsContentBy" style="display: none;"][div=width: calc(100% - 0%); height: 326px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div=font-size: 12px; line-height: 15px;][div=font-size: 20px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px grey;] in depth[/div][br][/br]
Personality: Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Habitant morbi tristique senectus et netus et malesuada fames ac. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Faucibus ornare suspendisse sed nisi lacus. Rhoncus est pellentesque elit ullamcorper dignissim. Eget magna fermentum iaculis eu non diam. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Mattis aliquam faucibus purus in massa tempor. Volutpat lacus laoreet non curabitur. Elementum sagittis vitae et leo duis. Lobortis scelerisque fermentum dui faucibus. Convallis aenean et tortor at risus. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae.
[br][/br][br][/br]
Et malesuada fames ac turpis egestas sed tempus urna. Etiam sit amet nisl purus in mollis nunc sed id. At volutpat diam ut venenatis tellus in metus vulputate eu. Tortor dignissim convallis aenean et tortor at risus viverra. Ullamcorper sit amet risus nullam eget. Fames ac turpis egestas sed tempus. Sodales ut etiam sit amet nisl purus in. Amet nulla facilisi morbi tempus iaculis urna. Nam aliquam sem et tortor consequat id porta. Nibh nisl condimentum id venenatis a condimentum vitae sapien. In fermentum et sollicitudin ac orci phasellus egestas. Nunc mattis enim ut tellus elementum.
[br][/br][br][/br]
Vices:
[br][/br][br][/br]
Virtues:
[br][/br][br][/br]
Likes:
[br][/br][br][/br]
Dislikes:
[/div][/div][/div][/div]

[div class="tabsContent tabsContentCrucial" style="display: none;"][div=width: calc(100% - 0%); height: 326px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div=font-size: 12px; line-height: 15px;][div=font-size: 20px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px grey;] history[/div]Bio:Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis. Sapien nec sagittisaliquam malesuada bibendum. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Neque vitae tempus quam pellentesque nec. Quis enim lobortis scelerisque fermentum dui. Tristique senectus et netus et malesuada. Quis commodo odio aenean sed. At tempor commodo ullamcorper a lacus. Tempor orci eu lobortis elementum nibh tellus. Lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor. Sem integer vitae justo eget magna fermentum iaculis eu. Urna nec tincidunt praesent semper. Nisi porta lorem mollis aliquam ut porttitor. In dictum non consectetur a.
[br][/br][br][/br]
Habitant morbi tristique senectus et. Quam viverra orci sagittis eu volutpat odio facilisis mauris sit. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Sed tempus urna et pharetra. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Aliquam sem fringilla ut morbi tincidunt. Lacus suspendisse faucibus interdum posuere. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero id. Non enim praesent elementum facilisis. Neque egestas congue quisque egestas diam in arcu cursus euismod. Risus sed vulputate odio ut enim blandit. Mattis nunc sed blandit libero volutpat sed. Nam libero justo laoreet sit amet cursus.
[br][/br][br][/br]
Aliquet lectus proin nibh nisl condimentum id venenatis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Neque gravida in fermentum et. Eget nunc lobortis mattis aliquam faucibus purus. Sit amet justo donec enim diam vulputate ut. Sed adipiscing diam donec adipiscing tristique. Enim nulla aliquet porttitor lacus luctus accumsan. Cras adipiscing enim eu turpis egestas pretium aenean. Tincidunt arcu non sodales neque. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Convallis aenean et tortor at. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Mauris augue neque gravida in fermentum et sollicitudin ac. Interdum velit euismod in pellentesque massa placerat duis ultricies lacus.
[/div][/div][/div][/div]

[div class="tabsContent tabsContentStar" style="display: none;"][div=width: calc(100% - 0%); height: 326px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div=font-size: 12px; line-height: 15px;][div=font-size: 20px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px grey;] miscellaneous[/div][br][/br]Theme Song: [/div][/div][/div][/div]
[/nobr]

[/div][/div]
codedbycrucialstar | click words [ tabs ] , hidden scroll | pastebin: x | live preview: x
 

SnuggleThisMuggle

We're All Mad Here!
[div=font-size: 50px; margin: auto; text-align: center; text-shadow: 3px 3px 2px lightgrey;]BUBBLY[/div]
[div=max-width: 600px; margin: auto;][div=border-left: 1px solid #C9D2C5;][div=padding: 10px;]
[div="background-color: #DADBCD; color: #6C7B79; text-align: center; font-size: 15px; font-family: 'Old Standard TT'; text-transform: uppercase"]Name Here[/div][div=position: relative; width: calc(100% - 0px) ; height: 330px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll;][div=font-size: 12px; margin-top: 5px;]
[div=line-height: 15px;][/div][div=line-height: 15px;]
"quote hereโ€​
[/div]

Hey there RPers! Guess what? Here's an in character code! It's not the most extravagant but it's quite simple and easy to use! Tags and other needed in character shenanigans can be written at the bottom of the post itself or even at the top ! The code does have hidden scrolls ! Also, for the "header" | "banner" image, you can do a collage with three or four images that are 200x200 ! Feel free to change the colour of the text and borders as well !

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet nulla facilisi morbi tempus iaculis. Malesuada bibendum arcu vitae elementum curabitur. Ut lectus arcu bibendum at varius vel pharetra vel. Sit amet dictum sit amet justo donec enim. Dolor sit amet consectetur adipiscing elit ut aliquam. Est lorem ipsum dolor sit. Nibh praesent tristique magna sit. Phasellus vestibulum lorem sed risus ultricies. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus.

mentions: || with: || location:
[/div]
[/div][/div][/div][/div][/div]
codedbycrucialstar | hidden scroll | pastebin: x | live preview: un deux trois
could this be used as a character sheet as well?
 

crucially

๐˜†๐—ผ๐˜‚โ€™๐—ฟ๐—ฒ ๐—ฎ๐˜€ ๐˜€๐—ฎ๐—ป๐—ฒ ๐—ฎ๐˜€ ๐—ถ ๐—ฎ๐—บ
[div=max-width: 500px; margin: auto;][div=border: 1px solid; padding: 10px;][div=line-height: 18px;] SnuggleThisMuggle SnuggleThisMuggle , of course ! youโ€™re more than welcome to use it as a character sheet ! if youโ€™d like me to do anything to it, let me know , but feel free to get creative ![/div][/div][/div]
 
๐‘๐€๐•๐„๐

crucially

๐˜†๐—ผ๐˜‚โ€™๐—ฟ๐—ฒ ๐—ฎ๐˜€ ๐˜€๐—ฎ๐—ป๐—ฒ ๐—ฎ๐˜€ ๐—ถ ๐—ฎ๐—บ
[div=font-size: 50px; margin: auto; text-align: center; text-shadow: 3px 3px 2px lightgrey;]RAVEN[/div]
[div=max-width: 650px; margin: auto;][div=border-top: 5px solid; border-bottom: 5px solid;]
[div=margin-top: -2px; font-size: 35px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px grey;]name here[/div][div=line-height: 0; height: 2px; background-color: black; margin-top: -4px;][/div][div=margin-top: 10px;][/div]
[nobr]
[class=tabs]
text-shadow: 1px 1px 2px grey;
font-size: 16px;
font-weight: bold;
line-height: 6px;
text-align: center;
text-transform: uppercase;
width: 100%;
margin-left: -12px;
[/class]

[class=tab]
cursor: pointer;
display: inline-block;
padding: 10px;
width: 100%;
[/class]

[class name=tab state=hover]
background-color: none;
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} About) (show tabsContentCoded)
if (eq ${currentTab} Persona) (show tabsContentBy)
if (eq ${currentTab} History) (show tabsContentCrucial)
if (eq ${currentTab} Other) (show tabsContentStar)
[/script]

[div class=tabs]
[div class=tab style=";"]About[/div][br][/br][div class=tab]Persona[/div]
[div class=tab style=";"]History[/div][br][/br][div class=tab style=";"]Other[/div][br][/br]
[/div]
[/nobr]
[nobr]


[div class="tabsContent tabsContentCoded"][div=width: calc(100% - 0%); height: 475px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div=font-size: 12px; line-height: 15px;][div=font-size: 20px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px grey;] basic information[/div]
[br][/br][div=text-align: justify;]Full Name:
[br][/br]
Alias:
[br][/br]
Age:
[br][/br]
Gender:
[br][/br]
Nationality:
[br][/br][br][/br]
Note: Similar to "Savage" except with "less" photos! You can use collages or even other pictures to tabs if you wish to do so! I used the "font awesome" icons or keyboard symbols! To add a line break use [br][/br] , to separate between paragraphs, use [br][/br][br][/br] , words [ about, history, persona, other ] are all tabs, hidden scroll in each tabs.
[/div][br][/br]
[div=font-size: 20px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px grey;] appearances[/div]
[br][/br]

[br][/br][div=text-align: justify;]Face Claim:
[br][/br]
Eye Color:
[br][/br]
Hair Color:
[br][/br]
Height:
[br][/br]
Weight:
[br][/br]
Tattoos/Piercings/Etc: [/div]
[/div][/div][/div][/div]

[div class="tabsContent tabsContentBy" style="display: none;"][div=width: calc(100% - 0%); height: 475px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div=font-size: 12px; line-height: 15px;][div=font-size: 20px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px grey;] in depth[/div][br][/br][div=text-align: justify;]Personality: Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Habitant morbi tristique senectus et netus et malesuada fames ac. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Faucibus ornare suspendisse sed nisi lacus. Rhoncus est pellentesque elit ullamcorper dignissim. Eget magna fermentum iaculis eu non diam. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Mattis aliquam faucibus purus in massa tempor. Volutpat lacus laoreet non curabitur. Elementum sagittis vitae et leo duis. Lobortis scelerisque fermentum dui faucibus. Convallis aenean et tortor at risus. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae.
[br][/br][br][/br]
Et malesuada fames ac turpis egestas sed tempus urna. Etiam sit amet nisl purus in mollis nunc sed id. At volutpat diam ut venenatis tellus in metus vulputate eu. Tortor dignissim convallis aenean et tortor at risus viverra. Ullamcorper sit amet risus nullam eget. Fames ac turpis egestas sed tempus. Sodales ut etiam sit amet nisl purus in. Amet nulla facilisi morbi tempus iaculis urna. Nam aliquam sem et tortor consequat id porta. Nibh nisl condimentum id venenatis a condimentum vitae sapien. In fermentum et sollicitudin ac orci phasellus egestas. Nunc mattis enim ut tellus elementum.
[br][/br][br][/br]
Et malesuada fames ac turpis egestas sed tempus urna. Etiam sit amet nisl purus in mollis nunc sed id. At volutpat diam ut venenatis tellus in metus vulputate eu. Tortor dignissim convallis aenean et tortor at risus viverra. Ullamcorper sit amet risus nullam eget. Fames ac turpis egestas sed tempus. Sodales ut etiam sit amet nisl purus in. Amet nulla facilisi morbi tempus iaculis urna. Nam aliquam sem et tortor consequat id porta. Nibh nisl condimentum id venenatis a condimentum vitae sapien. In fermentum et sollicitudin ac orci phasellus egestas. Nunc mattis enim ut tellus elementum.
[br][/br][br][/br]
Vices:
[br][/br][br][/br]
Virtues:
[br][/br][br][/br]
Likes:
[br][/br][br][/br]
Dislikes:
[/div][/div][/div][/div][/div]

[div class="tabsContent tabsContentCrucial" style="display: none;"][div=width: calc(100% - 0%); height: 475px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div=font-size: 12px; line-height: 15px;][div=font-size: 20px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px grey;] history[/div][br][/br][div=text-align: justify;]Bio: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis. Sapien nec sagittisaliquam malesuada bibendum. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Neque vitae tempus quam pellentesque nec. Quis enim lobortis scelerisque fermentum dui. Tristique senectus et netus et malesuada. Quis commodo odio aenean sed. At tempor commodo ullamcorper a lacus. Tempor orci eu lobortis elementum nibh tellus. Lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor. Sem integer vitae justo eget magna fermentum iaculis eu. Urna nec tincidunt praesent semper. Nisi porta lorem mollis aliquam ut porttitor. In dictum non consectetur a.
[br][/br][br][/br]
Habitant morbi tristique senectus et. Quam viverra orci sagittis eu volutpat odio facilisis mauris sit. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Sed tempus urna et pharetra. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Aliquam sem fringilla ut morbi tincidunt. Lacus suspendisse faucibus interdum posuere. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero id. Non enim praesent elementum facilisis. Neque egestas congue quisque egestas diam in arcu cursus euismod. Risus sed vulputate odio ut enim blandit. Mattis nunc sed blandit libero volutpat sed. Nam libero justo laoreet sit amet cursus.
[br][/br][br][/br]
Aliquet lectus proin nibh nisl condimentum id venenatis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Neque gravida in fermentum et. Eget nunc lobortis mattis aliquam faucibus purus. Sit amet justo donec enim diam vulputate ut. Sed adipiscing diam donec adipiscing tristique. Enim nulla aliquet porttitor lacus luctus accumsan. Cras adipiscing enim eu turpis egestas pretium aenean. Tincidunt arcu non sodales neque. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Convallis aenean et tortor at. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Mauris augue neque gravida in fermentum et sollicitudin ac. Interdum velit euismod in pellentesque massa placerat duis ultricies lacus.
[/div][/div][/div][/div][/div]

[div class="tabsContent tabsContentStar" style="display: none;"][div=width: calc(100% - 0%); height: 475px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div=font-size: 12px; line-height: 15px;][div=font-size: 20px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px grey;] miscellaneous[/div][br][/br][div=text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis. Sapien nec sagittisaliquam malesuada bibendum. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Neque vitae tempus quam pellentesque nec. Quis enim lobortis scelerisque fermentum dui. Tristique senectus et netus et malesuada. Quis commodo odio aenean sed. At tempor commodo ullamcorper a lacus. Tempor orci eu lobortis elementum nibh tellus. Lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor. Sem integer vitae justo eget magna fermentum iaculis eu. Urna nec tincidunt praesent semper. Nisi porta lorem mollis aliquam ut porttitor. In dictum non consectetur a.
[br][/br][br][/br]
Habitant morbi tristique senectus et. Quam viverra orci sagittis eu volutpat odio facilisis mauris sit. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Sed tempus urna et pharetra. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Aliquam sem fringilla ut morbi tincidunt. Lacus suspendisse faucibus interdum posuere. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero id. Non enim praesent elementum facilisis. Neque egestas congue quisque egestas diam in arcu cursus euismod. Risus sed vulputate odio ut enim blandit. Mattis nunc sed blandit libero volutpat sed. Nam libero justo laoreet sit amet cursus.
[br][/br][br][/br]
Aliquet lectus proin nibh nisl condimentum id venenatis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Neque gravida in fermentum et. Eget nunc lobortis mattis aliquam faucibus purus. Sit amet justo donec enim diam vulputate ut. Sed adipiscing diam donec adipiscing tristique. Enim nulla aliquet porttitor lacus luctus accumsan. Cras adipiscing enim eu turpis egestas pretium aenean. Tincidunt arcu non sodales neque. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Convallis aenean et tortor at. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Mauris augue neque gravida in fermentum et sollicitudin ac. Interdum velit euismod in pellentesque massa placerat duis ultricies lacus.
[/div][/div][/div][/div][/div]
[/nobr]

[/div][/div]
codedbycrucialstar | click words [ tabs ] , hidden scroll | pastebin: x | live preview: x
 
Last edited:
๐€๐•๐ˆ๐€๐

crucially

๐˜†๐—ผ๐˜‚โ€™๐—ฟ๐—ฒ ๐—ฎ๐˜€ ๐˜€๐—ฎ๐—ป๐—ฒ ๐—ฎ๐˜€ ๐—ถ ๐—ฎ๐—บ
[div=font-size: 50px; margin: auto; text-align: center; text-shadow: 3px 3px 2px lightgrey;]AVIAN[/div][div=width: 750px; margin: auto;][div=position: relative; z-line: 1; margin-left: -5px; margin-bottom: -65px; font-size: 40px; color: #326554; text-shadow: 2px 2px 3px grey;]"name or quote here. . . .[/div]
[div=padding: 5px;]
[/div][div=border: 1px solid black;][div=position: relative; width: calc(100% - 0); height: 383px; overflow: hidden; padding: 10px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll;][div=line-height: 15px;][div=margin-top: 8px;][/div][div=float: left; font-size: 35px;]N[/div]ote: To change the width of this code, look at the first div that you see and change width:750px; to a width of your choosing.

orem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis volutpat odio, vel faucibus tortor. Maecenas tempor congue dignissim. Morbi commodo lobortis dignissim. Nullam euismod ante in aliquet lacinia. Sed in libero enim. Cras justo tellus, faucibus ac maximus non, egestas non nunc. Curabitur tincidunt elementum nisi vel lacinia. Nulla magna magna, euismod nec velit id, finibus varius orci. Duis eu scelerisque sem. Maecenas sollicitudin eros non nibh consectetur vestibulum. Vestibulum consequat, odio sit amet cursus elementum, enim diam vehicula purus, et scelerisque velit dui sed turpis. In hac habitasse platea dictumst. Etiam ligula lacus, sollicitudin eu mi et, consequat scelerisque ex. Nam volutpat efficitur sem eu eleifend. Aenean rutrum auctor leo et pretium. Donec nisi turpis, consectetur vel dapibus eu, tincidunt vitae metus.

Phasellus ultrices tortor nec lacus sollicitudin molestie. Aenean eu fringilla mauris, non dictum nibh. Nulla scelerisque luctus quam id maximus. Donec maximus luctus ligula, eu gravida libero porttitor nec. Donec imperdiet enim neque, id fermentum dui egestas eu. Fusce interdum diam vitae magna scelerisque, sit amet venenatis massa posuere. Ut et neque eu tortor rutrum accumsan. Donec venenatis lectus eget nulla dignissim, quis cursus ex vulputate. Suspendisse viverra, ante quis vehicula suscipit, ipsum velit rhoncus ipsum, et laoreet nulla turpis in massa. Morbi eleifend sapien sed sem posuere gravida. Maecenas et turpis vitae ex facilisis aliquet eu id lectus.

Aliquam erat volutpat. Donec id convallis libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus quis metus at tellus interdum blandit eget sit amet neque. Aliquam tincidunt sit amet tellus eu auctor. Cras aliquet sapien non justo interdum, in scelerisque lectus fermentum. Maecenas quis posuere felis. Proin tempus, lorem in imperdiet imperdiet, metus turpis dignissim orci, ut ultrices mauris magna ut sapien.

Donec imperdiet, augue id scelerisque tempor, nunc nibh gravida ipsum, ut commodo ex nulla eu velit. Curabitur lorem metus, gravida ac ex a, vulputate pretium nunc. Ut placerat a nisl a elementum. Suspendisse potenti. Nulla odio turpis, ornare in nisl ac, rhoncus placerat metus. Maecenas eget justo non odio gravida iaculis. Sed velit nisi, consectetur quis porttitor a, eleifend molestie mi. Sed eu vestibulum mauris, ut aliquet massa. Nam efficitur lacus vitae augue sagittis, quis finibus nisl gravida. Nullam id porttitor nisl. Vivamus eget lectus sit amet ex convallis laoreet. Nullam porta augue vel mauris euismod commodo. Nulla facilisi. Integer a eleifend mi.

Proin malesuada metus ut quam tempor, eget maximus nibh fermentum. Curabitur aliquet sem a lorem finibus, ut mollis diam fermentum. Suspendisse pellentesque est elit, vel cursus tellus ornare eget. Sed mollis risus et rutrum aliquam. Suspendisse a sollicitudin leo, quis congue dolor. Sed tincidunt efficitur tortor non imperdiet. Ut tempus ac ex et vulputate. Nunc dapibus turpis quis augue sagittis tempor. Proin pellentesque ex a blandit luctus. Nam ut tempus nulla. Ut sit amet dapibus urna. Suspendisse porta, orci eget commodo consectetur, odio purus semper lacus, non maximus arcu nulla vitae dolor. Mauris volutpat metus nisi, quis tincidunt arcu condimentum egestas. Nam varius risus non felis accumsan, eget pharetra ante accumsan. Proin rutrum pretium ante, eu aliquam magna lobortis mattis.
[/div][/div][/div][/div][div=text-align: right; margin-top: -40px; position: relative; z-line: 1; font-size: 40px; color: #326554; text-shadow: 2px 2px 3px grey;]. . . . quote here"[/div][/div]
[div=margin-top: -30px; line-height: 12px;]
codedbycrucialstar | hidden scroll | pastebin: x | live preview: x
[/div]
 
Last edited:
๐’๐“๐Ž๐‘๐Š

crucially

๐˜†๐—ผ๐˜‚โ€™๐—ฟ๐—ฒ ๐—ฎ๐˜€ ๐˜€๐—ฎ๐—ป๐—ฒ ๐—ฎ๐˜€ ๐—ถ ๐—ฎ๐—บ
[div=font-size: 50px; margin: auto; text-align: center; text-shadow: 3px 3px 2px lightgrey;]STORK[/div]
[div=max-width: 650px; margin: auto;][div=border-top: 5px solid; border-bottom: 5px solid; ][div=margin-top: 10px;][/div]
[div=font-size: 28px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px grey;]name here[/div][div=line-height: 0; height: 2px; background-color: black; margin-top: -4px;][/div][div=margin-top: 10px;][/div]
[nobr]
[class=picture]
position: relative;
display: inline-block;
[/class]

[class=text]
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0,0,0,0.2);
color: white;
z-index: 2;
[/class]

[class name=text state=hover]
opacity: 1;
[/class]

[div class=picture]
[div class=text]
[div=margin-top: 200px; text-shadow: 2px 2px 4px black; padding: 10px; text-align: left; line-height: 18px;]
"quote here"​
[br][/br]
location:
[br][/br]
with:
[br][/br]
tags:
[/div]
[/div]
[div=background: url('https://via.placeholder.com/225x365'); width: 225px; height: 365px; margin: auto;][/div][/div][/nobr]​
[div=width: calc(100% - 0%); height: 430px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div=margin-top: 10px; line-height: 16px; text-align: justify; font-size: 12px;]Note: Greetings, all! Here's another simple in-character code that can definitely be used as a character sheet! If you hover over the big photo, all of your in character need can be posted there plus a quote! This code is a matching code with Savage and Raven!

Praesent tincidunt consectetur odio, eget pretium lorem dapibus ac. Nullam porttitor sed leo quis vehicula. Etiam hendrerit, arcu nec venenatis dignissim, ligula nisl mollis metus, eget tempus lectus dolor in lacus. Nullam quis neque ipsum. Phasellus rhoncus odio ipsum, id auctor lacus semper ac. Vestibulum posuere, tortor a pellentesque ultricies, diam nibh sagittis erat, ac imperdiet tellus enim vitae neque. Suspendisse potenti. Maecenas sit amet mattis lacus, ut cursus felis. Mauris quis arcu sed urna suscipit varius. Nunc viverra laoreet augue, ac faucibus leo condimentum quis. Integer a ultrices enim.

Vivamus nec orci quis enim mattis sollicitudin ut vel massa. Etiam aliquam, arcu ac tincidunt scelerisque, est sem gravida nunc, ut consequat lacus dui ac nisi. Nam lorem dui, ultricies a nunc a, egestas pretium enim. Sed porta, nunc eu sodales egestas, ipsum libero tempus velit, in consectetur purus enim quis purus. Morbi dapibus ligula lorem, a tempor elit scelerisque ut. Suspendisse turpis justo, semper vel nisl sit amet, accumsan elementum mi. Sed gravida orci vitae tincidunt efficitur. Nam sed dolor sit amet mauris posuere consequat. Aenean lobortis, felis accumsan aliquet ornare, leo orci imperdiet lorem, ut laoreet eros tortor eu diam. Cras nisl ex, ullamcorper sed augue eu, ornare malesuada eros. Aenean ullamcorper ultricies consectetur. Praesent elit erat, tristique sed consectetur vel, molestie ac urna. Curabitur ultrices ultricies tellus eget auctor. Curabitur sollicitudin mauris vel tortor facilisis ultricies. Duis dignissim posuere sapien vel vulputate. Nulla facilisi.

Sed rutrum ultricies leo, quis ornare elit fringilla dignissim. Fusce non bibendum velit. Nullam ac molestie justo, ut suscipit diam. Phasellus vestibulum vestibulum lectus. Nulla porttitor aliquam arcu, vitae ornare mauris iaculis in. Fusce malesuada enim in fringilla iaculis. Fusce eget congue arcu. Fusce vestibulum sagittis justo sit amet vulputate. Integer maximus nunc a nibh feugiat accumsan. Morbi quis arcu nisi. Nullam id tristique nunc. Quisque ullamcorper placerat leo sit amet sollicitudin. Pellentesque id dui nec tellus scelerisque consequat vitae id augue. Maecenas congue ante mi, sit amet malesuada velit hendrerit sit amet. Fusce in egestas libero.

In facilisis ullamcorper velit vel mattis. Sed vestibulum erat quis ligula blandit, quis posuere nunc tempor. Aenean ut nulla massa. Sed maximus ligula et tellus suscipit, nec aliquam est pellentesque. Aliquam ut quam ut lorem bibendum tincidunt. Quisque et lectus placerat, hendrerit massa at, ullamcorper leo. Curabitur tincidunt odio ante, ut vulputate dolor egestas ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus pharetra tincidunt erat, quis interdum est vulputate a. Nam facilisis orci eu mi convallis tincidunt. Quisque accumsan lobortis egestas. Donec a ipsum ligula. Praesent eros lorem, luctus ut rhoncus ut, malesuada at lectus. Quisque consectetur tortor euismod
[/div][/div][/div]
[div=margin-top: 10px;][/div][/div][/div]
codedbycrucialstar | hidden scroll and hover over big photo | pastebin: x | live preview: x
 
๐’๐“๐„๐‘๐‹๐ˆ๐๐†

crucially

๐˜†๐—ผ๐˜‚โ€™๐—ฟ๐—ฒ ๐—ฎ๐˜€ ๐˜€๐—ฎ๐—ป๐—ฒ ๐—ฎ๐˜€ ๐—ถ ๐—ฎ๐—บ
[div=font-size: 50px; margin: auto; text-align: center; text-shadow: 3px 3px 2px lightgrey;]STERLING[/div]
[div=max-width: 630px; margin: auto;][div=background-color: #F2BCC9;][div=color: #FF87A5; text-transform: uppercase; text-shadow: 2px 2px 0px black; text-align: center; font-size: 45px;]name here[/div][div=text-shadow: 1px 1px 0px white; opacity: 0.7; color: black; margin-top: -47px; font-size: 28px; text-align: center;]relationships[/div][/div][div=background-color: #F8F8F8; border-top: 5px double #F2BCC9; border-bottom: 5px double #F2BCC9;][div=padding: 10px;]
[div=background: url('https://via.placeholder.com/120x120'); border-radius: 5px; height: 120px; width: 120px; border: 2px solid #C68892; margin: auto;][/div]
[div=background: url('https://via.placeholder.com/120x120'); margin-top: -15px; border-radius: 5px; height: 120px; width: 120px; border: 2px solid #C68892; margin: auto;][/div]
[div=background: url('https://via.placeholder.com/120x120'); margin-top: -15px; border-radius: 5px; height: 120px; width: 120px; border: 2px solid #C68892; margin: auto;][/div]​
[div=font-size: 20px; color: #C68892; text-align: center;]quote here[/div][div=margin-top: -10px; color: black;][/div]
โ™• - close friend | โ™˜ - friend | โ‚ - acquaintance | โ– - neutral | โ† - distaste | โ™™ - unknown

[div=line-height: 0; height: 2px; background-color: #F2BCC9; margin-top: -15px;][/div]
[div=margin-top: -10px;][/div][div=width: calc(100% - 0%); height: 335px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div=float: left;][div=background: url('https://via.placeholder.com/80x80'); border-radius: 100%; border: 1px solid black; height: 80px; width: 80px; -webkit-filter: grayscale(80%);][/div][/div][div=line-height: 16px; margin-top: -2px;][ โ™• ] | Name here
Hello, RPNation! I think this is my second relationship code I've ever made on here? Or maybe third. Either way, the section where it says "to be determined", don't forget to delete the [br][/br][br][/br] since it gives line-breaks | those extra spaces. If you need any help or need clarification, don't hesitate to send a message to me! Also, you're more than welcome to change the colours! This code can double as an in-character code [ and even if you want, a character sheet though, I may make that character sheet later ]. Yes, this code is mobile-friendly!
[/div][br][/br][div=float: left;][div=background: url('https://via.placeholder.com/80x80'); border-radius: 100%; border: 1px solid black; height: 80px; width: 80px; -webkit-filter: grayscale(80%);][/div][/div][div=line-height: 16px; margin-top: -2px;][ โ™˜ ] | Name Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed erat viverra, vehicula erat ut, cursus odio. Aliquam quam elit, facilisis nec mauris nec, scelerisque ultricies odio. Fusce egestas eros a nulla efficitur dapibus. Aliquam a ultricies felis. Sed magna elit, efficitur eget elementum et, auctor sit amet tellus. Aenean varius quam ligula, quis imperdiet sapien sagittis non. Integer aliquam finibus pretium. In venenatis viverra nisi molestie aliquet. Praesent ultricies mauris ligula, ac tempus augue viverra eu. Ut efficitur semper risus quis viverra. Donec dapibus dictum ex, malesuada tincidunt leo. Pellentesque vitae enim sit amet massa ultricies tincidunt. Nam nec felis consequat, egestas eros non, convallis purus. Maecenas efficitur velit in nisl convallis, ut viverra lectus finibus.
[/div]
[div=float: left;][div=background: url('https://via.placeholder.com/80x80'); border-radius: 100%; border: 1px solid black; height: 80px; width: 80px; -webkit-filter: grayscale(80%);][/div][/div][div=line-height: 16px; margin-top: -2px;] [ โ‚ ] | Name Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed erat viverra, vehicula erat ut, cursus odio. Aliquam quam elit, facilisis nec mauris nec, scelerisque ultricies odio. Fusce egestas eros a nulla efficitur dapibus. Aliquam a ultricies felis. Sed magna elit, efficitur eget elementum et, auctor sit amet tellus. Aenean varius quam ligula, quis imperdiet sapien sagittis non. Integer aliquam finibus pretium. In venenatis viverra nisi molestie aliquet. Praesent ultricies mauris ligula, ac tempus augue viverra eu. Ut efficitur semper risus quis viverra. Donec dapibus dictum ex, malesuada tincidunt leo. Pellentesque vitae enim sit amet massa ultricies tincidunt. Nam nec felis consequat, egestas eros non, convallis purus. Maecenas efficitur velit in nisl convallis, ut viverra lectus finibus.
[/div]
[div=float: left;][div=background: url('https://via.placeholder.com/80x80'); border-radius: 100%; border: 1px solid black; height: 80px; width: 80px; -webkit-filter: grayscale(80%);][/div][/div][div=line-height: 16px; margin-top: -2px;] [ โ‚ ] | Name Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed erat viverra, vehicula erat ut, cursus odio. Aliquam quam elit, facilisis nec mauris nec, scelerisque ultricies odio. Fusce egestas eros a nulla efficitur dapibus. Aliquam a ultricies felis. Sed magna elit, efficitur eget elementum et, auctor sit amet tellus. Aenean varius quam ligula, quis imperdiet sapien sagittis non. Integer aliquam finibus pretium. In venenatis viverra nisi molestie aliquet. Praesent ultricies mauris ligula, ac tempus augue viverra eu. Ut efficitur semper risus quis viverra. Donec dapibus dictum ex, malesuada tincidunt leo. Pellentesque vitae enim sit amet massa ultricies tincidunt. Nam nec felis consequat, egestas eros non, convallis purus. Maecenas efficitur velit in nisl convallis, ut viverra lectus finibus.
[/div]
[div=float: left;][div=background: url('https://via.placeholder.com/80x80'); border-radius: 100%; border: 1px solid black; height: 80px; width: 80px; -webkit-filter: grayscale(80%);][/div][/div][div=line-height: 16px; margin-top: -2px;] [ โ– ] | Name Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed erat viverra, vehicula erat ut, cursus odio. Aliquam quam elit, facilisis nec mauris nec, scelerisque ultricies odio. Fusce egestas eros a nulla efficitur dapibus. Aliquam a ultricies felis. Sed magna elit, efficitur eget elementum et, auctor sit amet tellus. Aenean varius quam ligula, quis imperdiet sapien sagittis non. Integer aliquam finibus pretium. In venenatis viverra nisi molestie aliquet. Praesent ultricies mauris ligula, ac tempus augue viverra eu. Ut efficitur semper risus quis viverra. Donec dapibus dictum ex, malesuada tincidunt leo. Pellentesque vitae enim sit amet massa ultricies tincidunt. Nam nec felis consequat, egestas eros non, convallis purus. Maecenas efficitur velit in nisl convallis, ut viverra lectus finibus.
[/div]
[div=float: left;][div=background: url('https://via.placeholder.com/80x80'); border-radius: 100%; border: 1px solid black; height: 80px; width: 80px; -webkit-filter: grayscale(80%);][/div][/div][div=line-height: 16px; margin-top: -2px;] [ โ† ] | Name Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed erat viverra, vehicula erat ut, cursus odio. Aliquam quam elit, facilisis nec mauris nec, scelerisque ultricies odio. Fusce egestas eros a nulla efficitur dapibus. Aliquam a ultricies felis. Sed magna elit, efficitur eget elementum et, auctor sit amet tellus. Aenean varius quam ligula, quis imperdiet sapien sagittis non. Integer aliquam finibus pretium. In venenatis viverra nisi molestie aliquet. Praesent ultricies mauris ligula, ac tempus augue viverra eu. Ut efficitur semper risus quis viverra. Donec dapibus dictum ex, malesuada tincidunt leo. Pellentesque vitae enim sit amet massa ultricies tincidunt. Nam nec felis consequat, egestas eros non, convallis purus. Maecenas efficitur velit in nisl convallis, ut viverra lectus finibus.
[/div]
[div=float: left;][div=background: url('https://via.placeholder.com/80x80'); border-radius: 100%; border: 1px solid black; height: 80px; width: 80px; -webkit-filter: grayscale(80%);][/div][/div][div=line-height: 16px; margin-top: -2px;] [ โ– ] | Name Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed erat viverra, vehicula erat ut, cursus odio. Aliquam quam elit, facilisis nec mauris nec, scelerisque ultricies odio. Fusce egestas eros a nulla efficitur dapibus. Aliquam a ultricies felis. Sed magna elit, efficitur eget elementum et, auctor sit amet tellus. Aenean varius quam ligula, quis imperdiet sapien sagittis non. Integer aliquam finibus pretium. In venenatis viverra nisi molestie aliquet. Praesent ultricies mauris ligula, ac tempus augue viverra eu. Ut efficitur semper risus quis viverra. Donec dapibus dictum ex, malesuada tincidunt leo. Pellentesque vitae enim sit amet massa ultricies tincidunt. Nam nec felis consequat, egestas eros non, convallis purus. Maecenas efficitur velit in nisl convallis, ut viverra lectus finibus.
[/div]
[div=float: left;][div=background: url('https://via.placeholder.com/80x80'); border-radius: 100%; border: 1px solid black; height: 80px; width: 80px; -webkit-filter: grayscale(80%);][/div][/div][div=line-height: 16px; margin-top: -2px;] [ โ– ] | Name Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed erat viverra, vehicula erat ut, cursus odio. Aliquam quam elit, facilisis nec mauris nec, scelerisque ultricies odio. Fusce egestas eros a nulla efficitur dapibus. Aliquam a ultricies felis. Sed magna elit, efficitur eget elementum et, auctor sit amet tellus. Aenean varius quam ligula, quis imperdiet sapien sagittis non. Integer aliquam finibus pretium. In venenatis viverra nisi molestie aliquet. Praesent ultricies mauris ligula, ac tempus augue viverra eu. Ut efficitur semper risus quis viverra. Donec dapibus dictum ex, malesuada tincidunt leo. Pellentesque vitae enim sit amet massa ultricies tincidunt. Nam nec felis consequat, egestas eros non, convallis purus. Maecenas efficitur velit in nisl convallis, ut viverra lectus finibus.
[/div]
[div=float: left;][div=background: url('https://via.placeholder.com/80x80'); border-radius: 100%; border: 1px solid black; height: 80px; width: 80px; -webkit-filter: grayscale(80%);][/div][/div][div=line-height: 16px; margin-top: -2px;] [ โ™™ ] | Name Here
[ to be determined ]
[/div]
[br][/br][br][/br]
[div=float: left;][div=background: url('https://via.placeholder.com/80x80'); border-radius: 100%; border: 1px solid black; height: 80px; width: 80px; -webkit-filter: grayscale(80%);][/div][/div][div=line-height: 16px; margin-top: -2px;] [ โ™™ ] | Name Here
[ to be determined ]
[/div]
[br][/br][br][/br]
[div=float: left;][div=background: url('https://via.placeholder.com/80x80'); border-radius: 100%; border: 1px solid black; height: 80px; width: 80px; -webkit-filter: grayscale(80%);][/div][/div][div=line-height: 16px; margin-top: -2px;] [ โ™™ ] | Name Here
[ to be determined ]
[/div][/div][/div]
[/div][/div][/div]
codedbycrucialstar | hidden scroll | code|pastebin: x | live preview: x
 
Last edited:
๐‹๐Ž๐•๐„๐‰๐Ž๐˜

crucially

๐˜†๐—ผ๐˜‚โ€™๐—ฟ๐—ฒ ๐—ฎ๐˜€ ๐˜€๐—ฎ๐—ป๐—ฒ ๐—ฎ๐˜€ ๐—ถ ๐—ฎ๐—บ
[div=font-size: 50px; margin: auto; text-align: center; text-shadow: 3px 3px 2px lightgrey;]LOVEJOY[/div]
[div=max-width: 630px; margin: auto;][div=background-color: #89AEE1;][div=color: #3B5986; text-transform: uppercase; text-shadow: 2px 2px 0px black; text-align: center; font-size: 45px;]name here[/div][/div][div=background-color: #F8F8F8; border-top: 5px double #89AEE1; border-bottom: 5px double #89AEE1;][div=padding: 10px;]
[div=background: url('https://via.placeholder.com/120x120'); border-radius: 5px; height: 120px; width: 120px; border: 2px solid #3B5986; margin: auto;][/div]
[div=background: url('https://via.placeholder.com/120x120'); margin-top: -15px; border-radius: 5px; height: 120px; width: 120px; border: 2px solid #3B5986; margin: auto;][/div]
[div=background: url('https://via.placeholder.com/120x120'); margin-top: -15px; border-radius: 5px; height: 120px; width: 120px; border: 2px solid #3B5986; margin: auto;][/div]​

[div=margin-top: -30px;][/div][div=width: calc(100% - 0%); height: 423px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div=color: #3B5986; letter-spacing: 2px; text-transform: uppercase;]about[/div]
[div=line-height: 0; height: 2px; background-color: #3B5986; margin-top: -30px;][/div]
[div=margin-top: -28px;][/div]
[div=background-color: #3B5986; font-size: 12px; color: white; width: 20%; line-height: 16px; display: inline-block; font-family: 'Arial';]Name:[/div] boop[div=margin-top: -32px;][/div]
[div=background-color: #3B5986; font-size: 12px; color: white; width: 14%; line-height: 16px; display: inline-block; font-family: 'Arial';]Age:[/div] boop
[div=margin-top: -32px;][/div]
[div=background-color: #3B5986; font-size: 12px; color: white; width: 24%; line-height: 16px; display: inline-block; font-family: 'Arial';]Gender:[/div] boop
[div=background-color: #3B5986; font-size: 12px; color: white; width: 28%; line-height: 12px; display: inline-block; font-family: 'Arial';]Sexuality:[/div] boop
[div=margin-top: -34px;][/div]
[div=background-color: #3B5986; font-size: 12px; color: white; width: 30%; line-height: 16px; display: inline-block; font-family: 'Arial';]Species:[/div] boop
[div=margin-top: -32px;][/div]
[div=background-color: #3B5986; font-size: 12px; color: white; width: 30%; line-height: 16px; display: inline-block; font-family: 'Arial';]Faceclaim:[/div] boop

[div=margin-top: -22px;][/div][div=color: #344E53; letter-spacing: 2px; text-transform: uppercase;]appearances[/div]
[div=line-height: 0; height: 2px; background-color: #344E53; margin-top: -30px;][/div]
[div=margin-top: -24px; font-size: 12px; line-height: 14px; text-align: justify; color: black; font-family: 'Arial';]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor odio, vehicula eget elit in, tincidunt condimentum massa. Donec rhoncus cursus vulputate. In pulvinar sapien ante, vitae bibendum arcu condimentum non. Vestibulum et porta libero. Duis feugiat lobortis metus a sodales. Etiam fringilla ut turpis ac ultrices. Nulla pellentesque ipsum ac convallis imperdiet. Aliquam erat neque, lacinia vitae pellentesque sed, lobortis suscipit neque. Sed quis neque dignissim enim varius vulputate. Nunc mi neque, lacinia venenatis purus quis, sodales sollicitudin sapien. In enim dui, scelerisque sed urna eget, eleifend pulvinar lorem. Nullam sit amet felis egestas, malesuada lacus eu, varius nulla. Curabitur vitae magna dolor.[/div]
[div=margin-top: -22px;][/div][div=color: #3B5986; letter-spacing: 2px; text-transform: uppercase;]persona[/div]
[div=line-height: 0; height: 2px; background-color: #3B5986; margin-top: -30px;][/div]
[div=margin-top: -23px;][/div][div=background-color: #3B5986; font-size: 12px; color: white; width: 10%; font-family: 'Arial';]Likes:[/div] [div=line-height: 12px; font-family: 'Arial';]boop[/div]
[div=margin-top: -22px;][/div][div=background-color: #3B5986; font-size: 12px; color: white; width: 14%; font-family: 'Arial';]Dislikes:[/div] [div=line-height: 12px; font-family: 'Arial';]boop[/div]

[div=margin-top: -46px; font-size: 12px; line-height: 14px; text-align: justify; color: black; font-family: 'Arial';]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor odio, vehicula eget elit in, tincidunt condimentum massa. Donec rhoncus cursus vulputate. In pulvinar sapien ante, vitae bibendum arcu condimentum non. Vestibulum et porta libero. Duis feugiat lobortis metus a sodales. Etiam fringilla ut turpis ac ultrices. Nulla pellentesque ipsum ac convallis imperdiet. Aliquam erat neque, lacinia vitae pellentesque sed, lobortis suscipit neque. Sed quis neque dignissim enim varius vulputate. Nunc mi neque, lacinia venenatis purus quis, sodales sollicitudin sapien. In enim dui, scelerisque sed urna eget, eleifend pulvinar lorem. Nullam sit amet felis egestas, malesuada lacus eu, varius nulla. Curabitur vitae magna dolor.[/div]
[div=margin-top: -22px;][/div][div=color: #3B5986; letter-spacing: 2px; text-transform: uppercase;]biography[/div]
[div=line-height: 0; height: 2px; background-color: #3B5986; margin-top: -30px;][/div]
[div=margin-top: -24px; font-size: 12px; line-height: 14px; text-align: justify; color: black; font-family: 'Arial';]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor odio, vehicula eget elit in, tincidunt condimentum massa. Donec rhoncus cursus vulputate. In pulvinar sapien ante, vitae bibendum arcu condimentum non. Vestibulum et porta libero. Duis feugiat lobortis metus a sodales. Etiam fringilla ut turpis ac ultrices. Nulla pellentesque ipsum ac convallis imperdiet. Aliquam erat neque, lacinia vitae pellentesque sed, lobortis suscipit neque. Sed quis neque dignissim enim varius vulputate. Nunc mi neque, lacinia venenatis purus quis, sodales sollicitudin sapien. In enim dui, scelerisque sed urna eget, eleifend pulvinar lorem. Nullam sit amet felis egestas, malesuada lacus eu, varius nulla. Curabitur vitae magna dolor.[/div]
[div=margin-top: -22px;][/div][div=color: #3B5986; letter-spacing: 2px; text-transform: uppercase;]miscellaneous[/div]
[div=line-height: 0; height: 2px; background-color: #3B5986; margin-top: -30px;][/div]
[div=margin-top: -24px; font-size: 12px; line-height: 14px; text-align: justify; color: black; font-family: 'Arial';]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor odio, vehicula eget elit in, tincidunt condimentum massa. Donec rhoncus cursus vulputate. In pulvinar sapien ante, vitae bibendum arcu condimentum non. Vestibulum et porta libero. Duis feugiat lobortis metus a sodales. Etiam fringilla ut turpis ac ultrices. Nulla pellentesque ipsum ac convallis imperdiet. Aliquam erat neque, lacinia vitae pellentesque sed, lobortis suscipit neque. Sed quis neque dignissim enim varius vulputate. Nunc mi neque, lacinia venenatis purus quis, sodales sollicitudin sapien. In enim dui, scelerisque sed urna eget, eleifend pulvinar lorem. Nullam sit amet felis egestas, malesuada lacus eu, varius nulla. Curabitur vitae magna dolor.[/div][/div][/div]
[/div][/div][/div]
codedbycrucialstar | hidden scroll | code|pastebin: x | live preview: x
 
Last edited:

Lucid Lies

I don't like the drama. The drama likes me.
[div=font-size: 60px; margin: auto; text-align: center; text-shadow: 3px 3px 2px lightgrey;]REVOLVE[/div]
[div=max-width: 750px; margin: auto;]
[div=border-radius: 100%; border-top: 3px solid #DAA520; border-bottom: 3px solid #111111; border-left: 3px solid #111111; animation: fa-spin 5s linear 0s infinite; border-right: 3px solid #111111; height: 180px; width: 180px; margin: auto;][div=background: url(http://via.placeholder.com/180x180); border-radius: 100%; animation: fa-spin 5s linear 0s infinite reverse; height: 180px; width: 180px; margin: auto;][/div][/div][div=margin-top: 10px; font-size: 13px;]
Name Here
โ€œyou can write your own words here such as quotes. shouldn't exceed twenty-seven words at the most to keep the alignment"[/div][nobr]
[class=tabs]
line-height: 1;
margin: 20px auto;
text-align: center;
width: 100%;
color: black;
display: inline-block;
font-family: 'Times New Roman';
[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 45%;
[/class]

[class name=tab state=hover]
background-color: grey;
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} Basics) (show tabsContentInformation)
if (eq ${currentTab} Persona) (show tabsContentPersonality)
if (eq ${currentTab} Biography) (show tabsContentAbout)
if (eq ${currentTab} Miscellaneous) (show tabsContentOthers)
[/script]

[div class=tabs][div class=tab style="border: 1px solid black; margin: auto"]Basics[/div][div class=tab style="border: 1px solid black; margin-left: 10px; margin-top: auto; margin-bottom: auto; margin-right: auto"]Persona[/div][div class=tab style="border: 1px solid black; margin-left: auto; margin-top: 10px; margin-bottom: auto; margin-right: auto""]Biography[/div][div class=tab style="border: 1px solid black; margin-left: 10px; margin-top: 10px; margin-bottom: auto; margin-right: auto"]Miscellaneous[/div][/div][/nobr]
[nobr]

[div class="tabsContent tabsContentInformation"][div=width: calc(100% - 0%); height: 405px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll; font-size: 14px; line-height: 20px;]basic information:
[br][/br]
name: bloop.
[br][/br]
position: bloop
[br][/br]
species: bloop
[br][/br]
sexuality: bloop
[br][/br][br][/br]
note: hello everyone! in this and the post above , you'll see two codes "revolve" and its opposite "stag"! "revolve" is better used as a character sheet while "stag" can be used as both either character sheet or just an in character! have fun and let your creativity flow!
[br][/br][br][/br]
appearance: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[/div][/div][/div]

[div class="tabsContent tabsContentPersonality" style="display: none;"][div=width: calc(100% - 0%); height: 405px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll; font-size: 14px; line-height: 20px;]persona:[br][/br]
personality: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
likes: bloop
[br][/br]
dislikes: bloop
[br][/br]
strengths: bloop
[br][/br]
weaknesses: bloop
[/div][/div][/div]

[div class="tabsContent tabsContentAbout" style="display: none;"][div=width: calc(100% - 0%); height: 405px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll; font-size: 14px; line-height: 20px;]biography:
[br][/br]
herstory: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[/div][/div][/div]

[div class="tabsContent tabsContentOthers" style="display: none;"][div=width: calc(100% - 0%); height: 405px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll; font-size: 14px; line-height: 20px;]other:
[br][/br]
important information:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellntesque et, imperdiet ut sapien.
[/div][/div][/div][/nobr]
[nobr][/nobr]
[/div]
codedbycrucialstar | click boxes and hidden scrolls
live preview: x | pastebin: x
Hello there. Just like to say that your codes are amazing and that I'll be using this one for my characters. :) Keep up the good work!


 

nios

๐˜ฝ๐™‡๐˜ผ๐˜พ๐™† ๐™‡๐™„๐™‘๐™€๐™Ž ๐™ˆ๐˜ผ๐™๐™๐™€๐™
Hello :) I'm new to this site and I saw your beautiful character sheets! I'm not sure how code works.
Do I need to copy and paste the entire code and edit it through there?
I probably sound so stupid right now :(
 

crucially

๐˜†๐—ผ๐˜‚โ€™๐—ฟ๐—ฒ ๐—ฎ๐˜€ ๐˜€๐—ฎ๐—ป๐—ฒ ๐—ฎ๐˜€ ๐—ถ ๐—ฎ๐—บ
[div=max-width: 500px; margin: auto;][div=border: 1px solid; padding: 10px;][div=line-height: 18px;] Bonjour, nios nios ! Welcome to RpNation! Itโ€™s not a dumb question at all and you definitely do not sound stupid! Thank you so much for the compliment! Eep, that made my morning!

If you click on the โ€œxโ€ near โ€œpastebinโ€ itโ€™ll bring you to another web browser where the code will be displayed! I only placed the code there because I think it would be easier to copy! You wonโ€™t be editing the code on that site but rather on RpN!

Youโ€™ll copy the entire code and you can paste it in your โ€œMy Private Workshopโ€ on RpN where you can edit it and mess around with the code! You can change the colors, fonts, and etc.! I love using the private workshop because itโ€™s just a place for all your drafts be it codes, writing, and etc.! Only you ( and staff ) are allowed to see that section since itโ€™s for your use!

I hope this clarifies some things!
[/div][/div][/div]
 

nios

๐˜ฝ๐™‡๐˜ผ๐˜พ๐™† ๐™‡๐™„๐™‘๐™€๐™Ž ๐™ˆ๐˜ผ๐™๐™๐™€๐™
[div=max-width: 500px; margin: auto;][div=border: 1px solid; padding: 10px;][div=line-height: 18px;] Bonjour, nios nios ! Welcome to RpNation! Itโ€™s not a dumb question at all and you definitely do not sound stupid! Thank you so much for the compliment! Eep, that made my morning!

If you click on the โ€œxโ€ near โ€œpastebinโ€ itโ€™ll bring you to another web browser where the code will be displayed! I only placed the code there because I think it would be easier to copy! You wonโ€™t be editing the code on that site but rather on RpN!

Youโ€™ll copy the entire code and you can paste it in your โ€œMy Private Workshopโ€ on RpN where you can edit it and mess around with the code! You can change the colors, fonts, and etc.! I love using the private workshop because itโ€™s just a place for all your drafts be it codes, writing, and etc.! Only you ( and staff ) are allowed to see that section since itโ€™s for your use!

I hope this clarifies some things!
[/div][/div][/div]
This was super helpful. You are amazing! Thank you so much :')
 

RageOfInfinity

The Lord of Shadows
I have something I could really use your help on. I want to know how you keep your scrollbars invisible when you use overflow. I have literally no clue how to do that.
 

crucially

๐˜†๐—ผ๐˜‚โ€™๐—ฟ๐—ฒ ๐—ฎ๐˜€ ๐˜€๐—ฎ๐—ป๐—ฒ ๐—ฎ๐˜€ ๐—ถ ๐—ฎ๐—บ
[div=max-width: 500px; margin: auto;][div=border: 1px solid; padding: 10px;][div=line-height: 18px;] Hello there, RageOfInfinity RageOfInfinity ! Of course!

To hide | not have the scroll bar seen, youโ€™ll have to use two divs. The first div will include a width: calc and a specific height. The second div will make sure that the width and height are at 100%. You wouldnโ€™t use overflow: auto but you would use overflow: hidden in the first div and overflow: y-scroll in the second div.

Written below is the hidden scroll code! You would only change the height in the first div.

Code:
[div=width: calc(100% - 0%); height: 450px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;] text here[/div][/div]

I hope this helps!

P.S I do the hidden scroll this way but there may be another way another user codes this! I think thatโ€™s the beauty of coding, there are many ways to get the ending results, just depends how you want to do it!
[/div][/div][/div]
 
Last edited:

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top