• 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.

Closed ๐šƒ๐™ท๐™ด ๐™พ๐™ป๐™ณ ๐š‚๐šƒ๐š„๐™ณ๐™ธ๐™พ

These are all so freaking beautiful. I am obsessed with simplicity since it's still so aesthetically pleasing and so perfect for a general and simple character sheet / layout.
 
๐“๐„๐Œ๐๐„๐’๐“
[class=background] position: relative; width: 550px; background-color: #99A6A9; border: 1px solid #7A888E; padding: 25px; margin: auto; cursor: url(https://i.imgur.com/X2LfhKo.png), auto !important; [/class] [class=backgroundtwo] background-color: white; border: 1px solid #7A888E; height: 500px; [/class] [class=banner] background: url(https://media.giphy.com/media/dv6bQkgeelFy7thpDk/giphy.gif) no-repeat; background-size: cover; height: 150px; [/class] [class=tabone] position: absolute; display: inline-block; background-color: #7A888E; border: 1px solid #99A6A9; border-radius: 100%; width: 30px; height: 30px; background-size: 100%; margin-left: 80px; margin-top: -17px; [/class] [class=tabtwo] position: absolute; display: inline-block; background-color: #7A888E; border: 1px solid #99A6A9; border-radius: 100%; width: 30px; height: 30px; background-size: 100%; margin-left: 145px; margin-top: -17px; [/class] [class=tabthree] position: absolute; display: inline-block; background-color: #7A888E; border: 1px solid #99A6A9; border-radius: 100%; width: 30px; height: 30px; background-size: 100%; margin-left: 355px; margin-top: -17px; [/class] [class=tabfour] position: absolute; display: inline-block; width: 30px; height: 30px; background-color: tan; background-color: #7A888E; border: 1px solid #99A6A9; border-radius: 100%; margin-left: 420px; margin-top: -17px; [/class] [class=tabfive] position: absolute; display: inline-block; background: url('https://i.imgur.com/qTgLmAg.jpg') no-repeat; border-radius: 100%; height: 120px; width: 120px; [/class] [class=border] position: absolute; display: inline-block; border-radius: 100%; border: 1px solid #7A888E; height: 120px; width: 120px; padding: 5px; margin-top: -75px; margin-left: 200px; z-index: 1; [/class] [class=tabinfo] max-width: 550px; margin: auto; margin-top: 55px; background-color: white; margin-left: 0px; [/class] [class=tab] position: absolute; [/class] [class name=activeTab] background-color: white; [/class] [class name=tab state=hover] transition-duration: 0.3s; background-color: white; [/class] [class=hovertext] position: absolute; border-radius: 100%; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(225, 225, 255, 0.12); color: white; font-size: 15px; [/class] [class name=hovertext state=hover] opacity: 1; [/class] [class=hover_text] text-shadow: 2px 2px 4px black; margin-top: 40px; padding: 5px; text-align: center; font-size: 35px; [/class] [class=text] font-size: 13px; line-height: 18px; color: #888888; padding: 10px; text-align: justify; [/class] [class=text_header] text-align: center; font-size: 20px; text-transform: uppercase; font-weight: bold; font-style: italic; [/class] [class=text_background] background-color: #99A6A9; display: inline-block; padding: 2px; margin-top: 5px; color: white [/class] [class=gallery_border] display: inline-block; border: solid 1px black; background-color: white; line-height: 0; padding: 5px; margin: auto; [/class] [class=icon_one] background: url('https://via.placeholder.com/100x100'); background-size: cover; height: 100px; width: 100px; margin: auto; [/class] [class=icon_two] background: url('https://via.placeholder.com/100x100'); background-size: cover; height: 100px; width: 100px; margin: auto; [/class] [class=icon_three] background: url('https://via.placeholder.com/100x100'); background-size: cover; height: 100px; width: 100px; margin: auto; [/class] [class=icon_four] background: url('https://via.placeholder.com/100x100'); background-size: cover; height: 100px; width: 100px; margin: auto; [/class] [class=icon_five] background: url('https://via.placeholder.com/100x100'); background-size: cover; height: 100px; width: 100px; margin: auto; [/class] [class=icon_six] background: url('https://via.placeholder.com/100x100'); background-size: cover; height: 100px; width: 100px; margin: auto; [/class] [class=icon_seven] background: url('https://via.placeholder.com/100x100'); background-size: cover; height: 100px; width: 100px; margin: auto; [/class] [class=icon_eight] background: url('https://via.placeholder.com/100x100'); background-size: cover; height: 100px; width: 100px; margin: auto; [/class] [script class=tab on=click] hide tabsContent removeClass activeTab tab addClass activeTab set currentTab (getText) if (eq ${currentTab} one) (show tabsContentone) if (eq ${currentTab} two) (show tabsContenttwo) if (eq ${currentTab} three) (show tabsContentthree) if (eq ${currentTab} four) (show tabsContentfour) if (eq ${currentTab} name) (show tabsContentfive) [/script] [div class=background][div class=backgroundtwo][div class=banner][/div] [div class="tab tabone"]
one
[/div] [div class="tab tabtwo"]
two
[/div] [div class="tab tabthree"]
three
[/div] [div class="tab tabfour"]
four
[/div] [div class=border][div class="tab tabfive"][div class=hovertext][div class=hover_text]name[/div][/div][/div][/div] [div class="tabsContent tabsContentone"][div class=tabinfo]
[div class=text][div class=text_header]quote here
โบ [div class=text_background]Note:
Hello loves! So, like, Eiza Gonzales is so gorgeous and I just had to keep her image in this code as well as the banner image! I just wanted to show you lovelies the whole 'she-bang' since I also sadly don't have a live preview of this code and character in action! Maybe one day! I hope you lovelies enjoy! P.S. Click the pastebin link to get the code!
โบ [div class=text_background]Name:[/div] boop
โบ [div class=text_background]Date of Birth:[/div] boop
โบ [div class=text_background]Gender Identity:[/div] boop
โบ [div class=text_background]Zodiac:[/div] boop
โบ [div class=text_background]Nationality:[/div] boop

