Resource null

[lavendre]

hmmm

 

[Darkhan]

That second one is so niiiiiice!!!!

 

[neighborly]

[class=ofni]position: relative; height: 100px; width: 400px; margin: auto; cursor: url(https://i.imgur.com/fkP02Jr.png), auto [/class] [class=ofnipic]display: inline-block; height: 100px; width: 100px; border-radius: 50%; background-image: url(https://66.media.tumblr.com/ef1d7f360854af941436c526d0a318ad/tumblr_p0e5viVNoY1wc23v6o2_400.jpg); background-size: 120%; background-position: 50% 0%; filter: grayscale(65%); text-align: center; font-size: 65px; color: white [/class] [class=ofnides]display: inline-block; height: 100px; width: 300px; position: relative; top: -95px; left: 115px; font-size: 23px; color: #91705B; line-height: 11px; letter-spacing: 0.7px [/class] [class=ofnifo]height: 50px; width: 260px; text-align: justify; overflow: hidden; position: relative; top: -150px; left: 115px; font-size: 11px [/class] [class=s]overflow-y: auto; overflow-x: hidden; height: 100%; width: 100%; padding-right: 20px [/class] [div class=ofni][div class=ofnipic]3.[/div] [div class=ofnides]primadonna
in-character post - semi mobile friendly[/div] [div class=ofnifo][div class=s]finally, an in-character code! it's fairly simple but pretty. there are hovers - when you hover over the circles, it reveals the mentions, interactions, etc. when you hover over the post text, the circles change color! the code looks different on mobile and the link is here. [/div][/div][/div]

[div class=container][div class=image] [div class=title]character name [div class=line][/div] [div class=lil]the queen bee[/div][/div] [div class=b][div class=lilimage][/div][/div][/div] [div class=info] [div class=post][div class=scroll] Mussum Ipsum, cacilds vidis litro abertis. Paisis, filhis, espiritis santis. Atirei o pau no gatis, per gatis num morreus. Delegadis gente finis, bibendum egestas augue arcu ut est. Suco de cevadiss deixa as pessoas mais interessantis. Detraxit consequat et quo num tendi nada. Leite de capivaris, leite de mula manquis sem cabeça. Interagi no mé, cursus quis, vehicula ac nisi. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Si num tem leite então bota uma pinga aí cumpadi! "Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo!"

Casamentiss faiz malandris se pirulitá. Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. Cevadis im ampola pa arma uma pindureta. Quem manda na minha terra sou euzis! Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. [/div][/div] [div class=pos][div class="round1 round"][/div] . [div class="round2 round"][/div] . [div class="round3 round"][/div] [div class=stats]mood | mentions | interaction
location | outfit [/div][/div][/div][/div] [class=container]height: 340px; width: 500px; padding: 10px; margin: auto; background: #9C94A9 [/class] [class=image]height: 100%; width: 180px; background-image: url(https://yellowslugreviews.files.wordpress.com/2015/09/joy-red-velvet-ww-cover.jpg); background-size: 200%; background-position: 55% 30% [/class] [class=title]position: relative; top: 15px; left: 190px; width: 230px; text-transform: uppercase; font-size: 20px; color: #bc4060 [/class] [class=line]height: 1px; width: 100%; background: #5a1527 [/class] [class=lil]position: relative; width: 96%; text-align: right; font-style: italic; font-size: 10px; text-transform: lowercase; letter-spacing: 1px; color: #202020; [/class] [class=b]position: relative; left: 420px; top: -45px; height: 65px; width: 65px; padding: 5px; border-radius: 0px 100px 100px 100px; border: 1px solid #5a1527 [/class] [class=lilimage]height: 100%; width: 100%; border-radius: 0px 100px 100px 100px; background-image: url(http://66.media.tumblr.com/0427e8538e01e7fcef48c755a4440789/tumblr_nv5l0a52dz1u2ih1oo3_400.gif); background-size: 200%; background-position: 60% 55% [/class] [class=info]position: relative; left: 190px; top: -245px; height: 245px; width: 310px [/class] [class=post]height: 200px; width: 103%; font-size: 10px; overflow: hidden [/class] [class=scroll]height: 100%; width: 100%; overflow-y: scroll; text-align: justify; padding-right: 30px [/class] [class=pos]position: relative; top: 15px; height: 35px; width: 305px; text-align: center; color: transparent; overflow: hidden [/class] [class=round]position: relative; display: inline-block; height: 25px; width: 25px; border-radius: 100%; background: #D1565B; transition: 0.7s; [/class] [class=round2]transition: 0.7s; display: inline-block; height: 25px; width: 25px; border-radius: 100%; background: #B9B5CC [/class] [class=round3]transition: 0.7s; display: inline-block; height: 25px; width: 25px; border-radius: 100%; background: #E6AFA8 [/class] [class=bla]background: #f2979f [/class] [class=ble]background: #786a81 [/class] [class=blo]background: #d05f7a [/class] [class=stats]position: relative; top: 10px; width: 100%; margin: auto;font-weight: 800; font-size: 9px; color: white [/class] [script class=post on=mouseenter] addClass bla round1 addClass ble round2 addClass blo round3 [/script] [script class=post on=mouseleave] removeClass bla round1 removeClass ble round2 removeClass blo round3 [/script] [script class=pos on=mouseenter] addClass up round addClass up stats removeClass down round removeClass down2 stats [/script] [script class=pos on=mouseleave] addClass down round addClass down2 stats addClass up round addClass up stats [/script] [class name=up] animation-name: {post_id}up; animation-direction: normal; animation-duration: 0.5s; animation-delay: 0s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-fill-mode: both; [/class] [animation=up] [keyframe=0]top: 0px[/keyframe] [keyframe=100]top: -30px[/keyframe] [/animation] [class name=down] animation-name: {post_id}down; animation-direction: normal; animation-duration: 0.5s; animation-delay: 0s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-fill-mode: both; [/class] [animation=down] [keyframe=0]top: -30px[/keyframe] [keyframe=100]top: 0px[/keyframe] [/animation] [class name=down2] animation-name: {post_id}down2; animation-direction: normal; animation-duration: 0.5s; animation-delay: 0s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-fill-mode: both; [/class] [animation=down2] [keyframe=0]top: -30px[/keyframe] [keyframe=100]top: 10px[/keyframe] [/animation]

Beautiful code. I'd really love to use this for a charcter. Do I just copy and paste the coding? How can I change the photos and color?

 

[nios]

oh my gosh this is beautiful

 

[Monarch]

[class=ofni]position: relative; height: 100px; width: 400px; margin: auto; cursor: url(https://i.imgur.com/fkP02Jr.png), auto [/class] [class=ofnipic]display: inline-block; height: 100px; width: 100px; border-radius: 50%; background-image: url(https://66.media.tumblr.com/ef1d7f360854af941436c526d0a318ad/tumblr_p0e5viVNoY1wc23v6o2_400.jpg); background-size: 120%; background-position: 50% 0%; filter: grayscale(65%); text-align: center; font-size: 65px; color: white [/class] [class=ofnides]display: inline-block; height: 100px; width: 300px; position: relative; top: -95px; left: 115px; font-size: 23px; color: #91705B; line-height: 11px; letter-spacing: 1.2px [/class] [class=ofnifo]height: 50px; width: 260px; text-align: justify; overflow: hidden; position: relative; top: -150px; left: 115px; font-size: 11px [/class] [class=s]overflow-y: auto; overflow-x: hidden; height: 100%; width: 100%; padding-right: 20px [/class] [div class=ofni][div class=ofnipic]4.[/div] [div class=ofnides]bijou
interest check - mobile friendly[/div] [div class=ofnifo][div class=s]a slightly updated version of the code i used for one of my roleplays. it now resizes on mobile, so it is completely mobile-friendly! it can be used as an interest check, a starter post or a regular ic post. when you click on the diamond picture, it reveals the post behind it. the link to the code is here! [/div][/div][/div]


[div class=background][div class=second] [div class=topimg]
[div class=back] go back [/div][/div] [div class=border][div class=opacitybg][/div] [div class=box][div class=over]overview[/div]
LOREM ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Sed ne, dum huic obsequor, vobis molestus sim. Summus dolor plures dies manere non potest? Omnes enim iucundum motum, quo sensus hilaretur. Est, ut dicis, inquit; Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego.Illis videtur, qui illud non dubitant bonum dicere; Unum est sine dolore esse, alterum cum voluptate. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Illi enim inter se dissentiunt. Quo plebiscito decreta a senatu est consuli quaestio Cn. Quid enim?De ingenio eius in his disputationibus, non de moribus quaeritur. Quis non odit sordidos, vanos, leves, futtiles? Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Quae cum dixisset paulumque institisset, Quid est?

[div class=over]rules[/div]
[div class=num]1.[/div] LOREM ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Sed ne, dum huic obsequor, vobis molestus sim. Summus dolor plures dies manere non potest?

[div class=num]2.[/div] Omnes enim iucundum motum, quo sensus hilaretur. Est, ut dicis, inquit; Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego.

[div class=num]3.[/div] Illis videtur, qui illud non dubitant bonum dicere; Unum est sine dolore esse, alterum cum voluptate. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam.

[div class=over]links[/div]

CHARACTERS - MAIN - OOC​

[/div][/div][/div] [div class=first] [div class=words][div class=i]t[/div]itle
[div class=bottomwords]lorem ipsum dolor sit amet;
consectetur adipisci velit
sed ac eleifend felis mollis;
efficitur magna. [/div][/div] [div class=line][div class=fimgb][div class=input] [div class=block][div class=inputwords] go forward [/div][/div][/div][/div][/div] [/div][/div] [div class=c]made by: lavendre [/div] [script class=input on=click] slideUp 2000 first fadeIn 1000 second [/script] [script class=back on=click] slideDown 2000 first [/script] [script class=input on=mouseenter] addClass op inputwords [/script] [script class=input on=mouseleave] removeClass op inputwords [/script] [class=background]height: 400px; max-width: 600px; boz-sixing: border-box; margin: auto; position: relative; overflow: hidden; border: 1px solid #f1f1f1 [/class] [class=first]height: 100%; width: 100%; background: #CFCFCF; opacity: 0.99; position: relative; top: -400px [/class] [class=second]height: 100%; width: 100%; background-image:url(http://i.pinimg.com/originals/78/3a/19/783a198a811f72ede159e2b6d8f44ce9.jpg); background-size:105%; background-position: 0% 30%; opacity: 1; position: relative; top: 0px [/class] [class=back]width:100%; height: 40px; padding: 20px 0px 0px 0px; margin: auto; font-weight: 700; letter-spacing: 1.5px; word-spacing: 1.5px; font-size: 13px; color: white; position: relative; top: 305px; text-align: center; text-transform: uppercase; cursor: pointer [/class] [class=line]height: 2px; width: 100%; background: white; position: relative; top: 130px [/class] [class=fimgb]position: relative; top: -95px; margin: auto; clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%); height: 180px; width: 180px; background: #fff; padding: 7px [/class] [class=input]cursor: pointer; height: 180px; width: 180px; background-image: url(http://vignette.wikia.nocookie.net/wingsoffirefanon/images/4/42/1§.jpg/revision/latest?cb=20180806190151); background-size: 120%; background-position: 55% 100%; clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%); filter: saturate(70%) [/class] [class=inputwords]height: 10px; padding: 5px 5px 10px 5px; width: 100%; display: block; background: #fff; color: #444444; position: relative; top: 85px; font-size: 10px; font-family: 'Playfair Display', serif; text-align: center; transition: all .4s ease-in-out; opacity: 0; position: relative [/class] [class name=op]opacity: 1 [/class] [class name=words]height:100px; width: 100%; font-size: 25px; font-family: 'Playfair Display', serif; position: absolute; color: #444444; top: 250px; text-align: center; letter-spacing: 4.5px; text-transform: uppercase [/class] [class=topimg]height:100%; width:100%; filter: saturate(110%); transition: all .5s ease-in-out; position: relative; top: 0px; left: 0px [/class] [class name=topimg state=hover]filter: saturate(150%); [/class] [class=topwords]width:130px; height: 7%; border-bottom: 1px solid #94A12C; font-size: 12px; color: black; position: relative; top: 220px; margin: auto; font-family: 'Montserrat', sans-serif; font-weight: 700; word-spacing: 1px; letter-spacing: 1px; [/class] [class=bottomwords]height: 100%; width: 100%; font-size: 0.45em; text-transform: lowercase; text-align: center; font-style: oblique; top: -5px; line-height: 14px; letter-spacing: 0.2px; position: relative; top: 10px [/class] [class=border]height: 300px; width: 345px; position: relative; margin:auto; top: -371px; left: 0px [/class] [class name=opacitybg]height: 289px; width: 350px; border: 1px solid white; background: white; opacity: 0.8; margin: auto; position: relative; top: 5px [/class] [class=i]display: inline-block; font-size: 30px; font-style: italic [/class] [class=box]height: 80%; width: 90%; padding: 5px; font-size: 11px; font-family: 'Hind', sans-serif; margin: auto; position: relative; top: -265px; line-height:16px; word-spacing: -0px; overflow: auto; text-align: justify [/class] [class=over]height: 25px; padding: 10px 0px 0px 0px; width: 100%; background: #ACACAC; font-size: 10px; font-weight: 700; text-transform: uppercase; position: sticky; top: 0px; text-align: center; letter-spacing: 2px; [/class] [class=num]display: inline-block; font-size: 11px; font-weight: 700 [/class] [class=c]width: 100%; text-align: center; opacity: 0; font-size: 10px [/class]

Just wanted to be considerate and let you know that I will be using this code. All of them are truly stunning. c:

 

[Ungifted ;-;]

• vogue
• diaphane

• 
  [class=ofni]position: relative; height: 100px; max-width: 400px; width: 100%; margin: auto; cursor: url(https://i.imgur.com/fkP02Jr.png), auto [/class] [class=ofnipic]display: inline-block; height: 100px; width: 25%; border-radius: 50%; background-image: url(http://66.media.tumblr.com/ef1d7f360854af941436c526d0a318ad/tumblr_p0e5viVNoY1wc23v6o2_400.jpg); background-size: 120%; background-position: 50% 0%; filter: grayscale(65%); text-align: center; font-size: 65px; color: white [/class] [class=ofnides]display: inline-block; height: 100px; width: 60%; position: relative; top: -45px; left: 3%; font-size: 23px; color: #91705B; line-height: 11px; letter-spacing: 0.7px [/class] [class=ofnifo]height: 50px; width: 60%; text-align: justify; overflow: hidden; position: relative; top: -100px; left: 115px; font-size: 11px [/class] [class=s]overflow-y: auto; overflow-x: hidden; height: 100%; width: 100%; padding-right: 20px [/class] [div class=ofni][div class=ofnipic]7.[/div] [div class=ofnides]vogue
  character sheet - mobile friendly[/div] [div class=ofnifo][div class=s]here are two cs codes! this is the more recent one and it's fairly simple with a hover on the border. you can find the code here! [/div][/div][/div]
  [div class=container][div class=cont] [div class=image][div class=name]firstname[/div][/div] [div class=hold][div class=outline][div class=round][/div] [div class="tabsContent1"][div class=title]requisite.[/div] [div class=yo][div class=scroll][div class=firstword]full name[/div] lorem ipsum dolor sit amet
  
  [div class=firstword]alias[/div] lorem ipsum dolor sit amet
  
  [div class=firstword]age[/div] lorem ipsum dolor sit amet
  
  [div class=firstword]birthday[/div] lorem ipsum dolor sit amet
  
  [div class=firstword]gender[/div] lorem ipsum dolor sit amet
  
  [div class=firstword]sexuality[/div] lorem ipsum dolor sit amet
  
  [div class=firstword]faceclaim[/div] lorem ipsum[/div][/div][/div] [div class="tabsContent2" style="display: none"][div class=title]persona.[/div] [div class=yo][div class=scroll][div class=firstword]personality[/div] Mussum Ipsum, cacilds vidis litro abertis. Paisis, filhis, espiritis santis. Atirei o pau no gatis, per gatis num morreus. Delegadis gente finis, bibendum egestas augue arcu ut est. Suco de cevadiss deixa as pessoas mais interessantis. Detraxit consequat et quo num tendi nada. Leite de capivaris, leite de mula manquis sem cabeça. Interagi no mé, cursus quis, vehicula ac nisi. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Si num tem leite então bota uma pinga aí cumpadi! "Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo!" Casamentiss faiz malandris se pirulitá. Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. Cevadis im ampola pa arma uma pindureta. Quem manda na minha terra sou euzis! Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Mé faiz elementum girarzis, nisi eros vermeio.
  
  [div class=firstword]likes + dislikes[/div] mussum, ipsum, cacilds, vidis, litro, abertis.[/div][/div][/div] [div class="tabsContent3" style="display: none"][div class=title]history.[/div] [div class=yo][div class=scroll][div class=firstword]biography[/div] Mussum Ipsum, cacilds vidis litro abertis. Paisis, filhis, espiritis santis. Atirei o pau no gatis, per gatis num morreus. Delegadis gente finis, bibendum egestas augue arcu ut est. Suco de cevadiss deixa as pessoas mais interessantis. Detraxit consequat et quo num tendi nada. Leite de capivaris, leite de mula manquis sem cabeça. Interagi no mé, cursus quis, vehicula ac nisi. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Si num tem leite então bota uma pinga aí cumpadi! "Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo!" Casamentiss faiz malandris se pirulitá. Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. Cevadis im ampola pa arma uma pindureta. Quem manda na minha terra sou euzis! Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Mé faiz elementum girarzis, nisi eros vermeio.[/div][/div][/div] [/div][/div] [div class=columnhold][div class=img][/div] .. [div class=img style="background-image: url(https://66.media.tumblr.com/53ea1de54c26c5a68b31e845a313c09d/tumblr_o9v0ffy0BU1u91lkyo1_500.jpg)"][/div] .. [div class=img style="background-image: url(https://scontent-frt3-2.cdninstagram.com/vp/d87466ca9f1d9ae9c7fb9034f15374bf/5DE8D338/t51.2885-15/e35/24839101_177256229524810_4469354371355770880_n.jpg?_nc_ht=scontent-frt3-2.cdninstagram.com)"][/div].. [div class=img style="background-image: url(https://66.media.tumblr.com/e04aedd00ceb092cd8926fc338053690/tumblr_o0ct7faPru1uxolajo1_400.jpg)"][/div][/div][/div] [div class=outside][div class="tabs first"]1.[/div]
  [div class="tabs second"]2.[/div]
  [div class="tabs third"]3.[/div] [/div][/div] [div class=c]code by: lavendre [/div] [class=container]height: 400px; max-width: 570px; margin: auto; cursor: url(https://i.imgur.com/fkP02Jr.png), auto; --color: black; --colour: white; --outline: #abc1ab; --hover: #8eab9f [/class] [class=cont]height: 94%; width: 87%; padding: 2%; background: #dedede; [/class] [class=image]height: 100%; width: 40%; background-image: url(https://scontent-frt3-2.cdninstagram.com/vp/010dea60d19356855f9a2a07fe7b29ad/5DE7C053/t51.2885-15/e35/26159108_156612938456589_1403415164224536576_n.jpg?_nc_ht=scontent-frt3-2.cdninstagram.com); background-size: cover; background-position: 60% 10%; overflow: hidden; [/class] [class=name]width: 100%; position: relative; top: 80%; text-align: center; color: var(--colour); font-size: 33px; letter-spacing: 5px; font-weight: 500; font-family:'Meie Script', serif; line-height: 15px [/class] [class=hold]height: 100%; width: 57%; position: relative; top: -100%; left: 43%; [/class] [class=round]height: 30%; width: 35%; background-image: url(http://scontent-frt3-2.cdninstagram.com/vp/4779826822474361dcf1597d73d3297f/5DD123E0/t51.2885-15/e35/54457903_370134990249129_1533183314291822950_n.jpg?_nc_ht=scontent-frt3-2.cdninstagram.com); background-size: cover; border: 3px solid var(--outline); border-radius: 100%; position: relative; top: -19% [/class] [class=outline]height: 62%; width: 80%; padding: 3%; border: 3px solid var(--outline); margin: auto; position: relative; top: 12%; transition: 0.5s [/class] [class name=outline state=hover]border: 3px solid var(--hover) [/class] [class=title]height: 45px; width: 55%; font-family: 'Yeseva One', sans-serif; font-style: italic; text-transform: uppercase; text-align: right; font-size: 21px; position: relative; top: -110px; left: 45%; color: var(--colour); overflow: hidden [/class] [class=yo]height: 170px; width: 100%; overflow: hidden; font-size: 11px; position: relative; top: -65px [/class] [class=scroll]height: 100%; width: 100%; overflow-y: scroll; padding-right: 10%; text-align: justify [/class] [class=firstword]padding: 3px 6px 3px 6px; display: inline-block; font-size: 9px; font-weight: 800; background: var(--outline); border-radius: 3px [/class] [class=columnhold]height: 12%; width: 100%; position: relative; top: -113.5%; left: 47%; color: transparent [/class] [class=img]height: 100%; width: 10%; display: inline-block; background-image: url(http://scontent-frt3-2.cdninstagram.com/vp/addd406287a3e992f70697fb2a263c20/5DDB971B/t51.2885-15/e35/44746679_296187594338791_726724255878390333_n.jpg?_nc_ht=scontent-frt3-2.cdninstagram.com); background-size: cover; border-radius: 100%; filter: grayscale(50%) [/class] [class=c]width: 100%; text-align: center; opacity: 0; font-size: 10px [/class] [class=outside]height: 50%; width: 5%; position: relative; left: 93%; top: -99%; [/class] [class=tabs]height: 10%; width: 75%; padding: 11%; background: var(--hover); color: var(--colour); text-align: center; font-size: 0.75em; font-weight: bold; cursor: url(https://i.imgur.com/cKGchlB.png), pointer; overflow: hidden; line-height: 20px; border-radius: 10%; [/class] [script class=first on=click] hide tabsContent2 hide tabsContent3 hide tabsContent4 fadeOut 600 tabsContent2 fadeOut 600 tabsContent3 fadeOut 600 tabsContent4 fadeOut 600 tabsContent1 fadeIn 800 tabsContent1[/script] [script class=second on=click] hide tabsContent1 hide tabsContent3 hide tabsContent4 fadeOut 600 tabsContent1 fadeOut 600 tabsContent3 fadeOut 600 tabsContent4 fadeOut 600 tabsContent2 fadeIn 800 tabsContent2[/script] [script class=third on=click] hide tabsContent2 hide tabsContent1 hide tabsContent4 fadeOut 600 tabsContent2 fadeOut 600 tabsContent1 fadeOut 600 tabsContent4 fadeOut 600 tabsContent3 fadeIn 800 tabsContent3[/script]
• 
  [div class=ofni][div class=ofnipic style="background-image: url(http://i.pinimg.com/originals/39/bd/52/39bd523faf2163868633777122387e6d.jpg)"]8.[/div] [div class=ofnides style="color: #6D2F30"]diaphane
  multipurpose - mobile friendly[/div] [div class=ofnifo][div class=s]this version was the original code with some adjustments. hover on the image to show the tabs; hover to the left to hide them. the tabs can be easily deleted, so the code can be used as an in-character code, interest check, or a cs. the code is here! [/div][/div][/div]
  [div class=2container][div class=2cont][div class=2image][div class=2name]firstname[/div] [div class=2outside][div class="2tabs first"]1.[/div] . . [div class="2tabs second"]2.[/div] . . [div class="2tabs third"]3.[/div] [div class=2littlebox][div class=2scroll style="width: 102%"]like a ^{( little )} black dress, you're a faded moon, s t u c k on a _{( little )} hot mess, and oh baby you're a classic[/div][/div][/div][/div] [div class=2hold][div class=2outline][div class=2round][/div] [div class="tabsContent1"][div class=2title]requisite.[/div] [div class=2yo][div class=2scroll style="max-height: 180px;"][div class=2firstword]full name[/div] lorem ipsum dolor sit amet
  
  [div class=2firstword]alias[/div] lorem ipsum dolor sit amet
  
  [div class=2firstword]age[/div] lorem ipsum dolor sit amet
  
  [div class=2firstword]birthday[/div] lorem ipsum dolor sit amet
  
  [div class=2firstword]gender[/div] lorem ipsum dolor sit amet
  
  [div class=2firstword]sexuality[/div] lorem ipsum dolor sit amet
  
  [div class=2firstword]faceclaim[/div] lorem ipsum[/div][/div][/div] [div class="tabsContent2" style="display: none"][div class=2title]persona.[/div] [div class=2yo][div class=2scroll style="max-height: 180px;"][div class=2firstword]personality[/div] Mussum Ipsum, cacilds vidis litro abertis. Paisis, filhis, espiritis santis. Atirei o pau no gatis, per gatis num morreus. Delegadis gente finis, bibendum egestas augue arcu ut est. Suco de cevadiss deixa as pessoas mais interessantis. Detraxit consequat et quo num tendi nada. Leite de capivaris, leite de mula manquis sem cabeça. Interagi no mé, cursus quis, vehicula ac nisi. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Si num tem leite então bota uma pinga aí cumpadi! "Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo!" Casamentiss faiz malandris se pirulitá. Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. Cevadis im ampola pa arma uma pindureta. Quem manda na minha terra sou euzis! Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Mé faiz elementum girarzis, nisi eros vermeio.
  
  [div class=2firstword]likes + dislikes[/div] mussum, ipsum, cacilds, vidis, litro, abertis.[/div][/div][/div] [div class="tabsContent3" style="display: none"][div class=2title]history.[/div] [div class=2yo][div class=2scroll style="max-height: 180px;"][div class=2firstword]biography[/div] Mussum Ipsum, cacilds vidis litro abertis. Paisis, filhis, espiritis santis. Atirei o pau no gatis, per gatis num morreus. Delegadis gente finis, bibendum egestas augue arcu ut est. Suco de cevadiss deixa as pessoas mais interessantis. Detraxit consequat et quo num tendi nada. Leite de capivaris, leite de mula manquis sem cabeça. Interagi no mé, cursus quis, vehicula ac nisi. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Si num tem leite então bota uma pinga aí cumpadi! "Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo!" Casamentiss faiz malandris se pirulitá. Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. Cevadis im ampola pa arma uma pindureta. Quem manda na minha terra sou euzis! Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Mé faiz elementum girarzis, nisi eros vermeio.[/div][/div][/div] [/div][/div] [div class=2columnhold][div class=2img][/div] .. [div class=2img style="background-image: url(https://baynature.org/wp-content/uploads/2019/06/20190118Hopkins0841_8x10_Flatt-1600x1333.jpg)"][/div] .. [div class=2img style="background-image: url(https://scontent-frt3-2.cdninstagram.com/vp/60764c9d9c20487fde04fdc28eeff1d6/5DD10975/t51.2885-15/e35/38989774_1938796976418901_4048314677174730752_n.jpg?_nc_ht=scontent-frt3-2.cdninstagram.com)"][/div].. [div class=2img style="background-image: url(https://assets3.thrillist.com/v1/image/1894111/size/tmg-gift_guide_default;jpeg_quality=20.jpg)"][/div][/div] [/div][/div] [div class=c]code by: lavendre [/div] [class=2container]height: 400px; max-width: 555px; margin: auto; cursor: url(https://i.imgur.com/fkP02Jr.png), auto; --color: black; --colour: white; --outline: #606257; --hover: #72593A [/class] [class=2cont]height: 94%; width: 95%; padding: 2%; background: #e1e1e1; [/class] [class=2image]height: 100%; width: 40%; background-image: url(https://scontent-frt3-2.cdninstagram.com/vp/7cce3f12a2f4c5552d989231093a5e56/5DD08B47/t51.2885-15/e35/22429989_130700374347299_357790446707015680_n.jpg?_nc_ht=scontent-frt3-2.cdninstagram.com); background-size: cover; background-position: 55% 10%; position: relative; left: 60%; overflow: hidden; [/class] [class=2name]width: 100%; position: relative; top: 83%; text-align: center; color: var(--colour); font-size: 33px; letter-spacing: 5px; font-weight: 500; font-family:'Meie Script', serif; pointer-events: none; line-height: 15px [/class] [class=2outside]height: 50%; width: 70%; position: relative; top: 55%; margin: auto; color: transparent; opacity: 0 [/class] [class=2littlebox]height: 30%; width: 96%; background: var(--outline); padding: 3%; border: 5px solid var(--hover); border-radius: 5%; opacity: 0.95; color: var(--colour); font-size: 0.7em; text-transform: lowercase; text-align: center; overflow: hidden [/class] [class=2tabs]display: inline-block; padding: 2% 5% 2% 5%; background: var(--hover); color: var(--colour); text-align: center; font-size: 0.75em; font-weight: bold; cursor: url(https://i.imgur.com/cKGchlB.png), pointer; overflow: hidden; line-height: 20px; border-radius: 10%; transition: 0.5s [/class] [class=2hold]height: 100%; width: 57%; position: relative; top: -100%; [/class] [class=2round]height: 30%; width: 35%; background-image: url(https://scontent-frt3-2.cdninstagram.com/vp/c32232af2f0081a25136e9acb97003e1/5DE142EE/t51.2885-15/e35/21819653_199275687280068_6969645659754332160_n.jpg?_nc_ht=scontent-frt3-2.cdninstagram.com); background-size: 200%; background-position: 50% 10%; border: 3px solid var(--outline); border-radius: 100%; position: relative; top: -19% [/class] [class=2outline]height: 62%; width: 80%; padding: 3%; border: 3px solid var(--outline); margin: auto; position: relative; top: 12%; transition: 0.5s [/class] [class name=2outline state=hover]border: 3px solid var(--hover) [/class] [class=2title]height: 45px; width: 55%; font-family: 'Yeseva One', sans-serif; font-style: italic; text-transform: uppercase; text-align: right; font-size: 21px; position: relative; top: -115px; left: 45%; color: var(--hover); overflow: hidden [/class] [class=2yo]height: 170px; width: 100%; overflow: hidden; font-size: 11px; position: relative; top: -65px [/class] [class=2scroll]height: 100%; width: 100%; overflow-y: scroll; padding-right: 20%; text-align: justify [/class] [class=2firstword]padding: 3px 6px 3px 6px; display: inline-block; font-size: 9px; font-weight: 800; background: var(--outline); border-radius: 3px; color: var(--colour) [/class] [class=2columnhold]height: 12%; width: 100%; position: relative; top: -113.5%; left: 5%; color: transparent; font-size: 20px [/class] [class=2img]height: 100%; width: 9%; display: inline-block; background-image: url(https://scontent-frt3-2.cdninstagram.com/vp/1ef7c029ade8768b2e88b958eaa89fb4/5DDF3742/t51.2885-15/e35/23734563_1950504698609554_4819044204799852544_n.jpg?_nc_ht=scontent-frt3-2.cdninstagram.com); background-size: cover; border-radius: 100% [/class] [script class=first on=click] hide tabsContent2 hide tabsContent3 hide tabsContent4 fadeOut 600 tabsContent2 fadeOut 600 tabsContent3 fadeOut 600 tabsContent4 fadeOut 600 tabsContent1 fadeIn 800 tabsContent1[/script] [script class=second on=click] hide tabsContent1 hide tabsContent3 hide tabsContent4 fadeOut 600 tabsContent1 fadeOut 600 tabsContent3 fadeOut 600 tabsContent4 fadeOut 600 tabsContent2 fadeIn 800 tabsContent2[/script] [script class=third on=click] hide tabsContent2 hide tabsContent1 hide tabsContent4 fadeOut 600 tabsContent2 fadeOut 600 tabsContent1 fadeOut 600 tabsContent4 fadeOut 600 tabsContent3 fadeIn 800 tabsContent3[/script] [script class=2image on=mouseenter] addClass fadeout 2name addClass fadein 2outside removeClass fadeout 2outside removeClass fadein 2name [/script] [script class=2hold on=mouseenter] addClass fadein 2name addClass fadeout 2outside removeClass fadein 2outside removeClass fadeout 2name [/script] [class name=fadein] animation-name: {post_id}fadein; animation-direction: normal; animation-duration: 0.5s; animation-delay: 0s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-fill-mode: both; [/class] [animation=fadein] [keyframe=0]opacity: 0;[/keyframe] [keyframe=100]opacity: 1;[/keyframe] [/animation] [class name=fadeout] animation-name: {post_id}fadeout; animation-direction: normal; animation-duration: 0.5s; animation-delay: 0s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-fill-mode: both; [/class] [animation=fadeout] [keyframe=0]opacity: 1;[/keyframe] [keyframe=100]opacity: 0;[/keyframe] [/animation]

I’m planning on using this for a CS

 

[Asuhra]

Using diaphane for a cs

Edit: And now also primadonna your codes are amazing ♥

 

[myst.erion]

if i could use chai and recolour it a bit, that would be incredible