DIAPHANE // code

[nobr][div class=container][div class=cont][div class=image][div class=name][font=Meie Script]firstname[/font][/div]
[div class=outside][div class="tabs first"]1.[/div] . .
[div class="tabs second"]2.[/div] . .
[div class="tabs third"]3.[/div]
[div class=littlebox][div class=scroll style="width: 102%"]like a [sup]( little )[/sup] [b]black[/b] dress,
you're a [i]faded[/i] moon,
s t u c k on a [sub]( little )[/sub] hot [b][s]mess[/s][/b],
and oh [b]baby[/b] you're a [i][u]classic[/u][/i][/div][/div][/div][/div]

[div class=hold][div class=outline][div class=round][/div]
[div class="tabsContent1"][div class=title][font=Yeseva One]requisite.[/font][/div]

[div class=yo][div class=scroll][div class=firstword]full name[/div] lorem ipsum dolor sit amet
[br][/br][br][/br][div class=firstword]alias[/div] lorem ipsum dolor sit amet
[br][/br][br][/br]
[div class=firstword]age[/div] lorem ipsum dolor sit amet
[br][/br][br][/br]
[div class=firstword]birthday[/div] lorem ipsum dolor sit amet
[br][/br][br][/br]
[div class=firstword]gender[/div] lorem ipsum dolor sit amet
[br][/br][br][/br]
[div class=firstword]sexuality[/div] lorem ipsum dolor sit amet
[br][/br][br][/br]
[div class=firstword]faceclaim[/div] lorem ipsum[/div][/div][/div]

[div class="tabsContent2" style="display: none"][div class=title][font=Yeseva One]persona.[/font][/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.
[br][/br][br][/br]
[div class=firstword]likes + dislikes[/div] mussum, ipsum, cacilds, vidis, litro, abertis.[/div][/div][/div]

[div class="tabsContent3" style="display: none"][div class=title][font=Yeseva One]history.[/font][/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://baynature.org/wp-content/uploads/2019/06/20190118Hopkins0841_8x10_Flatt-1600x1333.jpg)"][/div] .. [div class=img 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=img 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: @undine[/div]

[class=container]height: 400px;
max-width: 550px;
margin: auto;
cursor: url(https://i.imgur.com/fkP02Jr.png), auto;
--color: black;
--colour: white;
--outline: #606257;
--hover: #72593A
[/class]

[class=cont]height: 94%;
width: 95%;
padding: 2%;
background: #e1e1e1;
[/class]

[class=image]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=name]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=outside]height: 50%;
width: 70%;
position: relative;
top: 55%;
margin: auto;
color: transparent;
opacity: 0
[/class]

[class=littlebox]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=tabs]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=hold]height: 100%;
width: 57%;
position: relative;
top: -100%;
[/class]

[class=round]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=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: -115px;
left: 45%;
color: var(--hover);
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: 20%;
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;
color: var(--colour)
[/class]

[class=columnhold]height: 12%;
width: 100%;
position: relative;
top: -113.5%;
left: 5%;
color: transparent;
font-size: 20px
[/class]

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

[class=c]width: 100%; text-align: center; opacity: 0; font-size: 10px
[/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=image on=mouseenter]
addClass fadeout name
addClass fadein outside
removeClass fadeout outside
removeClass fadein name
[/script]

[script class=hold on=mouseenter]
addClass fadein name
addClass fadeout outside
removeClass fadein outside
removeClass fadeout name
[/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]
[/nobr]