โบ [div class=text_background]Eye color:[/div] boop
โบ [div class=text_background]Hair color:[/div] boop
โบ [div class=text_background]Height:[/div] boop
โบ [div class=text_background]Distinguishing Features:[/div] boop

more in-depth appearance information
[/div][/div][/div][/div][/div] [div class="tabsContent tabsContenttwo" style="display: none;"][div class=tabinfo]
[div class=text][div class=text_header]quote here
โบ [div class=text_background]Vices:
boop
โบ [div class=text_background]Virtues:[/div] boop
โบ [div class=text_background]Likes:[/div] boop
โบ [div class=text_background]Dislikes:[/div] boop
[div class=text_header]quote here[/div] more in-depth persona
[/div][/div][/div][/div][/div] [div class="tabsContent tabsContentthree" style="display: none;"][div class=tabinfo]
[div class=text][div class=text_header]quote here
โบ [div class=text_background]History:
boop
[div class=text_header]quote here[/div]
[/div][/div][/div][/div][/div] [div class="tabsContent tabsContentfour" style="display: none;"][div class=tabinfo]
[div class=text][div class=text_header]quote here
โบ [div class=text_background]Other:
boop
[div class=text_header]quote here[/div]
โบ [div class=text_background]Theme Song:[/div] boop
[/div][/div][/div][/div][/div] [div class="tabsContent tabsContentfive" style="display: none;"][div class=tabinfo]

[div class=gallery_border][div class=icon_one]​
[div class=gallery_border][div class=icon_two][/div][/div] [div class=gallery_border][div class=icon_three][/div][/div] [div class=gallery_border][div class=icon_four][/div][/div]

[div class=gallery_border][div class=icon_five][/div][/div] [div class=gallery_border][div class=icon_six][/div][/div] [div class=gallery_border][div class=icon_seven][/div][/div] [div class=gallery_border][div class=icon_eight][/div][/div]
2c3W5Qp.png
[/div][/div][/div][/div][/div][/div]
codedbycrucially | hidden scroll | pastebin: xxx
 
