headache

[nobr]
[class=background]
        max-width: 750px;
        height: 514px;
        background: url('http://www.designbolts.com/wp-content/uploads/2012/12/simple-pattern-white-seamless-website-background.jpg');
        margin: auto;
        border: 1px dashed grey;
        padding: 25px;
        cursor: url(https://i.imgur.com/X2LfhKo.png), auto !important;
[/class]

[class=tabone]
        display: inline-block;
        background: url(https://via.placeholder.com/120x120);
        border: 1px solid lightgrey;
        width: 120px;
        height: 120px;
        background-size: 100%;
[/class]
[class=tabtwo]
        display: inline-block;
        border: 1px solid lightgrey;
        width: 120px;
        height: 120px;
        background: url(https://via.placeholder.com/120x120);
        background-size: 100%;
        margin-top: 128px;
[/class]
[class=tabthree]
        display: inline-block;
        border: 1px solid lightgrey;
        width: 120px;
        height: 120px;
        background: url(https://via.placeholder.com/120x120);
        background-size: 100%;
        margin-top: 257px;
[/class]
[class=tabfour]
        display: inline-block;
        border: 1px solid lightgrey;
        width: 120px;
        height: 120px;
        background: url(https://via.placeholder.com/120x120);
        background-size: 100%;
        margin-top: 386px;
[/class]
[class=tabinfo]
        max-width: 625px;
        border: 1px solid lightgrey;
        margin-left: 130px;
        background-color: white;
        height: 506px;
[/class]

[class=tab]
        position: absolute;
[/class]
[class name=tab state=hover]
        transition-duration: 0.3s;
        background-color: rgba(105, 105, 105, 0.2);
[/class]

[class=picturetext]
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        background-color: rgba(105, 105, 105, 0.2);
        color: white;
        font-size: 15px;
[/class]
[class name=picturetext state=hover]
        opacity: 1;
[/class]

[class=picturetexttwo]
        text-align: center;
        margin-top: 10px;
        text-transform: uppercase;
[/class]

[class=textbackground]
        background-color: #B08587;
        display: inline-block;
        padding: 2px;
        color: white;
        margin-top: 5px;
[/class]
[class=textcontainter]
        padding: 10px;
        font-size: 13px;
        line-height: 18px;
        color: #202020;
        text-align: justify;
[/class]

[class=header]
        font-weight: bold;
        font-size: 30px;
        text-transform: uppercase;
        color: grey;
[/class]
[class=header_two]
        font-weight: bold;
        font-size: 30px;
        text-transform: uppercase;
        text-align: right;
        color: grey;
[/class]

[script class=tab on=click]
                hide tabsContent
                set currentTab (getText)
                if (eq ${currentTab} basic) (show tabsContentBasics)
                if (eq ${currentTab} persona) (show tabsContentPersona)
                if (eq ${currentTab} background) (show tabsContentBackground)
                if (eq ${currentTab} other) (show tabsContentOther)
[/script]

[div class=background]
    [div class="tab tabone"][div class=picturetext][div class=picturetexttwo][font=Playfair Display][br][/br][br][/br]basic[/font][/div][/div][/div]
    [div class="tab tabtwo"][div class=picturetext][div class=picturetexttwo][font=Playfair Display][br][/br][br][/br]persona[/font][/div][/div][/div]
    [div class="tab tabthree"][div class=picturetext][div class=picturetexttwo][font=Playfair Display][br][/br][br][/br]background[/font][/div][/div][/div]
    [div class="tab tabfour"][div class=picturetext][div class=picturetexttwo][font=Playfair Display][br][/br][br][/br]other[/font][/div][/div][/div]

[div class="tabsContent tabsContentBasics"][div class=tabinfo][div=width: calc(100% - 0%); height: 490px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div class=textcontainter][div class=header][font=Playfair Display][i]— basic information;[/i][/font][/div][br][/br]
[font=Jomolhari][div class=textbackground]name:[/div]
[br][/br]
[div class=textbackground]nickname:[/div]
[br][/br]
[div class=textbackground]age:[/div]
[br][/br]
[div class=textbackground]date of birth:[/div]
[br][/br]
[div class=textbackground]zodiac:[/div]
[br][/br]
[div class=textbackground]gender:[/div]
[br][/br]
[div class=textbackground]sexuality:[/div]
[br][/br]
[div class=textbackground]domain:[/div]
[br][/br][br][/br]
[div class=header][font=Playfair Display][i]— appearance;[/i][/font][/div]
[br][/br]
[div class=textbackground]faceclaim[/div]
[br][/br]
[div class=textbackground]hair:[/div]
[br][/br]
[div class=textbackground]eyes:[/div]
[br][/br]
[div class=textbackground]height[/div]
[br][/br]
[div class=textbackground]weight:[/div]
[br][/br]
[div class=textbackground]distinguishing feature:[/div]
[br][/br]
[div class=textbackground]tattoos | markings:[/div]
[br][/br]
[div class=textbackground]clothing:[/div] [/font][/div][/div][/div][/div][/div]

[div class="tabsContent tabsContentPersona" style="display: none;"][div class=tabinfo][div=width: calc(100% - 0%); height: 490px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div class=textcontainter][div class=header][font=Playfair Display][i]❛ what doesn't kill me [/i][/font][/div][br][/br]
[font=Jomolhari][div class=textbackground]virtues:[/div]
[br][/br]
[div class=textbackground]vices:[/div]
[br][/br]
[div class=textbackground]likes:[/div]
[br][/br]
[div class=textbackground]dislikes:[/div]
[/font][br][/br][br][/br]
[div class=header_two][font=Playfair Display][i]makes me stronger ❜[/i][/font][/div][br][/br][pindent][font=Jomolhari][size=20px][i]L[/i][/size][/font][font=Jomolhari]orem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum sapien a ipsum elementum finibus. Aenean dictum ut sapien et pellentesque. Suspendisse tempor vehicula turpis, at sagittis ligula tincidunt ut. Curabitur orci enim, auctor vel pharetra in, consectetur ac arcu. Nulla eleifend, elit et tempus ultricies, odio libero faucibus ipsum, nec tempor leo orci eu nisi. Vivamus tellus massa, congue in egestas vel, euismod id sapien. Nam ac gravida justo, at laoreet eros. Donec tristique velit turpis, quis condimentum erat tristique et. Integer eu tincidunt tortor. Pellentesque placerat auctor neque sit amet malesuada. Suspendisse vel tellus erat. Nam dapibus aliquet ligula eu fringilla. Ut sit amet luctus elit. Ut efficitur sapien sed dolor cursus congue.
[br][/br][br][/br]
Cras hendrerit dapibus convallis. Maecenas a sollicitudin urna. Integer ac molestie odio. Nunc ut risus tellus. Phasellus vitae mattis arcu, vel mattis diam. Proin consequat porttitor viverra. Suspendisse potenti. Duis sodales velit velit, id tempus nunc sollicitudin ac. In tincidunt nec risus at gravida. Morbi nec justo quis est volutpat elementum. Aliquam vitae mollis lectus. Quisque auctor tortor ut mi scelerisque venenatis. Suspendisse accumsan ipsum eget diam malesuada, sed tempus turpis ornare.[/font][/pindent][/div][/div][/div][/div][/div]

[div class="tabsContent tabsContentBackground" style="display: none;"][div class=tabinfo][div=width: calc(100% - 0%); height: 490px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div class=textcontainter][div class=header][font=Playfair Display][i]❛ it's not my fault[/i][/font][/div][br][/br]
[pindent][font=Jomolhari][size=20px][i]L[/i][/size][/font][font=Jomolhari]orem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum sapien a ipsum elementum finibus. Aenean dictum ut sapien et pellentesque. Suspendisse tempor vehicula turpis, at sagittis ligula tincidunt ut. Curabitur orci enim, auctor vel pharetra in, consectetur ac arcu. Nulla eleifend, elit et tempus ultricies, odio libero faucibus ipsum, nec tempor leo orci eu nisi. Vivamus tellus massa, congue in egestas vel, euismod id sapien. Nam ac gravida justo, at laoreet eros. Donec tristique velit turpis, quis condimentum erat tristique et. Integer eu tincidunt tortor. Pellentesque placerat auctor neque sit amet malesuada. Suspendisse vel tellus erat. Nam dapibus aliquet ligula eu fringilla. Ut sit amet luctus elit. Ut efficitur sapien sed dolor cursus congue.
[br][/br][br][/br]
Cras hendrerit dapibus convallis. Maecenas a sollicitudin urna. Integer ac molestie odio. Nunc ut risus tellus. Phasellus vitae mattis arcu, vel mattis diam. Proin consequat porttitor viverra. Suspendisse potenti. Duis sodales velit velit, id tempus nunc sollicitudin ac. In tincidunt nec risus at gravida. Morbi nec justo quis est volutpat elementum. Aliquam vitae mollis lectus. Quisque auctor tortor ut mi scelerisque venenatis. Suspendisse accumsan ipsum eget diam malesuada, sed tempus turpis ornare.[/font][/pindent][/div][/div][/div][/div][/div]

[div class="tabsContent tabsContentOther" style="display: none;"][div class=tabinfo][div=width: calc(100% - 0%); height: 490px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div class=textcontainter][div class=header][font=Playfair Display][i]i have my father's eyes ❜[/i][/font][/div][br][/br]
[pindent][font=Jomolhari][size=20px][i]L[/i][/size][/font][font=Jomolhari]orem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum sapien a ipsum elementum finibus. Aenean dictum ut sapien et pellentesque. Suspendisse tempor vehicula turpis, at sagittis ligula tincidunt ut. Curabitur orci enim, auctor vel pharetra in, consectetur ac arcu. Nulla eleifend, elit et tempus ultricies, odio libero faucibus ipsum, nec tempor leo orci eu nisi. Vivamus tellus massa, congue in egestas vel, euismod id sapien. Nam ac gravida justo, at laoreet eros. Donec tristique velit turpis, quis condimentum erat tristique et. Integer eu tincidunt tortor. Pellentesque placerat auctor neque sit amet malesuada. Suspendisse vel tellus erat. Nam dapibus aliquet ligula eu fringilla. Ut sit amet luctus elit. Ut efficitur sapien sed dolor cursus congue.
[br][/br][br][/br]
Cras hendrerit dapibus convallis. Maecenas a sollicitudin urna. Integer ac molestie odio. Nunc ut risus tellus. Phasellus vitae mattis arcu, vel mattis diam. Proin consequat porttitor viverra. Suspendisse potenti. Duis sodales velit velit, id tempus nunc sollicitudin ac. In tincidunt nec risus at gravida. Morbi nec justo quis est volutpat elementum. Aliquam vitae mollis lectus. Quisque auctor tortor ut mi scelerisque venenatis. Suspendisse accumsan ipsum eget diam malesuada, sed tempus turpis ornare.[/font][/pindent][/div][/div][/div][/div][/div][/div][/nobr][center][size=2]codedbycrucially | click on picture [ tabs ] | hidden scroll[/size][/center]