MOONSTONE // code

[nobr][div class=container][div class=image][div class=outs][div class="tabs first" style="top: 120px; left: -10px;"]a.[/div]
[div class="tabs second" style="top: 80px; left: 5px"]b.[/div]
[div class="tabs third" style="top: 120px; left: 20px"]c.[/div][/div][/div]

[div class=hold][div class=post]
[div class="tabsContent tabsContent1"]
[div class=pos][div class=title]001[/div]
[div class=lilwords][font=Poppins]personality[/font][/div][/div]

[div class=text][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]

[div class="tabsContent tabsContent2" style="display: none"]
[div class=pos][div class=title]002[/div]
[div class=lilwords][font=Poppins]biography[/font][/div][/div]

[div class=text][div class=scroll]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]

[div class="tabsContent tabsContent3" style="display: none"]
[div class=pos][div class=title]003[/div]
[div class=lilwords][font=Poppins]relationships[/font][/div][/div]

[div class=text][div class=scroll]
[div class=firstword]name goes here:[/div] Casamentiss faiz malandris se pirulitá. Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis.
[br][/br][br][/br]
[div class=firstword]name goes here:[/div] Casamentiss faiz malandris se pirulitá. Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis.
[br][/br][br][/br]
[div class=firstword]name goes here:[/div] Casamentiss faiz malandris se pirulitá. Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. .  . [/div][/div][/div][/div]

[div class=lilhold][div class=lilimage][/div]
[div class=name][font=Archivo Black]character name[/font]
[div class=stats][div class=scroll][font=Archivo][div class=firstword]full name:[/div] beep
[br][/br][div class=firstword]nicknames:[/div] bb
[br][/br][div class=firstword]age:[/div] number
[br][/br][div class=firstword]birthday:[/div] month and number
[br][/br][div class=firstword]gender:[/div] a person
[br][/br][div class=firstword]sexuality:[/div] loves all[/font][/div]
[/div][/div]

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

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

[class=container]height: 350px;
max-width: 530px;
width: 100%;
background: #62ADB0;
box-sizing: border-box;
padding: 0px 15px 0px 15px;
margin: auto;
overflow: hidden;
cursor: url(http://i.imgur.com/fkP02Jr.png), auto
[/class]

[class=image]height: 100%;
width: 40%;
float: right;
background-image: url(http://74cf32a44c829352ac0b-f6fda47bbdc077605fad1cda536b00c8.r16.cf3.rackcdn.com/4342_950191ea-2e37-456a-a763-2772734724b6.jpg);
background-size: 150%;
background-position: 50% 50%
[/class]

[class=outs]width: 100%;
text-align: center;
position: relative;
top: 180px;
opacity: 0; transition: 0.7s
[/class]

[class=op]opacity: 1
[/class]

[class=nope]transform: scale(0); transition: 0.4s
[/class]

[class=tabs]display: inline-block;
height: 15px;
width: 15px;
padding: 5px;
background: #a15a2e;
border: 1px solid #a15a2e;
border-radius: 100%;
color: #fff;
font-size: 10px;
text-align: center;
cursor: pointer;
position: relative;
transition: 0.3s;
[/class]

[class=second]transition-delay: 1.3s
[/class]

[class=hold]position: relative;
top: 15px;
height: 320px;
width: 57%;
background: #A4AC73
[/class]

[class=post]height: 230px;
width: 100%;
background: white
[/class]

[class=pos]box-sizing: border-box;
height: 75px;
width: 90%;
padding-left: 15px;
position: relative;
font-weight: 800;
[/class]

[class=title]display: inline-block;
color: #BF731D;
height: 0px;
width: 100%;
font-size: 48px;
text-size-adjust: auto;
opacity: 0.5
[/class]

[class=lilwords]display: inline-block;
font-size: 0.6em;
letter-spacing: 1.5px;
text-transform: uppercase;
position: relative;
top: -33px;
left: 90px;
[/class]

[class=text]position: relative;
height: 140px;
width: 90%;
margin: auto;
overflow: hidden;
font-size: 0.65em;
text-align: justify
[/class]

[class=lilhold]box-sizing:border-box;
position: relative;
top: 3px;
height: 20%;
width: 100%;
border-top: 1px solid #9E816F
[/class]

[class=lilimage]position: relative; top: 5px; left: 15px; display: inline-block;
height: 100%;
width: 30%;
border: 3px solid #bf8654;
background-image: url(http://74cf32a44c829352ac0b-f6fda47bbdc077605fad1cda536b00c8.r16.cf3.rackcdn.com/4342_2321fc56-0e0e-4a21-b462-1af277a66e43.jpg);
background-size: 200%;
background-position: 55% 20%
[/class]

[class=name]box-sizing: border-box; width: 50%; z-index: 5; display: inline-block; position: relative; top: 7px; left: 20px; font-size: 12px; text-transform: uppercase; color: #bf8654
[/class]

[class=stats]position: relative;
top: -4px;
z-index: 1;
height: 45px;
width: 100%;
padding: 4px 5px 2px 5px;
background: #bf8654;
border-top: 3px solid #e09e79;
font-size: 8px;
color: #fff;
overflow: hidden
[/class]

[class=scroll]height: 100%;
width: 100%;
overflow-y: scroll;
padding-right: 20px
[/class]

[class=firstword]display: inline-block; font-weight: 700; letter-spacing: 1px
[/class]


[class name=pop]
animation-name: {post_id}pop;
animation-direction: normal;
animation-duration: 0.5s;
animation-delay: 0.5s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[animation=pop]
[keyframe=0]opacity: 0;[/keyframe]
[keyframe=100]opacity: 1;[/keyframe]
[/animation]

[class name=top]
animation-name: {post_id}top;
animation-direction: normal;
animation-duration: 0.5s;
animation-delay: 1.1s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[animation=top]
[keyframe=0]opacity: 0;[/keyframe]
[keyframe=100]opacity: 1;[/keyframe]
[/animation]

[script class=image on=mouseenter]
addClass op outs
addClass pop second
addClass top third
[/script]

[script class=image on=mouseleave]
removeClass op outs
removeClass pop second
removeClass top third
[/script]

[script class=first on=click]
hide tabsContent2
hide tabsContent3
hide tabsContent4
fadeIn 800 tabsContent1[/script]

[script class=second on=click]
hide tabsContent1
hide tabsContent3
hide tabsContent4
fadeIn 800 tabsContent2[/script]

[script class=third on=click]
hide tabsContent2
hide tabsContent1
hide tabsContent4
fadeIn 800 tabsContent3[/script]

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