BeautifulLoser BeautifulLoser & SpectrumCrow SpectrumCrow ,. a very very belated response but a much needed one! Thank you so much for browsing my resources and I hope you lovelies find all youโ€™re looking for here! I really appreciate it aaaah! All the support and good vibes to you lovelies!

AnimeGenork AnimeGenork ; uwu ! gen gen, please, youโ€™re amazing and i love you too! thank you sooo much aaaaaa!

Ayama Ayama ; omg thank you!! credits towards the artist who made the signature for sure! iโ€™ve always been a floral person and just seeing the pink flowers made me swoon!
 
jasmyn jasmyn , oh my gosh, you're the absolute sweetest! thank you, lovely ! p l e a s e, i appreciate the compliment so much and i love love looove knowing you love my codes! you are absolutely amazing yourself, โ™ก
 
๐’๐ˆ๐‘๐„๐
[class=background] max-width: 650px; margin: auto; border-bottom: 6px solid #99403B; cursor: url(https://i.imgur.com/X2LfhKo.png), auto !important; [/class] [class=banner] height: 110px; padding: 20px; background-color: #215E63; [/class] [class=tag_container] white-space: pre-wrap; margin-left: 245px; margin-top: -116px; [/class] [class=tag_header] text-align: center; font-size: 23px; font-weight: bold; margin-top: -25px; font-family: 'Poiret One'; text-transform: uppercase; color: white; [/class] [class=tag_text] text-align: center; margin-top: -30px; font-size: 11px; line-height: 18px; color: white; [/class] [class=icon_border] display: inline-block; border: solid 1px black; background-color: white; line-height: 0; padding: 5px; [/class] [class=icon_one] background: url('https://66.media.tumblr.com/b141a2aafefb6f59116d9ea78600fb76/tumblr_pgk8be18911v1ofe3o4_250.png'); background-size: 100%; height: 100px; width: 100px; margin: auto; [/class] [class=icon_two] background: url('https://i.imgur.com/mwRnZdm.png'); background-size: 100%; height: 100px; width: 100px; margin: auto; [/class] [class=textcontainer] background-color: white; white-space: pre-wrap; padding: 5px; color: black; [/class] [class=initial_letter] display: inline-block; font-size: 3.5em; line-height: 1; letter-spacing: 5px; float: left; font-family: 'Rasa'; [/class] [class=textinformation] line-height: 18px; font-family: 'Times New Roman'; text-align: justify; padding: 5px; margin-top: -5px; [/class] [div class=background][div class=banner] [div class=icon_border][div class=icon_one][/div][/div] [div class=icon_border][div class=icon_two][/div][/div] [div class=tag_container]
[div class=tag_header]name here
[div class=tag_text]Location: Scenario: " With: | Mentions: | Outfit:
[/div][/div][/div][/div] [div class=textcontainer]
[div class=initial_letter]H
[div class=textinformation]ello loves! Here's a very simple in-character code that I've been using for [ 2 ] RPs that I've been in! Feel free to check out the live preview in the link below [ click on the "x"] ! That being said, I kept Abigail Cowen's icon in the code because she's absolutely adorable! If you'd like to know the sizes of the icons, they are 100x100! If you have any questions feel free to ask and enjoy! Also, feel free to click the "xxx" right next to "pastebin" to get the code! Oh! The tag information area does have a hidden scroll as well! You don't need to add any [br][/br] to this code either! Elementum nibh tellus molestie nunc non blandit massa enim nec. Tellus at urna condimentum mattis pellentesque. In nisl nisi scelerisque eu ultrices vitae auctor eu. Eleifend quam adipiscing vitae proin. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Amet justo donec enim diam. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. At quis risus sed vulputate odio ut enim blandit volutpat. Vel pretium lectus quam id leo. Morbi tristique senectus et netus et malesuada fames ac. Ut tristique et egestas quis. Penatibus et magnis dis parturient. Sed viverra tellus in hac. Elit scelerisque mauris pellentesque pulvinar. Justo nec ultrices dui sapien eget mi proin sed. Sit amet facilisis magna etiam tempor orci eu lobortis elementum. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Duis at consectetur lorem donec massa sapien. Feugiat nisl pretium fusce id. Interdum posuere lorem ipsum dolor sit. Elementum sagittis vitae et leo duis. Aliquet nec ullamcorper sit amet risus nullam eget felis. Convallis aenean et tortor at risus viverra. Eu augue ut lectus arcu bibendum. Lacus vel facilisis volutpat est velit egestas dui id ornare. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Eget lorem dolor sed viverra ipsum nunc aliquet. Ullamcorper morbi tincidunt ornare massa. Morbi quis commodo odio aenean sed. At risus viverra adipiscing at in. Orci porta non pulvinar neque laoreet. Sem fringilla ut morbi tincidunt augue. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Congue nisi vitae suscipit tellus mauris a diam maecenas sed. Potenti nullam ac tortor vitae purus faucibus ornare. Augue lacus viverra vitae congue eu consequat ac felis. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Aliquam ultrices sagittis orci a scelerisque purus semper eget. Odio tempor orci dapibus ultrices in iaculis. Urna condimentum mattis pellentesque id nibh. Bibendum est ultricies integer quis. Nec nam aliquam sem et tortor. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Velit egestas dui id ornare arcu odio ut sem. Non arcu risus quis varius quam quisque id. Vitae tempus quam pellentesque nec nam aliquam sem et. Et ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Enim lobortis scelerisque fermentum dui faucibus in ornare. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque convallis. Id volutpat lacus laoreet non curabitur gravida.
[/div][/div][/div][/div]
codedbycrucially | hidden scroll | pastebin: x | live preview: x , xx
 
