• 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 ๐šƒ๐™ท๐™ด ๐™พ๐™ป๐™ณ ๐š‚๐šƒ๐š„๐™ณ๐™ธ๐™พ

๐‡๐˜๐€๐‚๐ˆ๐๐“๐‡
    • name here
    role here
    Hello lovelies! It's been awhile since I've updated this coding thread! That being said, here's a code that I used in my Hocus Pocus roleplay! This section doesn't have a hidden scroll so the word count shouldn't exceed 58 words or the alignment may be a lil' off!

    "Quote here if you'd like!"​
    There is hidden scroll in this section! The picture on the left has a size of 180px width and 120px height! I kept the pictures there just because I really love this faceclaim and I just think it matches the code in general really well! The pastebin raw code will have a placeholder image! I hope you lovelies enjoy this code as much as I had !

    Please note: If you click the pastebin link, it'll take you to the raw code! You can copy the entire code and paste it back on RPN in your private workshop and etc.


    [class=tabs] margin-top: -47px; line-height: 1; position: relative; margin-left: auto; margin-right: auto; margin-bottom: auto; text-align: center; min-width: 100%; [/class] [class=tab] background-color: white; color: black; box-sizing: border-box; border: 1px solid black; cursor: pointer; display: inline-block; padding: 10px 0; width: 30%; font-family: 'Lato'; text-transform: uppercase; [/class] [class name=tab state=hover] cursor: url(https://i.imgur.com/X2LfhKo.png), auto !important; transition: 0.15s;[/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} persona) (show tabsContentVee) if (eq ${currentTab} herstory) (show tabsContentFinally) if (eq ${currentTab} miscellaneous) (show tabsContentDoes) [/script] [div class=tabs][div class=tab style=" margin: auto;"]persona
    [div class=tab style="margin-left: 30px; margin-right: auto; margin-top: auto; margin-right: auto;"]herstory
    [div class=tab style="margin-left: 30px; margin-right: auto; margin-top: auto; margin-right: auto;"]miscellaneous[/div][/div] [div class="tabsContent tabsContentVee"]
    Ah ! Also, if you like the "live preview" version better and would like me to make a raw code for it / send you the code for that specific style, let me know and I can send it to you for sure! The picture on the left is 169px in width and 250px in height!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisi et nunc rutrum porta at vitae lorem. Praesent vulputate ante quis fringilla condimentum. Curabitur laoreet lacinia lectus at viverra. Sed velit dui, porttitor sodales lorem porta, lacinia iaculis ipsum. Quisque quis nisl ut orci aliquet auctor sed nec erat. Ut vitae luctus felis. Cras sollicitudin nisi eu purus aliquet lobortis quis quis tortor. Cras eleifend tortor justo, ut vestibulum ante mollis quis. Cras malesuada quis diam at hendrerit. Aenean sit amet enim lectus. Curabitur arcu tellus, ornare sit amet lectus sed, interdum dictum ipsum. Ut fringilla pretium sem, ornare pulvinar velit volutpat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus sapien, molestie in aliquam id, cursus vitae arcu. Vestibulum sagittis nulla in imperdiet aliquet. Sed eget dui ante.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mattis dolor, ut semper nulla. Etiam malesuada semper odio fringilla volutpat. In hac habitasse platea dictumst. Aliquam erat orci, egestas eget placerat quis, facilisis vitae metus. Aenean feugiat euismod bibendum. Duis quis hendrerit leo. In tempus interdum orci sit amet aliquet. Suspendisse auctor non metus accumsan scelerisque. Praesent egestas, metus a semper mollis, nunc ligula convallis nibh, vitae accumsan massa nibh a enim. Cras venenatis eget quam et consectetur. Proin libero orci, rhoncus a eleifend commodo, pretium quis est. Mauris placerat diam mi, sit amet cursus lorem imperdiet ac.

    Ut rhoncus suscipit velit. Sed semper elementum accumsan. Donec nec erat nec sapien eleifend posuere. Nunc blandit, mauris quis condimentum sollicitudin, ex justo lacinia tellus, sodales commodo eros quam eget felis. Aliquam non neque risus. Integer egestas dapibus metus, nec rhoncus mauris eleifend quis. Mauris dignissim, elit id convallis fermentum, felis ante vestibulum nisi, nec cursus odio mi sed dui. Donec lacinia aliquam semper. Nunc egestas faucibus sapien. Fusce id scelerisque turpis. Vestibulum tortor lectus, fringilla sed commodo id, facilisis a neque.
    [/div] [div class="tabsContent tabsContentFinally" style="display: none;"]
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisi et nunc rutrum porta at vitae lorem. Praesent vulputate ante quis fringilla condimentum. Curabitur laoreet lacinia lectus at viverra. Sed velit dui, porttitor sodales lorem porta, lacinia iaculis ipsum. Quisque quis nisl ut orci aliquet auctor sed nec erat. Ut vitae luctus felis. Cras sollicitudin nisi eu purus aliquet lobortis quis quis tortor. Cras eleifend tortor justo, ut vestibulum ante mollis quis. Cras malesuada quis diam at hendrerit. Aenean sit amet enim lectus. Curabitur arcu tellus, ornare sit amet lectus sed, interdum dictum ipsum. Ut fringilla pretium sem, ornare pulvinar velit volutpat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus sapien, molestie in aliquam id, cursus vitae arcu. Vestibulum sagittis nulla in imperdiet aliquet. Sed eget dui ante.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mattis dolor, ut semper nulla. Etiam malesuada semper odio fringilla volutpat. In hac habitasse platea dictumst. Aliquam erat orci, egestas eget placerat quis, facilisis vitae metus. Aenean feugiat euismod bibendum. Duis quis hendrerit leo. In tempus interdum orci sit amet aliquet. Suspendisse auctor non metus accumsan scelerisque. Praesent egestas, metus a semper mollis, nunc ligula convallis nibh, vitae accumsan massa nibh a enim. Cras venenatis eget quam et consectetur. Proin libero orci, rhoncus a eleifend commodo, pretium quis est. Mauris placerat diam mi, sit amet cursus lorem imperdiet ac.

    Ut rhoncus suscipit velit. Sed semper elementum accumsan. Donec nec erat nec sapien eleifend posuere. Nunc blandit, mauris quis condimentum sollicitudin, ex justo lacinia tellus, sodales commodo eros quam eget felis. Aliquam non neque risus. Integer egestas dapibus metus, nec rhoncus mauris eleifend quis. Mauris dignissim, elit id convallis fermentum, felis ante vestibulum nisi, nec cursus odio mi sed dui. Donec lacinia aliquam semper. Nunc egestas faucibus sapien. Fusce id scelerisque turpis. Vestibulum tortor lectus, fringilla sed commodo id, facilisis a neque.
    [/div] [div class="tabsContent tabsContentDoes" style="display: none;"]
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisi et nunc rutrum porta at vitae lorem. Praesent vulputate ante quis fringilla condimentum. Curabitur laoreet lacinia lectus at viverra. Sed velit dui, porttitor sodales lorem porta, lacinia iaculis ipsum. Quisque quis nisl ut orci aliquet auctor sed nec erat. Ut vitae luctus felis. Cras sollicitudin nisi eu purus aliquet lobortis quis quis tortor. Cras eleifend tortor justo, ut vestibulum ante mollis quis. Cras malesuada quis diam at hendrerit. Aenean sit amet enim lectus. Curabitur arcu tellus, ornare sit amet lectus sed, interdum dictum ipsum. Ut fringilla pretium sem, ornare pulvinar velit volutpat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus sapien, molestie in aliquam id, cursus vitae arcu. Vestibulum sagittis nulla in imperdiet aliquet. Sed eget dui ante.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mattis dolor, ut semper nulla. Etiam malesuada semper odio fringilla volutpat. In hac habitasse platea dictumst. Aliquam erat orci, egestas eget placerat quis, facilisis vitae metus. Aenean feugiat euismod bibendum. Duis quis hendrerit leo. In tempus interdum orci sit amet aliquet. Suspendisse auctor non metus accumsan scelerisque. Praesent egestas, metus a semper mollis, nunc ligula convallis nibh, vitae accumsan massa nibh a enim. Cras venenatis eget quam et consectetur. Proin libero orci, rhoncus a eleifend commodo, pretium quis est. Mauris placerat diam mi, sit amet cursus lorem imperdiet ac.

    Ut rhoncus suscipit velit. Sed semper elementum accumsan. Donec nec erat nec sapien eleifend posuere. Nunc blandit, mauris quis condimentum sollicitudin, ex justo lacinia tellus, sodales commodo eros quam eget felis. Aliquam non neque risus. Integer egestas dapibus metus, nec rhoncus mauris eleifend quis. Mauris dignissim, elit id convallis fermentum, felis ante vestibulum nisi, nec cursus odio mi sed dui. Donec lacinia aliquam semper. Nunc egestas faucibus sapien. Fusce id scelerisque turpis. Vestibulum tortor lectus, fringilla sed commodo id, facilisis a neque.
    [/div][/div][/div]
    codedbycrucially | pastebin: x , version ii | live preview: x​
     
    Last edited:
    • ๐ˆ๐‘๐ˆ๐’
    • [class=background] position: relative; background-color: #f7f7f7; border: 1px solid #EAECE7; max-width: 700px; height: 544px; padding: 18px; cursor: url(https://i.imgur.com/X2LfhKo.png), auto !important; margin: auto; box-shadow: 0 5px 15px rgba(0,0,0,0.3); [/class] [class=backgroundtwo] position: relative; max-width: 450px; background-color: #fcfcfc; border: 1px solid #E2E2E2; height: 552px; margin-left: -6px; margin-top: -5px; [/class] [class=banner] background: url(https://media.giphy.com/media/VboBRThBZr9NXPrtrw/giphy.gif) no-repeat; background-size: cover; height: 150px; border-bottom: 1px solid #F5F5F6; [/class] [class=picture] width: 250px; height: 551px; position: relative; display: inline-block; webkit-filter: grayscale(60%); filter: grayscale(60%); background: url('https://i.imgur.com/sBC3l9l.jpg'); background-size: cover; border: 1px solid #E2E2E2; [/class] [class name=picture state=hover] transition: 0.6s; filter: grayscale(60%); webkit-filter: grayscale(60%); -webkit-transition-timing-function: 0.6s ease-in-out; background: url('https://s3.amazonaws.com/uploads.chicmanagement.com.au/2015/02/EddieNew-AmeliaZadro5.jpg'); background-size: cover; width: 250px; height: 551px; border: 1px solid #E2E2E2; [/class] [class=picturetext] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.1); color: white; z-index: 2; [/class] [class name=picturetext state=hover] opacity: 1; [/class] [class=tabone] position: absolute; display: inline-block; margin: auto; background-color: #505D70; border: 1px solid #F5F5F6; transform: rotate(135deg); width: 30px; height: 30px; margin-left: 205px; margin-top: -47px; [/class] [class=tabtwo] position: absolute; display: inline-block; margin: auto; background-color: #505D70; border: 1px solid #F5F5F6; transform: rotate(135deg); width: 30px; height: 30px; margin-left: 233px; margin-top: -17px; [/class] [class=tabthree] position: absolute; display: inline-block; margin: auto; background-color: #505D70; border: 1px solid #F5F5F6; transform: rotate(135deg); width: 30px; height: 30px; margin-left: 205px; margin-top: 8px [/class] [class=tabfour] position: absolute; display: inline-block; margin: auto; background-color: #505D70; border: 1px solid #F5F5F6; transform: rotate(135deg); width: 30px; height: 30px; margin-left: 178px; margin-top: -17px; [/class] [class=tab] position: absolute; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform 0s ease-in-out; [/class] [class name=activeTab] background-color: #333E4B; [/class] [class name=tab state=hover] transition: .8s; background-color: #333E4B; -webkit-transform: rotate(225deg); transform: rotate(225deg); [/class] [class=textcontainer] font-size: 13px; line-height: 18px; color: #888888; padding: 10px; text-align: justify; [/class] [class=textheader] text-align: center; font-size: 18px; text-transform: uppercase; [/class] [class=textinfo] background-color: #505D70; display: inline-block; padding: 2px; color: white; margin-top: 5px [/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) [/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="tabsContent tabsContentone"]
    [div class=textcontainer][div class=textheader]who is she ?
    โบ [div class=textinfo]Name:
    Hello loves, crucially here! The big photo(s) has a width of 250px and a height of 551px. The banner height is 150px! I wanted to keep the pictures here to give you lovelies an idea of how the code looks with everything together!
    โบ [div class=textinfo]Birthday | Age:[/div]
    โบ [div class=textinfo]Gender:[/div]
    โบ [div class=textinfo]Sexuality:[/div]
    โบ [div class=textinfo]Species:[/div]
    โบ [div class=textinfo]Blood Status:[/div]
    โบ [div class=textinfo]Nationality:[/div]
    โบ [div class=textinfo]Ethnicity:[/div]

    [div class=textheader]quote here[/div] โบ [div class=textinfo]Faceclaim:[/div]
    โบ [div class=textinfo]Height:[/div]
    โบ [div class=textinfo]Eye Color:[/div]
    โบ [div class=textinfo]Hair Color:[/div]
    โบ [div class=textinfo]Body Type:[/div]
    โบ [div class=textinfo]Distinguishing Features:[/div]
    โบ [div class=textinfo]Markings | Body Mods:[/div]     [/div][/div][/div][/div] [div class="tabsContent tabsContenttwo" style="display: none;"]
    [div class=textcontainer][div class=textheader]SHE WALKED IN MOON DUST
    โบ [div class=textinfo]Persona:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis pellentesque ante non gravida. Donec lorem lacus, consequat in vestibulum molestie, dapibus nec est. Cras sollicitudin magna at purus luctus, sed faucibus arcu porta. Fusce viverra rhoncus scelerisque. Ut elementum hendrerit fringilla. Donec sit amet varius orci. Vivamus convallis convallis diam eu rutrum. Pellentesque ullamcorper lacus eget velit porta tempor. Vestibulum finibus mi quis ex rhoncus, sit amet suscipit enim rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Sed eu aliquam purus.

    Sed tincidunt augue metus, ac commodo erat tempus viverra. Nunc id est at dolor mattis tempus in et sem. Mauris auctor elit sit amet massa consectetur semper. Phasellus mollis mi eget lorem gravida, a blandit lorem mattis. Fusce viverra vel nisi et imperdiet. Vestibulum imperdiet magna sed tortor hendrerit, vitae rutrum sem dapibus. Morbi aliquam tempus dictum. Aenean auctor gravida nulla, id dignissim est tristique viverra. Maecenas posuere vel est nec sagittis. Vestibulum cursus tempor purus a aliquet. Suspendisse bibendum accumsan dui eu commodo. Sed dapibus aliquet velit gravida scelerisque.

    [div class=textheader]AND STARS SPRINKLED HER HAIR[/div] โบ [div class=textinfo]Vices:[/div]
    โบ [div class=textinfo]Virtues:[/div]
    โบ [div class=textinfo]Habits:[/div]
    โบ [div class=textinfo]Quirks:[/div]
    โบ [div class=textinfo]Likes:[/div]
    โบ [div class=textinfo]Dislikes:[/div]
    โบ [div class=textinfo]Strengths:[/div]
    โบ [div class=textinfo]Weaknesses:[/div]
    โบ [div class=textinfo]Hobbies:[/div]
    โบ [div class=textinfo]Talents:[/div]     [/div][/div][/div][/div] [div class="tabsContent tabsContentthree" style="display: none;"]
    [div class=textcontainer][div class=textheader]OF COURSE, I FEEL TOO MUCH
    โบ [div class=textinfo]History:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis pellentesque ante non gravida. Donec lorem lacus, consequat in vestibulum molestie, dapibus nec est. Cras sollicitudin magna at purus luctus, sed faucibus arcu porta. Fusce viverra rhoncus scelerisque. Ut elementum hendrerit fringilla. Donec sit amet varius orci. Vivamus convallis convallis diam eu rutrum. Pellentesque ullamcorper lacus eget velit porta tempor. Vestibulum finibus mi quis ex rhoncus, sit amet suscipit enim rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Sed eu aliquam purus.

    Sed tincidunt augue metus, ac commodo erat tempus viverra. Nunc id est at dolor mattis tempus in et sem. Mauris auctor elit sit amet massa consectetur semper. Phasellus mollis mi eget lorem gravida, a blandit lorem mattis. Fusce viverra vel nisi et imperdiet. Vestibulum imperdiet magna sed tortor hendrerit, vitae rutrum sem dapibus. Morbi aliquam tempus dictum. Aenean auctor gravida nulla, id dignissim est tristique viverra. Maecenas posuere vel est nec sagittis. Vestibulum cursus tempor purus a aliquet. Suspendisse bibendum accumsan dui eu commodo. Sed dapibus aliquet velit gravida scelerisque.

    [div class=textheader]I AM A UNIVERSE OF EXPLODING STARS[/div] โบ [div class=textinfo]Parents:[/div]
    โบ [div class=textinfo]Siblings:[/div]
    โบ [div class=textinfo]Famous Relatives:[/div]
    โบ [div class=textinfo]Family Line of Work:[/div]
    โบ [div class=textinfo]Home Town:[/div]     [/div][/div][/div][/div] [div class="tabsContent tabsContentfour" style="display: none;"]
    [div class=textcontainer][div class=textheader]quote here
    โบ [div class=textinfo]Other

    [/div][/div][/div][/div]
    [div class=picture] [div class=picturetext]
    โ› quote here โœ
    [/div][/div][/div][/div]
    codedbycrucially | hover photo and click diamonds | pastebin: x | live preview: x, xx​
     
    Last edited:
    • ๐‡๐„๐€๐ƒ๐€๐‚๐‡๐„
    • [class=background] max-width: 750px; height: 514px; background: url('http://www.designbolts.com/wp-content/uploads/2012/12/simple-pattern-white-seamless-website-background.jpg'); margin: auto; border: 1px dashed grey; padding: 25px; cursor: url(https://i.imgur.com/X2LfhKo.png), auto !important; [/class] [class=tabone] display: inline-block; background: url(https://66.media.tumblr.com/5803aff01fa009df613c6d1c6bb94ff2/tumblr_phqyliSIA91t7hjuv_640.png); border: 1px solid lightgrey; width: 120px; height: 120px; background-size: 100%; [/class] [class=tabtwo] display: inline-block; border: 1px solid lightgrey; width: 120px; height: 120px; background: url(https://66.media.tumblr.com/e8ffebf7cf9001b52e7f01a75beb42c5/tumblr_p8vzfs242f1wn5egto1_400.jpg); background-size: 100%; margin-top: 128px; [/class] [class=tabthree] display: inline-block; border: 1px solid lightgrey; width: 120px; height: 120px; background: url(https://i.pinimg.com/736x/70/53/55/705355fddc290157b871a4f61c0582a3.jpg); background-size: 100%; margin-top: 257px; [/class] [class=tabfour] display: inline-block; border: 1px solid lightgrey; width: 120px; height: 120px; background: url(https://66.media.tumblr.com/2361d972f3c0e4b27673de59e75f71a8/tumblr_pgdrogQ77C1vhmz26_1280.jpg); background-size: 100%; margin-top: 386px; [/class] [class=tabinfo] max-width: 625px; border: 1px solid lightgrey; margin-left: 130px; background-color: white; height: 506px; [/class] [class=tab] position: absolute; [/class] [class name=tab state=hover] transition-duration: 0.3s; background-color: rgba(105, 105, 105, 0.2); [/class] [class=picturetext] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(105, 105, 105, 0.2); color: white; font-size: 15px; [/class] [class name=picturetext state=hover] opacity: 1; [/class] [class=picturetexttwo] text-align: center; margin-top: 10px; text-transform: uppercase; [/class] [class=textbackground] background-color: #B08587; display: inline-block; padding: 2px; color: white; margin-top: 5px; [/class] [class=textcontainter] padding: 10px; font-size: 13px; line-height: 18px; color: #202020; text-align: justify; [/class] [class=header] font-weight: bold; font-size: 30px; text-transform: uppercase; color: grey; [/class] [class=header_two] font-weight: bold; font-size: 30px; text-transform: uppercase; text-align: right; color: grey; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} basic) (show tabsContentBasics) if (eq ${currentTab} persona) (show tabsContentPersona) if (eq ${currentTab} background) (show tabsContentBackground) if (eq ${currentTab} other) (show tabsContentOther) [/script] [div class=background] [div class="tab tabone"][div class=picturetext][div class=picturetexttwo]

    basic    [/div][/div][/div] [div class="tab tabtwo"][div class=picturetext][div class=picturetexttwo]

    persona    [/div][/div][/div] [div class="tab tabthree"][div class=picturetext][div class=picturetexttwo]

    background    [/div][/div][/div] [div class="tab tabfour"][div class=picturetext][div class=picturetexttwo]

    other    [/div][/div][/div] [div class="tabsContent tabsContentBasics"][div class=tabinfo]
    [div class=textcontainter][div class=header]โ€” basic information;

    [div class=textbackground]name:
    hello loves! i kept the pictures in this template just to show how the whole code looks like overall! all the images are tabs and their width and height is 120x120! if you donโ€™t want to use a background image, you can remove โ€œbackground: urlโ€ and replace it with โ€œbackground-colorโ€!
    [div class=textbackground]nickname:[/div]
    [div class=textbackground]age:[/div]
    [div class=textbackground]date of birth:[/div]
    [div class=textbackground]zodiac:[/div]
    [div class=textbackground]gender:[/div]
    [div class=textbackground]sexuality:[/div]
    [div class=textbackground]domain:[/div]

    [div class=header]โ€” appearance;[/div]
    [div class=textbackground]faceclaim[/div]
    [div class=textbackground]hair:[/div]
    [div class=textbackground]eyes:[/div]
    [div class=textbackground]height[/div]
    [div class=textbackground]weight:[/div]
    [div class=textbackground]distinguishing feature:[/div]
    [div class=textbackground]tattoos | markings:[/div]
    [div class=textbackground]clothing:[/div]     [/div][/div][/div][/div][/div] [div class="tabsContent tabsContentPersona" style="display: none;"][div class=tabinfo]
    [div class=textcontainter][div class=header]โ› what doesn't kill me

    [div class=textbackground]virtues:

    [div class=textbackground]vices:[/div]
    [div class=textbackground]likes:[/div]
    [div class=textbackground]dislikes:[/div]

    [div class=header_two]makes me stronger โœ[/div]
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum sapien a ipsum elementum finibus. Aenean dictum ut sapien et pellentesque. Suspendisse tempor vehicula turpis, at sagittis ligula tincidunt ut. Curabitur orci enim, auctor vel pharetra in, consectetur ac arcu. Nulla eleifend, elit et tempus ultricies, odio libero faucibus ipsum, nec tempor leo orci eu nisi. Vivamus tellus massa, congue in egestas vel, euismod id sapien. Nam ac gravida justo, at laoreet eros. Donec tristique velit turpis, quis condimentum erat tristique et. Integer eu tincidunt tortor. Pellentesque placerat auctor neque sit amet malesuada. Suspendisse vel tellus erat. Nam dapibus aliquet ligula eu fringilla. Ut sit amet luctus elit. Ut efficitur sapien sed dolor cursus congue.

    Cras hendrerit dapibus convallis. Maecenas a sollicitudin urna. Integer ac molestie odio. Nunc ut risus tellus. Phasellus vitae mattis arcu, vel mattis diam. Proin consequat porttitor viverra. Suspendisse potenti. Duis sodales velit velit, id tempus nunc sollicitudin ac. In tincidunt nec risus at gravida. Morbi nec justo quis est volutpat elementum. Aliquam vitae mollis lectus. Quisque auctor tortor ut mi scelerisque venenatis. Suspendisse accumsan ipsum eget diam malesuada, sed tempus turpis ornare.    [/div][/div][/div][/div][/div] [div class="tabsContent tabsContentBackground" style="display: none;"][div class=tabinfo]
    [div class=textcontainter][div class=header]โ› it's not my fault

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum sapien a ipsum elementum finibus. Aenean dictum ut sapien et pellentesque. Suspendisse tempor vehicula turpis, at sagittis ligula tincidunt ut. Curabitur orci enim, auctor vel pharetra in, consectetur ac arcu. Nulla eleifend, elit et tempus ultricies, odio libero faucibus ipsum, nec tempor leo orci eu nisi. Vivamus tellus massa, congue in egestas vel, euismod id sapien. Nam ac gravida justo, at laoreet eros. Donec tristique velit turpis, quis condimentum erat tristique et. Integer eu tincidunt tortor. Pellentesque placerat auctor neque sit amet malesuada. Suspendisse vel tellus erat. Nam dapibus aliquet ligula eu fringilla. Ut sit amet luctus elit. Ut efficitur sapien sed dolor cursus congue.

    Cras hendrerit dapibus convallis. Maecenas a sollicitudin urna. Integer ac molestie odio. Nunc ut risus tellus. Phasellus vitae mattis arcu, vel mattis diam. Proin consequat porttitor viverra. Suspendisse potenti. Duis sodales velit velit, id tempus nunc sollicitudin ac. In tincidunt nec risus at gravida. Morbi nec justo quis est volutpat elementum. Aliquam vitae mollis lectus. Quisque auctor tortor ut mi scelerisque venenatis. Suspendisse accumsan ipsum eget diam malesuada, sed tempus turpis ornare.
    [/div][/div][/div][/div] [div class="tabsContent tabsContentOther" style="display: none;"][div class=tabinfo]
    [div class=textcontainter][div class=header]i have my father's eyes โœ

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum sapien a ipsum elementum finibus. Aenean dictum ut sapien et pellentesque. Suspendisse tempor vehicula turpis, at sagittis ligula tincidunt ut. Curabitur orci enim, auctor vel pharetra in, consectetur ac arcu. Nulla eleifend, elit et tempus ultricies, odio libero faucibus ipsum, nec tempor leo orci eu nisi. Vivamus tellus massa, congue in egestas vel, euismod id sapien. Nam ac gravida justo, at laoreet eros. Donec tristique velit turpis, quis condimentum erat tristique et. Integer eu tincidunt tortor. Pellentesque placerat auctor neque sit amet malesuada. Suspendisse vel tellus erat. Nam dapibus aliquet ligula eu fringilla. Ut sit amet luctus elit. Ut efficitur sapien sed dolor cursus congue.

    Cras hendrerit dapibus convallis. Maecenas a sollicitudin urna. Integer ac molestie odio. Nunc ut risus tellus. Phasellus vitae mattis arcu, vel mattis diam. Proin consequat porttitor viverra. Suspendisse potenti. Duis sodales velit velit, id tempus nunc sollicitudin ac. In tincidunt nec risus at gravida. Morbi nec justo quis est volutpat elementum. Aliquam vitae mollis lectus. Quisque auctor tortor ut mi scelerisque venenatis. Suspendisse accumsan ipsum eget diam malesuada, sed tempus turpis ornare.
    [/div][/div][/div][/div][/div]
    codedbycrucially | click on picture [ tabs ] | hidden scroll | pastebin: x | live preview: x , xx​
     
    Last edited:
    • ๐“๐„๐Œ๐๐„๐’๐“
    • [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​
     
    • ๐’๐ˆ๐‘๐„๐
    • [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 ​
     
    • ๐๐Ž๐ˆ๐’๐Ž๐
    • [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​
     
    • ๐ˆ๐•๐˜
    • [class=container] width: 560px; position: relative; margin: auto; cursor: url(http://cur.cursors-4u.net/user/images1/use128.png), 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: #556344; width: 110px; height: 416px; padding: 20px; [/class] [class=main_image] position: relative; background: url('https://i.imgur.com/VsDi4YH.jpg'); width: 180px; height: 304px; border: 8px solid #697D58; margin-left: 30px; margin-top: 45px; [/class] [class=image_one] position: relative; background: url('https://i.imgur.com/5OcwEu2.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/zL3C6nJ.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.pinimg.com/564x/23/71/a6/2371a6da77d340aa387bedf1bb375bed.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: #556344; [/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: 320px; [/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/zHdHroE.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/mVu2zgG.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] location[/div] [div class=textinformation_two]information here[/div] [div class=divider_two][/div]
    [div class=textinformation] scenario[/div] [div class=textinformation_two]information here[/div] [div class=divider_two][/div]
    [div class=textinformation]with[/div] [div class=textinformation_two]information here[/div] [div class=divider_two][/div]
    [div class=textinformation]mentions[/div] [div class=textinformation_two]information here[/div] [div class=divider_two][/div]
    [div class=textinformation] outfit | mood[/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]in character[/div]
    [div class=box_text]Hello loves! All the credit and thank you to both apolla apolla and jasmyn jasmyn for their idea and question! Since an in-character was asked for, I decided to make the code into one suited for writing purposes as well! What is POISON without IVY? Here's the in character code that matches the character sheet! At tempor commodo ullamcorper a lacus vestibulum sed arcu non. Egestas maecenas pharetra convallis posuere morbi leo urna molestie. Aenean sed adipiscing diam donec. Tincidunt eget nullam non nisi est sit amet. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Urna neque viverra justo nec ultrices dui sapien eget. A scelerisque purus semper eget duis at tellus at urna. Vestibulum sed arcu non odio. Euismod nisi porta lorem mollis. Urna et pharetra pharetra massa massa ultricies mi quis. Sed arcu non odio euismod lacinia. Quam quisque id diam vel quam elementum pulvinar etiam. Mattis enim ut tellus elementum sagittis vitae et leo. Ac odio tempor orci dapibus ultrices. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Orci phasellus egestas tellus rutrum tellus pellentesque. Pulvinar mattis nunc sed blandit libero. Aliquet risus feugiat in ante metus. Et tortor at risus viverra adipiscing at in. Pellentesque habitant morbi tristique senectus et. Risus feugiat in ante metus dictum at tempor commodo ullamcorper. Malesuada fames ac turpis egestas maecenas. Quam nulla porttitor massa id. Sed enim ut sem viverra aliquet eget sit amet tellus. Scelerisque in dictum non consectetur a erat. Ultricies integer quis auctor elit. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Ac felis donec et odio pellentesque diam volutpat. Quisque id diam vel quam elementum pulvinar etiam. Orci porta non pulvinar neque. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Risus feugiat in ante metus dictum. Nulla facilisi morbi tempus iaculis urna id volutpat. Tortor at risus viverra adipiscing at in. Et sollicitudin ac orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce id velit. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Accumsan tortor posuere ac ut consequat. Bibendum ut tristique et egestas quis ipsum. Rhoncus dolor purus non enim praesent. Nec feugiat nisl pretium fusce id velit. Blandit cursus risus at ultrices mi tempus imperdiet nulla. Metus aliquam eleifend mi in nulla posuere sollicitudin. Nullam ac tortor vitae purus. Fringilla urna porttitor rhoncus dolor purus. Nisi lacus sed viverra tellus in hac. Accumsan tortor posuere ac ut consequat semper viverra nam. Nunc aliquet bibendum enim facilisis gravida neque. Cursus risus at ultrices mi tempus imperdiet. Ac orci phasellus egestas tellus rutrum tellus. Auctor eu augue ut lectus arcu bibendum at. Facilisis mauris sit amet massa vitae tortor. Id diam vel quam elementum pulvinar etiam non. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Turpis egestas pretium aenean pharetra. Quis auctor elit sed vulputate mi sit amet mauris commodo. Vel fringilla est ullamcorper eget. In cursus turpis massa tincidunt dui ut ornare. Eget duis at tellus at urna.
    [/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 | pastebin: xx​
     
    • You must log in or register to reply here.
    Back
    Top