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

    Remember to credit artists when using work not your own.

Closed โœฎ ๐Ÿ๐š๐ญ๐ž๐'๐ฌ ๐œ๐จ๐๐ข๐ง๐  ๐ก๐ข๐๐ž๐จ๐ฎ๐ญ.

fated

๐—ผ๐—ป๐—น๐˜† ๐˜‚๐˜€
[nobr]
[class=bkg]
width: 300px;
height: 440px;
margin: auto;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
[/class]
[class=back]
width: 300px;
height: 400px;
background: #f5f5f5;
border: 1px solid #cfcfcf;
position: relative;
overflow: hidden;
[/class]
[class=semi]
height: 300px;
width: 350px;
background: #e0baaf;
border-radius: 100%;
position: relative;
top: -200px;
left: -25px;
line-height: 16px;
[/class]
[class=tab]
background: #f5f5f5;
border: 1px solid #cfcfcf;
border-radius: 14px;
height: 29px;
width: 45px;
color: #e0baaf;
text-align: center;
text-size: 11px;
line-height: 8px;
transition: 0.5s all;
cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
[/class]
[class=tabflex]
height: 30px;
width: 302px;
position: relative;
top: 5px;
display: flex;
justify-content: space-evenly;
[/class]
[class=content]
height: 280px;
width: 275px;
position: relative;
left: 20px;
top: -190px;
overflow: hidden;
font-size: 11px;
color: #454545;
font-family: Inter;
text-align: justify;
opacity: 0;
transition: 0.5s all;
[/class]
[class=header]
font-family: Abril Fatface;
color: #e0baaf;
font-size: 16px;
text-transform: lowercase;
text-align: center;
position: sticky;
top: 0px;
width: 100%;
height: max-content;
background: #f5f5f5;
[/class]
[class=scroll]
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
height: 100%;
padding-right: 25px;
[/class]
[class=tag]
width: max-content;
height: max-content;
background: #e0baaf;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
text-transform: uppercase;
font-family: Inter;
font-size: 11px;
color: white;
display: inline;
line-height: 20px;
[/class]
[class=ntag]
font-size: 14px;
font-family: Abril Fatface;
color: #e0baaf;
display: inline;
[/class]
[class=tselect]
background: #e0baaf;
color: white;
[/class]
[class=select]
opacity: 1;
z-index: 5;
[/class]

[class name=tab1 state=hover]
border: 1px solid #e0baaf;
[/class]

[class name=tab2 state=hover]
border: 1px solid #e0baaf;
[/class]

[class name=tab3 state=hover]
border: 1px solid #e0baaf;
[/class]

[class name=tab4 state=hover]
border: 1px solid #e0baaf;
[/class]

[class name=tab5 state=hover]
border: 1px solid #e0baaf;
[/class]

[script class=tab1 on=click]
addClass select content1
removeClass select content2
removeClass select content3
removeClass select content4
removeClass select content5
addClass tselect tab1
removeClass tselect tab2
removeClass tselect tab3
removeClass tselect tab4
removeClass tselect tab5
[/script]

[script class=tab2 on=click]
addClass select content2
removeClass select content1
removeClass select content3
removeClass select content4
removeClass select content5
addClass tselect tab2
removeClass tselect tab1
removeClass tselect tab3
removeClass tselect tab4
removeClass tselect tab5
[/script]

[script class=tab3 on=click]
addClass select content3
removeClass select content1
removeClass select content2
removeClass select content4
removeClass select content5
addClass tselect tab3
removeClass tselect tab2
removeClass tselect tab1
removeClass tselect tab4
removeClass tselect tab5
[/script]

[script class=tab4 on=click]
addClass select content4
removeClass select content1
removeClass select content2
removeClass select content3
removeClass select content5
addClass tselect tab4
removeClass tselect tab2
removeClass tselect tab3
removeClass tselect tab1
removeClass tselect tab5
[/script]

[script class=tab5 on=click]
addClass select content5
removeClass select content1
removeClass select content2
removeClass select content3
removeClass select content4
addClass tselect tab5
removeClass tselect tab2
removeClass tselect tab3
removeClass tselect tab4
removeClass tselect tab1
[/script]

[div class=bkg]
[div class=back]

[div class=semi][div=font-family: Abril Fatface; color: white; font-size: 20px; text-transform: uppercase; position: relative; top: 230px; text-align: center;]fated's[br][/br]coding hideout[/div][/div]

[div class="content content1 select"][div class=scroll]
[div class=header]hello![/div]
hello everyone! i'm fated, and i've decided to open my second coding workshop recently. i feel that my style has changed a bit, so i thought it'd be nice to get a fresh canvas and hopefully keep things a little more organized. all codes here are free to use as long as my credit stays intact. you can of course changes colors, images, and layouts if you'd like, and you can do that through the class at the beginning of each code. if you ever have any issues with my codes, need help, or have a question, feel free to shoot me a pm and i'd be more than glad to help! sadly, most of my codes aren't mobile friendly, but i'll make sure to add a note if it is.

[/div][/div]

[div class="content content2" style="top: -470px;"][div class=scroll]
[div class=header]rules[/div]
my rules are pretty simple, but i really would appreciate if you could just give them a quick read and abide by them. [br][/br][br][/br]

[div class=tag]rule 01[/div] first and foremost, please keep my credit for all of my codes that you may use. this includes not shifting the color, opacity, or moving it so it can't be seen! [br][/br]
[div class=tag]rule 02[/div] that being said, all my codes are free to use. [br][/br]
[div class=tag]rule 03[/div] if you use my codes and find an issue with them or break them, i'd be more than happy to help you out! just shoot me a pm and i'll see what i can do. [br][/br]
[div class=tag]rule 04[/div] i'm currently not accepting requests, so i'd appreciate if you didn't ask for them. [br][/br]
[div class=tag]rule 05[/div] if you'd like to leave a comment or note on this thread, please feel free! i'd be more than happy to hear your feedback. [br][/br]
[div class=tag]rule 06[/div] you are, of course, allowed to change whatever you'd like in my codes, including images, colors, and mild format changes! however, i am not ok with anyone plagiarizing parts of my code or using them as a base.

[/div][/div]

[div class="content content3" style="top: -750px; text-align: center; font-size: 12px;"][div class=scroll]
[div class=header]character sheets[/div]

[div class=ntag]01.[/div] [div=display: inline;]pennant[/div][br][/br]

[div class=ntag]02.[/div] [div=display: inline;]annex[/div][br][/br]

[div class=ntag]03.[/div] [div=display: inline;]bubbles[/div]

[/div][/div]

[div class="content content4" style="top: -1030px; text-align: center; font-size: 12px;"][div class=scroll]
[div class=header]posting templates[/div]

[div class=ntag]01.[/div] riverside [br][/br]

[div class=ntag]02.[/div] limelight

[/div][/div]

[div class="content content5" style="top: -1310px; text-align: center; font-size: 12px;"][div class=scroll]
[div class=header]miscellaneous codes[/div]