๐‚๐‹๐€๐‘๐ˆ๐“๐˜
[class=container] width: 560px; position: relative; margin: auto; cursor: url(http://www.rw-designer.com/cursor-view/57581.png), auto !important; [/class] [class=cover] background: url(https://i.imgur.com/kA6k1J1.png) no-repeat; border-left: 10px dashed #790808; bottom: 0; left: 0; position: absolute; right: 0; top: 0; width: 100%; height: 100%; z-index: 2; [/class] [class=background] position: relative; background-color: #f5f5ef; margin: auto; color: black; [/class] [class=banner] width: 100%; height: 100px; padding: 0px; background-color: #790808; [/class] [class=banner_text] position: relative; padding: 30px; font-size: 20px; text-transform: uppercase; font-style: italic; color: white; top: -5px; text-align: right; [/class] [class=bannertext_two] position: relative; padding: 30px; font-size: 17px; font-style: normal; text-transform: normal; color: white; margin-top: -30px; text-align: center; margin-left: 155px; [/class] [class=divider] position: absolute; width: 57%; line-height: 0; height: 1px; background-color: black; left: 202px; [/class] [class=textcontainer] position: relative; height: 375px; padding: 10px; white-space: pre-wrap; border-bottom: 1px solid #BABCBE; border-right: 1px solid #BABCBE; border-left: 1px solid #BABCBE; [/class] [class=textinformation] font-size: 11px; line-height: 15px; [/class] [class=initial_letter] display: inline-block; font-size: 2.5em; line-height: 1em; letter-spacing: 5px; float: left; font-weight: bold; [/class] [class=icon_border] display: inline-block; border: solid 1px #BABCBE; background-color: #F2F2F2; line-height: 0; padding: 12px; margin: auto; margin-top: -90px; margin-left: 15px; height: 100px; width: 100px; [/class] [class=icon_one] background: url('https://i.imgur.com/wXo02qV.png'); background-size: 100%; border: solid 1px #FBFBFB; height: 100px; width: 100px; [/class] [class name=icon_one state=hover] background: url('https://i.pinimg.com/564x/26/26/48/262648646a6410d8f1d0ddd28c4e8c2f.jpg') no-repeat; background-size: cover; width: 100%; height: 100%; [/class] [class=tag] position: relative; margin-left: 150px; line-height: 16px; margin-top: -50px; font-size: 13px; color: black; padding: 0; [/class] [script class=background on=click] slideDown 800 cover [/script] [script class=cover on=click] slideUp 800 [/script] [div class=container][div class=background] [div class=banner][div class=banner_text]โ› quote here โœ [div class=divider][/div]
[div class=bannertext_two]name | title | role here[/div][/div][/div] [div class=textcontainer][div class=icon_border][div class=icon_one][/div][/div][div class=tag]location: | with: | tags: [/div]
[div class=initial_letter]H
[div class=textinformation]ello ! It's me again! So while the main cover is in fact an image, the icon in the in-character area can be replaced and changed! Hover over the icon and it'll show another image! At the same time, you don't need to use [br][/br] in this code either! The main cover image was made on canva! They have really awesome templates there to choose from! The size of the cover image I used was "550x500" and the icons are "100x100" ! If you'd like me to make an image for you I'd be more than happy to! Also, if you click the "x" next to the pastebin, you can grab the code there! At the same time the "x" next to the live preview will also show you how the code looks as well! I kept Amelia Zadro's image as is to showcase the hovering affect of the icons! Feel free to keep clicking the code to slide up and down! It's pretty fun, hehe! If you'd like to change the cursor, I found my cursors on this site [ here ] or you can use any small png image as a cursor! Have fun and I hope you enjoy the code if you decide to use it! Donec eu elit quam. Nullam varius, mi tempus mattis porttitor, justo nunc lobortis sapien, vel consectetur ligula neque eget nunc. Praesent ut diam sit amet metus hendrerit sollicitudin ut eget ligula. Curabitur purus tellus, interdum et varius ut, tempor sit amet dolor. Morbi aliquet tortor id convallis mollis. Nam odio lectus, tempor sit amet egestas sit amet, pulvinar eleifend enim. Donec quis iaculis nulla. Vivamus rhoncus bibendum ligula nec vestibulum. Praesent nec velit magna. Quisque vitae orci id felis vestibulum tincidunt nec in ligula. Praesent semper dapibus efficitur. Maecenas dignissim sem varius imperdiet maximus. Quisque pretium turpis et dignissim fringilla. Nulla laoreet libero a elit molestie pretium. Donec hendrerit, tellus sed mollis semper, enim augue ultricies nisl, rhoncus cursus lorem nisl id metus. Aenean volutpat, ex quis finibus eleifend, urna ipsum tempus sem, a viverra sapien metus nec enim. Donec lacinia eros mauris, et scelerisque mi rhoncus in. In scelerisque eu purus ac venenatis. Vestibulum mollis lorem vel sodales sagittis. Nam porta id ligula et suscipit. In non velit in diam pretium finibus vitae in augue. Suspendisse non ligula pretium, condimentum lectus pellentesque, tempor ligula. Mauris mollis feugiat pellentesque. Maecenas nec vulputate risus. Proin finibus lectus sit amet purus pellentesque suscipit. Cras pretium mi ac nunc dictum egestas. Cras imperdiet bibendum euismod. In ullamcorper semper lacus. Pellentesque et bibendum mauris. Phasellus ultricies mattis nisi vel suscipit. Vestibulum dui ipsum, volutpat non diam sed, eleifend elementum magna. Curabitur mi sem, tristique eu dui vel, volutpat blandit neque. Vivamus vel euismod arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eget venenatis nibh. Nullam commodo, nunc sit amet dictum fringilla, diam augue placerat lectus, nec pellentesque enim leo vel lacus. Proin et magna feugiat, eleifend sapien quis, maximus massa. Fusce laoreet orci vel mi mollis mattis. Pellentesque pharetra porta diam non viverra. Aliquam eu sem hendrerit, rhoncus turpis non, iaculis lorem. Mauris suscipit diam vitae porttitor commodo. Quisque cursus volutpat nunc. Vestibulum facilisis velit a scelerisque pharetra. Sed malesuada justo vel porta condimentum.
[/div][/div][/div][/div] [div class=cover][/div][/div]
codedbycrucially | click main image, hover icons | pastebin: x | live preview: xx
 
Iโ€™m in love with your codes! Thank you for taking the time to put these out there for us to use :) I was wondering if you could make a 1x1 interest bbcode??
 
