PRIMADONNA // code

[nobr][div class=container][div class=image][/div]
[div class=blk][div class=title][b]character name[/b]
[div class=line][/div]
[div class=lil][font=Average Sans]the queen bee[/font][/div][/div]
[div class=b][div class=lilimage][/div][/div]

[div class=info]

[div class=post][div class=scroll][font=Carme]

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!"
[br][/br][br][/br]

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. [/font][/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
[br][/br]location | outfit [/div][/div][/div][/div][/div]

[div class=c]code by: undine[/div]

[class=c]width: 100%; text-align: center; opacity: 0; font-size: 10px;
[/class]

[class=container]height: 340px;
max-width: 500px;
padding: 10px;
margin: auto;
background: #9C94A9
[/class]

[class=image]height: 100%;
width: 33%;
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=blk]height: 100%;
width: 65%;
left: 35%;
position: relative;
top: -200px
[/class]

[class=title]position: relative;
top: -120px;
left: 0px;
max-width: 235px;
width: 100%;
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: 240px;
top: -175px;
height: 20%;
width: 20%;
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: 0px;
top: -165px;
height: 245px;
max-width: 310px
[/class]

[class=post]height: 190px;
width: 101%;
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;
max-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][/nobr]