[div class=ntag]01.[/div] [div=display: inline;]pennant[/div][br][/br]

[div class=ntag]02.[/div] [div=display: inline;]annex[/div][br][/br]

[div class=ntag]03.[/div] [div=display: inline;]bubbles[/div]

[/div][/div]
[/div]
[div class=tabflex][div class="tab tab1 tselect"][br][/br][/div][div class="tab tab2"][br][/br][/div][div class="tab tab3"][br][/br][/div][div class="tab tab4"][br][/br][/div][div class="tab tab5"][br][/br][/div][/div]
[/div]

[/nobr]
 
Last edited:

fated

๐—ผ๐—ป๐—น๐˜† ๐˜‚๐˜€
[nobr]
[class=bkgg]
width: 550px;
height: 250px;
background: #f5f5f5;
border: 1px solid #cfcfcf;
position: relative;
margin: auto;
overflow: hidden;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
[/class]
[class=circc]
width: 250px;
height: 300px;
border-radius: 100%;
background: #e0baaf;
position: relative;
left: -100px;
top: -25px;
[/class]
[class=headerr]
position: relative;
font-size: 25px;
width: max-content;
height: max-content;
text-transform: uppercase;
font-family: Abril Fatface;
color: white;
transform: rotate(-90deg);
left: 70px;
top: 130px;
[/class]
[class=contentt]
width: 270px;
height: 230px;
position: relative;
top: -290px;
left: 180px;
font-size: 12px;
color: black;
font-family: Inter;
overflow: hidden;
[/class]
[class=flexx]
width: 70px;
height: 230px;
position: relative;
top: -520px;
left: 460px;
display: flex;
justify-content: space-evenly;
flex-direction: column;
[/class]
[class=tcabb]
height: 100px;
width: 70px;
background: #f5f5f5;
border: 1px solid #cfcfcf;
border-radius: 15px;
color: #e0baaf;
font-size: 25px;
line-height: 35px;
text-align: center;
transition: 1s all;
[/class]
[class=scrolll]
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
height: 100%;
padding-right: 17px;
text-align: justify;
[/class]

[class name=tabba1 state=hover]
background: #e0baaf;
border: 1px solid #e0baaf;
[/class]

[class name=tabba2 state=hover]
background: #e0baaf;
border: 1px solid #e0baaf;
[/class]

[div class=bkgg]
[div class=circc][div class=headerr]pennant[/div][/div]
[div class=contentt][div class=scrolll]ah, it's my first code! this is a (somewhat) old character sheet of mine, but i figured i'd put it up here anyways. you all can see a live preview here! it's a pretty simple design, but i like the little tab hover, and you can click the header to return to the image. i ended up designing a placeholder to go with it afterwards, so feel free to use that too! the placeholder has an image filter to reduce the brightness to make it a little more cohesive, but you can remove it by deleting the 'filter' line. as always, both of these are free to use, so long as you don't remove my credit. [/div][/div]
[div class=flexx][div class="tcabb tabba1"][br][/br][/div][div class="tcabb tabba2"][br][/br][/div][/div]
[/div]
[/nobr]

[nobr]

[class=variables]
--accent: #e0baaf;
--image: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
[/class]

[div class=variables]
[div class=bkg]

[div class=header]header here[/div]

[div class=img]

[div class="cont cont1"] [div class=scroll]

[div class=tag]here[/div] here [br][/br]
[div class=tag]here[/div] here [br][/br]
[div class=tag]here[/div] here [br][/br]
[div class=tag]here[/div] here [br][/br]

[/div] [/div]

[div class="cont cont2" style="top: -195px;"] [div class=scroll]

[div class=tag]here[/div] here [br][/br]
[div class=tag]here[/div] here [br][/br]
[div class=tag]here[/div] here [br][/br][br][/br]

[div class=tag]here[/div] here [br][/br]
[div class=tag]here[/div] here [br][/br]
[div class=tag]here[/div] here [br][/br]

[/div] [/div]

[div class="cont cont3" style="top: -390px;"] [div class=scroll]

[div class=tag]here[/div] here [br][/br]
[div class=tag]here[/div] here [br][/br][br][/br]

[div class=tag]here[/div] here [br][/br]
[div class=tag]here[/div] here [br][/br]

[/div] [/div]

[div class="cont cont4" style="top: -585px;"] [div class=scroll]

[div class=tag]here[/div] here [br][/br][br][/br]

[div class=tag]here[/div] here [br][/br]
[div class=tag]here[/div] here [br][/br]

[/div] [/div]

[/div]



[div class=flexbox]

[div class=tab1] [div class=taba][/div] [div=position: relative; top: -21px;][/div] [/div]
[div class=tab2] [div class=tabb][/div] [div=position: relative; top: -21px;][/div] [/div]
[div class=tab3] [div class=tabc][/div] [div=position: relative; top: -21px;] [/div] [/div]
[div class=tab4] [div class=tabd][/div] [div=position: relative; top: -21px;] [/div] [/div]

[/div]

[/div]
[/div]





[class=bkg]
height: 450px;
width: 300px;
clip-path: polygon(50% 0, 100% 0, 100% 67%, 50% 100%, 0 67%, 0 0);
background: #ededed;
margin: auto;
position: relative;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
[/class]
[class=img]
width: 240px;
height: 195px;
position: relative;
left: 30px;
top: 30px;
background: var(--image);
background-size: cover;
background-position: center center;
overflow: hidden;
[/class]
[class=header]
width: 240px;
height: 25px;
position: relative;
left: 30px;
top: 20px;
color: #454545;
letter-spacing: 1px;
font-family: Abril Fatface;
text-transform: uppercase;
text-align: center;
padding-top: 1px;
padding-bottom: 10px;
background: #fafafa;
border: 0.01em solid #454545;
font-size: 20px;
cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
transition: 0.5s;
[/class]


[class=flexbox]
width: 240px;
height: 30px;
position: relative;
left: 30px;
display: flex;
justify-content: space-around;
top: 40px;
[/class]


[class=taba]
height: 18px;
width: 18.5px;
position: relative;
top: 49px;
background: var(--accent);
border: 1px solid #fafafa;
left: -0.5em;
font-size: 1px;
border-radius: 100%;
[/class]
[class=tabb]
height: 18px;
width: 18.5px;
position: relative;
top: 49px;
background: var(--accent);
border: 1px solid #fafafa;
left: -0.5em;
font-size: 1px;
border-radius: 100%;
[/class]
[class=tabc]
height: 18px;
width: 18.5px;
position: relative;
top: 49px;
background: var(--accent);
border: 1px solid #fafafa;
left: -0.5em;
font-size: 1px;
border-radius: 100%;
[/class]
[class=tabd]
height: 18px;
width: 18.5px;
position: relative;
top: 49px;
background: var(--accent);
border: 1px solid #fafafa;
left: -0.5em;
font-size: 1px;
border-radius: 100%;
[/class]
[class=tab1]
height: 20px;
width: 20px;
border-radius: 100%;
border: 1px solid #454545;
background: #fafafa;
font-size: 12px;
color: #454545;
text-align: center;
overflow: hidden;
cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
[/class]
[class=tab2]
height: 20px;
width: 20px;
border-radius: 100%;
border: 1px solid #454545;
background: #fafafa;
font-size: 12px;
color: #454545;
text-align: center;
overflow: hidden;
cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
[/class]
[class=tab3]
height: 20px;
width: 20px;
border-radius: 100%;
border: 1px solid #454545;
background: #fafafa;
font-size: 12px;
color: #454545;
text-align: center;
overflow: hidden;
cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
[/class]
[class=tab4]
height: 20px;
width: 20px;
border-radius: 100%;
border: 1px solid #454545;
background: #fafafa;
font-size: 12px;
color: #454545;
text-align: center;
overflow: hidden;
cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
[/class]


