KOMOREBI // code

[nobr]

[div=height: 340px;
width: 550px;
background: #9FA185;
margin: auto;
cursor: url(https://i.imgur.com/fkP02Jr.png), auto]

[class=titleholder]height:60px;
padding: 20px 10px 0px 10px;
width: 320px;
background-image:url(https://scontent.cdninstagram.com/vp/20cc5f599d9fcc9df822988f0d737ea2/5B3E3622/t51.2885-15/sh0.08/e35/p640x640/20482307_697380333781256_2913595995587608576_n.jpg);
background-size:120%;
background-position: 50% 20%;
transform:rotate(-90deg);
transition:all 1s ease-in-out;
color: white;
font-size: 30px;
text-align: center;
letter-spacing: 2px;
text-transform: uppercase;
font-family: 'Playfair Display', serif;
position: relative;
top: 130px;
margin-left: -120px;
[/class]

[class name=titleholder state=hover]color: #f1f1f1;
text-shadow: 2px 1px 0px #7f806a;
letter-spacing: 5px
[/class]

[script class=bigimage on=mouseenter]
addClass selected bigimage
fadeIn 600 hoverimg[/script]

[script class=bigimage on=mouseleave]
addClass selected bigimage
fadeOut 800 hoverimg[/script]

[div class=titleholder]firstname.[/div]

[div class="bigimage" style="height:100%;width:130px;background-image:url(https://scontent.cdninstagram.com/vp/b19e94d1b45bebb330d4d5ee2a1de5cc/5B582C74/t51.2885-15/sh0.08/e35/p640x640/20225648_721705204704945_7592491831221288960_n.jpg);background-size:230%;background-position:50% 30%;filter: saturate(90%) contrast(100%);position:relative;top:-80px;left:100px"]

[div class="hoverimg" style="display:none;height:100%;width:130px;background-image:url(https://scontent.cdninstagram.com/vp/d5f706f795c1531032248dc0cd4946e0/5B6A7AA0/t51.2885-15/sh0.08/e35/p640x640/20482425_727406114112622_2009665826872885248_n.jpg);background-size:250%;background-position:70% 30%;"][/div][/div]

[class=container]height:240px;
width: 295px;
padding: 5px 5px 5px 5px;
font-family: 'Playfair Display', serif;
font-style: oblique;
position: relative
[/class]

[class=taboutside]height: 30px;
width: 100px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
font-size: 0.55em;
position: absolute;
top: 50px;
margin-left: 200px[/class]

[div class=container style="top:-400px;left:240px"]

[class=tabs]cursor: url(https://i.imgur.com/fkP02Jr.png), pointer;
background: black;
display: inline-block;
color: transparent;
font-size: 17px;
text-align: center;
transition: all .7s ease-in-out
[/class]

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

[script class=second on=click]
hide tabsContent1
hide tabsContent3
fadeOut 400 tabsContent1
fadeOut 400 tabsContent3
fadeOut 400 tabsContent2
fadeIn 600 tabsContent2[/script]

[script class=third on=click]
hide tabsContent2
hide tabsContent1
fadeOut 400 tabsContent2
fadeOut 400 tabsContent1
fadeOut 400 tabsContent3
fadeIn 600 tabsContent3[/script]

[class=boxcontainer1]
display: inline;
position: relative;
[/class]

[class=boxcontainer2]
display: inline-block;
opacity: 0;
position: absolute;
margin-left: -15px;
margin-top: -10px;
height: 100%;
text-align: center;
transition: opacity 0.4s;
width: 100%;
[/class]

[class name=boxcontainer2 state=hover]
opacity: 1;
transition: 0.8s;
[/class]

[class name=box]background-color: #7f806a;
border-radius: 10px 10px 10px 0px;
margin-top: -10px;
color: white;
display: inline-block;
font-family: Arial, sans-serif;
font-size: 0.6em;
padding: 2px 5px;
letter-spacing: 0.3px;
word-spacing:0.5px;
text-align: center;
transition: 1.5s[/class]

[class=infocontainer]height: 230px;
width: 295px;
padding: 5px;
position: absolute;
top: 50px;
margin-left: -5px;
color: white;
font-family:'Heebo', sans-serif;
font-size: 0.69em;
letter-spacing: 0.2px;
font-smooth: 2em;
overflow: hidden
[/class]

[class name=overflow]height: 100%;
width: 104%;
padding-right: 40px;
overflow-y: auto;
line-height:15px;
font-style: normal;
text-align: justify
[/class]

[class name=titleblock]width:295px;font-size:25px;text-align:center;color:#7f806a;text-shadow: 1px 1px 0px white;font-weight:700;margin-top:-260px[/class]

[class name=line]height:1px;width:100%;background:#7f806a;[/class]

[class=firstword]height: 10px;
display: inline-block;
background: #7f806a;
padding: 0px 5px 7px 5px;
color: #fff;
font-weight: 700
[/class]

[div class=taboutside style=position:relative;margin-top:220px;left:-100px;color:transparent;][div class="tabs first" style="height:10px;width: 10px;border-radius: 50%;background: #7f806a"][div class=boxcontainer1]1[div class=boxcontainer2][div class=box]requisite[/div][/div][/div][/div][fa]fa-star[/fa][fa]fa-star[/fa][div class="tabs second" style="height:10px;width: 10px;border-radius: 50%;background: #7f806a"][div class=boxcontainer1]2[div class=boxcontainer2][div class=box]persona[/div][/div][/div][/div][fa]fa-star[/fa][fa]fa-star[/fa][div class="tabs third" style="height:10px;width: 10px;border-radius: 50%;background: #7f806a"][div class=boxcontainer1]3[div class=boxcontainer2][div class=box]history[/div][/div][/div][/div][fa]fa-star[/fa][fa]fa-star[/fa][/div]

[div class=content][div class="tabsContent tabsContent1"]

[div class=titleblock]requisite[/div]

[div class=infocontainer][div class=overflow][div class=firstword]input[/div] output
[br][/br][br][/br]
[div class=firstword]input[/div] output
[br][/br][br][/br]
[div class=firstword]input[/div] output
[br][/br][br][/br]
[div class=firstword]input[/div] output
[br][/br][br][/br]
[div class=firstword]input[/div] output
[br][/br][br][/br]
[div class=firstword]input[/div] output
[br][/br][br][/br]
[div class=firstword]input[/div] output
[br][/br][br][/br]
[div class=line][/div]
[br][/br]
[div class=firstword]longer input[/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][/div][/div][/div]

[div class=content][div class="tabsContent tabsContent2" style="display:none"]

[div class=titleblock]persona[/div]

[div class=infocontainer][div class=overflow]
[div class=firstword]likes?[/div] output
[br][/br][br][/br]
[div class=firstword]dislikes?[/div] output
[br][/br][br][/br]
[div class=firstword]habits?[/div] output
[br][/br][br][/br]
[div class=firstword]fears?[/div] output
[br][/br][br][/br]
[div class=firstword]etc[/div] output
[br][/br][br][/br]
[div class=firstword]etc[/div] output
[br][/br][br][/br]
[div class=line][/div]
[br][/br]
[div class=firstword]probably personality[/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][/div][/div][/div]

[div class=content][div class="tabsContent tabsContent3" style="display:none"]

[div class=titleblock]history[/div]

[div class=infocontainer][div class=overflow][div class=firstword]probably biography[/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?
[br][/br][br][/br]
[div class=line][/div]
[br][/br]
relationships??
[br][/br][br][/br]
[div class=firstword]name?[/div] blah blah blah blah blah
[br][/br][br][/br]
[div class=firstword]name?[/div] blah blah blah blah blah
[br][/br][br][/br]
[div class=firstword]name?[/div] blah blah blah blah blah
[br][/br][br][/br]
[div class=firstword]name?[/div] blah blah blah blah blah[/div][/div][/div][/div][/div][/div]

[class=credit]width:550px;
margin: auto;
position: relative;
top: 5px;
font-size: 9px;
color: grey
[/class]

[div class=credit]code by [url='https://www.rpnation.com/members/diaphanous.38711/']@diaphanous[/url][/div]
[br][/br]
[/nobr]