AnimeGenork AnimeGenork , yes ! please just let me know and i can definitely do it for you! all the uwus!

BippityBoppityBoop BippityBoppityBoop ; aaaaaa! thank you so much that makes me happy to hear ! youโ€™re the best!

vixe vixe ; eeeep! itโ€™s so wonderful to see you! thank you so so so much for loving them! youโ€™re very welcome! thank you for taking time to browse through them !

ooooh! so actually! all of my codes have its multi-purpose use! so if you see any code youโ€™d like, you can change them from a character sheet to in character or even a character sheet to interest check or even a one x one partner search if youโ€™d like !

but! that said, i can totally make a code for itโ€™s purposeโ€™s use is for a one x one partner search! i donโ€™t think iโ€™ve done one before and so iโ€™d be more than happy to make one ! ( iโ€™ve actually been debating on creating a partner search thread too so this will help get the muse going! )

itโ€™ll take me a bit to get a code up, but iโ€™ll totally let you know! if you have any suggestions on what youโ€™d like to see on the code, definitely let me know!

thank you for asking !! โ™ก
 
Of course my love! Itโ€™s so wonderful to see you too!!! ๐Ÿ’—As for the code i think Iโ€™d like it to be compact so like a square/rectangles also maybe it could incorporate a gif? Maybe a scroll box I really like the way those look! As for colors maybe a sunset palette? Or just the use of bright orange Bc itโ€™s my favorite color but, itโ€™s totally cool if you do something else! I donโ€™t know much about code but I find is challenging and rewarding.
 