[class=cont]
width: 240px;
height: 195px;
position: relative;
background: #e2e2e2;
font-family: Inter;
font-size: 11px;
opacity: 0;
transition: all 0.5s;
color: black;
z-index: 5;
[/class]
[class=tag]
width: max-content;
height: max-content;
background: var(--accent);
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
text-transform: uppercase;
font-family: Inter;
font-size: 11px;
color: black;
display: inline;
line-height: 20px;
[/class]
[class=scroll]
height: 100%;
width: 100%;
overflow: scroll;
padding: 10px;
padding-right: 20px;
[/class]


[class=select]
opacity: 1;
transition: all 0.5s;
z-index: 10;
[/class]
[class=remove]
background: #e2e2e2;
transition: 3s;
[/class]


[class=up]
top: 0.15px;
transition: all 1s;
[/class]
[class=down]
top: 50px;
transition: all 1s;
[/class]


[script class=tab1 on=mouseenter]
addClass up taba
removeClass down taba
[/script]

[script class=tab1 on=mouseleave]
removeClass up taba
addClass down taba
[/script]


[script class=tab2 on=mouseenter]
addClass up tabb
removeClass down tabb
[/script]

[script class=tab2 on=mouseleave]
removeClass up tabb
addClass down tabb
[/script]


[script class=tab3 on=mouseenter]
addClass up tabc
removeClass down tabc
[/script]

[script class=tab3 on=mouseleave]
removeClass up tabc
addClass down tabc
[/script]


[script class=tab4 on=mouseenter]
addClass up tabd
removeClass down tabd
[/script]

[script class=tab4 on=mouseleave]
removeClass up tabd
addClass down tabd
[/script]


[class name=header state=hover]
background: var(--accent);
[/class]


[script class=tab1 on=click]
addClass select cont1
removeClass select cont2
removeClass select cont3
removeClass select cont4
addClass remove img
[/script]
[script class=tab2 on=click]
addClass select cont2
removeClass select cont1
removeClass select cont3
removeClass select cont4
addClass remove img
[/script]
[script class=tab3 on=click]
addClass select cont3
removeClass select cont1
removeClass select cont2
removeClass select cont4
addClass remove img
[/script]
[script class=tab4 on=click]
addClass select cont4
removeClass select cont1
removeClass select cont3
removeClass select cont2
addClass remove img
[/script]
[script class=header on=click]
removeClass select cont1
removeClass select cont2
removeClass select cont3
removeClass select cont4
removeClass remove img
[/script]


[/nobr]

[nobr]

[class=variables]
--image: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
[/class]

[div class=variables]
[div class=background]

[div class=text]the [br][/br]role name here[br][/br]character name. fc: fc name [/div]
[div class=imageborder][div class=image style="background-size: cover;"][/div][/div]
[/div][/div]

[class=background]
height: 203px;
width: 400px;
margin: auto;
[/class]
[class=imageborder]
height: 202px;
width: 173px;
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
background: #a6a6a6;
position: relative;
left: 170px;
top: -45px;
[/class]
[class=image]
height: 198px;
width: 168px;
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
background: var(--image);
background-size: cover;
filter: brightness(85%);
position: relative;
left: 3px;
top: 2px;
[/class]
[class=text]
font-family: Abril Fatface;
text-transform: uppercase;
font-size: 18px;
z-index: 10;
position: relative;
top: 85px;
line-height: 15px;
[/class]

[/nobr]
 
Last edited:

fated

๐—ผ๐—ป๐—น๐˜† ๐˜‚๐˜€
[nobr]
[class=bkgg]
width: 550px;
height: 250px;
background: #f5f5f5;
border: 1px solid #cfcfcf;
position: relative;
margin: auto;
overflow: hidden;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
[/class]
[class=circc]
width: 250px;
height: 300px;
border-radius: 100%;
background: #e0baaf;
position: relative;
left: -100px;
top: -25px;
[/class]
[class=headerr]
position: relative;
font-size: 25px;
width: max-content;
height: max-content;
text-transform: uppercase;
font-family: Abril Fatface;
color: white;
transform: rotate(-90deg);
left: 60px;
top: 130px;
[/class]
[class=contentt]
width: 270px;
height: 230px;
position: relative;
top: -290px;
left: 180px;
font-size: 12px;
color: black;
font-family: Inter;
overflow: hidden;
[/class]
[class=flexx]
width: 70px;
height: 230px;
position: relative;
top: -520px;
left: 460px;
display: flex;
justify-content: space-evenly;
flex-direction: column;
[/class]
[class=tcabb]
height: 100px;
width: 70px;
background: #f5f5f5;
border: 1px solid #cfcfcf;
border-radius: 15px;
color: #e0baaf;
font-size: 25px;
line-height: 35px;
text-align: center;
transition: 1s all;
[/class]
[class=scrolll]
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
height: 100%;
padding-right: 17px;
text-align: justify;
[/class]

[class name=tabba1 state=hover]
background: #e0baaf;
border: 1px solid #e0baaf;
[/class]

[class name=tabba2 state=hover]
background: #e0baaf;
border: 1px solid #e0baaf;
[/class]

[div class=bkgg]
[div class=circc][div class=headerr]riverside[/div][/div]
[div class=contentt][div class=scrolll]hey everyone! this is my first posting template, and i gotta say i'm proud of it! i actually made it for my friend baird baird ( who is amazing and deserves nothing but love and has a MASSIVE brain ) for their absolutely amazing rp! this one is pretty simple, but the image positioning usually needs to be tweaked and if you need help feel free to reach out to me. like i said in a note in the code, the post doesn't require line breaks, but you have to start it on the same line so there isn't any empty space. [/div][/div]
[div class=flexx][div class="tcabb tabba1"][br][/br][div=cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;][/div][/div][/div]
[/div]
[/nobr]

[nobr]

[class=variables]
--accent: #e0baaf;
--image: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
[/class]

