THE BIRD'S CAGE | tou's storage

Reader mode
pandagosquish

pandagosquish

returning from a hiatus
hi yall! yet again another feralfront refugee hoping to find a home in a new site. so far everything is pretty cool and I like it here so far! with ff closing, I guess now is a good time as any to mark the beginning of a new chapter. rpnation, be prepared for a whole lot of new characters from yours truly! as I get used to the coding, I will likely edit this first post to allow for a table of contents/list and such as well as to make it all pretty.

started october 23rd, 2020.
 
thread start code
  • Index
    • BUTTERFLY
    RULES
    001 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at.
    002 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at.
    003 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at.
    004 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at.
    005 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at.
    006 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at.

    Flower petals wilt
    ABOUT
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae.

    Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper

    MORE
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae.

    Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper

    © pasta


    Code: 
    [bg=0px;width:750px;margin:auto;][bg=0px;height:20px;width:748px;background:#fff;border-top:1px solid #ccc;border-right:1px solid #ccc;border-left:1px solid #ccc;][/bg][bg=0px;background:#fff;height:250px;width:750px;][bg=0px;height:250px;width:509px;margin:-10px -10px;float:left;background:url('https://pm1.narvii.com/5871/a4129ce00c64d1045140020fc8386d25c72d75b9_hq.jpg');background-size:100%;line-height:450px;color:#fff;font-size:70px;text-align:center;][font=Georgia]BUTTERFLY[/font]
[/bg][bg=0px;background:#fff;height:249px;width:240px;margin:-10px -10px;border-top:1px solid #ccc;border-right:1px solid #ccc;float:left;][border=0px;color:#996655;font-size:15px;margin-left:0px;margin-top:-16px;float:left;][font=Georgia][b]RULES[/b][/font][/border][border=transparent;border-bottom:3px solid #996655;width:140px;float:left;margin-top:-15px;][/border][bg=transparent;overflow:hidden; height:208x; width:240px; padding:0px 0px;][bg=transparent;height:208px;width:240px;margin:-10px 0px; overflow:auto;color:#666;font-size:11px;text-align:justify;line-height:14px;letter-spacing:0.5px;][font=Georgia][color=#996655]001[/color] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. 
[color=#996655]002[/color] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. 
[color=#996655]003[/color] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. 
[color=#996655]004[/color] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. 
[color=#996655]005[/color] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. 
[color=#996655]006[/color] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. 

[/font][/bg][/bg][/bg][/bg][bg=0px;height:200px;width:748px;background:#fff;border-top:1px solid #ccc;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-left:1px solid #ccc;][bg=0px;height:200px;width:180px;border-right:1px solid #ccc;float:left;margn-left:0px;margin-top:-10px;text-transform:uppercase;font-size:35px;font-family:Times New Roman;color:#000;text-align;center;line-height:30px;][bg=0px;height:0px;background:#bb8877;width:170px;margin-top:0px;margin-left:-10px;][/bg][border=0px;height:150px;][bg=0px;margin-top:20px;][b]Flower petals wilt[/b][/bg][/border][bg=0px;height:0px;background:#bb8877;width:170px;margin-top:-10px;margin-left:-10px;;][/bg][/bg][bg=0px;height:200px;width:480px;float:left;][border=0px;color:#996655;font-size:15px;margin-left:0px;margin-top:-16px;float:left;][font=Georgia][b]ABOUT[/b][/font][/border][border=transparent;border-bottom:3px solid #996655;width:375px;float:left;margin-top:-15px;][/border][bg=transparent;overflow:hidden; height:150x; width:480px; padding:0px 0px;][bg=transparent;height:150px;width:480px;margin:-10px 0px; overflow:auto;color:#666;font-size:11px;text-align:justify;line-height:14px;letter-spacing:0.5px;][font=Georgia]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae.

Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper

[/font][/bg][/bg][/bg][bg=0px;float:left;height:200px;margin-top:-10px;width:25px;border-left:1px solid #ccc;background:#bb8877;][/bg][/bg][bg=0px;height:200px;width:748px;background:#fff;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-left:1px solid #ccc;][bg=0px;float:left;height:200px;margin-top:-10px;width:25px;border-left:1px solid #ccc;background:#777788;][/bg][bg=0px;height:200px;width:480px;float:left;margin-left:0px;][border=0px;color:#777788;font-size:15px;margin-left:0px;margin-top:-16px;float:left;][font=Georgia][b]MORE[/b][/font][/border][border=transparent;border-bottom:3px solid #777788;width:383px;float:left;margin-top:-15px;][/border][bg=transparent;overflow:hidden; height:150x; width:480px; padding:0px 0px;][bg=transparent;height:150px;width:480px;margin:-10px 0px; overflow:auto;color:#666;font-size:11px;text-align:justify;line-height:14px;letter-spacing:0.5px;][font=Georgia]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae.

Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper

[/font][/bg][/bg][/bg][bg=0px;height:200px;width:180px;border-left:1px solid #ccc;float:left;margin-top:-10px;font-size:150px;font-family:Times New Roman;color:#fff;text-align;center;line-height:180px;text-align:center;][bg=0px;height:180px;width:170px;background:url('https://pa1.narvii.com/5897/14d7b6573c6a1b74ad8e2e2623355e435c48f747_00.gif');background-size:110%;][/bg][/bg][/bg][bg=0px;height:20px;width:748px;background:#fff;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-left:1px solid #ccc;font-size:12px;text-align:center;color:#666;line-height:20px;][font=Georgia][b]© pasta[/b][/font][/bg][/bg]
     
  • Index
    • small cs code
  • Index
    • NAME NAME
    the crush
    basics
    name
    bingle bangle
    age
    bingle bangle
    DOB
    bingle bangle
    occupation
    bingle bangle


    © pasta
    Traits
    Trait1
    Trait2
    Trait3
    Trait4
    Trait5

    Trait6
    Trait7
    Trait8
    Trait9
    Trait1

    Code: 
    [bg=0px;width:380px;background:#ccc;margin:auto;height:430px;][bg=0px;height:315px;width:170px;float:left;padding:20px 20px;background:#f9f9f9;float:left;][bg=0px;color:#997788;font-size:20px;margin-top:-10px;letter-spacing:-2px;][b][i]NAME NAME[/i][/b][/bg][bg=0px;color:#886666;font-size:8px;text-transform:uppercase;margin-top:-25px;][b]the crush[/b][/bg][bg=0px;height:150px;width:150px;background:url('https://64.media.tumblr.com/50870d5b51c787fafec4b6127c4504fc/09c377c84ffbc610-d5/s400x600/e88cdf2c903816c618480c81ba5765139a42cf88.jpg');background-size:100%;border-radius:5px;margin-top:-5px;][/bg][bg=0px;color:#887788;;font-size:8px;;text-transform:uppercase;margin-top:0px;width:40px;height:5px;border-bottom:5px solid #998899;][fa] fa-toggle-on [/fa] [b]basics[/b][/bg][bg=0px;color:#999;;font-size:8px;float:left;text-transform:uppercase;margin-top:-5px;][fa] fa-magic [/fa] [b]name[/b][/bg][bg=0px;color:#997788;font-size:8px;float:right;text-transform:uppercase;margin-top:-5px;][b]bingle bangle[/b][/bg][bg=0px;color:#999;;font-size:8px;float:left;text-transform:uppercase;margin-top:-15px;][fa] fa-birthday-cake [/fa] [b]age[/b][/bg][bg=0px;color:#997788;font-size:8px;float:right;text-transform:uppercase;margin-top:-15px;][b]bingle bangle[/b][/bg][bg=0px;color:#999;;font-size:8px;float:left;text-transform:uppercase;margin-top:-15px;][fa] fa-calendar[/fa] [b]DOB[/b][/bg][bg=0px;color:#997788;font-size:8px;float:right;text-transform:uppercase;margin-top:-15px;][b]bingle bangle[/b][/bg][bg=0px;color:#999;;font-size:8px;float:left;text-transform:uppercase;margin-top:-15px;][fa] fa-book [/fa] [b]occupation[/b][/bg][bg=0px;color:#997788;font-size:8px;float:right;text-transform:uppercase;margin-top:-15px;][b]bingle bangle[/b][/bg]

[/bg][bg=0px;height:335px;background:#f9f9f9;width:140px;float:left;margin-left:10px;][bg=0px;height:315px;width:120px;background:url('https://64.media.tumblr.com/579e8031b6e1808a8bbfe126a60e0139/09c377c84ffbc610-ca/s400x600/005f95ad8b22409457eaff99895c192066184046.jpg');background-size:250%;background-position:0px 0px;color:#fff;font-size:8px;text-transform:uppercase;text-align:right;line-height:625px;][b]© pasta[/b][/bg][/bg][bg=0px;height:45px;width:360px;background:#f9f9f9;float:left;margin-top:10px;][bg=0px;padding:10px;border-bottom:7px solid #998899;font-size:8px;text-transform:uppercase;line-height:0px;color:#666;text-align:center;float:left;][b]Traits[/b][/bg][bg=0px;padding:10px;margin-left:10px;background: #998899;font-size:8px;text-transform:uppercase;line-height:0px;color:#fff;text-align:center;float:left;letter-spacing:0.5px;][b]Trait1[/b][/bg][bg=0px;padding:10px;margin-left:10px;background: #998899;font-size:8px;text-transform:uppercase;line-height:0px;color:#fff;text-align:center;float:left;letter-spacing:0.5px;][b]Trait2[/b][/bg][bg=0px;padding:10px;margin-left:10px;background: #998899;font-size:8px;text-transform:uppercase;line-height:0px;color:#fff;text-align:center;float:left;letter-spacing:0.5px;][b]Trait3[/b][/bg][bg=0px;padding:10px;margin-left:10px;background: #998899;font-size:8px;text-transform:uppercase;line-height:0px;color:#fff;text-align:center;float:left;letter-spacing:0.5px;][b]Trait4[/b][/bg][bg=0px;padding:10px;margin-left:10px;background: #998899;font-size:8px;text-transform:uppercase;line-height:0px;color:#fff;text-align:center;float:left;letter-spacing:0.5px;][b]Trait5[/b][/bg]
[bg=0px;padding:10px;margin-left:10px;background: #998899;font-size:8px;text-transform:uppercase;line-height:0px;color:#fff;text-align:center;float:left;letter-spacing:0.5px;][b]Trait6[/b][/bg][bg=0px;padding:10px;margin-left:10px;background: #998899;font-size:8px;text-transform:uppercase;line-height:0px;color:#fff;text-align:center;float:left;letter-spacing:0.5px;][b]Trait7[/b][/bg][bg=0px;padding:10px;margin-left:10px;background: #998899;font-size:8px;text-transform:uppercase;line-height:0px;color:#fff;text-align:center;float:left;letter-spacing:0.5px;][b]Trait8[/b][/bg][bg=0px;padding:10px;margin-left:10px;background: #998899;font-size:8px;text-transform:uppercase;line-height:0px;color:#fff;text-align:center;float:left;letter-spacing:0.5px;][b]Trait9[/b][/bg][bg=0px;padding:10px;margin-left:10px;background: #998899;font-size:8px;text-transform:uppercase;line-height:0px;color:#fff;text-align:center;float:left;letter-spacing:0.5px;][b]Trait1[/b][/bg][/bg][/bg]
     
  • Index
    • safari 4 ic
  • Index










    • tab one


    tab two


    tab three


    tab four

    • NAME

      TAGLINE


      Pro no nisl tincidunt repudiandae, fabulas intellegam sit an. Sea quis nisl noluisse te. Erat detraxit vix ad, cum ei alterum voluptua, mei docendi fastidii ad. Vix ea antiopam contentiones.

      Eu timeam probatus usu, in alterum mentitum mea. Ridens tacimates nam an. Ne est ipsum phaedrum senserit. Mel odio mutat summo ad. Eloquentiam accommodare conclusionemque mei no, sit ex sale labitur eleifend. Vim at vivendo forensibus, et pri vocent deterruisset.

      Semper disputationi ex his, eos zril honestatis ei. Eum ea antiopam consulatu dissentiunt, at vero gubergren disputationi pro. Putent delicatissimi sea id, ea vix explicari signiferumque. Ex mei quod labitur dolorum, prima patrioque voluptatum ea vim.
      Pro no nisl tincidunt repudiandae, fabulas intellegam sit an. Sea quis nisl noluisse te. Erat detraxit vix ad, cum ei alterum voluptua, mei docendi fastidii ad. Vix ea antiopam contentiones.

      Eu timeam probatus usu, in alterum mentitum mea. Ridens tacimates nam an. Ne est ipsum phaedrum senserit. Mel odio mutat summo ad. Eloquentiam accommodare conclusionemque mei no, sit ex sale labitur eleifend. Vim at vivendo forensibus, et pri vocent deterruisset.

      Semper disputationi ex his, eos zril honestatis ei. Eum ea antiopam consulatu dissentiunt, at vero gubergren disputationi pro. Putent delicatissimi sea id, ea vix explicari signiferumque. Ex mei quod labitur dolorum, prima patrioque voluptatum ea vim.

      Pro no nisl tincidunt repudiandae, fabulas intellegam sit an. Sea quis nisl noluisse te. Erat detraxit vix ad, cum ei alterum voluptua, mei docendi fastidii ad. Vix ea antiopam contentiones.

      Eu timeam probatus usu, in alterum mentitum mea. Ridens tacimates nam an. Ne est ipsum phaedrum senserit. Mel odio mutat summo ad. Eloquentiam accommodare conclusionemque mei no, sit ex sale labitur eleifend. Vim at vivendo forensibus, et pri vocent deterruisset.

      Semper disputationi ex his, eos zril honestatis ei. Eum ea antiopam consulatu dissentiunt, at vero gubergren disputationi pro. Putent delicatissimi sea id, ea vix explicari signiferumque. Ex mei quod labitur dolorum, prima patrioque voluptatum ea vim.
      Pro no nisl tincidunt repudiandae, fabulas intellegam sit an. Sea quis nisl noluisse te. Erat detraxit vix ad, cum ei alterum voluptua, mei docendi fastidii ad. Vix ea antiopam contentiones.

      Eu timeam probatus usu, in alterum mentitum mea. Ridens tacimates nam an. Ne est ipsum phaedrum senserit. Mel odio mutat summo ad. Eloquentiam accommodare conclusionemque mei no, sit ex sale labitur eleifend. Vim at vivendo forensibus, et pri vocent deterruisset.

      Semper disputationi ex his, eos zril honestatis ei. Eum ea antiopam consulatu dissentiunt, at vero gubergren disputationi pro. Putent delicatissimi sea id, ea vix explicari signiferumque. Ex mei quod labitur dolorum, prima patrioque voluptatum ea vim.


      tab one






    coded by weldherwings.



    Code: 
    [comment]‧͙⁺˚*･༓☾　coded by weldherwings　☽༓･*˚⁺‧͙

[/comment][border=0px; width:750px; height:350px; background-color:var(--bg);background-image:url(https://www.transparenttextures.com/patterns/textured-paper.png); background-size:20%;margin:auto; padding:20px; line-height:0px;
--bg:#e9e9ea;
--border: #cbcdcc;
--mainbg:white;
--role:#DFB088;
--tab1image: url(URL HERE);
--tab2image:url(URL HERE);
--tab3image:url(URL HERE);
--tab4image:url(URL HERE)]
[border=0px; width:720px; height:350px; display:flex; justify-content:space-evenly; position:relative; margin:auto;]
[comment]

‧͙⁺˚*･༓☾　left side　☽༓･*˚⁺‧͙[/comment]
[border=2px solid var(--border); width:200px; height:250px; background:var(--mainbg); border-top: 20px solid var(--border); border-radius:10px;box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.05); overflow:hidden; line-height:10px;]
[border=0px; width:200px; height:5px; position:absolute; margin-top:-45px; letter-spacing:5px; margin-left:-10px; font-size:8px;][color=#424242][fa]fa-circle[/fa][/color][color=#ececec][fa]fa-circle[/fa][/color][color=#afadad][fa]fa-circle[/fa][/color][/border][/border]
[comment]

‧͙⁺˚*･༓☾　main　☽༓･*˚⁺‧͙[/comment]
[border=2px solid var(--border); width:450px; height:250px; background:var(--mainbg); border-top: 20px solid var(--border); border-radius:10px;box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.05); overflow:hidden;line-height:10px;]
[border=0px; width:200px; height:5px; position:absolute; margin-top:-45px; letter-spacing:5px; margin-left:-10px; font-size:8px;][color=#424242][fa]fa-circle[/fa][/color][color=#ececec][fa]fa-circle[/fa][/color][color=#afadad][fa]fa-circle[/fa][/color][/border]
[border=0px; padding:0px;width:471px; height:25px; background:#d7dbd9; position:absolute; top:30px; left:250px; z-index:2; pointer-events:none;display:flex; justify-content:center; text-align:center; font-family:Karla; font-size:10px; letter-spacing:0.2px;color: black; text-transform:uppercase;][comment]

‧͙⁺˚*･༓☾　tabs　☽༓･*˚⁺‧͙[/comment]
[border=0px; padding:5px; padding-top:6px;box-sizing:border-box; width:120px; height:25px;border-right: solid #c3c3c3 1px; ]tab one[/border]

[border=0px; padding:5px;box-sizing:border-box; width:120px; height:25px;padding-top:6px; border-right: solid #c3c3c3 1px;]tab two[/border]

[border=0px; padding:5px;box-sizing:border-box; width:115px; height:25px; padding-top:6px;border-right: solid #c3c3c3 1px;]tab three[/border]

[border=0px; padding:5px;box-sizing:border-box; width:115px; height:25px; padding-top:6px;]tab four[/border][/border][border=0px; width:420px; height:50px; margin-top:-40px;][tabs]

[comment]

‧͙⁺˚*･༓☾　tab one　☽༓･*˚⁺‧͙[/comment][tab=00001][border=0px; border-radius:10px;width:195px; height:240px; background:var(--mainbg); position:absolute; left:20px; overflow:hidden; top:40px;][border=0px; width: 98%;height: 94%; padding-right:40px; overflow-Y: hidden; overflow-X: hidden;font-family:Karla; font-size:11px; letter-spacing:0.2px;color: black; line-height:13px; text-align:justify; padding-bottom:10px; margin:auto; margin-top:-20px; ][comment]

‧͙⁺˚*･༓☾　side post starts here　☽༓･*˚⁺‧͙[/comment][border=4px solid var(--border); height:120px; width:120px; margin:auto; background:var(--tab1image); background-size:cover; filter:grayscale(100%); background-position:50% 50%; border-radius:10px; ][/border]
[border=0px; width:120px; background:var(--border); font-size:10px; letter-spacing:2px; font-family:Karla;text-transform:uppercase; font-weight:bold; margin:auto; text-align:center; ]NAME[/border]
[border=0px; width:120px; background:var(--role); font-size:10px; letter-spacing:2px; font-family:Karla;text-transform:uppercase; font-weight:bold; margin:auto; text-align:center;]TAGLINE[/border]
[/border][/border][border=0px; padding:0px; width:450px; height: 240px; background:var(--mainbg); position:absolute; margin-top:-30px; margin-left:-30px; overflow:hidden;]
[border=0px; padding:0px; width: calc(100% + 10px);height: 94%; padding-right:30px;overflow-Y: scroll;overflow-X: hidden; font-family:Karla; font-size:11px; letter-spacing:0.2px;color: black; line-height:13px; text-align:justify; padding-bottom:10px;  margin:auto;][comment]

‧͙⁺˚*･༓☾　main post start here　☽༓･*˚⁺‧͙[/comment] TEXT
[/border][/border]
[comment]

‧͙⁺˚*･༓☾　tab highlight　☽༓･*˚⁺‧͙[/comment]
[border=0px; padding:5px;box-sizing:border-box; width:120px; height:25px;padding-top:6px; border-right: solid #c3c3c3 1px; background:var(--mainbg); position:absolute; top:30px; left:250px;z-index:2; text-align:center; font-family:Karla; font-size:10px; letter-spacing:0.2px;color: black; text-transform:uppercase;]tab one[/border]
[/tab]
[comment]

‧͙⁺˚*･༓☾　tab two　☽༓･*˚⁺‧͙[/comment]
[tab=00002][border=0px; border-radius:10px;width:195px; height:240px; background:var(--mainbg); position:absolute; left:20px; overflow:hidden; top:40px;][border=0px; width: 98%;height: 94%; padding-right:40px;overflow-Y: hidden;overflow-X: hidden; font-family:Karla; font-size:11px; letter-spacing:0.2px;color: black; line-height:13px; text-align:justify; padding-bottom:10px; margin:auto; margin-top:-20px; ][comment]

‧͙⁺˚*･༓☾　side-post start here　☽༓･*˚⁺‧͙[/comment][border=4px solid var(--border); height:120px; width:120px; margin:auto; background:var(--tab2image); background-size:cover; filter:grayscale(100%); background-position:50% 50%; border-radius:10px; ][/border]
[border=0px; width:120px; background:var(--border); font-size:10px; letter-spacing:2px; font-family:Karla;text-transform:uppercase; font-weight:bold; margin:auto; text-align:center; ]NAME[/border]
[border=0px; width:120px; background:var(--role); font-size:10px; letter-spacing:2px; font-family:Karla;text-transform:uppercase; font-weight:bold; margin:auto; text-align:center;]TAGLINE[/border]
[/border][/border][border=0px; padding:0px; width:450px; height: 240px; background:var(--mainbg); position:absolute; margin-top:-30px; margin-left:-30px; overflow:hidden;]
[border=0px; padding:0px; width: calc(100% + 10px);height: 94%; padding-right:30px;overflow-Y: scroll;overflow-X: hidden; font-family:Karla; font-size:11px; letter-spacing:0.2px;color: black; line-height:13px; text-align:justify; padding-bottom:10px;  margin:auto;][comment]

‧͙⁺˚*･༓☾　main post start here　☽༓･*˚⁺‧͙[/comment] TEXT
[/border][/border][comment]


‧͙⁺˚*･༓☾　tab cover　☽༓･*˚⁺‧͙[/comment]
[border=0px; padding:5px;box-sizing:border-box; width:120px; height:25px;padding-top:6px; border-right: solid #c3c3c3 1px; background:var(--mainbg); position:absolute; top:30px; left:370px;z-index:2; text-align:center; font-family:Karla; font-size:10px; letter-spacing:0.2px;color: black; text-transform:uppercase;]tab two[/border]
[/tab]

[comment]

‧͙⁺˚*･༓☾　tab three　☽༓･*˚⁺‧͙[/comment]
[tab=00003][border=0px; border-radius:10px;width:195px; height:240px; background:var(--mainbg); position:absolute; left:20px; overflow:hidden; top:40px;][border=0px; width: 98%;height: 94%; padding-right:40px;overflow-Y: hidden;overflow-X: hidden; font-family:Karla; font-size:11px; letter-spacing:0.2px;color: black; line-height:13px; text-align:justify; padding-bottom:10px; margin:auto; margin-top:-20px; ][comment]

‧͙⁺˚*･༓☾　side post start here　☽༓･*˚⁺‧͙[/comment][border=4px solid var(--border); height:120px; width:120px; margin:auto; background:var(--tab3image); background-size:cover; filter:grayscale(100%); background-position:50% 50%; border-radius:10px; ][/border]
[border=0px; width:120px; background:var(--border); font-size:10px; letter-spacing:2px; font-family:Karla;text-transform:uppercase; font-weight:bold; margin:auto; text-align:center; ]NAME[/border]
[border=0px; width:120px; background:var(--role); font-size:10px; letter-spacing:2px; font-family:Karla;text-transform:uppercase; font-weight:bold; margin:auto; text-align:center;]TAGLINE[/border]
[/border][/border][border=0px; padding:0px; width:450px; height: 240px; background:var(--mainbg); position:absolute; margin-top:-30px; margin-left:-30px; overflow:hidden;]
[border=0px; padding:0px; width: calc(100% + 10px);height: 94%; padding-right:30px;overflow-Y: scroll;overflow-X: hidden; font-family:Karla; font-size:11px; letter-spacing:0.2px;color: black; line-height:13px; text-align:justify; padding-bottom:10px;  margin:auto;][comment]

‧͙⁺˚*･༓☾　main post start here　☽༓･*˚⁺‧͙[/comment] TEXT
[/border][/border]
[comment]

‧͙⁺˚*･༓☾　tab cover　☽༓･*˚⁺‧͙[/comment]
[border=0px; padding:5px;box-sizing:border-box; width:120px; height:25px;padding-top:6px; border-right: solid #c3c3c3 1px; background:var(--mainbg); position:absolute; top:30px; left:490px;z-index:2; text-align:center; font-family:Karla; font-size:10px; letter-spacing:0.2px;color: black; text-transform:uppercase;]tab three[/border]
[/tab]

[comment]


‧͙⁺˚*･༓☾　tab 4　☽༓･*˚⁺‧͙[/comment]
[tab=00000004][border=0px; border-radius:10px;width:195px; height:240px; background:var(--mainbg); position:absolute; left:20px; overflow:hidden; top:40px;][border=0px; width: 98%;height: 94%; padding-right:40px;overflow-Y:  hidden;overflow-X: hidden; font-family:Karla; font-size:11px; letter-spacing:0.2px;color: black; line-height:13px; text-align:justify; padding-bottom:10px; margin:auto; margin-top:-20px; ][comment]


‧͙⁺˚*･༓☾　side post start here　☽༓･*˚⁺‧͙[/comment][border=4px solid var(--border); height:120px; width:120px; margin:auto; background:var(--tab4image); background-size:cover; filter:grayscale(100%); background-position:50% 50%; border-radius:10px; ][/border]
[border=0px; width:120px; background:var(--border); font-size:10px; letter-spacing:2px; font-family:Karla;text-transform:uppercase; font-weight:bold; margin:auto; text-align:center; ]NAME[/border]
[border=0px; width:120px; background:var(--role); font-size:10px; letter-spacing:2px; font-family:Karla;text-transform:uppercase; font-weight:bold; margin:auto; text-align:center;]TAGLINE[/border]
[/border][/border][border=0px; padding:0px; width:450px; height: 240px; background:var(--mainbg); position:absolute; margin-top:-30px; margin-left:-30px; overflow:hidden;]
[border=0px; padding:0px; width: calc(100% + 10px);height: 94%; padding-right:30px;overflow-Y: scroll;overflow-X: hidden; font-family:Karla; font-size:11px; letter-spacing:0.2px;color: black; line-height:13px; text-align:justify; padding-bottom:10px;  margin:auto;][comment]


‧͙⁺˚*･༓☾　main post start here　☽༓･*˚⁺‧͙[/comment] TEXT
[/border][/border]
[comment]

‧͙⁺˚*･༓☾　tab cover　☽༓･*˚⁺‧͙[/comment][border=0px; padding:5px;box-sizing:border-box; width:116px; height:25px;padding-top:6px; border-right: solid #c3c3c3 1px; background:var(--mainbg); position:absolute; top:30px; left:606px;z-index:2; text-align:center; font-family:Karla; font-size:10px; letter-spacing:0.2px;color: black; text-transform:uppercase;]tab four[/border]
[/tab][/tabs][/border]

[/border]

[/border]
[comment]

‧͙⁺˚*･༓☾　credit - please do not remove　☽༓･*˚⁺‧͙
[/comment][border=0px; font-size:8px; filter: grayscale(100%); letter-spacing:1px; text-align:center;font-family:Karla; margin-top:-50px;color:black]coded by weldherwings.[/border]
[/border]
     
    Last edited:
  • Index
    • insta placeholder code
  • Index

    • jolene.newport
    greetings from califournia.


    ......

    1,729 likes
    jolene.newport cherry flavoured conversations with you / got me hanging on / down to earth from all the waiting / take me somewhere beyond
    View all 38 comments
    jolene.newport placeholder.
    April 14th
    code by low fidelity.


    Code: 
    [comment]

-- profile icon, username, and location/mini message below.

[/comment][bg=1px black solid; padding: 0; width: 350px; height: 560px; background: #f1f1f1; margin: auto; center;][border=0px; padding: 5px; width: 30px; height: 30px; float: left; margin-top: 15px; margin-left: 15px; border-radius: 100px; background: url(https://i.pinimg.com/236x/14/26/73/1426739d8dd7459a1eddab83cd8be2c7.jpg); background-size: cover; background-position: 50% 50%;][/border][border=0px; padding: 5px; font-family: Roboto; font-align: right; font-size: 12px; line-height: 15px; margin-top: -10px; margin-left: 65px; margin-bottom: 5px; color: #000000;]
[b]jolene.newport[/b]
greetings from califournia.[/border][border=0px; padding: 0px; font-size: 16px; color: #000000; float: right; margin-top: -40px; margin-right: 20px;][fa]fa-ellipsis-v[/fa][/border]
[comment]

-- image goes here.

[/comment][border=0px; padding: 0px; width: 350px; height: 350px; margin-top: -25px; background: url(https://i.imgur.com/o640OuU.jpg?1); background-size: cover; background-position: 50% 50%;][/border]
[border=0px; padding: 5px; width: 95%; margin: auto; font-size: 20px; color: #000000; justify-content: space-between; display: flex; margin-top: -32px;][border=0px; padding:0px;][fa]far fa-heart[/fa][color=transparent]...[/color][fa]far fa-comment[/fa][color=transparent]...[/color][fa]far fa-paper-plane[/fa][/border][border=0px; padding: 0px; text-align-right:][fa]far fa-bookmark[/fa][/border][/border]
[comment]

-- likes, post description, comments count, and post date are all below. this doesn't scroll, so try to keep your description the same-ish length as mine, around 3 lines. lyrics are from the song cherry flavoured by the neighbourhood.

[/comment][border=0px; padding: 10px; margin: auto; font-family: Roboto; font-size: 12px; line-height: 15px; overflow: hidden; color: #000000; text-align: left; margin-top: -40px;][b]1,729 likes[/b]
[b]jolene.newport[/b] cherry flavoured conversations with you / got me hanging on / down to earth from all the waiting / take me somewhere beyond
[color=#606060]View all 38 comments[/color]
[b]jolene.newport[/b] placeholder.
[color=#606060][size=9px]April 14th[/size][/color][/border][/bg][comment]

-- credit. do not remove or edit pls & thx.

[/comment][border=0px; padding: 0px; margin: auto; center; font-size: 10px; font-family: Roboto; letter-spacing: 1.5px; text-align: center; margin-top: 10px;]code by low fidelity.[/border]
     
  • Index
    • thread start code
  • Index




    • tumblr_myxbid5oHY1rr6aa6o1_500.gif

      LET SLIP THE DOGS OF WAR.
      INTEREST CHECK
      ​



    [centerblock]
    Code: 
    [centerblock=50][comment][USER=75224]@leviathan.[/USER][/comment]
[Tabs]

[Tab=i.]
[scroll=350px]
[CENTER]
[IMG width="365px"]http://24.media.tumblr.com/d490517e9628431b7495671081e31673/tumblr_myxbid5oHY1rr6aa6o1_500.gif[/IMG]
[FONT=TIMES NEW ROMAN][B][I][SIZE=6]LET SLIP THE DOGS OF WAR.[/SIZE][/I][/B][/FONT]
[FONT=verdana][size=3]INTEREST CHECK[/size][/font]
[/CENTER]
[/scroll][/Tab]

[Tab=ii.]
[scroll=350px][JUSTIFY]
[CENTER][IMG width="365px"]http://24.media.tumblr.com/d490517e9628431b7495671081e31673/tumblr_myxbid5oHY1rr6aa6o1_500.gif[/IMG]
[FONT=TIMES NEW ROMAN][B][I][SIZE=6]INTRODUCTION.[/SIZE][/I][/B][/CENTER][centerblock=70]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit, in pretium arcu hendrerit in. Ut rhoncus ipsum metus, auctor pulvinar erat hendrerit ut. Aliquam vulputate, orci in blandit euismod, ex mi scelerisque ligula, nec mollis ligula enim vel quam. Quisque mollis est ac nibh consectetur, sit amet hendrerit purus porttitor. Vestibulum bibendum libero at est ullamcorper cursus. Praesent maximus, magna et tincidunt mollis, sem arcu fermentum nulla, sit amet ultrices massa libero et mauris. Fusce porttitor fermentum lectus, et dapibus est aliquet at. Duis nec molestie ex.Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/JUSTIFY][/FONT][/centerblock][/scroll][/Tab]

[Tab=iii.]
[scroll=350px][JUSTIFY]
[CENTER][IMG width="365px"]http://24.media.tumblr.com/d490517e9628431b7495671081e31673/tumblr_myxbid5oHY1rr6aa6o1_500.gif[/IMG]
[FONT=TIMES NEW ROMAN][B][I][SIZE=6]RULES.[/SIZE][/I][/B][/CENTER][centerblock=70]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit, in pretium arcu hendrerit in. Ut rhoncus ipsum metus, auctor pulvinar erat hendrerit ut. Aliquam vulputate, orci in blandit euismod, ex mi scelerisque ligula, nec mollis ligula enim vel quam. Quisque mollis est ac nibh consectetur, sit amet hendrerit purus porttitor. Vestibulum bibendum libero at est ullamcorper cursus. Praesent maximus, magna et tincidunt mollis, sem arcu fermentum nulla, sit amet ultrices massa libero et mauris. Fusce porttitor fermentum lectus, et dapibus est aliquet at. Duis nec molestie ex.Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/JUSTIFY][/FONT][/centerblock][/scroll][/Tab]


[Tab=iv.]
[scroll=350px][JUSTIFY]
[CENTER][IMG width="365px"]http://24.media.tumblr.com/d490517e9628431b7495671081e31673/tumblr_myxbid5oHY1rr6aa6o1_500.gif[/IMG]
[FONT=TIMES NEW ROMAN][B][I][SIZE=6]ROLES.[/SIZE][/I][/B][/CENTER][centerblock=70][B][I][SIZE=6]ROLE.[/SIZE][/I][/B]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit, in pretium arcu hendrerit in. Ut rhoncus ipsum metus, auctor pulvinar erat hendrerit ut.  

[B][I][SIZE=6]ROLE.[/SIZE][/I][/B]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit, in pretium arcu hendrerit in. Ut rhoncus ipsum metus, auctor pulvinar erat hendrerit ut. 

[B][I][SIZE=6]ROLE.[/SIZE][/I][/B]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit, in pretium arcu hendrerit in. Ut rhoncus ipsum metus, auctor pulvinar erat hendrerit ut. [/JUSTIFY][/FONT][/centerblock][/scroll][/Tab]

[Tab=❝ Act 3, Scene 1, line 273. ❞]
[scroll=350px]
[CENTER]
[IMG width="365px"]http://24.media.tumblr.com/d490517e9628431b7495671081e31673/tumblr_myxbid5oHY1rr6aa6o1_500.gif[/IMG]
[FONT=TIMES NEW ROMAN][B][I][SIZE=6]ARE YOU READY?[/SIZE][/I][/B][/FONT]
[FONT=verdana][size=3]gmed by FAUST.[/size][/font]
[/CENTER]
[/scroll][/Tab]
[/Tabs]
[/centerblock]
     
  • Index
    • tumblr page cs code
  • Index

    • vincent steel

    cash only, please.

    bloodhound:

    Fusce porttitor fermentum lectus, et dapibus est aliquet at. Duis nec molestie ex. Interdum et malesuada fames ac ante ipsum primis in faucibusLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit, in pretium arcu hendrerit in. Ut rhoncus ipsum metus, auctor pulvinar erat hendrerit ut. Aliquam vulputate, orci in blandit euismod, ex mi scelerisque ligula, nec mollis ligula enim vel quam. Quisque mollis est ac nibh consectetur, sit amet hendrerit purus porttitor. Vestibulum bibendum libero at est ullamcorper cursus. Praesent maximus, magna et tincidunt mollis, sem arcu fermentum nulla, sit amet ultrices massa Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit.


    bloodhound:

    a4ba686250efbeefba87810b9c2a71f6.jpg

    7a92f462ce0eab0844ce3ed294c66d7e.jpg



    leviathan:

    Fusce porttitor fermentum lectus, et dapibus est aliquet at. Duis nec molestie ex. Interdum et malesuada fames ac ante ipsum primis in faucibusLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus.

    Pellentesque lobortis consectetur velit, in pretium arcu hendrerit in. Ut rhoncus ipsum metus, auctor pulvinar erat hendrerit ut. Aliquam vulputate, orci in blandit euismod, ex mi scelerisque ligula, nec mollis ligula enim vel quam. Quisque mollis est ac nibh consectetur, sit amet hendrerit purus porttitor.

    Quisque mollis est ac nibh consectetur, sit amet hendrerit purus porttitor. Vestibulum bibendum libero at est ullamcorper cursus. Praesent maximus, magna et tincidunt mollis, sem arcu fermentum nulla, sit amet ultrices massa Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit.Vestibulum bibendum libero at est ullamcorper cursus. Praesent maximus, magna et tincidunt mollis, sem arcu fermentum nulla, sit amet ultrices massa Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit.



    Code: 
    [border=transparent; background: linear-gradient(360deg, #e9e9ea 75%, rgba(0, 0, 0, 0) 75%), url('https://i.pinimg.com/564x/59/78/05/597805a79c234f3be72ef16594b350fc.jpg'); margin: auto; background-position: 50% 50%; background-size: contain; border-radius: 10px; width: 450px; height: 740px;][comment]

--code by LEVIATHAN.

[/comment][border=transparent; border-radius: 25px; margin: auto; border: 5px solid #e9e9ea; background: url('https://66.media.tumblr.com/da403d55a929a61f08d11bf5cd81e2b6/tumblr_po7ayznNys1v0osk7_250.gif'); margin-top: 80px; background-size: cover; height: 100px; width: 100px;][/border]
[border=transparent; text-align: center; font-family: Helvetica Neue; font-weight: bold; font-size: 30px; margin: auto; margin-top: -40px; color: black;]vincent steel[/border]
[border=transparent; text-align: center; font-family: Helvetica Neue; font-size: 14px; margin: auto; margin-top: -55px; color: black;]cash only, please.[/border][border=transparent; margin: auto; max-width: 450px; height: 400px; overflow: hidden; background-color: transparent; margin-top: -10px;][border=transparent; width: 100%; height: 100%; overflow-y: scroll; padding-right: 150px; text-align: justify; color: black; font-size: 13px; font-family; Arial;][comment]

--imgs here....img 1 here


[/comment][border=transparent; width: 450px; margin: auto; margin-top: -70px; margin-left: 20px; justify-content: space-evenly;][row][column=span2][border=transparent; margin: auto; background: url('https://i.pinimg.com/564x/64/c3/d6/64c3d68bbb654f656c0c3951ddb59d6a.jpg'); margin-top: 60px; background-size: cover; height: 90px; width: 90px;][/border][/column][comment]

--img 2 here


[/comment][column=span2][border=transparent; margin: auto; background: url('https://i.pinimg.com/564x/66/7e/74/667e7462ffd2777ab0d794dce5b54f22.jpg'); margin-top: 60px; background-size: cover; height: 90px; width: 90px;][/border][/column][comment]

--img 3 here


[/comment][column=span2][border=transparent; margin: auto; background: url('https://i.pinimg.com/564x/fd/d5/57/fdd557226a07fd30d3e6bd6c0fc9e0b1.jpg'); margin-top: 60px; background-size: cover; height: 90px; width: 90px;][/border][/column][/row][/border]

[border=transparent; background: #fff; width: 400px; height: 230px; border-radius: 10px;][border=transparent; margin: auto; border-left: 3px solid #ccc; width: 350px; height: 200px; overflow: hidden; background-color: transparent;][border=transparent; width: 100%; height: 100%; overflow-y: scroll; padding-right: 150px; text-align: justify; color: black; font-size: 13px; font-family; Arial;][u]bloodhound[/u]:

Fusce porttitor fermentum lectus, et dapibus est aliquet at. Duis nec molestie ex. Interdum et malesuada fames ac ante ipsum primis in faucibusLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit, in pretium arcu hendrerit in. Ut rhoncus ipsum metus, auctor pulvinar erat hendrerit ut. Aliquam vulputate, orci in blandit euismod, ex mi scelerisque ligula, nec mollis ligula enim vel quam. Quisque mollis est ac nibh consectetur, sit amet hendrerit purus porttitor. Vestibulum bibendum libero at est ullamcorper cursus. Praesent maximus, magna et tincidunt mollis, sem arcu fermentum nulla, sit amet ultrices massa Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit.
[/border][/border][/border]

[border=transparent; background: #fff; width: 400px; border-radius: 10px;][border=transparent; margin: auto; border-left: 3px solid #ccc; width: 95%; height: 95%; overflow: hidden; background-color: transparent;][u]bloodhound[/u]:

[img width="300px"]https://i.pinimg.com/564x/a4/ba/68/a4ba686250efbeefba87810b9c2a71f6.jpg[/img] 
[img width="300px"]https://i.pinimg.com/564x/7a/92/f4/7a92f462ce0eab0844ce3ed294c66d7e.jpg[/img] 
[/border][/border]

[border=transparent; background: #fff; width: 400px; height: 420px; border-radius: 10px;][border=transparent; margin: auto; border-left: 3px solid #ccc; width: 350px; height: 380px; overflow: hidden; background-color: transparent;][border=transparent; width: 100%; height: 100%; overflow-y: scroll; padding-right: 150px; text-align: justify; color: black; font-size: 13px; font-family; Arial;][u]leviathan[/u]:

Fusce porttitor fermentum lectus, et dapibus est aliquet at. Duis nec molestie ex. Interdum et malesuada fames ac ante ipsum primis in faucibusLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. 

Pellentesque lobortis consectetur velit, in pretium arcu hendrerit in. Ut rhoncus ipsum metus, auctor pulvinar erat hendrerit ut. Aliquam vulputate, orci in blandit euismod, ex mi scelerisque ligula, nec mollis ligula enim vel quam. Quisque mollis est ac nibh consectetur, sit amet hendrerit purus porttitor. 

Quisque mollis est ac nibh consectetur, sit amet hendrerit purus porttitor. Vestibulum bibendum libero at est ullamcorper cursus. Praesent maximus, magna et tincidunt mollis, sem arcu fermentum nulla, sit amet ultrices massa Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit.Vestibulum bibendum libero at est ullamcorper cursus. Praesent maximus, magna et tincidunt mollis, sem arcu fermentum nulla, sit amet ultrices massa Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit.
[/border][/border][/border]
[/border][/border][/border]
     
  • Index
    • elliot navara (hollywood arts)
  • Index
    • SCREAM
    MY NAME
    • ellie
      you're absolutely
      fucking
      beautiful,
      darling
    code by valen t.


    [link to thread]
     
  • Index
    • ellie ic post
  • Index

















    • mood



    here is how i'm feelin' today!



    location



    here is where i'm chillin'



    outfit



    outfit!



    tags



    mentions:
    interactions













    elliot



    so pull me closer, and kiss me hard





    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis lacinia lacus, at euismod dolor gravida id. Ut in aliquet magna. Sed in tellus ut tellus fringilla feugiat laoreet quis diam. Cras tincidunt enim et felis ultricies, sed luctus augue interdum. Integer ornare, velit ut congue rhoncus, odio turpis pharetra nisi, scelerisque cursus ligula diam et turpis. Donec ac nunc bibendum, porta elit at, suscipit nulla. Cras pretium nisi neque, vel posuere libero lobortis non.

    Donec nec bibendum nulla, in vehicula quam. Nulla condimentum suscipit mi placerat blandit. Nam a elit facilisis, malesuada magna ac, commodo lorem. Vestibulum ultricies imperdiet erat eget facilisis. Vivamus id arcu quis risus viverra commodo a ut odio. Ut id urna mauris. Nullam ullamcorper condimentum libero, ut efficitur lectus pellentesque sed. Integer ante risus, imperdiet sit amet finibus quis, facilisis vitae purus. Duis quam libero, venenatis non elementum malesuada, iaculis et orci. Fusce ex neque, lacinia sed tristique non, mattis quis velit.

    Praesent vitae dapibus ipsum. Duis venenatis tempor ante, ac dignissim eros scelerisque scelerisque. Proin placerat leo sit amet massa aliquam elementum. Nam sem ex, efficitur ut porttitor et, finibus sed dolor. Integer et pharetra dolor. Nunc varius massa sit amet venenatis vehicula. Sed in vehicula erat. Vivamus in ipsum nunc. Duis tincidunt nibh ac nibh volutpat mattis.









    nine lives



    Code: 
    [comment]code by nine lives ♡

fonts used:
[font=Abril Fatface]name + detail titles[/font]
[font=Georgia]body text[/font]
[font=Raleway]role[/font]

to replace fonts, replace them here, then search up 'font-family' and replace them there too between the ''!
[/comment][border=transparent;
*background image;
--bg: url('https://i.pinimg.com/564x/2f/5f/68/2f5f68e47da910b6c101a933fad3ae8e.jpg');
*main contents background colour;
--bg-color: #FFF;
*background of name & role;
--color-1: #D8D1C3;
*accent colour for details;
--color-2: #CE9B7F;

*name colour;
--name: #AD5829;
*role colour;
--role: #664a3c;
*body text colour;
--t-color: #382b25;

*character image;
--img-1: url('https://64.media.tumblr.com/03ea30ce0405ff59197d5140bb134585/e564f919959ff6a9-ba/s640x960/b625d8150cb4ecac82256fcbc27aa093ff675400.jpg');

height:470px; width:100%; max-width:620px; padding:50px 20px; box-sizing:border-box; position:relative; line-height:0; margin:auto; display:flex; flex-flow: column nowrap; align-items:center;]

   [comment]----background----[/comment]
   [border=transparent; height:100%; width:100%; padding:0; background: var(--bg); position:absolute; top:0; left:0; opacity:0.5; z-index:1; background-size:cover; -webkit-filter:saturate(1.6);
/*edit the following to adjust the cropping of the image*/ background-position: 50% 60%;][/border]

   [comment]----main content----[/comment]
   [border=transparent; height:100%; width:100%; max-width:520px; padding:10px; box-sizing:border-box; background: var(--bg-color); position:relative; z-index:2; margin:auto auto; display:flex; flex-flow: row nowrap; justify-content:center;]

      [comment]----left----[/comment]
      [border=transparent; height:100%; width:34%; min-width:100px; padding:0; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; flex-shrink:0;]
         [comment]----image----[/comment]
         [border=transparent; height:38%; width:90%; padding:0; background: var(--img-1); flex-shrink:0; background-size:cover;
/*edit the following to adjust the cropping of the image*/ background-position: 50% 80%; margin:5px 0 15px 0;][/border]

         [comment]----details----[/comment]
         [border=transparent; height:calc(62% - 15px); width:100%; padding:0; display:flex; overflow:hidden; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap; align-items:center;]

[comment]----details header----[/comment]
[border=transparent; height:fit-content; width:fit-content; margin-top:5px; padding:5px 5px 0 5px; box-sizing:border-box; color: var(--t-color); text-transform:uppercase; font-size:16px; letter-spacing:0.5px; border-bottom:8px solid var(--color-2); font-family:'Abril Fatface', display; line-height:20%;][comment]
----* * * detail title here----
[/comment]mood[/border]

[comment]----details text----[/comment]
[border=transparent; height:fit-content; width:100%; padding:0; margin:5px 0 10px 0; color: var(--t-color); font-size:11px; line-height:120%; font-family:'Georgia', sans-serif; text-align:center;][comment]
----* * *details text here----
[/comment]here is how i'm feelin' today![/border]

[comment]----details header----[/comment]
[border=transparent; height:fit-content; width:fit-content; margin-top:5px; padding:5px 5px 0 5px; box-sizing:border-box; color: var(--t-color); text-transform:uppercase; font-size:16px; letter-spacing:0.5px; border-bottom:8px solid var(--color-2); font-family:'Abril Fatface', display; line-height:20%;][comment]
----* * * detail title here----
[/comment]location[/border]

[comment]----details text----[/comment]
[border=transparent; height:fit-content; width:100%; padding:0; margin:5px 0 10px 0; color: var(--t-color); font-size:11px; line-height:120%; font-family:'Georgia', sans-serif; text-align:center;][comment]
----* * *details text here----
[/comment]here is where i'm chillin'[/border]

[comment]----details header----[/comment]
[border=transparent; height:fit-content; width:fit-content; margin-top:5px; padding:5px 5px 0 5px; box-sizing:border-box; color: var(--t-color); text-transform:uppercase; font-size:16px; letter-spacing:0.5px; border-bottom:8px solid var(--color-2); font-family:'Abril Fatface', display; line-height:20%;][comment]
----* * * detail title here----
[/comment]outfit[/border]

[comment]----details text----[/comment]
[border=transparent; height:fit-content; width:100%; padding:0; margin:5px 0 10px 0; color: var(--t-color); font-size:11px; line-height:120%; font-family:'Georgia', sans-serif; text-align:center;][comment]
----* * *details text here----
[/comment][border=transparent; padding:0; color: var(--t-color);][comment]
----* * * outfit text----
[/comment]outfit![/border][/border]

[comment]----details header----[/comment]
[border=transparent; height:fit-content; width:fit-content; margin-top:5px; padding:5px 5px 0 5px; box-sizing:border-box; color: var(--t-color); text-transform:uppercase; font-size:16px; letter-spacing:0.5px; border-bottom:8px solid var(--color-2); font-family:'Abril Fatface', display; line-height:20%;][comment]
----* * * detail title here----
[/comment]tags[/border]

[comment]----details text----[/comment]
[border=transparent; height:fit-content; width:100%; padding:0; margin:5px 0 10px 0; color: var(--t-color); font-size:11px; line-height:120%; font-family:'Georgia', sans-serif; text-align:center;][comment]
----* * *details text here----
[/comment]mentions:
interactions[/border]

         [/border][/border][/border]
         [comment]----details----[/comment]
      [/border]
      [comment]----left end----[/comment]

      [comment]----right----[/comment]
      [border=transparent; height:100%; flex-grow:1; padding:0; position:relative; display:flex; flex-flow: column nowrap; align-items:flex-end;]

   [comment]----name & role/quote----[/comment]
   [border=transparent; height:fit-content; width:fit-content; max-width:85%; padding:15px; box-sizing:border-box; background: var(--color-1); display:flex; flex-flow:column nowrap; position:relative; top:-40px; left:25px; z-index:3; align-items:center; justify-content:center; margin:0 0 -25px 0; text-align:center;]
      [comment]----name----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:0; text-transform:uppercase; letter-spacing:0.5px; font-size:40px; font-family:'Abril Fatface', display;][comment]
----* * *link to cs here! (replace xx with your link!)----
[/comment][border=transparent; padding:0; color: var(--name); line-height:90%; display:inline;][comment]
----* * * name here!----
[/comment]elliot[/border][/border]

      [comment]----quote/role----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--role); font-family:'Raleway', sans-serif; line-height:100%; font-size:12px; margin-top:2px;][comment]
----* * *role/quote here!----
[/comment]so pull me closer, and kiss me hard[/border]
   [/border]
   [comment]----name & role/quote end----[/comment]

         [comment]----main text----[/comment]
         [border=transparent; max-height:90%; width:100%; padding:0 0 10px 0; box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; color: var(--t-color); line-height:140%; font-size:11px; font-family:'Georgia', sans-serif; text-align:justify;][comment]
----* * * text starts here!----
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis lacinia lacus, at euismod dolor gravida id. Ut in aliquet magna. Sed in tellus ut tellus fringilla feugiat laoreet quis diam. Cras tincidunt enim et felis ultricies, sed luctus augue interdum. Integer ornare, velit ut congue rhoncus, odio turpis pharetra nisi, scelerisque cursus ligula diam et turpis. Donec ac nunc bibendum, porta elit at, suscipit nulla. Cras pretium nisi neque, vel posuere libero lobortis non.

Donec nec bibendum nulla, in vehicula quam. Nulla condimentum suscipit mi placerat blandit. Nam a elit facilisis, malesuada magna ac, commodo lorem. Vestibulum ultricies imperdiet erat eget facilisis. Vivamus id arcu quis risus viverra commodo a ut odio. Ut id urna mauris. Nullam ullamcorper condimentum libero, ut efficitur lectus pellentesque sed. Integer ante risus, imperdiet sit amet finibus quis, facilisis vitae purus. Duis quam libero, venenatis non elementum malesuada, iaculis et orci. Fusce ex neque, lacinia sed tristique non, mattis quis velit.

Praesent vitae dapibus ipsum. Duis venenatis tempor ante, ac dignissim eros scelerisque scelerisque. Proin placerat leo sit amet massa aliquam elementum. Nam sem ex, efficitur ut porttitor et, finibus sed dolor. Integer et pharetra dolor. Nunc varius massa sit amet venenatis vehicula. Sed in vehicula erat. Vivamus in ipsum nunc. Duis tincidunt nibh ac nibh volutpat mattis.
         [/border][/border][/border]
         [comment]----main text----[/comment]
      [/border]
      [comment]----right end----[/comment]

   [/border]
   [comment]----main content end----[/comment]

   [comment]----made with love by uxie and triples ♡ do not remove!! !!----[/comment]
   [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); font-size:10px; position:absolute; z-index:7; top:5px; left:10px; display:flex; flex-flow: row nowrap; align-items:center; line-height:100%; opacity:0.8;][border=transparent; height:fit-content; width:fit-content; padding:0; letter-spacing:0.5px; font-weight:bold;][font=Space Grotesk]nine lives[/font][/border][border=transparent; height:fit-content; width:fit-content; padding:0; margin-left:5px; font-size:8px;][fa]fas fa-cat[/fa][/border][/border]
[/border]
     
  • Index
    • alysaen - auburn springs
  • Index










    • alysaen monroe












    ♡design by dreamglow, coded by uxie♡


    [link to thread]
     
    Last edited:
  • Index
    • ic w #s
  • Index
    • ronen
    keum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    #moodhere
    #placehere
    #outfithere
    #tagshere
    coded by reveriee.


    Code: 
    [comment][font=Arial]--CODE BY REVERIEE--[/font]

change colors and pics via the variables below

[/comment][bg=0px;
--maincolor: #AF5C4E;
--lightcolor: #dab3ac;
--darkcolor: #502a24;
--pic: url(https://pbs.twimg.com/media/DuiuSbIVYAAxoaF.jpg);
--bg-grid: url(https://manoirlemesnil.com/wp-content/themes/zeus/images/grid-patterns/grid2.png);
font-smoothing:antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;margin:auto;max-width:500px;background:var(--maincolor);height:530px;padding:0px 0px][bg=0px;margin:auto;width:500px;height:530px;padding:0px 0px;background:var(--bg-grid);background-size:cover;position:absolute][/bg][border=3px solid white;width:280px;height:300px;padding:0px 0px;margin-left:120px;margin-top:80px;z-index:1;position:absolute][/border][border=3px solid white;width:280px;height:300px;padding:0px 0px;margin-left:140px;margin-top:60px;z-index:1;position:absolute][/border][border=0px;width:280px;height:300px;padding:0px 0px;margin-left:40px;margin-top:170px;background: var(--darkcolor);z-index:2;position:absolute][border=0px;height:50px;line-height:50px;width:300px;font-family:Arial;font-size:50px;transform: rotate(-90deg);margin-left:-125px;-webkit-text-stroke: 1px white; text-shadow: 3px 3px var(--maincolor); text-transform: uppercase;margin-top:105px;padding: 10px 10px;font-weight:bold;color:transparent;letter-spacing:10px][comment]

--NAME HERE--

[/comment]ronen[/border][border=0px;height:30px;width:300px;font-family:Arial;font-size:30px;margin-left:70px;margin-top:75px;padding: 10px 10px;line-height:100%;color:white;letter-spacing:10px;text-transform:uppercase]keum[/border][/border][border=0px;width:280px;height:320px;padding:0px 0px;margin-top:100px;margin-left:110px;background: var(--lightcolor);z-index:3;position:absolute][border=0; box-sizing: border-box; width: 265px; height: 250px; display: flex; flex-direction: column; overflow: hidden; padding:10px 5px 2px 10px; margin-top: 0px;][border= 0; box-sizing: border-box; width: 200%; flex: 1; position: relative; overflow: auto; margin-bottom: 0px;][border=0; box-sizing: border-box; padding: 0px; width: 51%; font-size: 11.5px; color: black; line-height: 110%; text-align: justify;][comment]

--MAIN POST HERE--

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/border][/border][/border][border=0px;width:280px;height:70px;padding:0px 0px;background:#dab3ac][comment]

--IMAGE HERE--[/comment][border=0px;width:60px;height:60px;padding:0px 0px;background:var(--pic);background-size:150%;background-position:80% 10%;border-radius:10px;float:left;margin-left:5px;margin-top:5px][/border][border=0; box-sizing: border-box; width: 205px; height: 60px; display: flex; flex-direction: column; overflow: hidden; padding:0px; margin-top: 0px;][border= 0; box-sizing: border-box; width: 200%; flex: 1; position: relative; overflow: auto; margin-bottom: 0px][border=0; box-sizing: border-box; padding: 0px; width: 51%;][comment]

--MOOD, LOCATION, OUTFIT, TAGS--

[/comment][border=0; box-sizing: border-box; padding: 0 5px 0 5px; display: inline-block; background: var(--maincolor); border-radius: 3px; font-size: 11px;color:black]#moodhere[/border] [border=0; box-sizing: border-box; padding: 0 5px 0 5px; display: inline-block; background: var(--maincolor); border-radius: 3px; font-size: 11px;color:black]#placehere[/border] [border=0; box-sizing: border-box; padding: 0 5px 0 5px; display: inline-block; background: var(--maincolor); border-radius: 3px; font-size: 11px;color:black]#outfithere[/border] [border=0; box-sizing: border-box; padding: 0 5px 0 5px; display: inline-block; background: var(--maincolor); border-radius: 3px; font-size: 11px;color:black]#tagshere[/border][/border][/border][/border][/border][/border][bg=0px;width:120px;height:15px;font-size:11.5px;color:white;float:right;margin-top:501px;text-align:right;padding: 5px 5px]coded by reveriee.[/bg][/bg]
     
    Last edited:
  • Index
    • cyrus - zodiac killers
  • Index
    • CYRUS BLAKE.
    • 01
      name
      Cyrus Theodore Blake.
      role
      Pisces.
      aliases
      Picasso.
      age
      21 years old. February 26th, 1999.
      ethnicity
      German.
      p.o.b
      Montreal, Canada.
      gender
      Cis male.
      sexuality
      Bisexual demiromantic
      ❝where you go, i'm going
      so jump and i'm jumping
      since there is no me without you.❞
      — MEDICAL.

      There's something beneficial to being both a killer for hire and a model: the training regimes leave one's body sculpted but lean enough for the cover of Vogue. Standing at 6'0 (and 1/2 inches, which Cyrus will not hesitate to let you know about), Cy boasts a well developed physique fitted with muscular tone. He has a softer face, similar to one that you might find on a boy next door. Deep honey-chocolate brown irises are set into quizzical eyes with a strong brow bone centering his face. Cyrus's eyes are often always crinkled in a smile and matched with a shit-eating grin. Compared to his twin brother, Samuel, there are not many physical similarities one would see off the bat besides their often overflowing aura of joy. Barring differences in their hair and eye color, they both have relatively angular face shapes and strong, squared off jawlines, as well as thick, full hair and a button-y nose.

      Off the clock, Cy can be seen in relatively simple man's clothes. There isn't anything flashy or significant about his outfits; in fact, they often scream "californian coast boy". If he did not have a public status of a model, Cy would easily blend in with his graphic t-shirt and jeans. On his left arm, he has the Pisces brand adorned with various astrological symbols. He has debated getting more, but as a model it is difficult to justify impulsive tattoos. Cyrus wears a specific necklace unless told to remove it for modelling gigs. It's a simple gold chain with an identifying dog tag (he forced Sam to get one as well, in the event that they die they could find each other) that spells his name, birthday, and on the back an inscription of "and until the very end, i see half of me with you".
    01
    02
    03
    04
    code by @Nano


    [link to thread]
     
    Last edited:
  • Index
    • wolfgang - hartley uni
  • Index


    • birth name

    wolfgang leon brandt
    main n. names

    wolf, wolfie (only lyle and lottie), boss, "the lion"
    major

    child psychology and early education
    age

    24
    gender

    Male
    sexuality

    Pansexual biromantic
    b.day

    october 31st
    p.o.b

    munich, germany
    fc

    stephen james


    • persona
      Scary. There isn't any other way to describe Wolf. Off the bat he hosts an intimidating physique and aura, something that commands attention and respect. He is brazen and abrupt, not truly caring for consequences of his words. After all. with someone in his position and authority, there aren't many who would fight back. Wolf is a man of little words, mostly because his English is not very fluent but also because it takes few words to communicate his messages. There are some people where the harshness of Wolf's personality is softened or completely disregarded: his daughter, Mika, being one of them, along with Mika's favorite babysitters Charlotte and Lyle. With them he is gentle and accomodating, although the straight-forwardness is still evident.

    coded by hanthesunbeam


    [link to thread] [link to rp]
     
  • Index
    • wolfgang ic code
  • Index
    • MOOD: texies

    OUTFIT: here!

    LOCATION: texies
    basics
    MENTIONS: heresies
    INT: heresies
    tags
    TL;DR heresies
    tl;dr
    wolfgang brandt
    for you, a thousand times

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie diam ipsum, eu venenatis leo pretium vitae. Etiam vitae lectus felis. Etiam ut massa vel nibh varius laoreet. Nunc at odio quam. Duis nec risus luctus, cursus orci a, posuere nulla. Mauris auctor maximus ligula, ac dictum erat euismod eu. In ornare sapien ut risus posuere, condimentum placerat magna facilisis. Donec turpis lacus, interdum sit amet euismod sit amet, venenatis quis nisl. Nulla sit amet vulputate tellus, ac ornare augue. Aliquam eget tortor porta, eleifend velit ut, malesuada ex. Vivamus quis luctus felis. Nullam at sollicitudin tortor. Donec eget elit rhoncus, maximus risus non, volutpat sapien. Phasellus vestibulum, lectus id sollicitudin dignissim, tortor magna finibus justo, et ornare erat nisi sed nisl.

    Vivamus lectus tellus, condimentum vel nulla sed, iaculis sollicitudin urna. In porta, libero quis tristique varius, lorem nibh mollis orci, a auctor urna sapien vel dui. Cras sit amet massa libero. Sed pharetra commodo egestas. Etiam commodo sem non dapibus volutpat. Nam cursus id felis a malesuada. Quisque ut arcu in mauris egestas lacinia. Maecenas fermentum metus nec purus pulvinar, sit amet volutpat ex mollis.

    Duis et metus et dui sollicitudin pellentesque sed sit amet nunc. Quisque fringilla finibus convallis. Etiam vulputate massa at ex interdum, et pellentesque nibh ultricies. In lobortis dignissim blandit. Proin elit massa, fermentum sollicitudin consequat at, sodales eu velit. Duis rutrum vestibulum pellentesque. Vivamus mollis turpis ac urna malesuada efficitur. Integer egestas sem sed sapien gravida, id finibus leo consequat. Fusce varius ligula eu massa lobortis, nec elementum ligula pretium. Etiam condimentum, massa eu vehicula tincidunt, tortor neque tempus ligula, non consectetur lacus augue dictum quam. Maecenas accumsan, erat sed molestie consequat, lectus ex porttitor erat, ac mollis ante sapien sed neque. Sed ut dapibus felis. Integer quis rutrum velit, at posuere metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas cursus enim sed sollicitudin fermentum.


    code by valen t.
     
  • Index
    • cs matcha
  • Index













    • mina



      she dreams of a sunrise














      goodbye world



      by artist.

































      name


      hamabe minami






      age


      twenty-one






      gender


      female






      p.o.b.


      ishikawa prefecture, japan






      d.o.b.


      august 29, 2000





































































    nine lives



    Code: 
    [comment]code by nine lives ♡

fonts used:
[font=Oswald]headers & subheaders[/font]
[font=DM Sans]subtitles/body text[/font]
[font=Mr Dafoe]script accents[/font]

to replace fonts, replace them here then in the corresponding variables under * fonts used * check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )

[/comment][border=transparent;
/*background colour*/
--bg-color: #fff;
/*border colour*/
--border: #ededed;
/*light accent colour -- colour strip, box accents idk*/
--color-1: #cfe4cc;
/*darker accent colour -- buttons, other box accents*/
--color-2: #939f92;
/*selected button colour on default same as dark headers, to change just replace everything between : and ; with a hexcode!*/
--s-button: var(--h1);

/*dark header colour*/
--h1: #364437;
/*lighter header colour (close to light accent colour, for fancy quote box 1)*/
--h2: #c1d1bf;
/*text colour for basics and some subheaders. make sure it contrasts w accent colours*/
--t-color-1: #fff;
/*text colour for main contents. make sure it contrasts w background colours*/
--t-color-2: #000;

/*fonts used*/
--header: 'Oswald', sans-serif;
--subheader: 'Oswald', sans-serif;
--body: 'DM Sans', sans-serif;
--quote: 'Mr Dafoe', display;

/*music player album image*/
--music: url('https://i1.sndcdn.com/artworks-000209382886-umg6v2-t500x500.jpg');

/*images are categorised based on which they're in. images in tab 1 are a, tab 2 are b and so on*/
--aimg-1: url('https://i.pinimg.com/564x/21/63/dd/2163dd3532656633b5a5492ac3a19735.jpg');
--bimg-1: url('https://i.pinimg.com/564x/0b/a4/5f/0ba45f86e68f76def759a3ba8c6b59c4.jpg');
--bimg-2: url('https://img.ananweb.jp/2020/12/11201626/2230-neverland1-1.jpg');
--cimg-1: url('https://64.media.tumblr.com/fb0f802f032cb86fd8cf6ad478e8116f/d01f125cb17e52f3-f9/s1280x1920/8dda8f81de80e57784fbed23c4433f455aed349a.jpg');
--cimg-2: url('https://64.media.tumblr.com/afedb35e047b2d8aa6ece410fef653eb/d01f125cb17e52f3-57/s1280x1920/1e29df60c6198dbfa6ef73c23f844c11edbe055b.jpg');
--cimg-3: url('https://64.media.tumblr.com/fad621b965bcb5bc3e1c8c71651bbe9e/d01f125cb17e52f3-e4/s640x960/5fe1da8cadf3f76a866958eed28f144034683253.jpg');
--cimg-4: url('https://64.media.tumblr.com/a57b8443fd3baa82b38c4d1622ade170/d01f125cb17e52f3-b8/s640x960/257251b5f834730cf26c7d121398c221fd9c20d1.jpg');
--cimg-5: url('https://64.media.tumblr.com/76cde0461684749cb9d3b6a14228a767/tumblr_pn4k8g1nKT1qe2uw2o1_1280.jpg');
--cimg-6: url('https://64.media.tumblr.com/60cd96a6c22bcd468cbcd20718403025/tumblr_pn4k8g1nKT1qe2uw2o2_1280.jpg');
--dimg-1: url('https://64.media.tumblr.com/78c3f22672eef09e2a495be3c4a5cf9b/tumblr_plgnedxz8C1see09a_1280.jpg');
--eimg-1: url('https://64.media.tumblr.com/f2ecd2d15a673e65db3bfab4c2e01e54/tumblr_plgnecdqTG1see09a_1280.jpg');

/*gallery images*/
--gimg-1: url('https://64.media.tumblr.com/e34220ee15dffa3e3e30e42d2dbf60b3/tumblr_pqexzgTnxR1see09a_1280.jpg');
--gimg-2: url('https://64.media.tumblr.com/b117164dde82942ad39d11216bfd14df/tumblr_pqexzgzEUa1see09a_1280.jpg');
--gimg-3: url('https://64.media.tumblr.com/8c9d88f0c4618de7a9cd8a0ddac99087/tumblr_pqexzj0VMs1see09a_1280.jpg');
--gimg-4: url('https://64.media.tumblr.com/8333f295fd7864df86a2d8db19b5678d/6dcd6e5b05b7a444-cb/s1280x1920/3d6da339e251494f43761f3a4e82e75646c0c011.jpg');
--gimg-5: url('https://64.media.tumblr.com/615fc41096989dadb0132f39ef5db2e9/6dcd6e5b05b7a444-65/s1280x1920/c8f718e2b44502cad8015afc4e0e8d1ef9e3e669.jpg');
--gimg-6: url('https://64.media.tumblr.com/cb2044859aafeaf9dab6d4cf672e42dc/6dcd6e5b05b7a444-24/s1280x1920/2d134008c743309b8aae9fc9fe5528404e509c19.jpg');

/*relationship images. add more based on the number of relationships you add in the actual code by following the same format and changing the number in rX*/
--r1: url('https://64.media.tumblr.com/e22d6a4debbec52e980c701a3087f20b/fd382c455a0aadc3-0f/s400x600/e44f50e312ad556961bdd45f69ea20e3f767a129.gifv');
--r2: url('https://64.media.tumblr.com/9b8fa9a9afaa18ce844b2c02f5c90c7f/tumblr_puohdw0S8z1r3hv4so4_400.gifv');


height:530px; width:100%; max-width:390px; padding:15px 20px; box-sizing:border-box; margin:auto; line-height:0; position:relative; background: var(--bg-color); border:1px solid var(--border); display:flex; align-items:flex-end; justify-content:flex-end; overflow:hidden;]

   [comment]----tabs----[/comment]
   [border=transparent; height:41%; width:30px; padding:0; flex:auto 0; overflow:hidden;][border=transparent; padding:0; margin:-5px 0 0 -25px; line-height:37px;][tabs]


      [comment]----tab one (basics)----[/comment]
      [tab=aa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; flex-flow:row nowrap; align-items:flex-end; line-height:0;]
         [comment]----tab contents----[/comment]
         [border=transparent; height:100%; width:calc(100% - 50px); padding:0; display:flex; flex-flow:column nowrap; pointer-events:auto;]

[comment]----basics header----[/comment]
[border=transparent; height:23%; width:100%; padding:15px clamp(10px, 3vw, 20px); padding-top:25px; box-sizing:border-box; position:relative; display:flex; align-items:center;]
   [comment]----namebox----[/comment]
   [border=transparent; height:clamp(38px, 11vw, 54px); width:58%; padding:0; background: var(--color-1); position:relative; margin-left:clamp(15px, 4vw, 25px);]

      [comment]----nickname/short name----[/comment]
      [border=transparent; height:fit-content; width:fit-content; max-width:calc(100% - 5px); padding:0; overflow:hidden; white-space:nowrap; position:absolute; top:clamp(-14px, -4vw, -10px); left:clamp(-22px, -3.5vw, -17px); color: var(--h1); font-family: var(--header); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(1px, 1.5vw, 6px); font-size:clamp(34px, 11.5vw, 55px); line-height:90%;][comment]

----* * * short name here (4-5 letters max plz!)----

[/comment]mina[/border]

      [comment]----subtitle here----[/comment]
      [border=transparent; height:fit-content; max-height:clamp(13px, 4vw, 17px); width:fit-content; max-width:calc(100% + 21px); padding:0; position:absolute; bottom:clamp(-5px, -1.5vw, -2px); left:clamp(-21px, -3.5vw, -16px); overflow:hidden; color: var(--color-2); font-family: var(--body); font-size:clamp(12px, 4vw, 16px); line-height:100%; white-space:nowrap;][comment]

----* * * subtitle here----

[/comment]she dreams of a sunrise[/border]

   [/border]
   [comment]----namebox end----[/comment]

   [comment]----music box----[/comment]
   [border=transparent; height:auto; min-height:48px; max-height:56px; width:clamp(130px, 41% + 10vw, 155px); padding:5px; box-sizing:border-box; background: var(--color-2); position:absolute; top:20px; right:5px; display:flex; flex-flow:row nowrap; align-items:center;]

      [comment]----play button----[/comment]
      [border=transparent; height:38px; width:38px; padding:0; position:relative; z-index:3; background: var(--music), var(--color-1); background-size:cover; background-position:50% 50%; display:flex; align-items:center; justify-content:center; font-size:13px; color: var(--bg-color); text-shadow:1px 2px var(--color-2); flex:auto 0; border-radius:2px; pointer-events:none; flex:auto 0;][fa]fas fa-play[/fa][/border]

      [comment]----song info----[/comment]
      [border=transparent; height:100%; flex:1; padding:0 0 0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:flex-end; justify-content:center;]
         [comment]----song name----[/comment]
         [border=transparent; height:fit-content; width:100%; padding:0; color: var(--bg-color); font-size:13px; letter-spacing:1px; text-transform:uppercase; line-height:100%; font-family: var(--header); text-align:right;][comment]

----* * * song name here----

[/comment]goodbye world[/border]

         [comment]----artist name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); font-size:10px; text-align:right; line-height:100%; font-family: var(--body); margin:4px 0 0 auto; font-weight:bold; letter-spacing:clamp(0px, 0.2vw, 0.8px);][comment]

----* * * artist name here----

[/comment]by artist.[/border]
      [/border]
      [comment]----song info end----[/comment]

      [comment]----actual media player (put your song here!)----[/comment]
      [border=transparent; height:100%; width:35px; padding:0; position:absolute; top:0; left:6.5px; z-index:1; display:flex; align-items:center;][border=transparent; height:35px; width:35px; padding:0; overflow:hidden;]

         [comment]----soundcloud (put a soundcloud link within media tag)----[/comment]
         [border=transparent; height:80px; width:180px; padding:0; margin-top:-14px; margin-left:-13px;]
[media=soundcloud]https://soundcloud.com/sarah-wayne-744610086/goodbye-world-train-to-busan-ost[/media]
         [/border]

         [comment]----google drive (put google file code within media tag)----[/comment]
         [border=transparent; height:500px; width:500px; margin-top:-304.5px; margin-left:-94px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
[media=googledrive]google file code here[/MEDIA]
         [/border]

      [/border][/border]
      [comment]----actual media player end----[/comment]

   [/border]
   [comment]----music box end----[/comment]
[/border]
[comment]----basics header end----[/comment]

[comment]----basics container----[/comment]
[border=transparent; height:360px; width:clamp(195px, 68vw, 295px); max-width:calc(100% - 15px); margin:0 clamp(15px, 5vw, 35px) 0 0; padding:0; background:var(--aimg-1); background-size:cover; background-position:50% 50%; position:relative; box-shadow:clamp(15px, 5vw, 20px) clamp(15px, 5vw, 20px) var(--color-1); overflow:hidden;][border=transparent; padding:0; margin:-20px;][accordion]

   [comment]----image slide----[/comment]
   {slide=[border=transparent; padding:20px; height:360px; width:clamp(195px, 68vw, 295px);][border=transparent; padding:3px; height:100%; width:100%; background:var(--aimg-1); background-size:cover; position:relative; top:-23px; left:-10px;

/*edit this to adjust the cropping of the image*/ background-position:50% 50%;

][/border][/border] | open}[border=transparent; height:360px; width:200px; padding:0;][/border]{/slide}

   [comment]----contents slide----[/comment]
   {slide=[border=transparent; height:364px; width:clamp(195px, 68vw, 295px); position:absolute; top:-409px; left:19px; padding:0; pointer-events:none;][border=transparent; height:100%; width:100%; padding:clamp(15px, 3.5vw, 25px); box-sizing:border-box; position:relative; font-variant:none; font-weight:normal;]

      [comment]----basics contents----[/comment]
      [border=transparent; height:100%; width:100%; padding:0; position:relative; z-index:2; display:flex; flex-direction:column; overflow:hidden; pointer-events:auto; cursor:auto;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap; color: var(--t-color-1);]

         [comment]----copy this whole thing to make another bit of info!----[/comment]
         [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:12px 0;]
[border=transparent; height:fit-content; width:100%; padding:0; font-weight:bold; font-family: var(--header); text-transform:uppercase; font-size:17px; letter-spacing:clamp(0px, 0.5vw, 1.5px); line-height:100%; margin:0 0 5px 0;][comment]

----* * * info title here----

[/comment]name[/border]

[border=transparent; height:fit-content; width:100%; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:15px; line-height:100%; letter-spacing:clamp(0px, 0.5vw, 0.5px);][comment]

----* * * info contents here----

[/comment]hamabe minami[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info!----[/comment]
         [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:12px 0;]
[border=transparent; height:fit-content; width:100%; padding:0; font-weight:bold; font-family: var(--header); text-transform:uppercase; font-size:17px; letter-spacing:clamp(0px, 0.5vw, 1.5px); line-height:100%; margin:0 0 5px 0;][comment]

----* * * info title here----

[/comment]age[/border]

[border=transparent; height:fit-content; width:100%; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:15px; line-height:100%; letter-spacing:clamp(0px, 0.5vw, 0.5px);][comment]

----* * * info contents here----

[/comment]twenty-one[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info!----[/comment]
         [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:12px 0;]
[border=transparent; height:fit-content; width:100%; padding:0; font-weight:bold; font-family: var(--header); text-transform:uppercase; font-size:17px; letter-spacing:clamp(0px, 0.5vw, 1.5px); line-height:100%; margin:0 0 5px 0;][comment]

----* * * info title here----

[/comment]gender[/border]

[border=transparent; height:fit-content; width:100%; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:15px; line-height:100%; letter-spacing:clamp(0px, 0.5vw, 0.5px);][comment]

----* * * info contents here----

[/comment]female[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info!----[/comment]
         [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:12px 0;]
[border=transparent; height:fit-content; width:100%; padding:0; font-weight:bold; font-family: var(--header); text-transform:uppercase; font-size:17px; letter-spacing:clamp(0px, 0.5vw, 1.5px); line-height:100%; margin:0 0 5px 0;][comment]

----* * * info title here----

[/comment]p.o.b.[/border]

[border=transparent; height:fit-content; width:100%; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:15px; line-height:100%; letter-spacing:clamp(0px, 0.5vw, 0.5px);][comment]

----* * * info contents here----

[/comment]ishikawa prefecture, japan[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info!----[/comment]
         [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:12px 0;]
[border=transparent; height:fit-content; width:100%; padding:0; font-weight:bold; font-family: var(--header); text-transform:uppercase; font-size:17px; letter-spacing:clamp(0px, 0.5vw, 1.5px); line-height:100%; margin:0 0 5px 0;][comment]

----* * * info title here----

[/comment]d.o.b.[/border]

[border=transparent; height:fit-content; width:100%; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:15px; line-height:100%; letter-spacing:clamp(0px, 0.5vw, 0.5px);][comment]

----* * * info contents here----

[/comment]august 29, 2000[/border]
         [/border]
         [comment]----copy me too!----[/comment]

      [/border][/border][/border]
      [comment]----basics contents end----[/comment]

      [comment]----basics background (ignore!)----[/comment]
      [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; opacity:0.8; backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px);] 
[border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.4; filter:brightness(0.7);][/border][/border]

   [/border][/border]}{/slide}
   [comment]----contents slide end----[/comment]

[/accordion][/border][/border]
[comment]----basics container end----[/comment]

         [/border]
         [comment]----tab contents end----[/comment]

         [comment]----button select----[/comment]
         [border=transparent; height:41%; width:30px; padding:5px 0; box-sizing:border-box; pointer-events:none; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; margin:0 20px 10px auto;]

[comment]----selected button----[/comment]
[border=transparent; height:30px; min-height:30px; min-width:30px; width:30px; padding:0; background: var(--s-button); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center; color: var(--bg-color); font-size:14px; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice. remember to match icons at "tab cover")----

[/comment][fa]fas fa-home[/fa][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
         [/border]
         [comment]----button select end----[/comment]
      [/border][/tab]
      [comment]----tab one end----[/comment]


      [comment]----tab two (visage)----[/comment]
      [tab=aa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; flex-flow:row nowrap; align-items:flex-end; line-height:0;]
         [comment]----tab contents----[/comment]
         [border=transparent; height:100%; width:calc(100% - 50px); padding:0 5px 0 0; box-sizing:border-box;display:flex; flex-flow:column nowrap; pointer-events:auto;]

[comment]----visage pt.1----[/comment]
[border=transparent; height:clamp(128px, 15.5vw + 6vw, 145px); min-height:fit-content; max-height:145px; width:100%; padding:clamp(10px, 3vw, 20px) 0 0 clamp(10px, 3vw, 20px); box-sizing:border-box; flex:auto 0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:row wrap;]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; min-height:clamp(26px, 4vw, 28px); flex:1; min-width:calc(50% - 10px); padding:0; margin:6px 5px; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
      [border=transparent; height:auto; min-height:100%; width:fit-content; min-width:clamp(50px, 7vw, 58px); max-width:50%; padding:3px 5px 5px 5px; box-sizing:border-box; background: var(--color-2); color: var(--bg-color); font-size:clamp(12px, 2vw, 14px); text-transform:uppercase; font-family: var(--header); font-weight:bold; letter-spacing:0.5px; flex:auto 0; line-height:100%; display:flex; align-items:center; justify-content:center; text-align:center;letter-spacing:clamp(0.5px, 0.5vw, 1px);][comment]

----* * * info title here----

[/comment]height[/border]

      [border=transparent; height:fit-content; max-height:100%; flex:1; padding:5px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); font-size:clamp(11px, 1.6vw, 12px); line-height:14px; text-align:center;][comment]

----* * * info contents here----

[/comment]height info[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; min-height:clamp(26px, 4vw, 28px); flex:1; min-width:calc(50% - 10px); padding:0; margin:6px 5px; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
      [border=transparent; height:auto; min-height:100%; width:fit-content; min-width:clamp(50px, 7vw, 58px); max-width:50%; padding:3px 5px 5px 5px; box-sizing:border-box; background: var(--color-2); color: var(--bg-color); font-size:clamp(12px, 2vw, 14px); text-transform:uppercase; font-family: var(--header); font-weight:bold; letter-spacing:0.5px; flex:auto 0; line-height:100%; display:flex; align-items:center; justify-content:center; text-align:center;letter-spacing:clamp(0.5px, 0.5vw, 1px);][comment]

----* * * info title here----

[/comment]weight[/border]

      [border=transparent; height:fit-content; max-height:100%; flex:1; padding:5px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); font-size:clamp(11px, 1.6vw, 12px); line-height:14px; text-align:center;][comment]

----* * * info contents here----

[/comment]weight info[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; min-height:clamp(26px, 4vw, 28px); flex:1; min-width:calc(50% - 10px); padding:0; margin:6px 5px; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
      [border=transparent; height:auto; min-height:100%; width:fit-content; min-width:clamp(50px, 7vw, 58px); max-width:50%; padding:3px 5px 5px 5px; box-sizing:border-box; background: var(--color-2); color: var(--bg-color); font-size:clamp(12px, 2vw, 14px); text-transform:uppercase; font-family: var(--header); font-weight:bold; letter-spacing:0.5px; flex:auto 0; line-height:100%; display:flex; align-items:center; justify-content:center; text-align:center;letter-spacing:clamp(0.5px, 0.5vw, 1px);][comment]

----* * * info title here----

[/comment]hair[/border]

      [border=transparent; height:fit-content; max-height:100%; flex:1; padding:5px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); font-size:clamp(11px, 1.6vw, 12px); line-height:14px; text-align:center;][comment]

----* * * info contents here----

[/comment]hair info[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; min-height:clamp(26px, 4vw, 28px); flex:1; min-width:calc(50% - 10px); padding:0; margin:6px 5px; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
      [border=transparent; height:auto; min-height:100%; width:fit-content; min-width:clamp(50px, 7vw, 58px); max-width:50%; padding:3px 5px 5px 5px; box-sizing:border-box; background: var(--color-2); color: var(--bg-color); font-size:clamp(12px, 2vw, 14px); text-transform:uppercase; font-family: var(--header); font-weight:bold; letter-spacing:0.5px; flex:auto 0; line-height:100%; display:flex; align-items:center; justify-content:center; text-align:center;letter-spacing:clamp(0.5px, 0.5vw, 1px);][comment]

----* * * info title here----

[/comment]eyes[/border]

      [border=transparent; height:fit-content; max-height:100%; flex:1; padding:5px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); font-size:clamp(11px, 1.6vw, 12px); line-height:14px; text-align:center;][comment]

----* * * info contents here----

[/comment]eyes info[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; min-height:clamp(26px, 4vw, 28px); flex:1; min-width:calc(50% - 10px); padding:0; margin:6px 5px; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
      [border=transparent; height:auto; min-height:100%; width:fit-content; min-width:clamp(50px, 7vw, 58px); max-width:50%; padding:3px 5px 5px 5px; box-sizing:border-box; background: var(--color-2); color: var(--bg-color); font-size:clamp(12px, 2vw, 14px); text-transform:uppercase; font-family: var(--header); font-weight:bold; letter-spacing:0.5px; flex:auto 0; line-height:100%; display:flex; align-items:center; justify-content:center; text-align:center;letter-spacing:clamp(0.5px, 0.5vw, 1px);][comment]

----* * * info title here----

[/comment]build[/border]

      [border=transparent; height:fit-content; max-height:100%; flex:1; padding:5px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); font-size:clamp(11px, 1.6vw, 12px); line-height:14px; text-align:center;][comment]

----* * * info contents here----

[/comment]build info[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; min-height:clamp(26px, 4vw, 28px); flex:1; min-width:calc(50% - 10px); padding:0; margin:6px 5px; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
      [border=transparent; height:auto; min-height:100%; width:fit-content; min-width:clamp(50px, 7vw, 58px); max-width:50%; padding:3px 5px 5px 5px; box-sizing:border-box; background: var(--color-2); color: var(--bg-color); font-size:clamp(12px, 2vw, 14px); text-transform:uppercase; font-family: var(--header); font-weight:bold; letter-spacing:0.5px; flex:auto 0; line-height:100%; display:flex; align-items:center; justify-content:center; text-align:center;letter-spacing:clamp(0.5px, 0.5vw, 1px);][comment]

----* * * info title here----

[/comment]fc[/border]

      [border=transparent; height:fit-content; max-height:100%; flex:1; padding:5px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); font-size:clamp(11px, 1.6vw, 12px); line-height:14px; text-align:center;][comment]

----* * * info contents here----

[/comment]fc info[/border]
   [/border]
   [comment]----copy me too!----[/comment]

[/border][/border][/border]
[comment]----visage pt.1 end----[/comment]


[comment]----fancy quote box----[/comment]
[border=transparent; flex:1; width:calc(100% - 15px); padding:0; margin:5px 15px 15px 0; position:relative; display:flex; flex-flow:column nowrap; align-items:center; justify-content:flex-start;]

   [comment]----small image----[/comment]
   [border=transparent; height:87px; width:87px; padding:0; background: var(--bimg-1); background-size:cover; margin:30px 0 -30px 105px; position:relative; top:clamp(-30px, -6vw, -15px); left:clamp(-45px, 6vw, -10px); border-radius:50%;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]


   [comment]----quote container----[/comment]
   [border=transparent; height:50%; max-height:clamp(115px, 13vw, 130px); width:65%; padding:0; margin:auto 0 10px auto; overflow:hidden;]

      [comment]----quote title----[/comment]
      [border=transparent; height:fit-content; width:fit-content; padding:0; position:absolute; top:clamp(-30px, -6vw, -3px); right:clamp(30px, 6vw, 65px); margin:91px clamp(-35px, -5vw, -10px) 0 0; z-index:2; font-size:clamp(78px, 10vw, 84px); font-family: var(--quote); color: var(--h2); line-height:60%; transform: rotate(-8deg); text-align:right; pointer-events:none; text-shadow:2px 2px var(--bg-color);][comment]

----* * * quote title here----

[/comment]dream[/border]

      [comment]----quote contents----[/comment]
      [border=transparent; height:100%; width:100%; padding:0; color: var(--t-color-2); font-family: var(--body); font-size:11px; text-align:justify; line-height:14.5px;][comment]

----* * *  quote here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum.
      [/border]
      [comment]----quote contents end----[/comment]

   [/border]
   [comment]----quote container end----[/comment]

   [comment]---big image----[/comment]
   [border=transparent; height:195px; width:195px; padding:0; background: var(--bimg-2); position:absolute; bottom:0; left:-30px; z-index:1; border-radius:50%; background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]

[/border]
[comment]----fancy quote box end----[/comment]


[comment]----visage pt.2----[/comment]
[border=transparent; height:140px; min-height:fit-content; max-height:140px; width:100%; padding: 0 5px clamp(10px, 3vw, 20px) clamp(10px, 3vw, 20px); box-sizing:border-box; flex:auto 0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]

   [comment]----copy this whole thing to make another bit of (long) info----[/comment]
   [border=transparent; height:calc(100% - 10px); max-height:calc(100% - 10px); width:50%; padding:0; margin:5px 0; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
      [border=transparent; height:auto; min-height:100%; width:fit-content; min-width:clamp(50px, 7vw, 58px); max-width:50%; padding:3px 5px 5px 5px; box-sizing:border-box; background: var(--color-2); color: var(--bg-color); font-size:clamp(12px, 2vw, 14px); text-transform:uppercase; font-family: var(--header); font-weight:bold; letter-spacing:0.5px; flex:auto 0; line-height:100%; display:flex; align-items:center; justify-content:center; text-align:center;letter-spacing:clamp(0.5px, 0.5vw, 1px);][comment]

----* * * info title here----

[/comment]style[/border]

      [border=transparent; height:fit-content; max-height:100%; flex:1; padding:8px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:auto;][border=transparent; height:auto; width:50%; padding:0 8px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); font-size:11px; line-height:14px; text-align:justify;][comment]

----* * * info contents here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum.[/border]
      [/border][/border]
   [/border]
   [comment]----copy me too!----[/comment]


[/border][/border]
[comment]----visage pt.2 end----[/comment]

         [/border]
         [comment]----tab contents end----[/comment]

         [comment]----button select----[/comment]
         [border=transparent; height:41%; width:30px; padding:5px 0; box-sizing:border-box; pointer-events:none; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; margin:0 20px 10px auto;]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----selected button----[/comment]
[border=transparent; height:30px; min-height:30px; min-width:30px; width:30px; padding:0; background: var(--s-button); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center; color: var(--bg-color); font-size:14px; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice. remember to match icons at "tab cover")----

[/comment][fa]fas fa-flower-tulip[/fa][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
         [/border]
         [comment]----button select end----[/comment]
      [/border][/tab]
      [comment]----tab two end----[/comment]


      [comment]----tab three (persona)----[/comment]
      [tab=aa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; flex-flow:row nowrap; align-items:flex-end; line-height:0;]
         [comment]----tab contents----[/comment]
         [border=transparent; height:100%; width:calc(100% - 50px); padding:clamp(10px, 3vw, 20px); padding-right:10px; box-sizing:border-box; display:flex; flex-flow:column nowrap; pointer-events:auto;]

[comment]----persona tabs container----[/comment]
[border=transparent; height:calc(64% - 15px); width:100%; padding:10px 0; box-sizing:border-box; position:relative;]

   [comment]----persona tabs----[/comment]
   [border=transparent; height:10%; width:145px; padding:0; margin:0 clamp(33px, 8vw, 36px) 0 auto; overflow:hidden][border=transparent; padding:0; letter-spacing:-10px; margin:0 -80px 0 clamp(-25px, -7vw, -10px);][tabs]


      [comment]----persona tab one----[/comment]
      [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow:column nowrap; pointer-events:none; letter-spacing:0;]

         [comment]----persona tab header----[/comment]
         [border=transparent; height:57%; width:100%; padding:0; display:flex; flex-flow:column nowrap;]

[comment]----row one (ignore!)----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow: row nowrap; flex:auto 0;]

   [comment]----image one----[/comment]
   [border=transparent; flex:1; height:110px; max-width:clamp(50px, 100% - 134px, 110px); padding:0; background: var(--cimg-1); background-size:cover; margin-right:auto;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
   [border=transparent; height:100%; width:134px; flex:auto 0; margin-left:clamp(10px, 7vw, 15px);][/border]

   [comment]----button select (ignore!)----[/comment]
   [border=transparent; height:60%; width:100%; padding:0; pointer-events:none; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center;][border=transparent; height:70%; width:calc(100% - 30px); max-width:240px; padding:0; position:relative;][border=transparent; height:30px; width:134px; padding:0 3px; box-sizing:border-box; position:absolute; top:-15px; right:10px; display:flex; flex-flow:row nowrap; justify-content:center;]

      [comment]----selected button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--s-button); border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]

      [comment]----filler button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]
      [comment]----filler button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; border-radius:50%; flex:auto 0;][/border]
   [/border][/border][/border]
   [comment]----button select end----[/comment]
[/border]
[comment]----row one end----[/comment]

[comment]----row two----[/comment]
[border=transparent; flex:1; width:100%; padding:0; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start; pointer-events:auto;]
   [comment]----persona tab title----[/comment]
   [border=transparent; height:fit-content; width:fit-content; min-width:100px; padding:0 8px; box-sizing:border-box; color: var(--h1); font-size:clamp(38px, 8vw, 43px); font-family: var(--header); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(2px, 1vw, 5px); line-height:100%; flex:auto 0; margin:5px 0 0 0;][comment]

----* * * tab title here----

[/comment]virtues[/border]

   [comment]----image two----[/comment]
   [border=transparent; height:100%; flex:1; padding:0; position:relative; margin-left:7px;][border=transparent; height:90px; width:100%; max-width:90px; padding:0; position:absolute; bottom:0; right:0; background: var(--cimg-2); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]

[/border]
[comment]----row two end----[/comment]
         [/border]
         [comment]----persona tab header end----[/comment]

         [comment]----persona tab contents----[/comment]
         [border=transparent; height:calc(43% - 15px); width:100%; padding:0; margin-top:15px; pointer-events:auto; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color-2); font-size:11px; text-align:justify; line-height:14.8px; font-family: var(--body);][comment]

----* * * text starts here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum.

Pellentesque feugiat est ac metus tempor vehicula. Integer magna velit, accumsan vitae odio et, pulvinar suscipit urna. Mauris et felis vitae purus feugiat fringilla vitae ut risus. Pellentesque placerat est nec justo pretium luctus. Mauris porta, nibh in mattis vehicula, ipsum tortor egestas velit, id aliquet sem libero ut massa. Integer ut nunc quis dolor lacinia volutpat a eget dolor. Etiam euismod nisl sit amet ipsum maximus, sit amet viverra leo porttitor. Curabitur ullamcorper, turpis ac aliquam fringilla, mi tortor viverra nulla, at ultrices neque ligula in mass.
         [/border][/border][/border]
         [comment]----persona tab contents end----[/comment]
      [/border][/tab]
      [comment]----persona tab one end----[/comment]


      [comment]----persona tab two----[/comment]
      [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow:column nowrap; pointer-events:none; letter-spacing:0;]

         [comment]----persona tab header----[/comment]
         [border=transparent; height:57%; width:100%; padding:0; display:flex; flex-flow:column nowrap;]

[comment]----row one (ignore!)----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow: row nowrap; flex:auto 0;]

   [comment]----image one----[/comment]
   [border=transparent; flex:1; height:110px; max-width:clamp(50px, 100% - 134px, 110px); padding:0; background: var(--cimg-3); background-size:cover; margin-right:auto;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
   [border=transparent; height:100%; width:134px; flex:auto 0; margin-left:clamp(10px, 7vw, 15px);][/border]

   [comment]----button select (ignore!)----[/comment]
   [border=transparent; height:60%; width:100%; padding:0; pointer-events:none; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center;][border=transparent; height:70%; width:calc(100% - 30px); max-width:240px; padding:0; position:relative;][border=transparent; height:30px; width:134px; padding:0 3px; box-sizing:border-box; position:absolute; top:-15px; right:10px; display:flex; flex-flow:row nowrap; justify-content:center;]
      [comment]----filler button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]

      [comment]----selected button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--s-button); border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]

      [comment]----filler button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; border-radius:50%; flex:auto 0;][/border]
   [/border][/border][/border]
   [comment]----button select end----[/comment]
[/border]
[comment]----row one end----[/comment]

[comment]----row two----[/comment]
[border=transparent; flex:1; width:100%; padding:0; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start; pointer-events:auto;]
   [comment]----persona tab title----[/comment]
   [border=transparent; height:fit-content; width:fit-content; min-width:100px; padding:0 8px; box-sizing:border-box; color: var(--h1); font-size:clamp(38px, 8vw, 43px); font-family: var(--header); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(2px, 1vw, 5px); line-height:100%; flex:auto 0; margin:5px 0 0 0;][comment]

----* * * tab title here----

[/comment]vices[/border]

   [comment]----image two----[/comment]
   [border=transparent; height:100%; flex:1; padding:0; position:relative; margin-left:7px;][border=transparent; height:90px; width:100%; max-width:90px; padding:0; position:absolute; bottom:0; right:0; background: var(--cimg-4); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]

[/border]
[comment]----row two end----[/comment]
         [/border]
         [comment]----persona tab header end----[/comment]

         [comment]----persona tab contents----[/comment]
         [border=transparent; height:calc(43% - 15px); width:100%; padding:0; margin-top:15px; pointer-events:auto; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color-2); font-size:11px; text-align:justify; line-height:14.5px; font-family: var(--body);][comment]

----* * * text starts here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum.

Pellentesque feugiat est ac metus tempor vehicula. Integer magna velit, accumsan vitae odio et, pulvinar suscipit urna. Mauris et felis vitae purus feugiat fringilla vitae ut risus. Pellentesque placerat est nec justo pretium luctus. Mauris porta, nibh in mattis vehicula, ipsum tortor egestas velit, id aliquet sem libero ut massa. Integer ut nunc quis dolor lacinia volutpat a eget dolor. Etiam euismod nisl sit amet ipsum maximus, sit amet viverra leo porttitor. Curabitur ullamcorper, turpis ac aliquam fringilla, mi tortor viverra nulla, at ultrices neque ligula in mass.
         [/border][/border][/border]
         [comment]----persona tab contents end----[/comment]
      [/border][/tab]
      [comment]----persona tab two end----[/comment]


      [comment]----persona tab three----[/comment]
      [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow:column nowrap; pointer-events:none; letter-spacing:0;]

         [comment]----persona tab header----[/comment]
         [border=transparent; height:57%; width:100%; padding:0; display:flex; flex-flow:column nowrap;]

[comment]----row one (ignore!)----[/comment]
[border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow: row nowrap; flex:auto 0;]

   [comment]----image one----[/comment]
   [border=transparent; flex:1; height:110px; max-width:clamp(50px, 100% - 134px, 110px); padding:0; background: var(--cimg-5); background-size:cover; margin-right:auto;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
   [border=transparent; height:100%; width:134px; flex:auto 0; margin-left:clamp(10px, 7vw, 15px);][/border]

   [comment]----button select (ignore!)----[/comment]
   [border=transparent; height:60%; width:100%; padding:0; pointer-events:none; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center;][border=transparent; height:70%; width:calc(100% - 30px); max-width:240px; padding:0; position:relative;][border=transparent; height:30px; width:134px; padding:0 3px; box-sizing:border-box; position:absolute; top:-15px; right:10px; display:flex; flex-flow:row nowrap; justify-content:center;]
      [comment]----filler button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]
      [comment]----filler button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]

      [comment]----selected button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--s-button); border-radius:50%; flex:auto 0;][/border]

   [/border][/border][/border]
   [comment]----button select end----[/comment]
[/border]
[comment]----row one end----[/comment]

[comment]----row two----[/comment]
[border=transparent; flex:1; width:100%; padding:0; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start; pointer-events:auto;]
   [comment]----persona tab title----[/comment]
   [border=transparent; height:fit-content; width:fit-content; min-width:100px; padding:0 8px; box-sizing:border-box; color: var(--h1); font-size:clamp(38px, 8vw, 43px); font-family: var(--header); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(2px, 1vw, 5px); line-height:100%; flex:auto 0; margin:5px 0 0 0;][comment]

----* * * tab title here----

[/comment]other[/border]

   [comment]----image two----[/comment]
   [border=transparent; height:100%; flex:1; padding:0; position:relative; margin-left:7px;][border=transparent; height:90px; width:100%; max-width:90px; padding:0; position:absolute; bottom:0; right:0; background: var(--cimg-6); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]

[/border]
[comment]----row two end----[/comment]
         [/border]
         [comment]----persona tab header end----[/comment]

         [comment]----persona tab contents----[/comment]
         [border=transparent; height:calc(43% - 15px); width:100%; padding:0; margin-top:15px; pointer-events:auto; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color-2); font-size:11px; text-align:justify; line-height:14.5px; font-family: var(--body);][comment]

----* * * text starts here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum.

Pellentesque feugiat est ac metus tempor vehicula. Integer magna velit, accumsan vitae odio et, pulvinar suscipit urna. Mauris et felis vitae purus feugiat fringilla vitae ut risus. Pellentesque placerat est nec justo pretium luctus. Mauris porta, nibh in mattis vehicula, ipsum tortor egestas velit, id aliquet sem libero ut massa. Integer ut nunc quis dolor lacinia volutpat a eget dolor. Etiam euismod nisl sit amet ipsum maximus, sit amet viverra leo porttitor. Curabitur ullamcorper, turpis ac aliquam fringilla, mi tortor viverra nulla, at ultrices neque ligula in mass.
         [/border][/border][/border]
         [comment]----persona tab contents end----[/comment]
      [/border][/tab]
      [comment]----persona tab three end----[/comment]


   [/tabs][/border][/border]
   [comment]----persona tabs end----[/comment]

   [comment]----persona tabs cover----[/comment]
   [border=transparent; height:60%; width:100%; padding:0; pointer-events:none; background: var(--bg-color); position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center;][border=transparent; height:70%; width:calc(100% - 30px); max-width:240px; padding:0; background: var(--color-1); position:relative;][border=transparent; height:30px; width:134px; padding:0 3px; box-sizing:border-box; position:absolute; top:-15px; right:10px; display:flex; flex-flow:row nowrap; justify-content:center;]

      [comment]----persona button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]

      [comment]----persona button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border-radius:50%; flex:auto 0;][/border]
      [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]

      [comment]----persona button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border-radius:50%; flex:auto 0;][/border]

   [/border][/border][/border]
   [comment]----persona tabs cover end----[/comment]

[/border]
[comment]----persona tabs container end----[/comment]

[comment]----persona details----[/comment]
[border=transparent; height:36%; width:100%; padding:0; margin-top:15px; padding:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]

   [comment]----copy this whole thing to make another set of details----[/comment]
   [border=transparent; height:auto; min-height:calc(50% - 10px); width:50%; padding:0; display:flex; flex-flow:column nowrap; margin:5px 0;]
      [comment]----details title----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; color: var(--h1); font-family: var(--header); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(1px, 1vw, 2px); font-size:28px; line-height:100%;][comment]

----* * * details title here----

[/comment]likes[/border]

      [comment]----details contents----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; color: var(--t-color-2); font-family: var(--body); font-size:12px; text-align:left; line-height:15px; margin-top:10px;][comment]

----* * * details contents here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border]

   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another set of details----[/comment]
   [border=transparent; height:auto; min-height:calc(50% - 10px); width:50%; padding:0; display:flex; flex-flow:column nowrap; margin:5px 0;]
      [comment]----details title----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; color: var(--h1); font-family: var(--header); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(1px, 1vw, 2px); font-size:28px; line-height:100%;][comment]

----* * * details title here----

[/comment]dislikes[/border]

      [comment]----details contents----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; color: var(--t-color-2); font-family: var(--body); font-size:12px; text-align:left; line-height:15px; margin-top:10px;][comment]

----* * * details contents here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border]

   [/border]
   [comment]----copy me too!----[/comment]

[/border][/border]
[comment]----persona details end----[/comment]

         [/border]
         [comment]----tab contents end----[/comment]

         [comment]----button select----[/comment]
         [border=transparent; height:41%; width:30px; padding:5px 0; box-sizing:border-box; pointer-events:none; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; margin:0 20px 10px auto;]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----selected button----[/comment]
[border=transparent; height:30px; min-height:30px; min-width:30px; width:30px; padding:0; background: var(--s-button); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center; color: var(--bg-color); font-size:14px; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice. remember to match icons at "tab cover")----

[/comment][fa]fas fa-heart[/fa][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
         [/border]
         [comment]----button select end----[/comment]
      [/border][/tab]
      [comment]----tab three end----[/comment]


      [comment]----tab four (history)----[/comment]
      [tab=aa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; flex-flow:row nowrap; align-items:flex-end; line-height:0;]

         [comment]----tab contents----[/comment]
         [border=transparent; height:100%; width:calc(100% - 50px); padding:clamp(10px, 3vw, 20px); padding-right:10px; box-sizing:border-box; display:flex; flex-flow:column nowrap; pointer-events:auto;]

[comment]----history header----[/comment]
[border=transparent; height:24%; width:100%; padding:0; position:relative; display:flex; align-items:flex-start; justify-content:flex-end;]

   [comment]----tab title----[/comment]
   [border=transparent; height:fit-content; width:fit-content; padding:0 8px; box-sizing:border-box; position:relative; z-index:2; color: var(--h1); font-family: var(--header); font-size:43px; font-weight:bold; text-transform:uppercase; line-height:100%; letter-spacing:clamp(1px, 1.5vw, 4px); text-shadow:1.5px 1.5px var(--bg-color); text-align:right;][comment]

----* * * tab title here----

[/comment]history[/border]

   [comment]----image background (ignore!)----[/comment]
   [border=transparent; height:calc(100% - 22px); width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:1; background: var(--dimg-1); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
[/border]
[comment]----history header end----[/comment]

[comment]----history contents----[/comment]
[border=transparent; height:calc(76% - 15px); width:100%; padding:0; margin-top:15px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]

   [comment]----copy this whole thing to make another event----[/comment]
   [border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
      [comment]----event title----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; margin-bottom:-11px; position:sticky; top:0; display:flex; flex-flow: row nowrap; align-items:center;]
         [border=transparent; height:fit-content; flex:1; padding:4px 10px 4px 0; box-sizing:border-box; color: var(--color-2); font-family: var(--header); font-weight:bold; letter-spacing:clamp(0px, 0.5vw, 1px); line-height:20px; font-size:18px; text-align:right; background:var(--bg-color);][comment]

----* * * event title here----

[/comment]place, year[/border]
         [border=transparent; height:8px; width:8px; padding:0; display:flex; justify-content:center; align-items:center; flex:auto 0;][border=transparent; height:8px; width:8px; padding:0; border-radius:50%; background: var(--color-2); margin:5px 0 0 0;][/border][/border]
      [/border]

      [comment]----event contents----[/comment]
      [border=transparent; height:fit-content; width:calc(100% - 3px); padding:9px 10px 20px 0; box-sizing:border-box; margin:3px 0 -13px 0; border-right:2px solid var(--color-2); font-size:11px; font-family: var(--body); color: var(--t-color-2); text-align:justify; line-height:15px;][comment]

----* * * text starts here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum. Pellentesque feugiat est ac metus tempor.
      [/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another event----[/comment]
   [border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
      [comment]----event title----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; margin-bottom:-11px; position:sticky; top:0; display:flex; flex-flow: row nowrap; align-items:center;]
         [border=transparent; height:fit-content; flex:1; padding:4px 10px 4px 0; box-sizing:border-box; color: var(--color-2); font-family: var(--header); font-weight:bold; letter-spacing:clamp(0px, 0.5vw, 1px); line-height:20px; font-size:18px; text-align:right; background:var(--bg-color);][comment]

----* * * event title here----

[/comment]place, year[/border]
         [border=transparent; height:8px; width:8px; padding:0; display:flex; justify-content:center; align-items:center; flex:auto 0;][border=transparent; height:8px; width:8px; padding:0; border-radius:50%; background: var(--color-2); margin:5px 0 0 0;][/border][/border]
      [/border]

      [comment]----event contents----[/comment]
      [border=transparent; height:fit-content; width:calc(100% - 3px); padding:9px 10px 20px 0; box-sizing:border-box; margin:3px 0 -13px 0; border-right:2px solid var(--color-2); font-size:11px; font-family: var(--body); color: var(--t-color-2); text-align:justify; line-height:15px;][comment]

----* * * text starts here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum. Pellentesque feugiat est ac metus tempor.
      [/border]
   [/border]
   [comment]----copy me too!----[/comment]

[/border][/border]
[comment]----history contents end----[/comment]

         [/border]
         [comment]----tab contents end----[/comment]

         [comment]----button select----[/comment]
         [border=transparent; height:41%; width:30px; padding:5px 0; box-sizing:border-box; pointer-events:none; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; margin:0 20px 10px auto;]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----selected button----[/comment]
[border=transparent; height:30px; min-height:30px; min-width:30px; width:30px; padding:0; background: var(--s-button); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center; color: var(--bg-color); font-size:14px; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice. remember to match icons at "tab cover")----

[/comment][fa]fas fa-book[/fa][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
         [/border]
         [comment]----button select end----[/comment]
      [/border][/tab]
      [comment]----tab four end----[/comment]


      [comment]----tab five (extra)----[/comment]
      [tab=aa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; flex-flow:row nowrap; align-items:flex-end; line-height:0;]
         [comment]----tab contents----[/comment]
         [border=transparent; height:100%; width:calc(100% - 50px); padding:clamp(10px, 3vw, 20px); padding-right:8px; padding-bottom:0; box-sizing:border-box;  display:flex; flex-flow:column nowrap; pointer-events:auto;]

[comment]----gallery----[/comment]
[border=transparent; height:33%; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap; flex:auto 0;]

   [comment]----gallery title----[/comment]
   [border=transparent; height:100%; width:fit-content; padding:0; writing-mode: vertical-rl; color: var(--h1); font-size:clamp(38px, 8vw, 42px); font-weight:bold; letter-spacing:clamp(3px, 6px - 1vw, 5px); text-align:center; line-height:100%; text-transform:uppercase; font-family: var(--header); white-space:nowrap; flex:auto 0;]gallery[/border]

   [comment]----gallery images----[/comment]
   [border=transparent; height:100%; flex:1; padding:0; display:flex; flex-flow: row wrap; justify-content:center; align-items:center; align-content:center; margin-right:10px;]
      [border=transparent; flex:1; hmin-width:clamp(50px, 33% - 10px, 90px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-1); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]

      [border=transparent; flex:1; min-width:clamp(30px, 33% - 10px, 90px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-2); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]

      [border=transparent; flex:1; min-width:clamp(30px, 33% - 10px, 90px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-3); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]

      [border=transparent; flex:1; min-width:clamp(30px, 33% - 10px, 90px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-4); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]

      [border=transparent; flex:1; min-width:clamp(30px, 33% - 10px, 90px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-5); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]

      [border=transparent; flex:1; min-width:clamp(30px, 33% - 10px, 90px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-6); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]

   [/border]
[/border]
[comment]----gallery end----[/comment]

[comment]----relationships----[/comment]
[border=transparent; height:32%; width:100%; padding:0; margin:15px 0 20px 0; display:flex; flex-flow: row nowrap; flex:auto 0;]
   [comment]----relationships title----[/comment]
   [border=transparent; height:100%; width:fit-content; padding:0; writing-mode: vertical-rl; color: var(--h1); font-size:clamp(38px, 8vw, 42px); font-weight:bold; letter-spacing:clamp(3px, 6px - 1vw, 5px); text-align:center; line-height:100%; text-transform:uppercase; font-family: var(--header); white-space:nowrap; flex:auto 0; transform:rotate(-180deg);]rel.[/border]

   [comment]----relationships container----[/comment]
   [border=transparent; height:100%; flex:1; padding:0; overflow:hidden; display:flex; flex-direction:column; margin-left:10px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type: y mandatory;]

      [comment]----copy this whole thing to add another relationship----[/comment]
      [border=transparent; height:calc(100% - 15px); width:50%; flex:auto 0; padding:10px 5px 10px 10px; margin:15px 0 5px 0; box-sizing:border-box; background: var(--color-1); display:flex; flex-flow:column nowrap; scroll-snap-align: end;]

         [comment]----relationship header----[/comment]
         [border=transparent; height:auto; max-height:50%; width:100%; padding:0; display:flex; flex-flow: row nowrap; flex:auto 0;]
[comment]----name container----[/comment]
[border=transparent; height:max-content; width:fit-content; padding:0; flex:auto 0; display:flex; flex-flow: column nowrap;]
   [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--h1); font-size:clamp(16px, 5vw, 20px); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(0.5px, 0.3vw, 1px); line-height:90%; font-family: var(--header);][comment]

----* * * name here----

[/comment]name of rel[/border]

   [border=transparent; height:max-content; width:fit-content; padding:0; margin-top:5px; color: var(--color-2); font-family: var(--header); font-size:clamp(12px, 4vw, 14px); line-height:100%; letter-spacing:0.5px;][comment]

----* * * extra info here----

[/comment]role | relationship[/border]
[/border]
[comment]----name container end----[/comment]

[comment]----relationship image----[/comment]
[border=transparent; height:calc(100% - 7px); min-height:30px; flex:1; min-width:50px; padding:0; position:relative; margin:0 5px 0 20px;][border=transparent; height:calc(100% + 25px); width:100%; padding:0; position:absolute; top:-23px; left:0; 

/*replace the number in rX to match the variable at the top of the code! */ background:var(--r1);

box-shadow:-7px 7px var(--color-2); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 30%;][/border][/border]
         [/border]
         [comment]----relationship header end----[/comment]

         [comment]----relationship contents----[/comment]
         [border=transparent; height:auto; max-height:80%; width:100%; padding:0; margin-top:10px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color-2); font-size:11px; text-align:justify; line-height:14px; font-family: var(--body);][comment]

----* * * text starts here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet.
         [/border][/border][/border]
         [comment]----relationship contents end----[/comment]
      [/border]
      [comment]----copy me too!----[/comment]

      [comment]----copy this whole thing to add another relationship----[/comment]
      [border=transparent; height:calc(100% - 15px); width:50%; flex:auto 0; padding:10px 5px 10px 10px; margin:15px 0 5px 0; box-sizing:border-box; background: var(--color-1); display:flex; flex-flow:column nowrap; scroll-snap-align: end;]

         [comment]----relationship header----[/comment]
         [border=transparent; height:auto; max-height:50%; width:100%; padding:0; display:flex; flex-flow: row nowrap; flex:auto 0;]
[comment]----name container----[/comment]
[border=transparent; height:max-content; width:fit-content; padding:0; flex:auto 0; display:flex; flex-flow: column nowrap;]
   [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--h1); font-size:clamp(16px, 5vw, 20px); text-transform:uppercase; font-weight:bold; letter-spacing:clamp(0.5px, 0.3vw, 1px); line-height:90%; font-family: var(--header);][comment]

----* * * name here----

[/comment]name of rel[/border]

   [border=transparent; height:max-content; width:fit-content; padding:0; margin-top:5px; color: var(--color-2); font-family: var(--header); font-size:clamp(12px, 4vw, 14px); line-height:100%; letter-spacing:0.5px;][comment]

----* * * extra info here----

[/comment]role | relationship[/border]
[/border]
[comment]----name container end----[/comment]

[comment]----relationship image----[/comment]
[border=transparent; height:calc(100% - 7px); min-height:30px; flex:1; min-width:50px; padding:0; position:relative; margin:0 5px 0 20px;][border=transparent; height:calc(100% + 25px); width:100%; padding:0; position:absolute; top:-23px; left:0; 

/*replace the number in rX to match the variable at the top of the code! */ background:var(--r2);

box-shadow:-7px 7px var(--color-2); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 30%;][/border][/border]
         [/border]
         [comment]----relationship header end----[/comment]

         [comment]----relationship contents----[/comment]
         [border=transparent; height:auto; max-height:80%; width:100%; padding:0; margin-top:10px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color-2); font-size:11px; text-align:justify; line-height:14px; font-family: var(--body);][comment]

----* * * text starts here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet.
         [/border][/border][/border]
         [comment]----relationship contents end----[/comment]
      [/border]
      [comment]----copy me too!----[/comment]

   [/border][/border]
[/border]
[comment]----relationships end----[/comment]

[comment]----fancy quote----[/comment]
[border=transparent; flex:1; width:clamp(100% + 10px, 100% + 3vw, 100% + 20px); padding:0 5px 0 0; box-sizing:border-box; position:relative; left:clamp(-20px, -3vw, -10px); display:flex; align-items:flex-end; justify-content:flex-end;]

   [comment]----quote title----[/comment]
   [border=transparent; height:fit-content; width:auto; padding:0; color: var(--h1); font-family: var(--quote); font-size:clamp(38px, 8vw, 45px); transform:rotate(-7deg); position:absolute; top:5px; right:15px; z-index:2; line-height:100%; text-shadow:1px 1px var(--bg-color); pointer-events:none;][comment]

----* * * quote title here----

[/comment]hinode no yume[/border]

   [comment]----quote contents----[/comment]
   [border=transparent; height:115px; width:clamp(150px, 60%, 200px); padding:0; color: var(--t-color-2); font-size:11px; text-align:justify; line-height:16px; font-family: var(--body); overflow:hidden;][comment]

----* * * quote here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor nunc a metus hendrerit, sit amet pretium ex congue. Duis molestie metus felis, et sodales eros interdum quis. Sed sollicitudin, ex ut mattis viverra, nisi lectus aliquam eros, eget finibus magna turpis volutpat massa. Donec interdum finibus nisi, at gravida sapien finibus sit amet. Donec eget tortor et odio tincidunt feugiat non ac dolor. Ut tristique magna quis consequat mattis. Aliquam eleifend odio et placerat pellentesque. Nunc risus velit, semper vel tincidunt eu, tincidunt vel tellus. Morbi faucibus nisi quis purus malesuada congue. Aliquam id velit sed elit sodales auctor. Phasellus lorem diam, ultricies at rhoncus et, sagittis ut lorem. Nulla ut vestibulum est. Aenean pulvinar nulla at dignissim vestibulum.
   [/border]
   [comment]----quote contents end----[/comment]

   [comment]----big image----[/comment]
   [border=transparent; height:200px; width:200px; padding:0; position:absolute; top:0; left:-50px; z-index:1; border-radius:50%; background: var(--eimg-1); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]


[/border]
[comment]----fancy quote end----[/comment]

         [/border]
         [comment]----tab contents end----[/comment]

         [comment]----button select----[/comment]
         [border=transparent; height:41%; width:30px; padding:5px 0; box-sizing:border-box; pointer-events:none; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; margin:0 20px 10px auto;]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]
[comment]----filler button----[/comment]
[border=transparent; height:30px; width:30px; padding:0;][/border]
[border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

[comment]----selected button----[/comment]
[border=transparent; height:30px; min-height:30px; min-width:30px; width:30px; padding:0; background: var(--s-button); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center; color: var(--bg-color); font-size:14px; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice. remember to match icons at "tab cover")----

[/comment][fa]fas fa-users[/fa][/border]

         [/border]
         [comment]----button select end----[/comment]
      [/border][/tab]
      [comment]----tab five end----[/comment]


   [/tabs][/border][/border]
   [comment]----tabs end----[/comment]

   [comment]----tabs cover----[/comment]
   [border=transparent; height:41%; width:30px; padding:5px 0; box-sizing:border-box; position:absolute; bottom:10px; right:20px; z-index:3; pointer-events:none; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center;]
      [comment]----button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; font-size:14px; color: var(--bg-color); opacity:0.5; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice)----

[/comment][fa]fas fa-home[/fa][/border][/border]
      [border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

      [comment]----button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; font-size:14px; color: var(--bg-color); opacity:0.5; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice)----

[/comment][fa]fas fa-flower-tulip[/fa][/border][/border]
      [border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

      [comment]----button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; font-size:14px; color: var(--bg-color); opacity:0.5; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice)----

[/comment][fa]fas fa-heart[/fa][/border][/border]
      [border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

      [comment]----button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; font-size:14px; color: var(--bg-color); opacity:0.5; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice)----

[/comment][fa]fas fa-book[/fa][/border][/border]
      [border=transparent; flex:1; width:100%; padding:0; pointer-events:auto;][/border]

      [comment]----button----[/comment]
      [border=transparent; height:30px; width:30px; padding:0; background: var(--color-2); border:2px solid var(--bg-color); border-radius:50%; flex:auto 0; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; font-size:14px; color: var(--bg-color); opacity:0.5; text-align:center;][comment]

----* * * button icon here (replace icon in fa-icon with the fontawesome icon of your choice)----

[/comment][fa]fas fa-users[/fa][/border][/border]
   [/border]
   [comment]----tabs cover end----[/comment]

   [comment]-----colour strip (ignore!)----[/comment]
   [border=transparent; height:100%; width:35px; padding:0; background: var(--color-1); position:absolute; top:0; right:0; z-index:1; pointer-events:none;][/border]
   [border=transparent; height:100%; width:calc(100% - 35px); padding:0; background: var(--bg-color); position:absolute; top:0; left:0; z-index:1; pointer-events:none;][/border]


   [comment]----made with love by uxie and triples ♡ do not remove!! !!----[/comment]
   [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--s-button); font-size:10px; position:absolute; z-index:7; top:5.5px; right:5px; display:flex; flex-flow: row nowrap; align-items:center; line-height:100%; writing-mode:vertical-rl;][border=transparent; height:fit-content; width:fit-content; padding:0; letter-spacing:0.5px; font-weight:bold;][font=Space Grotesk]nine lives[/font][/border][border=transparent; height:fit-content; width:fit-content; padding:0; margin:5px 0 0 0; font-size:8px; transform:rotate(90deg);][fa]fas fa-cat[/fa][/border][/border]
[/border]
     
  • Index
    • bennie - zombie rp, side scroller ic code
  • Index







    • scroll








    scroll





    ❝
    I won't let the world hurt you





















    the medic



    Bennie.







    full name

    Benjamin Alron






    gender

    cis male






    age

    sixteen






    d.o.b.

    12th of July






    ethnicity

    fully caucasian, born and raised in London. entered college as an international






    sexuality

    demisexual....questioning his romanticism

































    3005


    Childish Gambino




















    01.



    visage

















    height/weight

    5 ft 11 in; 130 lbs






    build

    leanly muscular, on the skinnier side of things. worked on the farm most of his life so he can pull his weight






    hair c.

    dusty brown






    eye c.

    dark brown, freckles of green on the edges






    faceclaim

    Noah Jupe























    02.



    psyche










    braniac bennie is nothing short of miraculous. entering 9th grade at the mere age of 12, he is now in the graduating class at fifteen years old. smart doesn't cover it for bennie, who simultaneously hates school but spends so many waking moments devoting himself to it.
    adaptable bennie has the personality of everyone. he mingles with theater kids to the smart kids all the way to the stoners and dropouts. somehow theres no situation he cant mold the perfect persona to.
    soft bennie is the bennie that everyone gets, regardless of who you might be. this bennie, although unknown if he holds weight in his niceties, is sweet and sensitive to all your needs. a naturally affectionate person, he's at the beck and call of your needs as long as it also puts him at benefit (tangibly or in other's opinion).

    hopeless romantic bennie is mildly pathetic. he's like someone starved of love when it comes to any form of attention. if you give him the slightest inclination of being a loving individual he will attach himself to you like a koala to a tree

    manipulative bennie often comes out without his intention. having such a flexible personality means that he often can guess what version of him you would agree with most. it helps him get into many favorable situations, which to an observer uncharmed might appear fake.
    hardheaded bennie is unavoidable considering his intelligence. he always seems to think he knows better, and it's hard to change his opinion once he has it. that being said, he's equally as indecisive as he is stubborn.
    snarky bennie doesn't appear very frequently, but they full rage when it comes to superiority. once wronged, bennie works out of spite. everything he does is to be better than the person that upset him. once he's come to his achievements, he revels in the ability to say that he made it to the top without the person that tried to drag him down.






    likes

    — chickens
    — general farm animals
    — blueberries and small fruits he can put in his pocket
    — music he can badassly dance to (think captain hook by megan thee stallion)
    — he prefers weed over alcohol, but he isn't one to complain when anything is offered to him
    — sexual innuendos
    — seeing someone he didn't like suffer (kind of dramatic, bennie)
    — watching crime shows
    — physical contact
    — noise (he adores parties)
    — little arts and crafts make him so happy






    dislikes

    — hailstorms
    — people eating with their mouth open
    — people who don't wash their hands after using the bathroom (a less common pet peeve considering this should be STANDARD PRACTICE)
    — black coffee
    — yappy demon dogs
    — people who make drugs their only personality trait
    — when things don't go his way
    — laggy computers (they're hindering his essay writing abilities smh)
    — people who treat him like a child (like he is, but he's also been suffering the same things you have been. treat him like ya own kind pls)
    — people in general kind of annoy him but also he's a people person like idk how that worked out
    — high stress situations






    fears

    — being exposed as a fraud
    — realizing he isn't good as he wants to believe
    — dying an angry man
    — suffering to death (just shoot him at that point)
    — hurting someone physically
    — any bird. unless they're dead or caged
    — no insects or spiders. no creepy crawlies.


















    03.



    history









    Bennie was born and raised in a little farm town off London, England during a dead harvest season. Clearly, not the best time to have a child with low food and income resources galore. Despite being the son that his parents so desperately wanted, his unfortunate birth date was seen as a burden rather than a child to be cherished. Not much good can come from an extra hungry mouth to feed. Bennie's older sisters became more of his guardians than their actual parents were, stepping in for school events to personal affairs. Any older sibling would understand the unwanted role of parenthood; Bennie's sisters were no different. Being forced to care for a boy 12 years their junior, they grew to resent his existence.

    Considering his status in his family, it's no surprise that Bennie grew up to be comfortable in silence. However much he wanted to run away from being alone, isolation enveloped him like a second skin. It was around the age five when he had begun weaving his next rope of solitude, tying himself to books and diagrams over human connections. Little farm towns in England aren't the best for little boys to make close friends, anyway.

    One of Bennie's earliest memories was being bored. So bored that he'd use to sleep and goof off in the middle of class just to get him attention. Unfortunately, he didn't attract the attention that would send him home to his library or chicken coup. In fourth grade he was forced to go under cognitive testing to see why he wasn't able to focus in class. After exam over exam with academic specialists, they determined he was working at a 6th grade level. Okay— not the most impressive accomplishment, but one see why it leads to hell of an eyebrow raiser when he graduates at fifteen.

    Throughout his school life, his accelerated academic experience did not come without a fair share of bullying. No one likes the smartie-pants who, in the initial stages of his transition to the older group of students, heavy handed the superiority complex. Once the worst of his snobbiness passed, he began diluting his personality to fit into groups that originally shunned him. It never quite worked, but he was able to redeem himself to some extent. The real reinvention of Bennie Alran started the moment his family left little England to the glorified Northwood College.

    Without the support of his family, Bennie grew up using others to shape who he was. He was a man without direction, using snakes to replace his ropes hoping for a life of normalcy. For the first year, he was able to keep his age almost a complete secret. But like any hush-hush, truth begins to leak from seams. His life at college is mixed with parties and drugs, sneaking out and your average vandalism. Bennie's involvement with the less than honest activities reaped him a reputation. One that finally outshined his age, and the smarty-pants name that came with it.


















    04.



    gallery


































    05.



    connections

















    character name



    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed.

















    character name



    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed.

















    character name



    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed.

















    character name



    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed.





















    06.



    miscellaneous

















    extra

    Bennie is on the edge of becoming an alcoholic. Kind of not the best route to go down, but it happens when you use drugs to fit in at every chance you get.






    general headcanons

    — weapon of choice... bestie idk he wants to make things go kaboom literally if you threw him in a chem lab he will come out with molatov cocktails.
    — probably will throw a chair at a zombie and miss bc dear god why are the desks so heavy sometimes
    — lives with extended family because little baby isn't allowed to live on campus
    — would literally go on a suicide mission if his aunt died
    — double majors in nutritional science and human biology
    — farm boy but also not cut out for the wilderness AT ALL like homie g is queasy around bugs and gets cold easily
    — no ones really sure what he contributes to the team
    — morale??? medic?? sharp shooter?? ball of panic that stress eats???
    — got into northwood college on full ride because how da fawuk do you think a little farm boy is going to afford international tuition on his own
    — always smells like fruit and wood. like a freshly veneered house
    — kind of a lazy fool unless he actually wants to do something then he'll hyperfixate
    — quick to frustrate and annoy tbh
    — helping others out makes him feel better than others which is lowkey the only reason why he helps anyone anymore
    — COULD SOMEONE PUT HIM ON A LEASH BC I SWEAR HE GETS DISTRACTED SO EASILY AND WILL GET LOST
    — had a girlfriend, he kinda ghosted her




















    ♡coded by uxie♡
     
    Last edited:
  • Index
    • saira reynaud - the shimmer - fever dreams rp
  • Index

    • Realistic or Modern - "fever dreams" — applications

    coded by uxie! fonts used: big title subheader/body text to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ ) ----hidden scroll---- ----title text---- ---*...
    www.rpnation.com www.rpnation.com










    • saira reynaud












    ♡design by dreamglow, coded by uxie♡
     
  • Index

    • Fantasy - Golden Hearts Characters

    Hello and thank you all for your interest in this group! I know that sometimes groups that have to approve your character can be intimidating, but that's not my goal here. I'm just looking to give everyone a fair shot : ). Please use the following code to do your CS! If there are any...
    www.rpnation.com www.rpnation.com



    SIDEBAR CODE BEGINS HERE [/comment]

    PRINCE OF BRUWYTH


    • REQUISITE

      FULL NAME:
      Prince Callahan of Bruwyth


      AGE:
      21


      GENDER:
      Male (he/him)


      SEXUALITY:
      Panromantic bisexual


      OCCUPATION:
      Prince


      ABILITY:
      Earth Manipulation

      BIRTHDATE
      August 10th




      if we rule with an iron fist and a grimace on our face, how will they know that we want to be a king?



    the festival of fantasy
    awaits me.
    passion that I never knew glows, and ashes left? maybe time is the
    grows
    as the date draws nearer. I worry I may end up
    alone.
    Still, I want to find you like a
    flower
    wants to bloom.


    Deep End
    Foushee


     

    Realistic or Modern - 𝐁𝐥𝐨𝐨𝐝 𝐅𝐞𝐮𝐝𝐬 ; a wild west rp.

    coded by uxie! fonts used: headers body text, subheaders to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ ) ----left---- ----top---- ----image...
    www.rpnation.com www.rpnation.com










    • valory chase












    ♡design by dreamglow, coded by uxie♡
     
    Reader mode
    You must log in or register to reply here.

    Users who are viewing this thread

    Total: 2 (members: 0, guests: 2)

    Similar threads

    Pain
    Showcase Pain's Character Storage
    Replies
    2
    Views
    102
    Pain
    Pain
    Cotton Tail
    (Feedback Requested) What do you think of a vampire who doesn't drink blood?
    Replies
    3
    Views
    101
    Redworld23
    Redworld23
    Lumpkinz11
    Showcase OC + CC Showcase
    Replies
    18
    Views
    81
    Lumpkinz11
    Lumpkinz11
    0neWithW0rds
    Showcase MHA Character Collection Dump
    Replies
    2
    Views
    79
    0neWithW0rds
    0neWithW0rds
    CHUUYAS_HAT
    Showcase Wᵣᵢₜₜₑₙ ᵢₙ ₜₕₑ ₛₜₐᵣₛ - Cₕₐᵣₐcₜₑᵣ ₛₜₒᵣₐgₑ
    Replies
    20
    Views
    203
    CHUUYAS_HAT
    CHUUYAS_HAT
    Back
    Top