Resource [lillies' themes]

lillies · Jan 3, 2020

[div class="container"] [div class="icon"][/div] [div class="sub"] mood: hungry
listening to: robbie williams
last edited: 01/03/2020
[/div] [div class="scrollable"] [div class="text"] [div class="title"]introduction[/div] welcome to my code dump! i'm lillies and i'm trying to make scalable, mobile-friendly character themes c:
bbcode isn't really my cup of tea, so this is mostly me poking around with no plans and a poor coding etiquette — be prepared for a MESS

[div class="title"]do's[/div] ⤷ use freely [div class="link"]~~in any which way you can~~[/div]
⤷ honestly do whatever you want, edit, poke around, claim them as your own idc
⤷ beware ! i don't proofread so some of the code is probably poorly organized
⤷ ask away, give me ideas and requests ^^
⤷ let me know if the codes have issues or show up funny on some device!

[div class="title"]resources[/div] ⤷ [div class="link"]canva[/div] — color scheme from image
⤷ [div class="link"]w3schools[/div] — css references
⤷ [div class="link"]color codes[/div] — html color codes, hex names and charts
⤷ [div class="link"]hex to rgb[/div] — converts hex color code to rgb
⤷ [div class="link"]google fonts[/div] — some fonts
[/div] [/div] [/div] [class="container"] margin: auto; width: 350px; max-width: 95%; height: 250px; background-color: #100906; border: 1px dotted #8b626e; border-radius: 4px; padding: 20px; overflow: hidden; [/class] [class="scrollable"] height: 100%; width: 100%; overflow-y: scroll; padding-right: 80px; margin-left: 90px; box-sizing: border-box; [/class] [class="sidebar"] position: absolute; width: 75px; height: auto; [/class] [class="icon"] box-sizing: border-box; position: absolute; width: 75px; height: 75px; background: url('https://66.media.tumblr.com/7826bc5bd77b57137ee7237386e37426/tumblr_oabp1karlS1tumicto6_250.png'); background-size: cover; background-position: center center; border: 1px dotted #f9f5f7; [/class] [class="sub"] box-sizing: border-box; position: absolute; width: 75px; margin-top: 85px; height: auto; padding: 5px; border: 1px dotted #f9f5f7; font-family: 'Cutive Mono'; font-size: 10px; color: #f9f5f7; [/class] [class="text"] font-family: B612 Mono; font-size: 10px; color: #8b626e; [/class] [class="title"] color: #f9f5f7; font-family: VT323; font-size: 12px; text-transform: uppercase; [/class] [class="italic"] font-style: italic; color: #bc6e76; [/class] [class="link"] transition: 1s; display: inline; color: #b51324; text-decoration: underline; text-decoration-color: #f9f5f7; [/class] [class name="link" state=hover] color: #f9f5f7; text-decoration: underline; text-decoration-color: #b51324; [/class]

lillies · Jan 3, 2020

[div class="container"] [div class="themetitle"]01 tag queen[/div] [div class="profile"] [div class="profilepic"] [div class="ppcolor"][/div] [/div] [div class="navbar"] [div class="navitem"] tag [/div] [div class="navitem"] dis a tag [/div] [div class="navitem"] another tag [/div] [div class="navitem"] of different length [/div] [div class="navitem"] tag [/div] [div class="navitem"] tag queen [/div] [div class="navitem"] tagfinity [/div] [/div] [/div] [div class="content"] [div class="scrollable"] [div class="title"]01 profile[/div] [div class="info infofont"] [div class="infob"]name[/div] full name
[div class="infob"]d.o.b[/div] xx/xx/xxxx
[div class="infob"]p.o.b[/div] xx, xx
[div class="infob"]gender[/div] queen
[div class="infob"]sexuality[/div] x
[div class="infob"]ethnicity[/div] x
[/div] [div class="info pic"][/div] [div class="info infofont"] [div class="infob"]height[/div] xxx cm
[div class="infob"]weight[/div] xx kg
[div class="infob"]hair[/div] under a tiara
[div class="infob"]eyes[/div] queenlike
[div class="infob"]body[/div] we stan a thicc queen [/div] [div class="info pic"][/div] [div class="info infofont"] [div class="infob"]mbti[/div] xxxx-x
[div class="infob"]star sign[/div] x
[div class="infob"]alignment[/div] chaotic queen
[div class="infob"]affiliation[/div] her queendom
[/div] [div class="info pic"][/div] [div class="title"] 02 biography [/div] [div class="description"] Integer malesuada nunc vel risus commodo viverra. Eget nulla facilisi etiam dignissim diam quis enim lobortis. Et leo duis ut diam. Magna sit amet purus gravida quis blandit turpiscursus in. Egestas egestas fringilla phasellus faucibus. Sit amet justo donec enim diam vulputate ut pharetra sit. Cras sed felis eget velit. Eget nullam non nisi est sit amet facilisis magna. Commodo quis imperdiet massa tincidunt nunc. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. [/div] [div class="title"] 03 personality [/div] [div class="description"] Imperdiet dui accumsan sit amet. In ornare quam viverra orci sagittis eu volutpat odio facilisis. In massa tempor nec feugiat nisl pretium. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu.

Ut aliquam purus sit amet luctus. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Elit at imperdiet dui accumsan. Viverra aliquet eget sit amet tellus. Imperdiet proin fermentum leo vel. Tortor at auctor urna nunc id cursus metus. Nulla at volutpat diam ut venenatis tellus in. [/div] [div class="title"]04 appearance[/div] [div class="description"] Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Felis eget nunc lobortis mattis aliquam faucibus. Nibh praesent tristique magna sit amet purus gravida quis. Viverra nibh cras pulvinar mattis nunc. Cras ornare arcu dui vivamus. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Mattis enim ut tellus elementum sagittis vitae et leo duis. Mauris in aliquam sem fringilla ut morbi tincidunt. Scelerisque viverra mauris in aliquam. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Pharetra et ultrices neque ornare aenean euismod elementum nisi. [/div] [/div] [/div] [/div] [class="themetitle"] font-family: Monofett; font-size: 30px; text-shadow: 3px 3px rgb(206, 89, 77, 0.8); position: absolute; margin-top: -58px; margin-left: -15px; [/class] [class="container"] margin: 20px auto; width: 600px; max-width: 95%; height: auto; padding: 10px 1px; text-align: center; background-color: #eae4e7; border: 4px double #ce594d; border-radius: 3px; [/class] [class="profile"] margin: auto; display: inline-block; vertical-align: top; width: 100%; max-width: 150px; height: auto; margin-bottom: 15px; margin-right: 20px; [/class] [class="content"] margin: auto; display: inline-block; vertical-align: top; max-width: 400px; width: 100%; min-width: 210px; height: 320px; overflow: hidden; [/class] [class="scrollable"] padding-right: 5%; height: 100%; width: 100%; overflow-y: scroll; background-color: #eae4e7; text-align: center; [/class] [class="description"] font-family: Karla; font-size: 11px; text-align: justify; color: #eae4e7; box-sizing: border-box; display: inline-block; height: auto; width: calc(100% - 10px); padding: 15px; background-color: #2a1b18; border: 1px solid #eae4e7; box-shadow: 3px 3px #ac2122; margin-bottom: 4px; [/class] [class="profilepic"] margin-top: 4px; width: 100%; height: 150px; background-color: white; background: url('https://i.ibb.co/N2VBWcP/colors.jpg'); background-size: cover; background-position: center center; box-shadow: -4px -4px #db2d2e; [/class] [class="ppcolor"] position: absolute; margin-top: 4px; margin-left: 4px; height: 150px; width: 150px; border: 1px solid #db2d2e; [/class] [class="navbar"] margin-top: 10px; width: 100%; height: auto; text-align: left; [/class] [class="navitem"] font-family: Cutive Mono; display: inline-block; width: auto; height: auto; padding: 1px 4px; font-size: 10px; text-align: center; color: #eae4e7; background-color: #2a1b18; box-shadow: 2px 2px #ac2122; border: 1px solid #eae4e7; border-radius: 10px; [/class] [class="title"] font-family: Monofett; font-size: 25px; color: #2a1b18; text-shadow: 3px 3px rgb(206, 89, 77, 0.8); text-transform: uppercase; [/class] [class="info"] vertical-align: top; display: inline-block; height: auto; min-height: 100px; width: 90px; max-width: 30%; padding: 10px; text-align: left; background-color: #2a1b18; box-shadow: -3px -3px #ac2122; border: 1px solid #eae4e7; margin: 5px; [/class] [class="pic"] background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgp3YvkhCrHal8rC80nKB8czu8dBKMucustXuIbbZIwoOL5kzB&s'); background-size: cover; background-position: center center; box-shadow: 3px 3px #ac2122; [/class] [class="infob"] display: inline-block; color: #ce594d; [/class] [class="infofont"] font-family: Cutive Mono; font-size: 9.4px; font-weight: lighter; color: #eae4e7; [/class] [class name="navitem" state=hover] transition: ease-in-out 0.7s; color: #eae4e7; background-color: #ac2122; box-shadow: 2px 2px 1px #2a1b18; [/class] [class="fadeout"] transition: ease-in-out 0.7s; color: #eae4e7; background-color: #2a1b18; box-shadow: 2px 2px #ac2122; [/class] [script class="navitem" on=mouseleave] addClass fadeout [/script]

Code:

[nobr]
[font="Monofett"][br][/br][/font]
[font="Cutive Mono"][br][/br][/font]
[font="Karla"][br][/br][/font]
[div class="container"]
[div class="themetitle"]01 tag queen[/div]

    [comment]
        ↓ PROFILE BELOW ↓
    [/comment]

    [div class="profile"]
        [div class="profilepic"]
            [div class="ppcolor"][/div]
        [/div]
        [div class="navbar"]
                [div class="navitem"]
                    tag here
                [/div]
                [div class="navitem"]
                    dis a tag
                [/div]
                [div class="navitem"]
                    another tag
                [/div]
                [div class="navitem"]
                    of different length
                [/div]
                [div class="navitem"]
                    tag here
                [/div]
                [div class="navitem"]
                    tag
                [/div]
                [div class="navitem"]
                    tag here
                [/div]
        [/div]
    [/div]

    [comment]
        ↓ CONTENT BELOW ↓
    [/comment]

    [div class="content"]
        [div class="scrollable"]
            [div class="title"]01 profile[/div]
                [div class="info infofont"]
                    [div class="infob"]name[/div] xx [br][/br]
                    [div class="infob"]d.o.b[/div] xx/xx/xxxx [br][/br]
                    [div class="infob"]p.o.b[/div] xx, xx [br][/br]
                    [div class="infob"]gender[/div] xx [br][/br]
                    [div class="infob"]sexuality[/div] x [br][/br]
                    [div class="infob"]ethnicity[/div] x [br][/br]
                [/div]
                [div class="info pic"][/div]
                [div class="info infofont"]
                    [div class="infob"]height[/div] xxx cm [br][/br]
                    [div class="infob"]weight[/div] xx kg [br][/br]
                    [div class="infob"]hair[/div] xx [br][/br]
                    [div class="infob"]eyes[/div] xx [br][/br]
                    [div class="infob"]body[/div] xx
                [/div]
                [div class="info pic"][/div]
                [div class="info infofont"]
                    [div class="infob"]mbti[/div] xxxx-x [br][/br]
                    [div class="infob"]star sign[/div] x [br][/br]
                    [div class="infob"]alignment[/div] xx[br][/br]
                    [div class="infob"]affiliation[/div] xx [br][/br]
                [/div]
                [div class="info pic"][/div]
            [div class="title"] 02 biography [/div]
            [div class="description"]
                TEXT HERE
            [/div]

            [div class="title"] 03 personality [/div]
            [div class="description"]
                TEXT HERE
            [/div]

            [div class="title"]04 appearance[/div]
            [div class="description"]
                TEXT HERE
            [/div]
        [/div]
    [/div]
[/div]


[comment]
    ↓ CLASSES BELOW ↓
[/comment]

[class="themetitle"]
    font-family: Monofett;
    font-size: 30px;
    text-shadow: 3px 3px rgb(206, 89, 77, 0.8);
    position: absolute;
    margin-top: -58px;
    margin-left: -15px;
[/class]

[class="container"]
    margin: 20px auto;
    width: 600px;
    max-width: 95%;
    height: auto;
    padding: 10px 1px;
    text-align: center;
    background-color: #eae4e7;
    border: 4px double #ce594d;
    border-radius: 3px;
[/class]

[class="profile"]
    margin: auto;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin-bottom: 15px;
    margin-right: 20px;
[/class]

[class="content"]
    margin: auto;
    display: inline-block;
    vertical-align: top;
    max-width: 400px;
    width: 100%;
    min-width: 210px;
    height: 320px;
    overflow: hidden;
[/class]

[class="scrollable"]
    padding-right: 5%;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    background-color: #eae4e7;
    text-align: center;
[/class]

[class="description"]
    font-family: Karla;
    font-size: 11px;
    text-align: justify;
    color: #eae4e7;
    box-sizing: border-box;
    display: inline-block;
    height: auto;
    width: calc(100% - 10px);
    padding: 15px;
    background-color: #2a1b18;
    border: 1px solid #eae4e7;
    box-shadow: 3px 3px #ac2122;
    margin-bottom: 4px;
[/class]

[class="profilepic"]
    margin-top: 4px;
    width: 100%;
    height: 150px;
    background-color: white;
    background: url('https://i.ibb.co/N2VBWcP/colors.jpg');
    background-size: cover;
    background-position: center center;
    box-shadow: -4px -4px #db2d2e;
[/class]

[class="ppcolor"]
    position: absolute;
    margin-top: 4px;
    margin-left: 4px;
    height: 150px;
    width: 150px;
    border: 1px solid #db2d2e;
[/class]

[class="navbar"]
    margin-top: 10px;
    width: 100%;
    height: auto;
    text-align: left;
[/class]

[class="navitem"]
    font-family: Cutive Mono;
    display: inline-block;
    width: auto;
    height: auto;
    padding: 1px 4px;
    font-size: 10px;
    text-align: center;
    color: #eae4e7;
    background-color: #2a1b18;
    box-shadow: 2px 2px #ac2122;
    border: 1px solid #eae4e7;
    border-radius: 10px;
[/class]

[class="title"]
    font-family: Monofett;
    font-size: 25px;
    color: #2a1b18;
    text-shadow: 3px 3px rgb(206, 89, 77, 0.8);
    text-transform: uppercase;
[/class]

[class="info"]
    vertical-align: top;
    display: inline-block;
    height: auto;
    min-height: 100px;
    width: 90px;
    max-width: 30%;
    padding: 10px;
    text-align: left;
    background-color: #2a1b18;
    box-shadow: -3px -3px #ac2122;
    border: 1px solid #eae4e7;
    margin: 5px;
[/class]

[class="pic"]
    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgp3YvkhCrHal8rC80nKB8czu8dBKMucustXuIbbZIwoOL5kzB&s');
    background-size: cover;
    background-position: center center;
    box-shadow: 3px 3px #ac2122;
[/class]

[class="infob"]
    display: inline-block;
    color: #ce594d;
[/class]

[class="infofont"]
    font-family: Cutive Mono;
    font-size: 9.4px;
    font-weight: lighter;
    color: #eae4e7;
[/class]

[class name="navitem" state=hover]
    transition: ease-in-out 0.7s;
    color: #eae4e7;
    background-color: #ac2122;
    box-shadow: 2px 2px 1px #2a1b18;
[/class]

[class="fadeout"]
    transition: ease-in-out 0.7s;
    color: #eae4e7;
    background-color: #2a1b18;
    box-shadow: 2px 2px #ac2122;
[/class]

[script class="navitem" on=mouseleave]
    addClass fadeout
[/script]

[/nobr]

01 Tag Queen
x hidden scroll on right
x scalable — tested on firefox and chrome on my laptop and phone, let me know if something looks funny on your device! c:

lillies · Jan 3, 2020

[div class="container"] [div class="themetitle"]02 tab queen[/div] [div class="profile"] [div class="profilepic"] [div class="ppcolor"][/div] [/div] [div class="navbar"] [div class="navitem tab01"] 01 [/div] [div class="navitem tab02"] 02 [/div] [div class="navitem tab03"] 03 [/div] [div class="navitem tab04"] 04 [/div] [/div] [div class="profilepicsmall"] [/div] [/div] [div class="content"] [div class="scrollable"] [div class="01"] [div class="left"][div class="title"]profile[/div][/div] [div class="info infofont"] [div class="infob"]name[/div] full name
[div class="infob"]d.o.b[/div] xx/xx/xxxx
[div class="infob"]p.o.b[/div] xx, xx
[div class="infob"]gender[/div] queen
[div class="infob"]sexuality[/div] x
[div class="infob"]ethnicity[/div] x
[div class="infob"]height[/div] xxx cm
[div class="infob"]weight[/div] xx kg
[div class="infob"]hair[/div] under a tiara
[div class="infob"]eyes[/div] queenlike
[div class="infob"]body[/div] we stan a thicc queen
[div class="infob"]alignment[/div] chaotic queen
[div class="infob"]affiliation[/div] her queendom
[/div] [/div] [div class="02" style=display:none] [div class="left"][div class="title"]biography[/div][/div] [div class="description"] Integer malesuada nunc vel risus commodo viverra. Eget nulla facilisi etiam dignissim diam quis enim lobortis. Et leo duis ut diam. Magna sit amet purus gravida quis blandit turpiscursus in. Egestas egestas fringilla phasellus faucibus. Sit amet justo donec enim diam vulputate ut pharetra sit. Cras sed felis eget velit. Eget nullam non nisi est sit amet facilisis magna. Commodo quis imperdiet massa tincidunt nunc. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. [/div] [/div] [div class="03" style=display:none] [div class="left"][div class="title"]personality[/div][/div] [div class="description"] Imperdiet dui accumsan sit amet. In ornare quam viverra orci sagittis eu volutpat odio facilisis. In massa tempor nec feugiat nisl pretium. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu.

Ut aliquam purus sit amet luctus. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Elit at imperdiet dui accumsan. Viverra aliquet eget sit amet tellus. Imperdiet proin fermentum leo vel. Tortor at auctor urna nunc id cursus metus. Nulla at volutpat diam ut venenatis tellus in. [/div] [/div] [div class="04" style=display:none] [div class="left"][div class="title"]appearance[/div][/div] [div class="description"] Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Felis eget nunc lobortis mattis aliquam faucibus. Nibh praesent tristique magna sit amet purus gravida quis. Viverra nibh cras pulvinar mattis nunc. Cras ornare arcu dui vivamus. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Mattis enim ut tellus elementum sagittis vitae et leo duis. Mauris in aliquam sem fringilla ut morbi tincidunt. Scelerisque viverra mauris in aliquam. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Pharetra et ultrices neque ornare aenean euismod elementum nisi. [/div] [/div] [/div] [/div] [/div] [class="themetitle"] color: #100e0e; font-family: Monofett; font-size: 30px; text-shadow: 2px 2px #ccdbe5; position: absolute; margin-top: -58px; margin-left: -15px; [/class] [class="container"] margin: 20px auto; width: 600px; max-width: 95%; height: auto; padding: 10px 1px; text-align: center; background-color: #100e0e; border: 4px double #ccdbe5; border-radius: 3px; [/class] [class="profile"] margin: auto; display: inline-block; vertical-align: top; width: 100%; max-width: 150px; height: auto; margin-right: 20px; [/class] [class="content"] margin: auto; display: inline-block; vertical-align: top; max-width: 400px; width: 100%; min-width: 210px; height: 320px; overflow: hidden; [/class] [class="scrollable"] padding-right: 5%; height: 100%; width: 100%; overflow-y: scroll; text-align: center; [/class] [class="description"] font-family: Karla; font-size: 11px; text-align: justify; color: #f6f7f5; box-sizing: border-box; display: inline-block; height: auto; width: calc(100% - 10px); padding: 15px; background-color: #100e0e; box-shadow: -3px -3px #bc6c1c; border: 1px solid #1fafd1; margin-bottom: 4px; [/class] [class="profilepic"] margin-top: 4px; width: 100%; height: 170px; background-color: white; background: url('https://i.ibb.co/DVXNLH9/laura2.jpg'); background-size: cover; background-position: center center; box-shadow: -4px -4px #d49047; [/class] [class="profilepicsmall"] margin-top: 15px; display: inline-block; height: 80px; width: 100%; border: 1px solid #1fafd1; background: url('https://66.media.tumblr.com/19391cae07ac2c07abba9c04f2e06e0d/tumblr_oplhs9cGoC1utvmoto1_400.png'); background-position: center center; background-size: cover; [/class] [class="ppcolor"] position: absolute; margin-top: 4px; margin-left: 4px; height: 170px; width: 150px; border: 1px solid #1fafd1; [/class] [class="navbar"] margin-top: 15px; width: 100%; height: auto; text-align: center; [/class] [class="navitem"] box-sizing: border-box; font-family: Cutive Mono; display: inline-block; width: 30px; height: 30px; padding: 4px; font-size: 10px; text-align: center; color: #ccdbe5; background-color: #100e0e; box-shadow: 2px 2px #d49047; border: 1px solid #ccdbe5; cursor: pointer; [/class] [class="left"] text-align: left; margin-left: 15px; margin-top: 15px; [/class] [class="title"] display: inline-block; font-family: Cutive Mono; letter-spacing: 2px; font-size: 12px; color: #d49047; text-transform: lowercase; text-align: left; padding: 4px; border: 1px solid #ccdbe5; box-shadow: 2px 2px #d49047; [/class] [class="info"] vertical-align: top; display: inline-block; height: auto; min-height: 100px; width: 300px; max-width: 90%; padding: 10px; text-align: right; background-color: #100e0e; box-shadow: -3px -3px #bc6c1c; border: 1px solid #1fafd1; margin: 5px; [/class] [class="pic"] background: url('https://i.ibb.co/7XPBCW6/laura.jpg'); background-size: cover; background-position: center center; box-shadow: 3px 3px #2a1b18; [/class] [class="infob"] display: inline-block; color: #bc6c1c; float: left; [/class] [class="infofont"] font-family: Karla; font-size: 10px; font-weight: lighter; color: #f6f7f5; [/class] [class name="fadein"] transition: ease-in-out 0.7s; color: #100e0e; background-color: #ccdbe5; border: 1px solid #d49047; box-shadow: 2px 2px 1px #ccdbe5; [/class] [class="fadeout"] transition: ease-in-out 0.7s; color: #ccdbe5; background-color: #100e0e; box-shadow: 2px 2px #d49047; border: 1px solid #ccdbe5; [/class] [class="hide"] transition: ease-in-out 0.7s; opacity: 0; [/class] [class="show"] transition: ease-in-out 0.7s; opacity: 1; [/class] [script class="navitem" on=mouseenter] removeClass fadeout addClass fadein [/script] [script class="navitem" on=mouseleave] removeClass fadein addClass fadeout [/script] [script class="tab01" on=click] show 01 hide 02 hide 03 hide 04 [/script] [script class="tab02" on=click] show 02 hide 01 hide 03 hide 04 [/script] [script class="tab03" on=click] show 03 hide 01 hide 02 hide 04 [/script] [script class="tab04" on=click] show 04 hide 01 hide 02 hide 03 [/script]

Code:

[nobr]
[div class="container"]
[div class="themetitle"]02 tab queen[/div]

    [comment]
        ↓ PROFILE BELOW ↓
    [/comment]

    [div class="profile"]
        [div class="profilepic"]
            [div class="ppcolor"][/div]
        [/div]
        [div class="navbar"]
                [div class="navitem tab01"]
                    01
                [/div]
                [div class="navitem tab02"]
                    02
                [/div]
                [div class="navitem tab03"]
                    03
                [/div]
                [div class="navitem tab04"]
                    04
                [/div]
        [/div]
        [div class="profilepicsmall"]
        [/div]
    [/div]

    [comment]
        ↓ CONTENT BELOW ↓
    [/comment]

    [div class="content"]
        [div class="scrollable"]
            [div class="01"]
                    [div class="left"][div class="title"]profile[/div][/div]
                    [div class="info infofont"]
                        [div class="infob"]name[/div] full name [br][/br]
                        [div class="infob"]d.o.b[/div] xx/xx/xxxx [br][/br]
                        [div class="infob"]p.o.b[/div] xx, xx [br][/br]
                        [div class="infob"]gender[/div] queen [br][/br]
                        [div class="infob"]sexuality[/div] x [br][/br]
                        [div class="infob"]ethnicity[/div] x [br][/br]
                        [div class="infob"]height[/div] xxx cm [br][/br]
                        [div class="infob"]weight[/div] xx kg [br][/br]
                        [div class="infob"]hair[/div] under a tiara [br][/br]
                        [div class="infob"]eyes[/div] queenlike [br][/br]
                        [div class="infob"]body[/div] we stan a thicc queen [br][/br]
                        [div class="infob"]alignment[/div] chaotic queen [br][/br]
                        [div class="infob"]affiliation[/div] her queendom[br][/br]
                    [/div]
            [/div]
            [div class="02" style=display:none]
                    [div class="left"][div class="title"]biography[/div][/div]
                [div class="description"]
                    Integer malesuada nunc vel risus commodo viverra. Eget nulla facilisi etiam dignissim diam quis enim lobortis. Et leo duis ut diam. Magna sit amet purus gravida quis blandit turpiscursus in. Egestas egestas fringilla phasellus faucibus. Sit amet justo donec enim diam vulputate ut pharetra sit. Cras sed felis eget velit. Eget nullam non nisi est sit amet facilisis magna. Commodo quis imperdiet massa tincidunt nunc. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque.
                [/div]
            [/div]
            [div class="03" style=display:none]
                    [div class="left"][div class="title"]personality[/div][/div]
                [div class="description"]
                    Imperdiet dui accumsan sit amet. In ornare quam viverra orci sagittis eu volutpat odio facilisis. In massa tempor nec feugiat nisl pretium. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu.
                   [br][/br]
                   [br][/br]
                   Ut aliquam purus sit amet luctus. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Elit at imperdiet dui accumsan. Viverra aliquet eget sit amet tellus. Imperdiet proin fermentum leo vel. Tortor at auctor urna nunc id cursus metus. Nulla at volutpat diam ut venenatis tellus in.
                [/div]
            [/div]
            [div class="04" style=display:none]
                    [div class="left"][div class="title"]appearance[/div][/div]
                [div class="description"]
                    Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Felis eget nunc lobortis mattis aliquam faucibus. Nibh praesent tristique magna sit amet purus gravida quis. Viverra nibh cras pulvinar mattis nunc. Cras ornare arcu dui vivamus. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Mattis enim ut tellus elementum sagittis vitae et leo duis. Mauris in aliquam sem fringilla ut morbi tincidunt. Scelerisque viverra mauris in aliquam. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Pharetra et ultrices neque ornare aenean euismod elementum nisi.
                [/div]
            [/div]
        [/div]
    [/div]
[/div]


[comment]
    ↓ CLASSES BELOW ↓
[/comment]

[class="themetitle"]
    color:  #100e0e;
    font-family: Monofett;
    font-size: 30px;
    text-shadow: 2px 2px #ccdbe5;
    position: absolute;
    margin-top: -58px;
    margin-left: -15px;
[/class]

[class="container"]
    margin: 20px auto;
    width: 600px;
    max-width: 95%;
    height: auto;
    padding: 10px 1px;
    text-align: center;
    background-color:  #100e0e;
    border: 4px double #ccdbe5;
    border-radius: 3px;
[/class]

[class="profile"]
    margin: auto;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin-right: 20px;
[/class]

[class="content"]
    margin: auto;
    display: inline-block;
    vertical-align: top;
    max-width: 400px;
    width: 100%;
    min-width: 210px;
    height: 320px;
    overflow: hidden;
[/class]

[class="scrollable"]
    padding-right: 5%;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    text-align: center;
[/class]

[class="description"]
    font-family: Karla;
    font-size: 11px;
    text-align: justify;
    color: #f6f7f5;
    box-sizing: border-box;
    display: inline-block;
    height: auto;
    width: calc(100% - 10px);
    padding: 15px;
    background-color: #100e0e;
    box-shadow: -3px -3px #bc6c1c;
    border: 1px solid #1fafd1;
    margin-bottom: 4px;
[/class]

[class="profilepic"]
    margin-top: 4px;
    width: 100%;
    height: 170px;
    background-color: white;
    background: url('https://i.ibb.co/DVXNLH9/laura2.jpg');
    background-size: cover;
    background-position: center center;
    box-shadow: -4px -4px #d49047;
[/class]

[class="profilepicsmall"]
   margin-top: 15px;
   display: inline-block;
   height: 80px;
   width: 100%;
   border: 1px solid #1fafd1;
   background: url('https://66.media.tumblr.com/19391cae07ac2c07abba9c04f2e06e0d/tumblr_oplhs9cGoC1utvmoto1_400.png');
   background-position: center center;
   background-size: cover;
[/class]

[class="ppcolor"]
    position: absolute;
    margin-top: 4px;
    margin-left: 4px;
    height: 170px;
    width: 150px;
    border: 1px solid #1fafd1;
[/class]

[class="navbar"]
    margin-top: 15px;
    width: 100%;
    height: auto;
    text-align: center;
[/class]

[class="navitem"]
    box-sizing: border-box;
    font-family: Cutive Mono;
    display: inline-block;
    width: 30px;
    height: 30px;
    padding: 4px;
    font-size: 10px;
    text-align: center;
    color: #ccdbe5;
    background-color: #100e0e;
    box-shadow: 2px 2px #d49047;
    border: 1px solid #ccdbe5;
    cursor: pointer;
[/class]

[class="left"]
    text-align: left;
    margin-left: 15px;
    margin-top: 15px;
[/class]

[class="title"]
    display: inline-block;
    font-family: Cutive Mono;
    letter-spacing: 2px;
    font-size: 12px;
    color: #d49047;
    text-transform: lowercase;
    text-align: left;
    padding: 4px;
    border: 1px solid #ccdbe5;
    box-shadow: 2px 2px #d49047;
[/class]

[class="info"]
    vertical-align: top;
    display: inline-block;
    height: auto;
    min-height: 100px;
    width: 300px;
    max-width: 90%;
    padding: 10px;
    text-align: right;
    background-color: #100e0e;
    box-shadow: -3px -3px #bc6c1c;
    border: 1px solid #1fafd1;
    margin: 5px;
[/class]

[class="pic"]
    background: url('https://i.ibb.co/7XPBCW6/laura.jpg');
    background-size: cover;
    background-position: center center;
    box-shadow: 3px 3px #2a1b18;
[/class]

[class="infob"]
    display: inline-block;
    color: #bc6c1c;
    float: left;
[/class]

[class="infofont"]
    font-family: Karla;
    font-size: 10px;
    font-weight: lighter;
    color: #f6f7f5;
[/class]

[class name="fadein"]
    transition: ease-in-out 0.7s;
    color: #100e0e;
    background-color: #ccdbe5;
    border: 1px solid #d49047;
    box-shadow: 2px 2px 1px #ccdbe5;
[/class]

[class="fadeout"]
    transition: ease-in-out 0.7s;
    color: #ccdbe5;
    background-color: #100e0e;
    box-shadow: 2px 2px #d49047;
    border: 1px solid #ccdbe5;
[/class]

[class="hide"]
    transition: ease-in-out 0.7s;
    opacity: 0;
[/class]

[class="show"]
    transition: ease-in-out 0.7s;
    opacity: 1;
[/class]

[script class="navitem" on=mouseenter]
    removeClass fadeout
    addClass fadein
[/script]

[script class="navitem" on=mouseleave]
    removeClass fadein
    addClass fadeout
[/script]

[script class="tab01" on=click]
    show 01
    hide 02
    hide 03
    hide 04
[/script]

[script class="tab02" on=click]
    show 02
    hide 01
    hide 03
    hide 04
[/script]

[script class="tab03" on=click]
    show 03
    hide 01
    hide 02
    hide 04
[/script]

[script class="tab04" on=click]
    show 04
    hide 01
    hide 02
    hide 03
[/script]

[/nobr]

02 Tab Queen
x hidden scroll on right
x tabs on left
x scalable — tested on firefox and chrome on my laptop and phone, let me know if something looks funny on your device! c:

grimvr · Jan 3, 2020

the colors on both of these

lillies · Jan 7, 2020

[div class="container"] [div class="themetitle"]03 twin peaks[/div] [div class="sidebar"] [div class="icon"][/div] [div class="sub subtext"]mood: dreamy[/div] [div class="sub subtext"]listening to: jimmy scott - sycamore trees[/div] [/div] [div class="navbar"] [div class="navitem nav1"][/div] [div class="navitem nav2"][/div] [div class="navitem nav3"][/div] [div class="navitem nav4"][/div] [div class="navitem nav5"][/div] [div class="navitem nav6"][/div] [/div] [div class="content"] [div class="scrollable text 01"] [div class="title"]profile[/div] [div class="profilepic"] [div class="bold profilequote"] ❝do your palms
ever itch?❞ [/div] [/div] [div class="box profilebox"] [div class="underlined"]name[/div] [div class="italic"]audrey horne[/div] [div class="underlined"]birthday[/div] [div class="italic"]august 24th, 1970[/div] [div class="underlined"]birthplace[/div] [div class="italic"]twin peaks, washington[/div] [div class="underlined"]occupation[/div] [div class="italic"]student[/div] [div class="underlined"]face claim[/div] [div class="italic"]sherilyn fenn[/div] [/div] [/div] [div class="scrollable text 02" style="display:none"] [div class="title"]biography[/div] [div class="box"] At vero [div class="bold"]eos[/div] et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum, deleniti atque corrupti [div class="italic"]quos[/div] dolores et quas molestias excepturi. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores. [/div] [div class="biopic"][/div] [/div] [div class="scrollable text 03" style="display:none"] [div class="title"]personality[/div] [div class="box"] Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. [/div] [/div] [div class="scrollable text 04" style="display:none"] [div class="title"]appearance[/div] [div class="box profilebox"] [div class="underlined"]height[/div] [div class="italic"]x'x"[/div] [div class="underlined"]weight[/div] [div class="italic"]xxx lbs[/div] [div class="underlined"]hair[/div] [div class="italic"]hair description[/div] [div class="underlined"]eyes[/div] [div class="italic"]eye description[/div] [div class="underlined"]skin[/div] [div class="italic"]skin tone[/div] [div class="underlined"]body[/div] [div class="italic"]body type[/div] [/div] [div class="box profilebox"] [div class="underlined"]dress[/div] [div class="italic"]description of typical clothing[/div] [div class="underlined"]makeup[/div] [div class="italic"]description of typical makeup[/div] [div class="underlined"]body modifications[/div] [div class="italic"] description of modifications
[div class="link"]link one[/div], [div class="link"]link two[/div] [/div] [/div] [/div] [div class="scrollable text 05" style="display:none"] [div class="title"]relationships (hover!) [/div] [div class="relpic rel1"] [div class="relinfo"] [div class="underlined"]dale cooper[/div] [div class="italic"]a friendly neighbor-hood fbi agent[/div] [/div] [/div] [div class="relpic rel2"] [div class="relinfo"] [div class="underlined"]laura palmer[/div] [div class="italic"]a dead girl[/div] [/div] [/div] [div class="relpic rel3"] [div class="relinfo"] [div class="underlined"]donna hayward[/div] [div class="italic"]half-sister[/div] [/div] [/div] [div class="relpic rel4"] [div class="relinfo"] [div class="underlined"]ben horne[/div] [div class="italic"]father[/div] [/div] [/div] [div class="relpic rel5"] [div class="relinfo"] [div class="underlined"]sylvia horne[/div] [div class="italic"]mother[/div] [/div] [/div] [div class="relpic rel6"] [div class="relinfo"] [div class="underlined"]johnny horne[/div] [div class="italic"]brother[/div] [/div] [/div] [div class="relpic rel7"] [div class="relinfo"] [div class="underlined"]jerry horne[/div] [div class="italic"]uncle[/div] [/div] [/div] [div class="relpic rel8"] [div class="relinfo"] [div class="underlined"]bobby briggs[/div] [div class="italic"]a cute boi[/div] [/div] [/div] [div class="relpic rel9"] [div class="relinfo"] [div class="underlined"]the man from another place[/div] [div class="italic"]creepy mf[/div] [/div] [/div] [/div] [div class="scrollable text 06" style="display:none"] [div class="title"]misc[/div] [div class="box profilebox"] [div class="underlined"]hobbies[/div] [div class="italic"]hobby one, hobby two, hobby three[/div] [div class="underlined"]habits[/div] [div class="italic"]habit one, habit two[/div] [div class="underlined"]likes[/div] [div class="italic"] like one, like two, like three, like four [/div] [div class="underlined"]dislikes[/div] [div class="italic"] dislike one, dislike two, dislike three [/div] [/div] [div class="box profilebox"] [div class="underlined"]color[/div] [div class="italic"]favorite color[/div] [div class="underlined"]theme song[/div] [div class="italic"]theme song of character[/div] [div class="underlined"]drink[/div] [div class="italic"]favorite drink[/div] [div class="underlined"]food[/div] [div class="italic"]favorite food[/div] [div class="underlined"]mbti[/div] [div class="italic"]mbti personality[/div] [div class="underlined"]trivia[/div] [div class="italic"]any trivia[/div] [/div] [/div] [/div] [/div] [class="themetitle"] color: #100906; font-family: Monofett; font-size: 30px; text-shadow: 2px 2px #8b626e; position: absolute; margin-top: -68px; margin-left: -15px; [/class] [class="container"] box-sizing: border-box; width: 390px; max-width: 95%; height: 320px; overflow: hidden; margin: auto; padding: 20px 20px 0px 20px; background-color: #100906; border: 1px dotted #8b626e; border-radius: 4px; text-align: center; cursor: crosshair; [/class] [class="sidebar"] display: inline-block; box-sizing: border-box; vertical-align: top; width: 75px; height: 250px; [/class] [class="icon"] display: inline-block; box-sizing: border-box; width: 75px; height: 75px; background: url('https://66.media.tumblr.com/7826bc5bd77b57137ee7237386e37426/tumblr_oabp1karlS1tumicto6_250.png'); background-size: cover; background-position: center center; border: 1px dotted #f9f5f7; [/class] [class="nav1"] background: url('https://i.ibb.co/K90n7P0/icon1dark.png'); [/class] [class="nav2"] background: url('https://i.ibb.co/k5YGbQQ/icon3dark.png'); [/class] [class="nav3"] background: url('https://i.ibb.co/K6V6KpV/icon6dark.png'); [/class] [class="nav4"] background: url('https://i.ibb.co/7rv12gg/icon4dark.png'); [/class] [class="nav5"] background: url('https://i.ibb.co/LYkrHKd/icon2dark.png'); [/class] [class="nav6"] background: url('https://i.ibb.co/5TYLLG2/icon5dark.png'); [/class] [class="profilepic"] float: right; display: inline-block; width: 100px; height: 190px; border: 1px dotted #8b626e; background: url('https://i.pinimg.com/originals/36/2c/64/362c64f375b7a654b65ba6b81e2c1578.jpg'); background-size: cover; background-position: center center; [/class] [class="biopic"] display: inline-block; box-sizing: border-box; vertical-align: top; width: 100%; height: 50px; margin-top: 5px; background: url('http://s7.favim.com/orig/150922/aesthetic-audrey-horne-grunge-indie-Favim.com-3337524.jpg'); background-size: cover; background-position: center center; border: 1px dotted #8b626e; [/class] [class="rel1"] background: url('https://66.media.tumblr.com/c99c80f5bf4a421a8efaefd95d0095a2/tumblr_oqir3pULcJ1qlm4ato7_250.png'); [/class] [class="rel2"] background: url('https://vignette.wikia.nocookie.net/twinpeaks/images/9/92/Laura_Palmer_%281989%29.jpg/revision/latest?cb=20180219220542'); [/class] [class="rel3"] background: url('https://i.pinimg.com/originals/f6/44/be/f644be2922a200e149ab7af45e902871.jpg'); [/class] [class="rel4"] background: url('https://i.pinimg.com/originals/fd/ff/c8/fdffc800db02a201fc3e2cd1c610b9c2.png'); [/class] [class="rel5"] background: url('https://2.bp.blogspot.com/-ejjHad42nfA/WJKRfGeAiNI/AAAAAAAAjag/YyMayeISeFgQZAIfCFzgsdIEJHZH349iQCEw/s1600/Picture%2B9.png'); [/class] [class="rel6"] background: url('https://i.pinimg.com/originals/3f/e5/7e/3fe57e2012f16dc2af6514db3e97fee9.jpg'); [/class] [class="rel7"] background: url('https://i.pinimg.com/originals/63/44/68/634468a770b741ff16836a7fcd36a26e.png'); [/class] [class="rel8"] background: url('https://i.pinimg.com/474x/72/f5/86/72f586cca4bb5027758adcf127b2a61a.jpg'); [/class] [class="rel9"] background: url('https://i.imgflip.com/15ziit.jpg'); [/class] [class="sub"] display: inline-block; box-sizing: border-box; width: 100%; height: auto; margin-top: 5px; padding: 5px; border: 1px dotted #f9f5f7; [/class] [class="navbar"] display: inline-block; box-sizing: border-box; position: absolute; width: 250px; height: auto; margin-top: -10px; text-align: center; [/class] [class="navitem"] display: inline-block; height: 20px; width: 20px; margin-right: 5px; background-size: cover; background-position: center center; background-color: #b51324; background-blend-mode: luminosity; transition: 0.9s; [/class] [class="content"] display: inline-block; box-sizing: border-box; vertical-align: bottom; height: 260px; width: calc(100% - 90px); padding-top: 25px; overflow: hidden; [/class] [class="scrollable"] box-sizing: border-box; height: 100%; width: 100%; overflow-y: scroll; padding-right: 7%; margin-left: 7%; [/class] [class="box"] display: inline-block; box-sizing: border-box; vertical-align: top; height: auto; width: auto; padding: 5px; border: 1px dotted #8b626e; [/class] [class="profilebox"] max-width: 47%; line-height: 14px; text-align: left; [/class] [class="relationshipbox"] width: 100%; margin-bottom: 5px; [/class] [class="relpic"] display: inline-block; width: 65px; height: 65px; margin: 2px; background-position: center center; background-size: cover; border: 1px dotted #f9f5f7; overflow: hidden; float: left; [/class] [class="relinfo"] height: 65px; width: 65px; overflow-y: scroll; opacity: 0; transition: ease-in-out 0.9s; text-align: left; padding: 1px 3px 1px 2px; margin-left: -2px; line-height: 10px; letter-spacing: -0.5px; [/class] [class="profilequote"] position: absolute; margin-top: 190px; margin-left: 17px; text-align: right; [/class] [class="subtext"] font-family: 'Cutive Mono'; font-size: 10px; color: #f9f5f7; text-align: left; [/class] [class="text"] font-family: B612 Mono; font-size: 9px; color: #8b626e; text-align: justify; letter-spacing: -0.1px; [/class] [class="title"] font-weight: bold; text-align: center; color: #b51324; size: 11px; letter-spacing: 1.2px; margin-bottom: 4px; [/class] [class="italic"] display: inline; font-style: italic; color: #bc6e76; [/class] [class="bold"] display: inline; font-weight: bold; color: #b51324; [/class] [class="underlined"] color: #f9f5f7; border-bottom: 1px dotted #f9f5f7; [/class] [class="link"] transition: 1s; display: inline; color: #b51324; text-decoration: underline; text-decoration-color: #f9f5f7; [/class] [class name="link" state=hover] color: #f9f5f7; text-decoration: underline; text-decoration-color: #b51324; [/class] [class="onnav"] transition: 0.9s; transform: rotate(15deg); filter: contrast(1.5); [/class] [class="onrelinfo"] transition: 1.2s; background-color: #100906; opacity: 1; [/class] [script class="navitem" on=mouseenter] addClass onnav [/script] [script class="navitem" on=mouseleave] removeClass onnav [/script] [script class="relinfo" on=mouseenter] addClass onrelinfo [/script] [script class="relinfo" on=mouseleave] removeClass onrelinfo [/script] [script class="nav1" on=click] show 01 hide 02 hide 03 hide 04 hide 05 hide 06 [/script] [script class="nav2" on=click] show 02 hide 01 hide 03 hide 04 hide 05 hide 06 [/script] [script class="nav3" on=click] show 03 hide 01 hide 02 hide 04 hide 05 hide 06 [/script] [script class="nav4" on=click] show 04 hide 01 hide 02 hide 03 hide 05 hide 06 [/script] [script class="nav5" on=click] show 05 hide 01 hide 02 hide 03 hide 04 hide 06 [/script] [script class="nav6" on=click] show 06 hide 01 hide 02 hide 03 hide 04 hide 05 [/script]

Code:

[nobr]
[font='Cutive Mono'][br][/br][/font]
[font='B612 Mono'][br][/br][/font]
[font='VT323'][br][/br][/font]

[div class="container"]
    [div class="sidebar"]
        [div class="icon"][/div]
        [div class="sub subtext"]mood: MOOD HERE[/div]
        [div class="sub subtext"]listening to: SONG HERE[/div]
    [/div]

    [div class="navbar"]
        [div class="navitem nav1"][/div]
        [div class="navitem nav2"][/div]
        [div class="navitem nav3"][/div]
        [div class="navitem nav4"][/div]
        [div class="navitem nav5"][/div]
        [div class="navitem nav6"][/div]
    [/div]

    [div class="content"]
        [div class="scrollable text 01"]
            [div class="title"]profile[/div]
            [div class="profilepic"]
                [div class="bold profilequote"]
                    ❝QUOTE HERE❞
                [/div]
            [/div]
            [div class="box profilebox"]

                [div class="underlined"]name[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]birthday[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]birthplace[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]occupation[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]face claim[/div]
                [div class="italic"]TEXT HERE[/div]

            [/div]
        [/div]
        [div class="scrollable text 02" style="display:none"]
            [div class="title"]biography[/div]
            [div class="box"]
                TEXT HERE. Use div class="bold", div class="italic", div class="underlined", div class="link" for text decoration.
                Note that you may add as many boxes and biopics as you want.
            [/div]
            [div class="biopic"][/div]
        [/div]
        [div class="scrollable text 03" style="display:none"]
            [div class="title"]personality[/div]
            [div class="box"]
                TEXT HERE. Use div class="bold", div class="italic", div class="underlined", div class="link" for text decoration.
                Note that you may add as many boxes and biopics as you want.
            [/div]
        [/div]
        [div class="scrollable text 04" style="display:none"]
            [div class="title"]appearance[/div]
            [div class="box profilebox"]

                [div class="underlined"]height[/div]
                [div class="italic"]x'x"[/div]

                [div class="underlined"]weight[/div]
                [div class="italic"]xxx lbs[/div]

                [div class="underlined"]hair[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]eyes[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]skin[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]body[/div]
                [div class="italic"]TEXT HERE[/div]

            [/div]
            [div class="box profilebox"]

                [div class="underlined"]dress[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]makeup[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]body modifications[/div]
                [div class="italic"]
                    TEXT HERE
                    [br][/br]
                    [url=""][div class="link"]LINK HERE[/div][/url],
                    [url=""][div class="link"]LINK HERE[/div][/url]
                [/div]
            [/div]
        [/div]

        [div class="scrollable text 05" style="display:none"]
            [div class="title"]relationships [/div]

            [div class="relpic rel1"]
                [div class="relinfo"]
                    [div class="underlined"]NAME HERE[/div]
                    [div class="italic"]
                        TEXT HERE. Note that you may add as many relationships as you want.
                        Just copy this section, change the class "rel1" to "relN" where N is the index.
                        Add image link of character in the section class="relN".
                    [/div]
                [/div]
            [/div]

            [div class="relpic rel2"]
                [div class="relinfo"]
                    [div class="underlined"]NAME HERE[/div]
                    [div class="italic"]
                        TEXT HERE.
                    [/div]
                [/div]
            [/div]

        [/div]
        [div class="scrollable text 06" style="display:none"]
            [div class="title"]misc[/div]
            [div class="box profilebox"]
                [div class="underlined"]hobbies[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]habits[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]likes[/div]
                [div class="italic"]
                    TEXT HERE
                [/div]

                [div class="underlined"]dislikes[/div]
                [div class="italic"]
                    TEXT HERE
                 [/div]
            [/div]
            [div class="box profilebox"]
                [div class="underlined"]color[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]theme song[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]drink[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]food[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]mbti[/div]
                [div class="italic"]TEXT HERE[/div]

                [div class="underlined"]trivia[/div]
                [div class="italic"]TEXT HERE[/div]
            [/div]

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

[class="themetitle"]
    color: #100906;
    font-family: Monofett;
    font-size: 30px;
    text-shadow: 2px 2px #8b626e;
    position: absolute;
    margin-top: -58px;
    margin-left: -15px;
[/class]

[class="container"]
    box-sizing: border-box;
    width: 390px;
    max-width: 95%;
    height: 320px;
    overflow: hidden;
    margin: auto;
    padding: 20px 20px 0px 20px;
    background-color: #100906;
    border: 1px dotted #8b626e;
    border-radius: 4px;
    text-align: center;
    cursor: crosshair;
[/class]

[class="sidebar"]
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 75px;
    height: 250px;
[/class]

[class="icon"]
    display: inline-block;
    box-sizing: border-box;
    width: 75px;
    height: 75px;
    background: url('LINK HERE');
    background-size: cover;
    background-position: center center;
    border: 1px dotted #f9f5f7;
[/class]

[class="nav1"]
    background: url('https://i.ibb.co/K90n7P0/icon1dark.png');
[/class]

[class="nav2"]
    background: url('https://i.ibb.co/k5YGbQQ/icon3dark.png');
[/class]

[class="nav3"]
    background: url('https://i.ibb.co/K6V6KpV/icon6dark.png');
[/class]

[class="nav4"]
    background: url('https://i.ibb.co/7rv12gg/icon4dark.png');
[/class]

[class="nav5"]
    background: url('https://i.ibb.co/LYkrHKd/icon2dark.png');
[/class]

[class="nav6"]
    background: url('https://i.ibb.co/5TYLLG2/icon5dark.png');
[/class]

[class="profilepic"]
    float: right;
    display: inline-block;
    width: 100px;
    height: 190px;
    border: 1px dotted #8b626e;
    background: url('LINK HERE');
    background-size: cover;
    background-position: center center;
[/class]

[class="biopic"]
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 100%;
    height: 50px;
    margin-top: 5px;
    background: url('LINK HERE');
    background-size: cover;
    background-position: center center;
    border: 1px dotted #8b626e;
[/class]

[class="rel1"]
    background: url('LINK HERE');
[/class]

[class="rel2"]
    background: url('LINK HERE');
[/class]

[class="sub"]
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin-top: 5px;
    padding: 5px;
    border: 1px dotted #f9f5f7;
[/class]

[class="navbar"]
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    width: 250px;
    height: auto;
    margin-top: -10px;
    text-align: center;
[/class]

[class="navitem"]
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-right: 5px;
    background-size: cover;
    background-position: center center;
    background-color: #b51324;
    background-blend-mode: luminosity;
    transition: 0.9s;
[/class]

[class="content"]
    display: inline-block;
    box-sizing: border-box;
    vertical-align: bottom;
    height: 260px;
    width: calc(100% - 90px);
    padding-top: 25px;
    overflow: hidden;
[/class]

[class="scrollable"]
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    padding-right: 7%;
    margin-left: 7%;
[/class]

[class="box"]
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    height: auto;
    width: auto;
    padding: 5px;
    border: 1px dotted #8b626e;
[/class]

[class="profilebox"]
    max-width: 47%;
    line-height: 14px;
    text-align: left;
[/class]

[class="relationshipbox"]
    width: 100%;
    margin-bottom: 5px;
[/class]

[class="relpic"]
    display: inline-block;
    width: 65px;
    height: 65px;
    margin: 2px;
    background-position: center center;
    background-size: cover;
    border: 1px dotted #f9f5f7;
    overflow: hidden;
    float: left;
[/class]

[class="relinfo"]
    height: 65px;
    width: 65px;
    overflow-y: scroll;
    opacity: 0;
    transition: ease-in-out 0.9s;
    text-align: left;
    padding: 1px 3px 1px 2px;
    margin-left: -2px;
    line-height: 10px;
    letter-spacing: -0.5px;
[/class]

[class="profilequote"]
    position: absolute;
    margin-top: 190px;
    margin-left: 17px;
    text-align: right;
[/class]

[class="subtext"]
    font-family: 'Cutive Mono';
    font-size: 10px;
    color: #f9f5f7;
    text-align: left;
[/class]

[class="text"]
    font-family: B612 Mono;
    font-size: 9px;
    color: #8b626e;
    text-align: justify;
    letter-spacing: -0.1px;
[/class]

[class="title"]
    font-weight: bold;
    text-align: center;
    color: #b51324;
    size: 11px;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
[/class]

[class="italic"]
    display: inline;
    font-style: italic;
    color: #bc6e76;
[/class]

[class="bold"]
    display: inline;
    font-weight: bold;
    color: #b51324;
[/class]

[class="underlined"]
    color: #f9f5f7;
    border-bottom: 1px dotted #f9f5f7;
[/class]

[class="link"]
    transition: 1s;
    display: inline;
    color: #b51324;
    text-decoration: underline;
    text-decoration-color: #f9f5f7;
[/class]

[class name="link" state=hover]
    color: #f9f5f7;
    text-decoration: underline;
    text-decoration-color: #b51324;
[/class]

[class="onnav"]
    transition: 0.9s;
    transform: rotate(15deg);
    filter: contrast(1.5);
[/class]

[class="onrelinfo"]
    transition: 1.2s;
    background-color: #100906;
    opacity: 1;
[/class]

[script class="navitem" on=mouseenter]
    addClass onnav
[/script]

[script class="navitem" on=mouseleave]
    removeClass onnav
[/script]

[script class="relinfo" on=mouseenter]
    addClass onrelinfo
[/script]

[script class="relinfo" on=mouseleave]
    removeClass onrelinfo
[/script]

[script class="nav1" on=click]
    show 01
    hide 02
    hide 03
    hide 04
    hide 05
    hide 06
[/script]

[script class="nav2" on=click]
    show 02
    hide 01
    hide 03
    hide 04
    hide 05
    hide 06
[/script]

[script class="nav3" on=click]
    show 03
    hide 01
    hide 02
    hide 04
    hide 05
    hide 06
[/script]

[script class="nav4" on=click]
    show 04
    hide 01
    hide 02
    hide 03
    hide 05
    hide 06
[/script]

[script class="nav5" on=click]
    show 05
    hide 01
    hide 02
    hide 03
    hide 04
    hide 06
[/script]

[script class="nav6" on=click]
    show 06
    hide 01
    hide 02
    hide 03
    hide 04
    hide 05
[/script]

[/nobr]

03 Twin Peaks
x hidden scroll on each page — you can add as much information, boxes and decorated text as you want to
x tabs on the navbar on the top (computer icons)
x hover over icons on the page titled 'relationships'
x mobile-friendly — tested on firefox and chrome on my laptop and phone, let me know if something looks funny on your device! c:
x copy the code and add your own text on 'TEXT HERE' and links on 'LINK HERE'

lillies · Jan 7, 2020

[div class="container"] [div class="themetitle"]04 twin peaks #2[/div] [div class="sidebar"] [div class="icon"][/div] [div class="sub subtext"]mood: positive[/div] [div class="sub subtext"]listening to: jimmy scott - sycamore trees[/div] [/div] [div class="navbar"] [div class="navitem nav1"][/div] [div class="navitem nav2"][/div] [div class="navitem nav3"][/div] [div class="navitem nav4"][/div] [div class="navitem nav5"][/div] [div class="navitem nav6"][/div] [/div] [div class="content"] [div class="scrollable text 01"] [div class="title"]profile[/div] [div class="profilepic"] [div class="bold profilequote"] ❝this is, excuse me,
a damn fine cup
of coffee❞ [/div] [/div] [div class="box profilebox"] [div class="underlined"]name[/div] [div class="italic"]dale cooper[/div] [div class="underlined"]birthday[/div] [div class="italic"]april 19th, 1954[/div] [div class="underlined"]birthplace[/div] [div class="italic"]philadelphia[/div] [div class="underlined"]occupation[/div] [div class="italic"]fbi agent[/div] [div class="underlined"]face claim[/div] [div class="italic"]kyle maclachlan[/div] [/div] [/div] [div class="scrollable text 02" style="display:none"] [div class="title"]biography[/div] [div class="box"] At vero [div class="bold"]eos[/div] et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum, deleniti atque corrupti [div class="italic"]quos[/div] dolores et quas molestias excepturi. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores. [/div] [div class="biopic"][/div] [/div] [div class="scrollable text 03" style="display:none"] [div class="title"]personality[/div] [div class="box"] Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. [/div] [/div] [div class="scrollable text 04" style="display:none"] [div class="title"]appearance[/div] [div class="box profilebox"] [div class="underlined"]height[/div] [div class="italic"]x'x"[/div] [div class="underlined"]weight[/div] [div class="italic"]xxx lbs[/div] [div class="underlined"]hair[/div] [div class="italic"]hair description[/div] [div class="underlined"]eyes[/div] [div class="italic"]eye description[/div] [div class="underlined"]skin[/div] [div class="italic"]skin tone[/div] [div class="underlined"]body[/div] [div class="italic"]body type[/div] [/div] [div class="box profilebox"] [div class="underlined"]dress[/div] [div class="italic"]description of typical clothing[/div] [div class="underlined"]makeup[/div] [div class="italic"]description of typical makeup[/div] [div class="underlined"]body modifications[/div] [div class="italic"] description of modifications
[div class="link"]link one[/div], [div class="link"]link two[/div] [/div] [/div] [/div] [div class="scrollable text 05" style="display:none"] [div class="title"]relationships (hover!) [/div] [div class="relpic rel1"] [div class="relinfo"] [div class="underlined"]laura palmer[/div] [div class="italic"]a dead girl[/div] [/div] [/div] [div class="relpic rel2"] [div class="relinfo"] [div class="underlined"]albert rosenfield[/div] [div class="italic"]col-league[/div] [/div] [/div] [div class="relpic rel3"] [div class="relinfo"] [div class="underlined"]killer bob[/div] [div class="italic"]a spooky boi[/div] [/div] [/div] [div class="relpic rel4"] [div class="relinfo"] [div class="underlined"]audrey horne[/div] [div class="italic"]a weird local girl[/div] [/div] [/div] [div class="relpic rel5"] [div class="relinfo"] [div class="underlined"]lucy moran[/div] [div class="italic"]answers the phone[/div] [/div] [/div] [/div] [div class="scrollable text 06" style="display:none"] [div class="title"]misc[/div] [div class="box profilebox"] [div class="underlined"]hobbies[/div] [div class="italic"]hobby one, hobby two, hobby three[/div] [div class="underlined"]habits[/div] [div class="italic"]habit one, habit two[/div] [div class="underlined"]likes[/div] [div class="italic"] like one, like two, like three, like four [/div] [div class="underlined"]dislikes[/div] [div class="italic"] dislike one, dislike two, dislike three [/div] [/div] [div class="box profilebox"] [div class="underlined"]color[/div] [div class="italic"]favorite color[/div] [div class="underlined"]theme song[/div] [div class="italic"]theme song of character[/div] [div class="underlined"]drink[/div] [div class="italic"]favorite drink[/div] [div class="underlined"]food[/div] [div class="italic"]favorite food[/div] [div class="underlined"]mbti[/div] [div class="italic"]mbti personality[/div] [div class="underlined"]trivia[/div] [div class="italic"]any trivia[/div] [/div] [/div] [/div] [/div] [class="themetitle"] color: #100906; font-family: Monofett; font-size: 30px; text-shadow: 2px 2px #8b626e; position: absolute; margin-top: -68px; margin-left: -15px; [/class] [class="container"] box-sizing: border-box; width: 390px; max-width: 95%; height: 320px; overflow: hidden; margin: auto; padding: 20px 20px 0px 20px; background-color: #1a0d05; border: 1px dotted #c48b73; border-radius: 4px; text-align: center; cursor: crosshair; [/class] [class="sidebar"] display: inline-block; box-sizing: border-box; vertical-align: top; width: 75px; height: 250px; [/class] [class="icon"] display: inline-block; box-sizing: border-box; width: 75px; height: 75px; background: url('https://media2.giphy.com/media/Hx8xkEJQO8Sv6/source.gif'); background-size: cover; background-position: center center; border: 1px dotted #a87456; [/class] [class="nav1"] background: url('https://i.ibb.co/K90n7P0/icon1dark.png'); [/class] [class="nav2"] background: url('https://i.ibb.co/k5YGbQQ/icon3dark.png'); [/class] [class="nav3"] background: url('https://i.ibb.co/K6V6KpV/icon6dark.png'); [/class] [class="nav4"] background: url('https://i.ibb.co/7rv12gg/icon4dark.png'); [/class] [class="nav5"] background: url('https://i.ibb.co/LYkrHKd/icon2dark.png'); [/class] [class="nav6"] background: url('https://i.ibb.co/5TYLLG2/icon5dark.png'); [/class] [class="profilepic"] float: right; display: inline-block; width: 100px; height: 190px; border: 1px dotted #8b626e; background: url('https://welcometotwinpeaks.com/wp-content/uploads/2011/02/cfe9tp.jpg'); background-size: cover; background-position: center center; [/class] [class="biopic"] display: inline-block; box-sizing: border-box; vertical-align: top; width: 100%; height: 50px; margin-top: 5px; background: url('http://s7.favim.com/orig/150922/aesthetic-audrey-horne-grunge-indie-Favim.com-3337524.jpg'); background-size: cover; background-position: center center; border: 1px dotted #8b626e; [/class] [class="rel1"] background: url('https://vignette.wikia.nocookie.net/twinpeaks/images/9/92/Laura_Palmer_%281989%29.jpg/revision/latest?cb=20180219220542'); [/class] [class="rel2"] background: url('https://vignette.wikia.nocookie.net/twinpeaks/images/e/e6/AlbertRosenfeld.jpg/revision/latest?cb=20100330010337'); [/class] [class="rel3"] background: url('https://nyoobserver.files.wordpress.com/2015/03/bobbay.png?w=635&quality=80&strip'); [/class] [class="rel4"] background: url('https://i.pinimg.com/originals/5e/e2/99/5ee299f155dddd9e43b2578943f9b1c0.png'); [/class] [class="rel5"] background: url('https://corkgrips.files.wordpress.com/2011/05/lucy_s02e20.jpg'); [/class] [class="sub"] display: inline-block; box-sizing: border-box; width: 100%; height: auto; margin-top: 5px; padding: 5px; border: 1px dotted #a87456; [/class] [class="navbar"] display: inline-block; box-sizing: border-box; position: absolute; width: 250px; height: auto; margin-top: -10px; text-align: center; [/class] [class="navitem"] display: inline-block; height: 20px; width: 20px; margin-right: 5px; background-size: cover; background-position: center center; background-color: #a4553c; background-blend-mode: luminosity; transition: 0.9s; [/class] [class="content"] display: inline-block; box-sizing: border-box; vertical-align: bottom; height: 260px; width: calc(100% - 90px); padding-top: 25px; overflow: hidden; [/class] [class="scrollable"] box-sizing: border-box; height: 100%; width: 100%; overflow-y: scroll; padding-right: 7%; margin-left: 7%; [/class] [class="box"] display: inline-block; box-sizing: border-box; vertical-align: top; height: auto; width: auto; padding: 5px; border: 1px dotted #c48b73; [/class] [class="profilebox"] max-width: 47%; line-height: 14px; text-align: left; [/class] [class="relationshipbox"] width: 100%; margin-bottom: 5px; [/class] [class="relpic"] display: inline-block; width: 65px; height: 65px; margin: 2px; background-position: center center; background-size: cover; border: 1px dotted #c48b73; overflow: hidden; float: left; [/class] [class="relinfo"] height: 65px; width: 65px; overflow-y: scroll; opacity: 0; transition: ease-in-out 0.9s; text-align: left; padding: 1px 3px 1px 2px; margin-left: -2px; line-height: 10px; letter-spacing: -0.5px; [/class] [class="profilequote"] position: absolute; margin-top: 190px; margin-left: 17px; text-align: right; [/class] [class="subtext"] font-family: 'Cutive Mono'; font-size: 10px; color: #f8e7dc; text-align: left; [/class] [class="text"] font-family: B612 Mono; font-size: 9px; color: #f8e7dc; text-align: justify; letter-spacing: -0.1px; [/class] [class="title"] font-weight: bold; text-align: center; color: #a4553c; size: 11px; letter-spacing: 1.2px; margin-bottom: 4px; [/class] [class="italic"] display: inline; font-style: italic; color: #c48b73; [/class] [class="bold"] display: inline; font-weight: bold; color: #a4553c; [/class] [class="underlined"] color: #f8e7dc; border-bottom: 1px dotted #f8e7dc; [/class] [class="link"] transition: 1s; display: inline; color: #542e13; text-decoration: underline; text-decoration-color: #f8e7dc; [/class] [class name="link" state=hover] color: #f8e7dc; text-decoration: underline; text-decoration-color: #542e13; [/class] [class="onpic"] transition: 0.9s; transform: rotate(15deg); filter: contrast(1.5); [/class] [class="onrelinfo"] transition: 1.2s; background-color: #1a0d05; opacity: 1; [/class] [script class="navitem" on=mouseenter] addClass onpic [/script] [script class="navitem" on=mouseleave] removeClass onpic [/script] [script class="relinfo" on=mouseenter] addClass onrelinfo [/script] [script class="relinfo" on=mouseleave] removeClass onrelinfo [/script] [script class="nav1" on=click] show 01 hide 02 hide 03 hide 04 hide 05 hide 06 [/script] [script class="nav2" on=click] show 02 hide 01 hide 03 hide 04 hide 05 hide 06 [/script] [script class="nav3" on=click] show 03 hide 01 hide 02 hide 04 hide 05 hide 06 [/script] [script class="nav4" on=click] show 04 hide 01 hide 02 hide 03 hide 05 hide 06 [/script] [script class="nav5" on=click] show 05 hide 01 hide 02 hide 03 hide 04 hide 06 [/script] [script class="nav6" on=click] show 06 hide 01 hide 02 hide 03 hide 04 hide 05 [/script]

04 Twin Peaks — Coffee Edition
x simply a version of the third code with a different color scheme
x you can get the code from the post above c:

Resource [lillies' themes]

lillies

New Member

lillies

New Member

lillies

New Member

grimvr

New Member

lillies

New Member

lillies

New Member

Users who are viewing this thread

Similar threads