i got so excited to see posts from hereeeee
i'm probably going to be using a couple of your codes in the near future, depending on how things go in rps.
thanks for being so fREAKING awesome at coding bby <3 <3 <3
 
I was wondering, how do you get you picture to look so good and so tiny? They fit so well too! Every time I try to resize my photo they come out very pixelated. Do you have any tips on how to?
 
vixe vixe ; i'll definitely use your ideas to create the one x one partner search code ! it'll definitely help inspire me and my muse to create it ! hopefully since i'm on break now, i'll be able to whip up a lil' something !

yes! so, for me personally, this is how i do things!

whenever you find a photo of your faceclaim, if the photo is bigger than the width/height given in the code, you can use "background-position: #% #%" to move your image around to the way you'd like!

on the other hand, if your image is already an "icon" found on tumblr and/or google, the "background-size: 100%" is basically a "cheat cheat" where the image will automatically be "sized" for you regardless if your image is [ 300x300 or 300x350 ] and the coded image is [ 100x100 or 200x200 ]. the background-size: 100% will automatically size the image for you and it usually won't make the image all wonky! [ this is easy if you find an icon of your faceclaim because usually the icons have the same width and height ].

uE2HVXH.png

at times, i like cropping my images though there's users who don't like that because it's a few added step and time is money as they say!