[div class=variables]
[div class=bkg]
[div class=sidebar][/div]
[div class=header]name here.[/div]
[div class=post][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ut tortor pretium viverra suspendisse potenti nullam. Mauris cursus mattis molestie a iaculis at erat pellentesque. Dui vivamus arcu felis bibendum ut tristique et. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae. Neque laoreet suspendisse interdum consectetur libero. Condimentum id venenatis a condimentum vitae sapien. Quam quisque id diam vel quam elementum. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus.

Morbi non arcu risus quis varius quam quisque id diam. Tincidunt augue interdum velit euismod in pellentesque. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu. In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Amet justo donec enim diam vulputate. Purus viverra accumsan in nisl nisi scelerisque eu. Vulputate sapien nec sagittis aliquam malesuada. Posuere ac ut consequat semper viverra. Augue ut lectus arcu bibendum at varius. Faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Praesent elementum facilisis leo vel fringilla est. Quisque egestas diam in arcu cursus euismod. Eu volutpat odio facilisis mauris. Quis ipsum suspendisse ultrices gravida dictum. Nisi est sit amet facilisis magna. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Eu volutpat odio facilisis mauris sit amet massa vitae.

Pulvinar neque laoreet suspendisse interdum consectetur libero. Duis ultricies lacus sed turpis tincidunt. Sit amet justo donec enim diam vulputate ut. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Ac orci phasellus egestas tellus rutrum tellus. Vel eros donec ac odio tempor orci dapibus ultrices in. Etiam sit amet nisl purus in. Faucibus nisl tincidunt eget nullam non nisi. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Ultricies tristique nulla aliquet enim. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Vitae ultricies leo integer malesuada. Venenatis tellus in metus vulputate. [/div][/div]

[div class=tagbar]
[div class=tagcont][div class=tag]interactions[/div][br][/br] here, here, and here [/div]
[div class=tagcont][div class=tag]tags[/div][br][/br] here, here, and here [/div]
[div class=tagcont][div class=tag]location[/div][br][/br] here[/div]
[div class=tagcont][div class=tag]mood[/div][br][/br] here[/div]
[div class=tagcont][div class=tag]outfit[/div][br][/br] here [/div]
[/div]
[/div]
[/div]

[class=bkg]
height: 475px;
width: 555px;
background: #ededed;
margin: auto;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
[/class]
[class=sidebar]
height: 445px;
width: 100px;
position: relative;
left: 10px;
top: 15px;
background: var(--image);
background-size: cover;
background-position: center center;
[/class]
[class=header]
font-size: 30px;
text-transform: uppercase;
font-family: Abril Fatface;
color: var(--accent);
width: max-content;
position: relative;
left: 125px;
top: -440px;
[/class]
[class=post]
width: 320px;
height: 410px;
font-family: Inter;
color: black;
font-size: 11px;
text-align: justify;
position: relative;
left: 125px;
top: -440px;
white-space: pre-wrap;
overflow: hidden;
[/class]
[class=scroll]
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
height: 100%;
padding-right: 25px;
[/class]
[class=tagbar]
height: 410px;
width: 100px;
position: relative;
left: 445px;
top: -850px;
display: flex;
justify-content: space-evenly;
flex-direction: column;
font-family: Inter;
color: black;
font-size: 12px;
text-align: center;
[/class]
[class=tagcont]
height: max-content;
width: 100px;
position: relative;
[/class]
[class=tag]
font-family: Abril Fatface;
color: var(--accent);
font-size: 13px;
text-align: center;
display: inline;
[/class]


[/nobr]
 
Last edited:

fated

๐—ผ๐—ป๐—น๐˜† ๐˜‚๐˜€
[nobr]
[class=bkgg]
width: 550px;
height: 250px;
background: #f5f5f5;
border: 1px solid #cfcfcf;
position: relative;
margin: auto;
overflow: hidden;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
[/class]
[class=circc]
width: 250px;
height: 300px;
border-radius: 100%;
background: #e0baaf;
position: relative;
left: -100px;
top: -25px;
[/class]
[class=headerr]
position: relative;
font-size: 25px;
width: max-content;
height: max-content;
text-transform: uppercase;
font-family: Abril Fatface;
color: white;
transform: rotate(-90deg);
left: 65px;
top: 130px;
[/class]
[class=contentt]
width: 270px;
height: 230px;
position: relative;
top: -290px;
left: 180px;
font-size: 12px;
color: black;
font-family: Inter;
overflow: hidden;
[/class]
[class=flexx]
width: 70px;
height: 230px;
position: relative;
top: -520px;
left: 460px;
display: flex;
justify-content: space-evenly;
flex-direction: column;
[/class]
[class=tcabb]
height: 100px;
width: 70px;
background: #f5f5f5;
border: 1px solid #cfcfcf;
border-radius: 15px;
color: #e0baaf;
font-size: 25px;
line-height: 35px;
text-align: center;
transition: 1s all;
[/class]
[class=scrolll]
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
height: 100%;
padding-right: 17px;
text-align: justify;
[/class]

[class name=tabba1 state=hover]
background: #e0baaf;
border: 1px solid #e0baaf;
[/class]


[div class=bkgg]
[div class=circc][div class=headerr]limelight[/div][/div]
[div class=contentt][div class=scrolll]it's another posting template! this one is pretty big but it's a favorite of mine ( live preview here! ). as always, you can change things up with the variables class. this time, you can also change the 'texture' for the background with the pictures from this site. just click the 'create wallpaper' button and grab the url from the window that pops up! the stats have a flexbox so things will automatically even themselves out. as always, if you need help, just let me know! [/div][/div]
[div class=flexx][div class="tcabb tabba1"][br][/br][/div][/div]
[/div]
[/nobr]

[nobr]

[class=variables]
--accent: #e0baaf;
--image: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
--texture: url('https://www.transparenttextures.com/patterns/asfalt-dark.png');
[/class]

[div class=variables]
[div class=back]

[div class=poly][div class=poly2][/div][/div]
[div class=bkg]


[div class=container][div class=header]the name here.[/div]

[div class=post][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing vitae proin sagittis. Bibendum ut tristique et egestas quis ipsum. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Nam libero justo laoreet sit amet cursus. Pharetra convallis posuere morbi leo urna molestie. Elit pellentesque habitant morbi tristique senectus et. Nibh ipsum consequat nisl vel pretium lectus quam id leo. Enim nulla aliquet porttitor lacus luctus accumsan. In fermentum posuere urna nec tincidunt praesent semper feugiat. Mauris ultrices eros in cursus turpis massa tincidunt dui. Penatibus et magnis dis parturient montes. Lectus proin nibh nisl condimentum id venenatis. Tristique nulla aliquet enim tortor. Tempor commodo ullamcorper a lacus. Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus.

Cras semper auctor neque vitae tempus quam. Diam donec adipiscing tristique risus nec. Sit amet massa vitae tortor condimentum lacinia quis vel eros. Condimentum vitae sapien pellentesque habitant morbi tristique. Odio aenean sed adipiscing diam. Massa sapien faucibus et molestie ac feugiat sed lectus. Nibh tortor id aliquet lectus proin. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Quis lectus nulla at volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi. Purus ut faucibus pulvinar elementum integer enim neque. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Elit ut aliquam purus sit amet. Fames ac turpis egestas maecenas. Consectetur libero id faucibus nisl. Est lorem ipsum dolor sit amet consectetur.

Duis at consectetur lorem donec massa sapien faucibus et. Quam pellentesque nec nam aliquam sem et tortor. Dui sapien eget mi proin sed. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Sed id semper risus in hendrerit. Justo donec enim diam vulputate ut. Leo in vitae turpis massa sed elementum tempus. Risus ultricies tristique nulla aliquet enim. Morbi tempus iaculis urna id volutpat lacus laoreet. Id faucibus nisl tincidunt eget nullam non nisi est.
[br][/br][/div][/div]

[/div]

[div class=tagflex]

[div class=tagbox][div class=tag]interactions[/div][br][/br] go here[/div]
[div class=tagbox][div class=tag]mentions[/div][br][/br] go here[/div]
[div class=tagbox][div class=tag]tags[/div][br][/br] go here [/div]
[div class=tagbox][div class=tag]mood[/div][br][/br] goes here[/div]
[div class=tagbox][div class=tag]outfit[/div][br][/br] goes here [/div]
[div class=tagbox][div class=tag]location[/div][br][/br] goes here[/div]

[/div]

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

[class=back]
width: 99%;
background: var(--texture);
background-size: 20%;
background-color: #f5f5f5;
margin: auto;
height: 400px;
border: 1px solid #c5c5c5;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
[/class]
[class=bkg]
width: 1100px;
height: 400px;
margin: auto;
overflow: hidden;
position: relative;
top: -400px;
[/class]
[class=poly]
height: 400px;
width: 300px;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
background: var(--accent);
position: relative;
[/class]
[class=poly2]
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
height: 400px;
width: 300px;
background: var(--image);
background-size: cover;
background-position: center center;
position: relative;
left: -45px;
[/class]
[class=container]
height: 300px;
width: 600px;
position: relative;
top: 50px;
margin: auto;
[/class]
[class=post]
height: 250px;
width: 570px;
background: #f5f5f5;
border: 1px solid #c5c5c5;
position: relative;
margin: auto;
overflow: hidden;
font-family: Inter;
color: black;
font-size: 12px;
white-space: pre-wrap;
text-align: justify;
[/class]
[class=header]
font-family: Abril Fatface;
font-size: 25px;
text-transform: uppercase;
color: #454545;
position: relative;
left: 15px;
[/class]
[class=tagflex]
height: 251px;
width: 350px;
display: flex;
content-justify: space-evenly;
flex-wrap: wrap;
position: relative;
left: 850px;
top: -192px;
font-size: 12px;
color: black;
font-size: Inter;
[/class]
[class=tag]
font-size: 15px;
display: inline;
font-family: Abril Fatface;
color: var(--accent);
[/class]
[class=tagbox]
height: max-content;
width: 125px;
text-align: center;
[/class]
[class=scroll]
overflow-y: scroll;
overflow-x: hidden;
padding: 10px;
padding-right: 25px;
width: 99%;
height: 100%;
[/class]
[class=dialogue]
color: var(--accent);
font-weight: bold;
display: inline;
[/class]


[/nobr]
 
Last edited:

fated

๐—ผ๐—ป๐—น๐˜† ๐˜‚๐˜€
[nobr]
[class=bkgg]
width: 550px;
height: 250px;
background: #f5f5f5;
border: 1px solid #cfcfcf;
position: relative;
margin: auto;
overflow: hidden;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
[/class]
[class=circc]
width: 250px;
height: 300px;
border-radius: 100%;
background: #e0baaf;
position: relative;
left: -100px;
top: -25px;
[/class]
[class=headerr]
position: relative;
font-size: 25px;
width: max-content;
height: max-content;
text-transform: uppercase;
font-family: Abril Fatface;
color: white;
transform: rotate(-90deg);
left: 85px;
top: 130px;
[/class]
[class=contentt]
width: 270px;
height: 230px;
position: relative;
top: -290px;
left: 180px;
font-size: 12px;
color: black;
font-family: Inter;
overflow: hidden;
[/class]
[class=flexx]
width: 70px;
height: 230px;
position: relative;
top: -520px;
left: 460px;
display: flex;
justify-content: space-evenly;
flex-direction: column;
[/class]
[class=tcabb]
height: 100px;
width: 70px;
background: #f5f5f5;
border: 1px solid #cfcfcf;
border-radius: 15px;
color: #e0baaf;
font-size: 25px;
line-height: 35px;
text-align: center;
transition: 1s all;
[/class]
[class=scrolll]
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
height: 100%;
padding-right: 17px;
text-align: justify;
[/class]

[class name=tabba1 state=hover]
background: #e0baaf;
border: 1px solid #e0baaf;
[/class]

[class name=tabba2 state=hover]
background: #e0baaf;
border: 1px solid #e0baaf;
[/class]


[div class=bkgg]
[div class=circc][div class=headerr]annex[/div][/div]
[div class=contentt][div class=scrolll]hey all! these are some rather old codes that i made that i thought i'd post here anyways. the image has a nice hover with the character name and a quote, and i added a relationships tab with 5 slots for pictures and information. if you need to add another one, just copy/paste this code block and drop your image url in. as always, you can change colors and images in the variable class, and the character sheet text already scrolls. you can also change the icons with ones from this site, and it even gives you a format you can use when you click on the icon you want. i have quite a few codes lined up and ready to post, so expect more soon! i've gone on enough, but finally, you can see a live preview here. i hope you guys enjoy these ones c:[/div][/div]
[div class=flexx][div class="tcabb tabba1"][br][/br][/div][div class="tcabb tabba2"][br][/br][/div][/div]
[/div]
[/nobr]

[nobr]

[class=variables]
--accent: #e0baaf;
--image: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
--rimage1: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
--rimage2: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
--rimage3: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
--rimage4: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
--rimage5: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
[/class]

[div class=variables]
[div class=bkg]

[div class=img][div class=top]a nice[br][/br]lil' name [div class=topline][/div][/div] [div class=bottom] "a small quote [br][/br] can go here if you'd like" [div class=bottomline][/div][/div][div class=filter][/div][/div]
[div class=flexbox][div class=itab][/div][div class="tab tab1" style="margin-top: 5px;"]basics[/div][div class="tab tab2"]looks[/div][div class="tab tab3"]persona[/div][div class="tab tab4"]bio[/div][div class="tab tab5"]relations[/div][div class=itab][/div][/div]
[div class="content content1 select"][div class=scroll]
[div class=tag]question[/div]& answer [br][/br][br][/br]
[div class=tag]question[/div]& answer [br][/br][br][/br]
[div class=tag]question[/div]& answer [br][/br][br][/br]
[div class=tag]question[/div]& answer [br][/br][br][/br][br][/br][br][/br]

[div class=tag]question[/div]& answer [br][/br][br][/br]
[div class=tag]question[/div]& answer [br][/br][br][/br]
[div class=tag]question[/div]& answer [br][/br][br][/br]
[/div][/div]

[div class="content content2" style="top: -1522px;"][div class=scroll]
[div class=tag]question[/div]& answer [br][/br][br][/br]
[div class=tag]question[/div]& answer [br][/br][br][/br]
[div class=tag]question[/div]& answer [br][/br][br][/br][br][/br][br][/br]

[div class=tag]question[/div]& answer [br][/br][br][/br]
[div class=tag]question[/div]& answer [br][/br][br][/br]
[div class=tag]question[/div]& answer [br][/br][br][/br]
[/div][/div]

[div class="content content3" style="top: -2043px;"][div class=scroll]
[div class=tag]question[/div]& answer [br][/br][br][/br]
[div class=tag]question[/div]& answer [br][/br][br][/br][br][/br][br][/br]

[div class=tag]question[/div]& answer [br][/br][br][/br]
[div class=tag]question[/div]& answer [br][/br][br][/br]
[div class=tag]question[/div]& answer [br][/br][br][/br]
[/div][/div]

[div class="content content4" style="top: -2564px;"][div class=scroll]
[div class=tag]question[/div]& answer [br][/br][br][/br][br][/br][br][/br]

[div class=tag]question[/div]& answer [br][/br][br][/br]
[div class=tag]question[/div]& answer [br][/br][br][/br]
[/div][/div]

[div class="content content5" style="top: -3085px;"][div class=scroll]
[div class=columncont][div class=rimage][/div][div class=rcontent]
[div class=scroll][div class=rtag]relationship name here[/div]
relationship information here
[/div][/div][/div]

[div class=columncont][div class=rimage style="background: var(--rimage2); background-size: cover;"][/div][div class=rcontent]
[div class=scroll][div class=rtag]relationship name here[/div]
relationship information here
[/div][/div][/div]

[div class=columncont][div class=rimage style="background: var(--rimage3); background-size: cover;"][/div][div class=rcontent]
[div class=scroll][div class=rtag]relationship name here[/div]
relationship information here
[/div][/div][/div]

[div class=columncont][div class=rimage style="background: var(--rimage4); background-size: cover;"][/div][div class=rcontent]
[div class=scroll][div class=rtag]relationship name here[/div]
relationship information here
[/div][/div][/div]

[div class=columncont][div class=rimage style="background: var(--rimage5); background-size: cover;"][/div][div class=rcontent]
[div class=scroll][div class=rtag]relationship name here[/div]
relationship information here
[/div][/div][/div]



[div=height: 10px;][/div]
[/div][/div]

[/div]
[/div]

[class=bkg]
height: 500px;
width: 750px;
background: #ededed;
margin: auto;
border: 1px solid #c5c5c5;
overflow: hidden;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
[/class]
[class=img]
height: 500px;
width: 200px;
background-image: var(--image);
background-size: cover;
background-position: center center;
transition: all 1s;
[/class]
[class=flexbox]
height: 500px;
width: 100px;
position: relative;
background: #f5f5f5;
display: flex;
flex-direction: column;
justify-content: center;
top: -500px;
left: 200px;
border-right: 1px solid #c5c5c5;
border-left: 1px solid #c5c5c5;
[/class]
[class=tab]
height: 20px;
font-family: Manrope;
text-align: center;
font-size: 12px;
color: var(--accent);
width: 80px;
position: relative;
left: 10px;
text-transform: uppercase;
border: 1px solid #c5c5c5;
margin-bottom: 10px;
font-weight: bold;
cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
transition: all 1s;
letter-spacing: 1px;
[/class]
[class=itab]
height: 30px;
font-family: Manrope;
text-align: center;
font-size: 25px;
color: var(--accent);
width: 80px;
position: relative;
left: 10px;
margin-bottom: 15px;
[/class]
[class=top]
width: 200px;
height: 80px;
position: relative;
padding-top: 40px;
color: var(--accent);
font-family: Manrope;
text-transform: uppercase;
font-size: 25px;
line-height: 20px;
font-weight: bold;
text-align: center;
letter-spacing: 3px;
top: -120px;
transition: all 1s;
z-index: 5;
pointer-events: none;
[/class]
[class=topline]
height: 1px;
background: var(--accent);
width: 160px;
position: relative;
left: 20px;
top: 25px;
[/class]
[class=bottom]
width: 200px;
height: 80px;
position: relative;
padding-top: 40px;
color: var(--accent);
font-family: Manrope;
text-transform: uppercase;
font-size: 12px;
line-height: 20px;
text-align: center;
top: 380px;
transition: all 1s;
z-index: 5;
pointer-events: none;
[/class]
[class=filter]
height: 500px;
width: 200px;
background: black;
opacity: 0;
transition: all 1s;
position: relative;
top: -240px;
[/class]
[class=bottomline]
height: 0.5px;
background: var(--accent);
width: 160px;
position: relative;
left: 20px;
top: -65px;
[/class]
[class=content]
height: 501px;
width: 450px;
position: relative;
top: -1001px;
left: 300px;
transition: all 1s;
opacity: 0;
overflow: hidden;
font-family: Manrope;
color: black;
font-size: 12px;
padding: 10px;
[/class]
[class=tag]
color: var(--accent);
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
[/class]
[class=scroll]
overflow-y: scroll;
overflow-x: hidden;
padding-right: 30px;
width: 100%;
height: 100%;
[/class]
[class=columncont]
height: 150px;
width: 430px;
position: relative;
overflow: hidden;
margin-bottom: 10px;
[/class]
[class=rimage]
height: 150px;
width: 150px;
background: var(--rimage1);
background-size: cover;
[/class]
[class=rcontent]
height: 150px;
width: 270px;
position: relative;
left: 160px;
top: -150px;
font-family: Manrope;
font-size: 12px;
color: black;
text-align: justify;
[/class]
[class=rtag]
color: var(--accent);
font-size: 17px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
background: #ededed;
position: sticky;
top: 0px;
[/class]
[class=down]
top: 0px;
[/class]
[class=up]
top: 260px;
[/class]
[class=select]
opacity: 1;
z-index: 5;
[/class]

[script class=img on=mouseenter]
addClass up bottom
addClass down top
[/script]

[script class=img on=mouseleave]
removeClass up bottom
removeClass down top
[/script]

[class name=filter state=hover]
opacity: 0.3;
[/class]

[class name=tab state=hover]
background: var(--accent);
color: white;
[/class]

[script class=tab1 on=click]
addClass select content1
removeClass select content2
removeClass select content3
removeClass select content4
removeClass select content5
[/script]

[script class=tab2 on=click]
addClass select content2
removeClass select content1
removeClass select content3
removeClass select content4
removeClass select content5
[/script]

[script class=tab3 on=click]
addClass select content3
removeClass select content2
removeClass select content1
removeClass select content4
removeClass select content5
[/script]

[script class=tab4 on=click]
addClass select content4
removeClass select content2
removeClass select content3
removeClass select content1
removeClass select content5
[/script]

[script class=tab5 on=click]
addClass select content5
removeClass select content2
removeClass select content3
removeClass select content4
removeClass select content1
[/script]

[/nobr]

[nobr]

[class=variables]
--accent: #e0baaf;
--image: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
[/class]

[div class=variables]

[div class=bkga]
[div class=imga][/div]
[div class=slidea][/div]
[div class=bara][br][/br]the name [div class=seconda] the role [/div][/div]

[/div]
[/div]

[class=bkga]
height: 300px;
width: 450px;
background: #ededed;
margin: auto;
overflow: hidden;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
[/class]
[class=imga]
height: 300px;
width: 334px;
background: var(--image);
background-size: cover;
position: relative;
background-position: center center;
left: 124px;
top: 0px;
[/class]
[class=slidea]
height: 475px;
width: 678px;
clip-path: polygon(0 0, 100% 0, 33% 66%, 0 100%);
position: relative;
top: -454px;
background: var(--accent);
left: -90px;
transform: rotate(-25deg);
[/class]
[class=bara]
height: 43px;
width: 225px;
margin: auto;
position: relative;
top: -639px;
background: #f5f5f5;
font-family: Manrope;
color: black;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
text-align: center;
line-height: 0.9em;
border: 1px solid var(--accent);
[/class]
[class=seconda]
font-weight: 300;
font-size: 12px;
[/class]

[/nobr]
 
Last edited:

fated

๐—ผ๐—ป๐—น๐˜† ๐˜‚๐˜€
[nobr]
[class=bkgg]
width: 550px;
height: 250px;
background: #f5f5f5;
border: 1px solid #cfcfcf;
position: relative;
margin: auto;
overflow: hidden;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
[/class]
[class=circc]
width: 250px;
height: 300px;
border-radius: 100%;
background: #e0baaf;
position: relative;
left: -100px;
top: -25px;
[/class]
[class=headerr]
position: relative;
font-size: 25px;
width: max-content;
height: max-content;
text-transform: uppercase;
font-family: Abril Fatface;
color: white;
transform: rotate(-90deg);
left: 75px;
top: 130px;
[/class]
[class=contentt]
width: 270px;
height: 230px;
position: relative;
top: -290px;
left: 180px;
font-size: 12px;
color: black;
font-family: Inter;
overflow: hidden;
[/class]
[class=flexx]
width: 70px;
height: 230px;
position: relative;
top: -520px;
left: 460px;
display: flex;
justify-content: space-evenly;
flex-direction: column;
[/class]
[class=tcabb]
height: 100px;
width: 70px;
background: #f5f5f5;
border: 1px solid #cfcfcf;
border-radius: 15px;
color: #e0baaf;
font-size: 25px;
line-height: 35px;
text-align: center;
transition: 1s all;
[/class]
[class=scrolll]
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
height: 100%;
padding-right: 17px;
text-align: justify;
[/class]

[class name=tabba1 state=hover]
background: #e0baaf;
border: 1px solid #e0baaf;
[/class]

[class name=tabba2 state=hover]
background: #e0baaf;
border: 1px solid #e0baaf;
[/class]


[div class=bkgg]
[div class=circc][div class=headerr]bubbles[/div][/div]
[div class=contentt][div class=scrolll]aaa, another character sheet! i really like this one, and all the tab icons have a cute little effect that plays whenever you hover on them. this one does need two accent colors, and i personally like having just a darker and lighter version of one. again, it has a section for relationships, and you can paste this block of code if you'd like to add another one. you can change the tab icons with ones from this site, and when you click on an icon you can see the code that you need to put inside the fa tags. finally, you can see a live preview here. thank you all for all the support on these codes, it's really encouraging![/div][/div]
[div class=flexx][div class="tcabb tabba1"][br][/br][/div][div class="tcabb tabba2"][br][/br][/div][/div]
[/div]
[/nobr]

[nobr]

[class=variables]
--accent: #e0baaf;
--accent2: #d1a294;
--image: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
--rimage1: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
--rimage2: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
--rimage3: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
--rimage4: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
--rimage5: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
[/class]

[div class=variables]
[div class=bkg]
[div class=circ1][/div]
[div class=circ2][/div]
[div class=circ3][/div]
[div class=text]first name [br][/br] [div class=second] last name [/div][/div]

[div class="content content1 select"][div class=scroll]
[div class=tag]question[/div] answer [br][/br][br][/br]
[div class=tag]question[/div] answer [br][/br][br][/br][br][/br]

[div class=tag]question[/div] answer [br][/br][br][/br]
[div class=tag]question[/div] answer [br][/br][br][/br]
[/div][/div]

[div class="content content2" style="top: -540px;"][div class=scroll]
[div class=tag]question[/div] answer [br][/br][br][/br]
[div class=tag]question[/div] answer [br][/br][br][/br][br][/br]

[div class=tag]question[/div] answer [br][/br][br][/br]
[div class=tag]question[/div] answer [br][/br][br][/br]
[div class=tag]question[/div] answer [br][/br][br][/br]
[div class=tag]question[/div] answer [br][/br][br][/br]
[/div][/div]

[div class="content content3" style="top: -740px;"][div class=scroll]
[div class=tag]question[/div] answer [br][/br][br][/br]
[div class=tag]question[/div] answer [br][/br][br][/br][br][/br]

[div class=tag]question[/div] answer [br][/br][br][/br]
[div class=tag]question[/div] answer [br][/br][br][/br]
[/div][/div]

[div class="content content4" style="top: -940px;"][div class=scroll]
[div class=tag]question[/div] answer [br][/br][br][/br][br][/br]

[div class=tag]question[/div] answer [br][/br][br][/br]
[div class=tag]question[/div] answer [br][/br][br][/br]
[/div][/div]

[div class="content content5" style="top: -1140px;"][div class=scroll]
[div class=columncont][div class=rimage][/div][div class=rcontent][div class=scroll]
[div class=rtag]relationship name[/div]
relationship info here
[/div][/div][/div]

[div class=columncont][div class=rimage style="background: var(--rimage2); background-size: cover;"][/div][div class=rcontent][div class=scroll]
[div class=rtag]relationship name[/div]
relationship info here
[/div][/div][/div]

[div class=columncont][div class=rimage style="background: var(--rimage3); background-size: cover;"][/div][div class=rcontent][div class=scroll]
[div class=rtag] relationship name[/div]
relationship info here
[/div][/div][/div]

[div class=columncont][div class=rimage style="background: var(--rimage4); background-size: cover;"][/div][div class=rcontent][div class=scroll]
[div class=rtag] relationship name[/div]
relationship info here
[/div][/div][/div]

[div class=columncont][div class=rimage style="background: var(--rimage5); background-size: cover;"][/div][div class=rcontent][div class=scroll]
[div class=rtag] relationship name[/div]
relationship info here
[/div][/div][/div]



[/div][/div]

[div class=flexbox][div class="tab tab1"][/div][div class=line][/div][div class="tab tab2"][/div][div class=line][/div][div class="tab tab3"][/div][div class=line][/div][div class="tab tab4"][/div][div class=line][/div][div class="tab tab5"][/div][/div]
[/div]

[/div]

[class=bkg]
width: 450px;
height: 555px;
background: #ededed;
margin: auto;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
[/class]
[class=circ1]
background: var(--accent2);
height: 200px;
width: 200px;
position: relative;
top: 28px;
left: 20px;
border-radius: 100%;
[/class]
[class=circ2]
background: var(--accent);
height: 200px;
width: 200px;
border-radius: 100%;
position: relative;
top: -182px;
margin: auto;
[/class]
[class=circ3]
background: var(--image);
background-size: cover;
filter: saturation(80%);
z-index: 10;
height: 200px;
width: 200px;
position: relative;
top: -392px;
left: 230px;
border-radius: 100%;
border: 1px solid var(--accent);
[/class]
[class=text]
width: max-content;
height: max-content;
margin: auto;
text-align: center;
font-family: Manrope;
color: var(--accent);
text-transform: uppercase;
font-weight: 300;
letter-spacing: 4px;
line-height: 16px;
font-size: 17px;
position: relative;
top: -360px;
[/class]
[class=second]
color: var(--accent2);
font-weight: bold;
letter-spacing: 8px;
[/class]
[class=content]
height: 200px;
width: 300px;
position: relative;
top: -340px;
margin: auto;
font-family: Manrope;
font-size: 12px;
color: black;
text-align: justify;
line-height: 15px;
overflow: hidden;
opacity: 0;
transition: all 1s;
[/class]
[class=tag]
font: Baloo Paaji 2;
font-size: 15px;
color: var(--accent);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
[/class]
[class=flexbox]
background: var(--accent);
height: 40px;
width: 450px;
position: relative;
top: -1117px;
font-family: Manrope;
font-size: 12px;
color: white;
display: flex;
justify-content: space-evenly;
[/class]
[class=scroll]
overflow-y: scroll;
overflow-x: hidden;
padding-right: 40px;
width: 100%;
height: 100%;
[/class]
[class=tab]
height: max-content;
width: max-content;
font-size: 15px;
position: relative;
top: 7px;
cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
transition: all 1s;
[/class]
[class=line]
height: 20px;
width: 1px;
background: white;
position: relative;
top: 10px;
[/class]
[class=columncont]
height: 100px;
width: 300px;
position: relative;
overflow: hidden;
margin-bottom: 15px;
[/class]
[class=rimage]
height: 100px;
width: 100px;
background: var(--rimage1);
background-size: cover;
[/class]
[class=rcontent]
height: 100px;
width: 190px;
position: relative;
left: 110px;
top: -100px;
font-family: Manrope;
font-size: 12px;
color: black;
text-align: justify;
[/class]
[class=rtag]
color: var(--accent);
font-size: 17px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
font-family: Baloo Paaji 2;
position: sticky;
top: 0px;
background: #ededed;
[/class]

[class=select]
z-index: 15;
opacity: 1;
[/class]

[script class=tab1 on=click]
addClass select content1
removeClass select content2
removeClass select content3
removeClass select content4
removeClass select content5
[/script]

[script class=tab2 on=click]
addClass select content2
removeClass select content1
removeClass select content3
removeClass select content4
removeClass select content5
[/script]

[script class=tab3 on=click]
addClass select content3
removeClass select content2
removeClass select content1
removeClass select content4
removeClass select content5
[/script]

[script class=tab4 on=click]
addClass select content4
removeClass select content2
removeClass select content3
removeClass select content1
removeClass select content5
[/script]

[script class=tab5 on=click]
addClass select content5
removeClass select content2
removeClass select content3
removeClass select content4
removeClass select content1
[/script]

[class name=tab state=hover]
animation: {post_id}shake 0.5s infinite;
[/class]

[animation=shake]
[keyframe=0]
transform: rotate(0deg);
transform-origin: 50% 50%;
[/keyframe]
[keyframe=6]
transform: rotate(-2deg);
[/keyframe]
[keyframe=12]
transform: rotate(-5deg);
[/keyframe]
[keyframe=18]
transform: rotate(-7deg);
[/keyframe]
[keyframe=25]
transform: rotate(-10deg);
[/keyframe]
[keyframe=31]
transform: rotate(-7deg);
[/keyframe]
[keyframe=37]
transform: rotate(-5deg);
[/keyframe]
[keyframe=43]
transform: rotate(-2deg);
[/keyframe]
[keyframe=50]
transform: rotate(0deg);
[/keyframe]
[keyframe=56]
transform: rotate(2deg);
[/keyframe]
[keyframe=62]
transform: rotate(5deg);
[/keyframe]
[keyframe=68]
transform: rotate(7deg);
[/keyframe]
[keyframe=75]
transform: rotate(10deg);
[/keyframe]
[keyframe=81]
transform: rotate(7deg);
[/keyframe]
[keyframe=87]
transform: rotate(5deg);
[/keyframe]
[keyframe=93]
transform: rotate(2deg);
[/keyframe]
[keyframe=100]
transform: rotate(0deg);
[/keyframe]
[/animation]



[/nobr]

[nobr]
[class=variablesa]
--accent: #e0baaf;
--image: url('http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg');
[/class]

[div class=variablesa]
[div class=bkga]

[div class=texta] the name here
[div class=seconda] the role here [/div][/div]

[div class=circlea][div class=imagea][/div][/div]

[/div]
[/div]

[class=bkga]
height: 230px;
width: 500px;
margin: auto;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
[/class]
[class=texta]
color: var(--accent);
font-family: Manrope;
text-transform: uppercase;
font-size: 25px;
line-height: 20px;
font-weight: bold;
text-align: center;
letter-spacing: 3px;
[/class]
[class=seconda]
font-weight: 400;
letter-spacing: 2px;
font-size: 15px;
[/class]
[class=circlea]
height: 170px;
width: 170px;
border: 1px solid var(--accent);
margin: auto;
border-radius: 100%;
position: relative;
top: 15px;
[/class]
[class=imagea]
height: 150px;
width: 150px;
position: relative;
left: 10px;
top: 10px;
border-radius: 100%;
background: var(--image);
background-size: cover;
[/class]

[/nobr]
 

fated

๐—ผ๐—ป๐—น๐˜† ๐˜‚๐˜€
THIS MIGHT BE THE END, BUT IT'S NOT
GOODBYE!

Hey everyone! So, I'm sure you've all seen the announcement, and I've come here to give you all a huge thank you and say that this isn't over. Even if BBCode+ is gone from RPNation, I still plan to work to provide you all with whatever I can. I plan to leave these codes up as a memory, and I'm already in the process of archiving all of them. Over the while I've been on the site I've adored seeing everyone's incredible creativity, and I thank you all for making my experience here that much better.

Like I said, I'm dedicated to keeping you guys supplied with whatever I can. I plan to make some templates with the simpler tags so you guys can at least keep a little flavor in your posts. Coding was absolutely one of my favorite parts of RPNation, so I don't plan to stop and I'll keep going in whatever ways I can. Again, a HUGE thank you to everyone that's supported and helped me. You guys were what made coding what it was for me, so seriously, thank you. See you all soon!


- peace, fated

 

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

Top