however, if you don't mind that route, and would like to learn and don't mind the extra steps [ "resizing and cropping and then uploading onto "imgur" ], a tip that I always recommend is to resize the bigger dimension [ width/height ] needed first before cropping!

for example, if the image has the dimensions 1200x800px [ but you need width: 245px , height: 500px ] ; resize the image first.

one.png

you will first resize the bigger dimension number of your intended width/height.
in this case, your intended image's width and height is this: [ 245 width and 500 height ].
since 500 is the bigger dimension number, you'd change the original image pixel's height [ 800 ] to [ 500 ].

two.png

once you finish that, you can finally crop your image to the intended width!

three.png

p.s. if you resize then crop your images, I like to find the "biggest" version of the image itself so that I have room to [ resize , crop, and etc. ] without causing the pixels of the image to be all wonky!

uE2HVXH.png

LadybirdMooch LadybirdMooch ; oh my word ! please. . . thank YOU so much for loving my codes and wanting to use them! i'm so happy and honored you'd like them asdfghjl; all the support and love ! can't wait to see how you'd use them in the roleplays you'll join !
 
Last edited:
Thank you! thank you so much! This will help me a lot ๐Ÿ’—I canโ€™t wait to see what you come up with for your 1x1 thread! Iโ€™m so excited!
 
๐๐Ž๐ˆ๐’๐Ž๐
[class=container] width: 560px; position: relative; margin: auto; cursor: url(http://cur.cursors-4u.net/nature/images9/nat852.gif), auto !important; [/class] [class=cover] bottom: 0; left: 0; position: absolute; right: 0; top: 0; width: 100%; height: 100%; z-index: 2; [/class] [class=background_two] background-color: #f5f5ef; width: 560px; height: 456px; [/class] [class=border] background-color: #0a4424; width: 110px; height: 416px; padding: 20px; [/class] [class=main_image] position: relative; background: url('https://i.imgur.com/8HDTxJQ.jpg'); width: 180px; height: 304px; border: 8px solid #748b74; margin-left: 30px; margin-top: 45px; [/class] [class=image_one] position: relative; background: url('https://i.imgur.com/diAeJCB.jpg'); border-radius: 100%; border: 1px solid #748b74; background-size: 100%; margin-left: 180px; margin-top: -295px; width: 80px; height: 80px; [/class] [class=image_two] position: relative; background: url('https://i.imgur.com/7ywaQRJ.jpg'); border-radius: 100%; border: 1px solid #748b74; background-size: 100%; margin-left: 180px; margin-top: 15px; width: 80px; height: 80px; [/class] [class=image_three] position: relative; background: url('https://i.imgur.com/05I1YdL.jpg'); border-radius: 100%; border: 1px solid #748b74; background-size: 100%; margin-left: 180px; margin-top: 15px; width: 80px; height: 80px; [/class] [class=textcontainer_two] position: relative; margin-left: 260px; margin-top: -260px; white-space: pre-wrap; [/class] [class=header_one] color: #748b74; text-transform: uppercase; text-align: center; font-size: 20px; [/class] [class=header_two] color: #0a4424; text-transform: uppercase; text-align: center; font-size: 30px; margin-top: -45px; [/class] [class=background] background-color: #FFFFFF; margin: auto; width: 560px; height: 455px; position: relative; [/class] [class=banner] width: 100%; height: 100px; padding: 0px; background-color: #0a4424; [/class] [class=banner_text] position: relative; padding: 30px; font-size: 30px; text-transform: uppercase; font-style: italic; color: white; top: -5px; text-align: right; [/class] [class=divider] position: absolute; width: 50%; line-height: 0; height: 1px; background-color: black; margin-top: -5px; left: 250px; [/class] [class=textcontainer] position: relative; padding: 10px; [/class] [class=side_one] position: relative; width: 210px; [/class] [class=side_two] position: relative; margin-top: -310px; margin-left: 220px; white-space: pre-wrap; [/class] [class=box] position: relative; border: solid 1px #BABCBE; background-color: white; height: 150px; [/class] [class=box_info] position: relative; border-bottom: 1px solid #BABCBE; text-align: right; padding: 5px; background-color: #F2F2F2; font-size: 18px; color: #748b74; text-transform: uppercase; font-style: italic; [/class] [class=box_text] padding: 10px; color: grey; font-size: 12px; font-family: 'Arial'; line-height: 16px; [/class] [class=textinformation] margin-top: -5px; margin-left: 10px; font-size: 18px; color: #748b74; [/class] [class=textinformation_two] margin-top: -10px; margin-left: 20px; font-size: 11px; line-height: 16px; color: grey; text-transform: uppercase; [/class] [class=divider_two] position: absolute; width: 210px; line-height: 0; height: 1px; background-color: black; margin-top: 10px; [/class] [class=icon_border] display: inline-block; border: solid 1px #BABCBE; background-color: #F2F2F2; line-height: 0; padding: 12px; margin: auto; margin-top: -90px; margin-left: 15px; height: 100px; width: 100px; [/class] [class=icon_one] background: url('https://i.imgur.com/6mtSQG2.jpg'); background-size: 100%; border: solid 1px #FBFBFB; height: 100px; width: 100px; [/class] [class name=icon_one state=hover] background: url('https://i.imgur.com/iGgtOfx.jpg') no-repeat; background-size: cover; width: 100%; height: 100%; [/class] [script class=background on=click] slideDown 800 cover [/script] [script class=cover on=click] slideUp 800 [/script] [div class=container][div class=background] [div class=banner][div class=banner_text]first middle last [div class=divider][/div][/div][/div] [div class=textcontainer][div class=icon_border][div class=icon_one][/div][/div]
[div class=side_one][div class=textinformation] nickname(s)[/div] [div class=textinformation_two]information here[/div] [div class=divider_two][/div]
[div class=textinformation] age[/div] [div class=textinformation_two]information here[/div] [div class=divider_two][/div]
[div class=textinformation] gender[/div] [div class=textinformation_two]information here[/div] [div class=divider_two][/div]
[div class=textinformation] sexuality[/div] [div class=textinformation_two]information here[/div] [div class=divider_two][/div]
[div class=textinformation] role|clan:[/div] [div class=textinformation_two]information here[/div] [div class=divider_two][/div] [/div] [div class=side_two]
[div class=box][div class=box_info]appearance
[div class=box_text]Hello loves! It's me! I'm back with another code that could match with CLARITY! That said, however, for this character sheet, the 'cover' images are replaceable ! Feel free to change them! The faceclaim icons hover! You're more than welcome to change the colour and the font awesome icons I've littered in this code as well ! All boxes have hidden scroll and the entire right side of the code scrolls! Hair Color: info Eye Color: info Height/Weight: info Distinguishing Features: info Body Mods: info Ailments: info Attire: info Faceclaim: info
[/div]
[div class=box][div class=box_info]personality[/div]
[div class=box_text]
+ info + info + info + info + info
- info - info - info - info - info
โ€ Strengths: info โ€ Weaknesses: info โ€ Likes: info โ€ Dislikes: info โ€ Fears: info
[/div][/div]
[div class=box][div class=box_info]biography[/div]
[div class=box_text] Occupation: info Hometown: info History: info
[/div][/div]
[div class=box][div class=box_info]other[/div]
[div class=box_text] Weapon of Choice: info Theme Song: ( opt ) MBTI type: ( opt ) Enneagram type: ( opt ) Alignment: ( opt ) Other: ( opt ) Relationships: info
[/div][/div] [/div][/div][/div][/div][/div] [div class=cover][div class=background_two][div class=border][div class=main_image][/div] [div class=image_one][/div] [div class=image_two][/div] [div class=image_three][/div][/div][div class=textcontainer_two][div class=header_one]name here[/div] [div class=header_two]role | title[/div][/div][/div][/div][/div]
codedbycrucially | click cover, hover icon, hidden scroll | live preview: xx | pastebin: xx
 
ooooo, so pretty! quick question, is the cover supposed to come back every time I click to get the hidden scrolly bits? or am I just d u m b
 
AnimeGenork AnimeGenork ; okay so I was heckin' debating to "like" or "love" your post but i was also like. . . wait a minute. . . i'm not agreeing with her calling herself "d u m b" NON NON. pfft, anywayss ! thats a very valid and 12/10 question!

so, the wonky thing about the whole hidden scroll is that, you can hover your mouse over the box and then scroll without clicking on the box [ so don't clickety-clack! ] but if you need to, you can click outside the code as well if it'll help !
 
AnimeGenork AnimeGenork ; okay so I was heckin' debating to "like" or "love" your post but i was also like. . . wait a minute. . . i'm not agreeing with her calling herself "d u m b" NON NON. pfft, anywayss ! thats a very valid and 12/10 question!

so, the wonky thing about the whole hidden scroll is that, you can hover your mouse over the box and then scroll without clicking on the box [ so don't clickety-clack! ] but if you need to, you can click outside the code as well if it'll help !

๐Ÿ‘€
*has discovered an as-yet unexplored facet of her touchpad*

W H O A
 

Users who are viewing this thread

Back
Top