What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource 「 ʟᴏᴠᴇ ᴛʜᴇ ᴠᴏɪᴅ 」— ᴀ ᴡᴏʀᴋꜱʜᴏᴘ

love the void — a workshop

Eternal Prince

love the void
love the void​
Welcome!

hi hi, my name is keir, but eternal or prince are fine too. welcome to my attempt at a coding shop! i've always enjoyed coding, so obviously i have to jump right into it here on rpn too! my motivation when it comes to coding (or anything, really) is pretty sporadic so don't expect this to be consistent or anything though. hopefully you enjoy the stuff i make! ♡

also!! shoutout to all the other amazing coders on here, since i've learned a lot of what i know by taking apart others' codes to figure out how they work! special mention to uxie for answering several questions and explaining a few things to me (ノ ∀ \* )

Rules!

i. everything is completely free to use, but i would appreciate if you'd like/love anything you plan on using!

ii. don't change or remove the credit, visible or invisible. both must remain intact

iii. please don't just copy/paste sections of my code or heavily reference the designs. that being said, you are more than welcome to examine my codes to learn how they work!

iv. if you notice any problems, please let me know and i'll do my best to fix them! no promises though, i'm still pretty new to this (ノ ∀ \* )

v. requests are closed! i'm not confident enough in my abilities to do them right now, so please don't ask

Directory!

001. Carmen Dei — character sheet —「 link
002. Be The Light! — character sheet —「 link













 
Last edited:
001. Carmen Dei — character sheet

Eternal Prince

love the void
「 code in spoiler -
001. Carmen Dei
character sheet
not mobile friendly
hidden scrolls
2 pics
text messages


my first code! i am extremely happy with how it came out, especially being the first thing i've ever coded on here. there are hidden scrolls over both the images, as well as the other three scrolls! read the comments for more tips + info ♡ art used is of venti from genshin impact






Basics​

name
Venti

nickname(s)
Tone-Deaf Bard

title
Windborne Bard

age
unknown

birthday
June 16th

gender
Male

nationality
Mondstadtian

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.
coded by Eternal Prince
Biography
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.

Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Urna condimentum mattis pellentesque id. Suscipit tellus mauris a diam maecenas sed enim ut sem. Adipiscing tristique risus nec feugiat in. In vitae turpis massa sed. Dignissim enim sit amet venenatis urna cursus eget nunc. Accumsan tortor posuere ac ut consequat semper viverra nam. Habitant morbi tristique senectus et netus. Habitant morbi tristique senectus et netus et malesuada.

Eu augue ut lectus arcu bibendum at varius. Egestas integer eget aliquet nibh praesent tristique. Vitae elementum curabitur vitae nunc sed velit dignissim sodales. Feugiat in ante metus dictum at tempor.


Personality
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.




Sure, I'll play you another tune!

What's the catch?

It'll cost you an apple. Ehe~

• • •



CARMEN
DEI —


Misc
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus.







Code:
[comment]☁♚ coded by Eternal Prince (75514) ♚☁
---
--- just some useful info for changing the colors ---
--- yellow is #fff5b1 | dark green is #07463f | light green is #527357 | white is #fff ---
---
---[/comment][bg=0px; width: 950px; margin: auto;][comment]---
---
--- left image + basics ---
--- the scroll section is a set height to match the image, so you're limited on how much you can type here ---
---
---[/comment][border=0px; height: 470px; width: 300px; float: left][border=0px; width: 300px; float: left;][bg=0px; height: 450px; width: 300px; background:url('https://i.imgur.com/RJZBsXU.png'); position: relative; z-index: 1; padding: 0px 20px;][bg=transparent; overflow: hidden; height: 440px; width: 300px; padding: 0px 0px;][bg=transparent; height: 99%; width: 300px; margin: 10px 0px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; position: relative; z-index: 3;][border=transparent; height: 99%; width: 260px; position: absolute; top: 450px; left: 10px; z-index: 2; background: #07463f; opacity: 0.6;][/border][border=0px; height: 450px; width: 260px; margin-top: 450px; position: relative; z-index: 3;][border=0px; padding:15px; width: 230px; margin: auto; background: #fff5b1; color:#07463f; line-height: 14px; font-size: 20px; top: 0px;][border=0px; padding:0px;][center]Basics[/center][/border][/border][comment]---
---
--- you can copy/paste more of these if you want to add a few more categories ---
---
---[/comment]
[border=0px; padding: 0px; background: #fff5b1; color: #07463f; display: inline-block; padding: 0px 7px; line-height: 15px; font-size: 12px;]name[/border] Venti

[border=0px; padding: 0px; background: #fff5b1; color: #07463f; display: inline-block; padding: 0px 7px; line-height: 15px; font-size: 12px;]nickname(s)[/border] Tone-Deaf Bard

[border=0px; padding: 0px; background: #fff5b1; color: #07463f; display: inline-block; padding: 0px 7px; line-height: 15px; font-size: 12px;]title[/border] Windborne Bard

[border=0px; padding: 0px; background: #fff5b1; color: #07463f; display: inline-block; padding: 0px 7px; line-height: 15px; font-size: 12px;]age[/border] unknown

[border=0px; padding: 0px; background: #fff5b1; color: #07463f; display: inline-block; padding: 0px 7px; line-height: 15px; font-size: 12px;]birthday[/border] June 16th

[border=0px; padding: 0px; background: #fff5b1; color: #07463f; display: inline-block; padding: 0px 7px; line-height: 15px; font-size: 12px;]gender[/border] Male

[border=0px; padding: 0px; background: #fff5b1; color: #07463f; display: inline-block; padding: 0px 7px; line-height: 15px; font-size: 12px;]nationality[/border] Mondstadtian

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.[/border][/bg][/bg][/bg][/border][comment]---
---
--- visible credit ---
--- you can change the colors to match your aesthetic, but don't remove ---
---
---[/comment][border=0px; width: 350px; float: left; position: relative; z-index: 4;][bg=0px; height: 20px; width: 320px; background: #fff5b1; padding: 0px 0px;][bg=transparent; overflow: hidden; height: 20px; width: 350px; padding: 0px 0px;][bg=transparent; height: 20px; width: 350px; margin: -7px 0px; overflow: auto; color: #07463f; font-size: 10px; text-align: center;]coded by Eternal Prince[/bg][/bg][/bg][/border][/border][comment]---
---
--- biography box ---
--- hidden scroll. no set height, type as much as you want --
---
---[/comment][border=0px; height: 470px; width: 400px; float: left;][border=0px; width: 400px; float: left; position: relative; z-index: 4;][bg=0px; height: 250px; width: 400px; background: #07463f; padding:15px 20px;][border=0px; padding: 0px; background: #fff5b1; display: inline-block; padding: 7px; line-height: 14px; font-size: 20px;]Biography[/border][bg=transparent; overflow: hidden; height: 240px; width: 400px; padding: 0px 0px;][bg=transparent; height: 240px; width: 400px; margin: 10px 0px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.

Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Urna condimentum mattis pellentesque id. Suscipit tellus mauris a diam maecenas sed enim ut sem. Adipiscing tristique risus nec feugiat in. In vitae turpis massa sed. Dignissim enim sit amet venenatis urna cursus eget nunc. Accumsan tortor posuere ac ut consequat semper viverra nam. Habitant morbi tristique senectus et netus. Habitant morbi tristique senectus et netus et malesuada.

Eu augue ut lectus arcu bibendum at varius. Egestas integer eget aliquet nibh praesent tristique. Vitae elementum curabitur vitae nunc sed velit dignissim sodales. Feugiat in ante metus dictum at tempor.


[/bg][/bg][/bg][/border][comment]---
---
--- personality box ---
--- hidden scroll. no set height, type as much as you want --
---
---[/comment][border=0px; width: 325px; float: left; position: relative; z-index: 4;][bg=0px; height: 160px; width: 325px; background: #527357; padding: 15px 20px;][border=0px; padding: 0px; background: #fff5b1; display: inline-block; padding: 7px; line-height: 14px; font-size: 20px;]Personality[/border][bg=transparent; overflow: hidden; height: 140px; width: 325px; padding: 0px 0px;][bg=transparent; height: 140px; width: 325px; margin: 10px 0px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.


[/bg][/bg][/bg][/border][comment]---
---
--- decorative symbols ---
--- change the circles to any font awesome symbol you'd like ---
---
---[/comment][border=0px; width: 35px; float: left; position: relative; z-index: 4;][bg=0px; height: 190px; width: 35px; background: #fff5b1; padding: 0px 20px;][bg=transparent; overflow: hidden; height: 190px; width: 35px; padding: 0px 0px;][bg=transparent; height: 190px; width: 35px; margin: 0px 0px; overflow: auto; color: #07463f; font-size: 15px; text-align: center; line-height: 55px;][fa]fa-circle[/fa]
[fa]fa-circle[/fa]
[fa]fa-circle[/fa][/bg][/bg][/bg][/border][/border][comment]---
---
--- right image + text messages ---
--- no set height, make the messages as long as you want ---
---
---[/comment][border=0px; height: 470px; width: 170px; float: left][border=0px; width: 170px; float: left; position: relative; z-index: 5;][bg=0px; height: 175px; width: 150px; background:url('https://i.imgur.com/bCsDCTk.jpg'); padding: 0px 20px;][bg=transparent; overflow: hidden; height: 175px; width: 170px; padding: 0px 0px;][bg=transparent; height: 175px; width: 170px; margin: 10px 0px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px;][border=0px; height: 175px; width: 130px; margin-top: 175px;][comment]---
---
--- first message, you ---
--- you can copy/paste this section to add another message from yourself ---
---
---[/comment][border=transparent; height: auto; width: 100%; padding: 0px;][border=transparent; height: fit-content; width: fit-content; padding: 7px; box-sizing: border-box; border-radius: 8px 8px 0px 8px; background: #07463f; color: #fff; margin-left: auto;]Sure, I'll play you another tune![/border][/border][comment]---
---
--- second message, reply ---
--- you can copy/paste this section to add another message from the other person ---
---
---[/comment]
[border=transparent; height: auto; width: 100%; padding: 0px;][border=transparent; height: fit-content; width: fit-content; padding: 5px; box-sizing: border-box; border-radius: 8px 8px 8px 0px; background: #527357; color: #fff; margin-right: auto;]What's the catch?[/border][/border][comment]---
---
--- third message, you again ---
--- these don't have to go you > them > you > them btw ---
--- you can make it look like you've sent multiple in a row, or received multiple in a row if you want ---
---
---[/comment]
[border=transparent; height: auto; width: 100%; padding: 0px;][border=transparent; height: fit-content; width: fit-content; padding: 7px; box-sizing: border-box; border-radius: 8px 8px 0px 8px; background: #07463f; color: #fff; margin-left: auto;]It'll cost you an apple. Ehe~[/border][/border][comment]---
---
--- fourth message, another reply ---
--- you can put text instead, or keep the bullet points to make it look like they're typing ---
---
---[/comment]
[border=transparent; height: auto; width: 100%; padding: 0px;][border=transparent; height: fit-content; width: fit-content; padding: 5px; box-sizing: border-box; border-radius: 8px 8px 8px 0px; background: #527357; color: #fff; margin-right: auto;]• • •[/border][/border]


[/border][/bg][/bg][/bg][/border][comment]---
---
--- title or short quote here ---
--- set height, no scroll ---
--- if your title/quote doesn't fit, you can try changing the "font-size" and/or "line-height" - they're both currently set to 35px --
--- but it's probably best you just keep in short, a couple words, no more than 2 lines ---
--- feel free to change or remove the font awesome symbol ---
---
---[/comment][border=0px; width: 170px; float: left; position: relative; z-index: 5;][bg=0px; height: 115px; width: 170px; background: #527357; padding: 10px;][border=0px; height: 95px; width: 150px; background: #fff5b1; padding: 10px;][bg=transparent; overflow: hidden; height: 95px; width: 170px; padding: 0px 0px;][bg=transparent; height: 95px; width: 170px; margin: 10px 0px; color: #07463f; font-size: 35px; text-align: justify; line-height: 35px; letter-spacing: 0.5px;][B]CARMEN
DEI —[/B] [fa]far fa-star[/fa]

[/bg][/bg][/border][/bg][/border][comment]---
---
--- misc box ---
--- hidden scroll. no set height, type as much as you want --
---
---[/comment][border=0px; width: 165px; float: left; position: relative; z-index: 5;][bg=0px; height: 130px; width: 165px; background: #07463f; padding-top: 15px; padding-bottom: 15px; padding-left: 20px; padding-right: 5px;][border=0px; padding: 0px; background: #fff5b1; display: inline-block; padding: 7px; line-height: 14px; font-size: 20px;]Misc[/border][bg=transparent; overflow: hidden; height: 110px; width: 165px; padding: 0px 0px;][bg=transparent; height: 110px; width: 165px; margin: 10px 0px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus.


[/bg][/bg][/bg][/border][/border]
[/bg]
 
002. Be The Light! — character sheet

Eternal Prince

love the void
「 code in spoiler -
002. Be The Light!
character sheet
not mobile friendly
hidden scrolls
4 tabs
media player


decided to try working with hidden tabs, so here we go! i also figured out how to add a media player, so there's also that. all images have a hidden scroll too. it's a really long code, so be careful while editing it! read the comments for more tips + info ♡ art used is from utapri






Love turns to song, and my singing radiates with joy. Let us amass these irreplaceable moments and write our own future.

— Tokiya Ichinose​
coded by Eternal Prince
  • Tokiya Ichinose

    role role role
    male
    sexuality
    age
    aug. 6th
    In all honesty, I'm never satisfied with myself as a singer. Then again, perhaps that's why I'm so devoted to it.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

    Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.



    BE THE LIGHT!
    Ichinose Tokiya

    It's the start of a brand new day. Let us endeavor to make it productive.
........................



Code:
[comment]☁♚ coded by Eternal Prince (75514) ♚☁
---
--- just some useful info for changing the colors ---
--- dark purple is #32234b | light purple is #9f8bd0 | yellow is #e6b244 | white is #fff ---
---
---[/comment][comment]---
---
--- background ---
---
---[/comment][bg=0px; width: 700px; height: 525px; margin: auto; center; background: #32234b; border-radius: 35px; position: relative; z-index: 1; overflow: hidden;][comment]---
---
--- main image + quote ---
--- there's six lines total ---
---
---[/comment][bg=0px; height: 525px; width: 300px; padding: 0px; border-radius: 35px; background:url('https://i.imgur.com/ljFGO6g.jpg'); padding: 0px; float: left; position: relative; z-index: 2;][bg=transparent; overflow: hidden; height: 505px; width: 300px; padding: 0px;][bg=transparent; height: 100%; width: 300px; margin: 10px 0px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; position: relative; z-index: 4;][border=transparent; height: 62%; width: 260px; position: absolute; top: 500px; left: 10px; z-index: 3; background: #9f8bd0; opacity: 0.7; border-radius: 25px;][/border][border=0px; height: 500px; width: 260px; margin-top: 500px; position: relative; z-index: 3;][size=20]❝[/size] Love turns to song, and my singing radiates with joy. Let us amass these irreplaceable moments and write our own future. 

[right]— Tokiya Ichinose[/right][/border][/bg][/bg][comment]---
---
--- visible credit ---
--- please be sure to change the color to make it visible on your image ---
---
---[/comment][center][size=10px][color=#fff]coded by Eternal Prince[/color][/size][/center][/bg][comment]---
---
--- tabs ---
---
---[/comment][bg=0px: height: 500px; width: 400px; padding: 0px; float: left;][tabs][comment]---
---
--- tab one - home ---
--- name + role ---
---
---[/comment][tab=tab 1][bg=0px; height: 530px; width: 360px; float: left; padding: 0px;][bg=0px; height: 46px; width: 360px; padding: 0px; margin: auto;][border=0px; width: 360px; float: left;][border=0px; padding: 0px; width: 360px; margin: 0px; background: #9f8bd0; color: #fff; line-height: 12px; font-size: 30px;][font=Pacifico]Tokiya Ichinose[/font][/border]
[border=0px; padding: 0px; width: 360px; margin: 0px; background: #9f8bd0; color: #fff; line-height: 3px; font-size: 16px;][right][font=Pacifico]role role role[/font][/right][/border][/border][/bg][border=0px; width: 360px; float: left;][comment]---
---
--- you may want to ctrl+f to find where to enter the gender, sexuality, etc. bc it's in a huge block of code ---
---
---[/comment][bg=0px; height: 25px; width: 360px; padding: 0px; margin: auto;][border=0px; padding: 0px; width: 66px; height: 25px; margin: 0px; background: #9f8bd0; color: #fff; line-height: 25px; font-size: 15px; text-align: center; letter-spacing: 0.5px; float: left;][border=0px; padding: 0px; margin: 0px 5px;]male[/border][/border][border=0px; padding: 0px; width: 8px; height: 25px; float: left;][/border][border=0px; padding: 0px; width: 100px; height: 25px; margin: 0px; background: #9f8bd0; color: #fff; line-height: 25px; font-size: 15px; text-align: center; letter-spacing: 0.5px; float: left;][border=0px; padding: 0px; margin: 0px 5px;]sexuality[/border][/border][border=0px; padding: 0px; width: 8px; height: 25px; float: left;][/border][border=0px; padding: 0px; width: 66px; height: 25px; margin: 0px; background: #9f8bd0; color: #fff; line-height: 25px; font-size: 15px; text-align: center; letter-spacing: 0.5px; float: left;][border=0px; padding: 0px; margin: 0px 5px;]age[/border][/border][border=0px; padding: 0px; width: 8px; height: 25px; float: left;][/border][border=0px; padding: 0px; width: 100px; height: 25px; margin: 0px; background: #9f8bd0; color: #fff; line-height: 25px; font-size: 15px; text-align: center; letter-spacing: 0.5px; float: left;][border=0px; padding: 0px; margin: 0px 5px;]aug. 6th[/border][/border][/bg][comment]---
---
--- quote, three lines. no scroll ---
---
---
---[/comment][bg=0px; height: 45px; width; 360px; padding: 0px; margin: auto;][border=0px; height: 45px; width: 45px; padding: 0px; float: left; color: #e6b244; font-size: 45px; margin-top: -5px;][fa]fa-quote-left[/fa][/border][border=0px; height: 45px; width: 290px; float: left; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px;]In all honesty, I'm never satisfied with myself as a singer. Then again, perhaps that's why I'm so devoted to it.[/border][/bg][comment]---
---
--- hidden scroll. no set height, type as much as you want ---
---
---[/comment]
[bg=0px; height: 155px; width: 360px; background: #9f8bd0; padding: 0px; border-radius: 35px; margin: auto;][bg=transparent; overflow: hidden; height: 145px; width: 360px; padding: 0px; border-radius: 35px; margin: auto;][bg=transparent; height: 155px; width: 360px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; border-radius: 35px; margin: auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.


[/bg][/bg][/bg][comment]---
---
--- actual media player ---
--- change the soundcloud link to your own song ---
---
---[/comment][bg=0px; height: 75px; width: 130px; padding: 0px; margin: auto; float: left;][border=transparent; height: 75px; width: 130px; padding: 0; position: relative; z-index: 2; left: 5px;]
[media=soundcloud]https://soundcloud.com/thai-ha-164090984/be-the-light-ichinose-tokiya[/media][/border][/bg][comment]---
---
--- visible media player info ---
--- you can edit the percentage toward the end to change the progress bar! it's currently 30% ---
---
---[/comment][bg=0px; height: 85px; width: 360px; padding: 0px; margin: auto; float: left;][bg=0px; height: 85px; width: 85px; background: #9f8bd0; position: relative; margin: auto; padding: 0px; pointer-events: none; z-index: 3; float: left; line-height: 85px; font-size: 45px; color: #fff; margin-top: -55px;][center][fa]fa-play[/fa][/center][/bg][bg=0px; height: 85px; width: 275px; padding: 0px; float: left; box-sizing: border-box; border: 2px solid #9f8bd0; margin-top: -55px; margin-left: -5px; color: #e6b244; text-align: center; line-height: 20px;][size=20px][b]BE THE LIGHT![/b][/size]
[size=9px]Ichinose Tokiya[/size]

[border=transparent; height: 3px; width: 255px; padding:0; border-radius:5px; background: #9f8bd0; margin-left: 10px; margin-top: -10px;][border=transparent; height: 5px; padding: 0; border-radius: 5px; background: #fff; width: 30%;][/border][/border][/bg][/bg][comment]---
---
--- quote, two lines. no scroll ---
---
---
---[/comment][bg=0px; height: 30px; width; 360px; padding: 0px; margin: auto;][border=0px; height: 30px; width: 315px; float: left; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin-top: -55px; margin-left: -10px;]It's the start of a brand new day. Let us endeavor to make it productive.[/border][border=0px; height: 30px; width: 30px; padding: 0px; float: left; color: #e6b244; font-size: 30px;  margin-top: -55px; margin-left: 325px;][fa]fa-quote-right[/fa][/border][/bg][/border][/bg][/tab][comment]---
---
--- tab two - appearance + personality ---
--- this entire section scrolls btw ---
---
---[/comment][tab=tab 2][bg=0px; height: 530px; width: 360px; float: left; padding: 0px;][bg=0px; height: fit-content; width: 360px; padding: 0px; margin: auto;][bg=transparent; overflow: hidden; height: 470px; width: 370px; padding: 0px; margin: auto;][bg=transparent; height: 475px; width: 370px; overflow: auto; margin: auto;][bg=0px; height: 46px; width: 360px; padding: 0px; margin: auto;][border=0px; width: 360px; float: left;][border=0px; padding: 0px; width: 360px; background: #9f8bd0; color: #fff; line-height: 12px; font-size: 30px; margin-top: -10px; margin-left: -10px;][font=Pacifico]Appearance[/font][/border]
[border=0px; padding: 0px; width: 360px; margin: 0px; background: #9f8bd0; color: #fff; line-height: 3px; font-size: 16px; margin-left: -10px;][right][font=Pacifico]something here[/font][/right][/border][/border][/bg][comment]---
---
--- you may want to ctrl+f to find where to enter the height, weight, etc. bc it's in a huge block of code ---
---
---[/comment][bg=0px; width: 360px; height: 460px; padding: 0px; margin: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px;][bg=0px; width: 360px; height: 15px; padding: 0px; margin: auto; margin-top: 10px; color: #fff; font-size: 12px; text-align: center; line-height: 15px; letter-spacing: 0.5px;][border=0px; padding: 0px; background: #e6b244; color: #fff; display: inline-block; padding: 0px 5px; line-height: 15px; font-size: 12px;]height[/border] 179cm [border=0px; padding: 0px; background: #e6b244; color: #fff; display: inline-block; padding: 0px 5px; line-height: 15px; font-size: 12px;]weight[/border] 59kg [border=0px; padding: 0px; background: #e6b244; color: #fff; display: inline-block; padding: 0px 5px; line-height: 15px; font-size: 12px;]hair[/border] dark blue [border=0px; padding: 0px; background: #e6b244; color: #fff; display: inline-block; padding: 0px 5px; line-height: 15px; font-size: 12px;]eyes[/border] blue[/bg][comment]---
---
--- and these will change height to fit whatever you type! ---
--- physique ---
---
---[/comment]
[bg=0px; width: 360px; height: fit-content; padding: 0px; margin: auto;][border=0px; width: 360px; height: fit-content; padding: 0px; margin: auto; color: #fff; font-size: 15px; text-align: justify; letter-spacing: 1px; text-transform: uppercase;]physique[/border][border=0px; width: 360px; height: fit-content; padding: 0px; margin-top: 5px; box-sizing: border-box; border-left: 3px solid #9f8bd0;][border=0px; width: fit-content; height: fit-content; padding: 0px; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin-left: 5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing.[/border][/border][comment]---
---
---
--- modifications ---
---
---[/comment][border=0px; width: 360px; height: fit-content; padding: 0px; margin-top: 8px; color: #fff; font-size: 15px; text-align: justify; letter-spacing: 1px; text-transform: uppercase;]modifications[/border][border=0px; width: 360px; height: fit-content; padding: 0px; margin-top: 5px; box-sizing: border-box; border-left: 3px solid #9f8bd0;][border=0px; width: fit-content; height: fit-content; padding: 0px; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin-left: 5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing.[/border][/border][comment]---
---
--- attire ---
---
---[/comment][border=0px; width: 360px; height: fit-content; padding: 0px; margin-top: 8px; color: #fff; font-size: 15px; text-align: justify; letter-spacing: 1px; text-transform: uppercase;]attire[/border][border=0px; width: 360px; height: fit-content; padding: 0px; margin-top: 5px; box-sizing: border-box; border-left: 3px solid #9f8bd0;][border=0px; width: fit-content; height: fit-content; padding: 0px; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin-left: 5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.[/border][/border][/bg][comment]---
---
--- personality section ---
---
---[/comment]
[bg=0px; height: 46px; width: 360px; padding: 0px; margin: auto;][border=0px; width: 360px; float: left;][border=0px; padding: 0px; width: 360px; background: #9f8bd0; color: #fff; line-height: 12px; font-size: 30px; margin-top: -10px; margin-left: -10px;][font=Pacifico][right]Personality[/right][/font][/border]

[border=0px; padding: 0px; width: 360px; margin-top: 8px; background: #9f8bd0; color: #fff; line-height: 3px; font-size: 16px; margin-left: -10px;][font=Pacifico]something here[/font][/border][/border][/bg][comment]---
---
--- virtues + vices ---
--- six lines each! no scroll ---
---
---[/comment]
[bg=0px; width: 165px; height: fit-content; padding: 0px; margin: auto; float: left;][border=0px; width: 165px; height: fit-content; padding: 0px; margin: auto; color: #fff; font-size: 15px; text-align: justify; letter-spacing: 1px; text-transform: uppercase; margin-left: 0px;]virtues[/border][border=0px; width: 165px; height: fit-content; padding: 0px; margin-top: 5px; box-sizing: border-box; border-left: 3px solid #9f8bd0;][border=0px; width: fit-content; height: fit-content; padding: 0px; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin-left: 5px; margin-bottom: 5px;]virtue one here
virtue two goes here
virtue three here
and virtue four here
virtue five here
and last virtue here[/border][/border][/bg][bg=0px; width: 165px; height: fit-content; padding: 0px; margin: auto; float: right;][border=0px; width: 165px; height: fit-content; padding: 0px; margin: auto; color: #fff; font-size: 15px; text-align: justify; letter-spacing: 1px; text-transform: uppercase; margin-left: 0px;]vices[/border][border=0px; width: 165px; height: fit-content; padding: 0px; margin-top: 5px; box-sizing: border-box; border-left: 3px solid #9f8bd0;][border=0px; width: fit-content; height: fit-content; padding: 0px; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin-left: 5px;  margin-bottom: 5px;]vice one here
vice two goes here
vice three here
and vice four here
vice five here
and last vice here[/border][/border][/bg][comment]---
---
--- quote, three lines. no scroll ---
---
---[/comment][bg=0px; height: 45px; width; 360px; padding: 0px; margin: auto;][border=0px; height: 45px; width: 300px; float: left; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin-left: -10px; margin-top: -5px;]I don't consider myself to be particularly talented. That's why I have to work so much harder than everyone else.[/border][border=0px; height: 45px; width: 45px; padding: 0px; float: left; color: #e6b244; font-size: 45px; margin-top: 5px;][fa]fa-quote-right[/fa][/border][/bg][comment]---
---
--- hidden scroll. no set height, type as much as you want ---
---
---[/comment]
[bg=0px; height: 170px; width: 360px; background: #9f8bd0; padding: 0px; border-radius: 35px; margin: auto; margin-top: 115px;][bg=transparent; overflow: hidden; height: 160px; width: 360px; padding: 0px; border-radius: 35px; margin: auto;][bg=transparent; height: 170px; width: 360px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; border-radius: 35px; margin: auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.


[/bg][/bg][/bg]
[/bg][/bg][/bg][/bg][/bg][/tab][comment]---
---
--- tab three - history ---
---
---[/comment][tab=tab 3][bg=0px; height: 530px; width: 360px; float: left; padding: 0px;][bg=0px; height: 46px; width: 360px; padding: 0px; margin: auto;][border=0px; width: 360px; float: left;][border=0px; padding: 0px; width: 360px; margin: 0px; background: #9f8bd0; color: #fff; line-height: 12px; font-size: 30px;][font=Pacifico]History[/font][/border]
[border=0px; padding: 0px; width: 360px; margin: 0px; background: #9f8bd0; color: #fff; line-height: 3px; font-size: 16px;][right][font=Pacifico]something here[/font][/right][/border][/border][/bg][comment]---
---
--- quote, three lines. no scroll ---
---
---[/comment][bg=0px; height: 45px; width; 360px; padding: 0px; margin: auto; margin-left: 10px;][border=0px; height: 45px; width: 45px; padding: 0px; float: left; color: #e6b244; font-size: 45px; margin-top: -5px;][fa]fa-quote-left[/fa][/border][border=0px; height: 45px; width: 305px; float: left; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; padding: 0px; margin-top: 5px; margin-left: 5px; margin-right: -5px;]A professional must always strike a balance on stage between when to keep cool and when to display passion.[/border][/bg][comment]---
---
--- hidden scroll. no set height, type as much as you want ---
---
---[/comment]
[bg=0px; height: 305px; width: 360px; background: #9f8bd0; padding: 0px; border-radius: 35px; margin: auto; margin-top: 5px; margin-left: 5px;][bg=transparent; overflow: hidden; height: 295px; width: 360px; padding: 0px; border-radius: 35px; margin: auto;][bg=transparent; height: 305px; width: 360px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; border-radius: 35px; margin: auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.

Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Morbi tempus iaculis urna id volutpat lacus laoreet non. Facilisis gravida neque convallis a cras semper. Non arcu risus quis varius quam quisque id. Interdum consectetur libero id faucibus. Mauris ultrices eros in cursus turpis massa. Condimentum id venenatis a condimentum vitae sapien pellentesque. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Aliquet risus feugiat in ante.

Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Diam phasellus vestibulum lorem sed risus ultricies tristique. Nam libero justo laoreet sit amet. Nunc sed id semper risus in hendrerit gravida. A diam maecenas sed enim ut sem. Ut faucibus pulvinar elementum integer enim.


[/bg][/bg][/bg][comment]---
---
--- quote, two lines. no scroll ---
---
---
---[/comment][bg=0px; height: 30px; width; 360px; padding: 0px; margin: auto;][border=0px; height: 30px; width: 315px; float: left; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; padding: 0px; margin-left: 10px; margin-top: 5px;]As a form of self-expression, illustration is something I intend to continue pursuing.[/border][border=0px; height: 30px; width: 30px; padding: 0px; float: left; color: #e6b244; font-size: 30px; margin-left: 5px; margin-top: -2px;][fa]fa-quote-right[/fa][/border][/bg]

[/bg][/tab][comment]---
---
--- tab four - relationships ---
---
---[/comment][tab=tab 4][bg=0px; height: 530px; width: 360px; float: left; padding: 0px;][bg=0px; height: 46px; width: 360px; padding: 0px; margin: auto;][border=0px; width: 360px; float: left;][border=0px; padding: 0px; width: 360px; margin: 0px; background: #9f8bd0; color: #fff; line-height: 12px; font-size: 30px;][font=Pacifico]Relationships[/font][/border]
[border=0px; padding: 0px; width: 360px; margin: 0px; background: #9f8bd0; color: #fff; line-height: 3px; font-size: 16px;][right][font=Pacifico]something here[/font][/right][/border][/border][/bg][comment]---
---
--- this section scrolls so you can add as many as you want! ---
--- there are already 10 in place though, so hopefully you won't need to ---
--- regardless, i've put comments telling you where to start and stop copying if you do need to add more ♡ ---
---
---[/comment]
[bg=0px; height: 410px; width: 360px; padding: 0px; margin: auto;][bg=transparent; overflow: hidden; height: 400px; width: 360px; padding: 0px; margin: auto;][bg=transparent; height: 410px; width: 360px; overflow: auto; margin: auto;][comment]---
---
--- first relationship start ---
--- image ---
---
---[/comment][bg=0px; height: 120px; width: 360px; padding: 0px; margin: auto;  margin-top: -10px;][bg=0px; height: 115px; width: 115px; padding: 0px; margin: auto; float: left; border-radius: 10px; background:url('https://i.imgur.com/9EPe34L.jpg'); position: relative; z-index: 2;][comment]---
---
--- image scroll + name ---
---
---[/comment][bg=transparent; overflow: hidden; height: 115px; width: 115px; padding: 0px;][bg=transparent; height: 125px; width: 135px; margin: auto; padding: 0px; overflow: auto; position: relative;][border=transparent; height: 20px; width: 95px; position: absolute; top: 115px; left: 0px; z-index: 3; background: #9f8bd0; opacity: 0.7; border-radius: 10px;][/border][border=0px; height: 45px; width: 115px; margin-top: 120px; position: relative; z-index: 3; color: #fff; font-size: 14px; text-align: center; letter-spacing: 0.5px; line-height: 15px;padding:0]Otoya
Ittoki[/border][/bg][/bg][/bg][comment]---
---
--- text, hidden scroll. no set height, type as much as you want ---
---
---[/comment][bg=0px; height: 120px; width: 250px; padding: 0px; margin: auto; float: left; margin-top: -5px; margin-right: -5px;][bg=transparent; overflow: hidden; height: 115px; width: 250px; padding: 0px; margin: auto; float: left;][bg=transparent; height: 120px; width: 242px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin: auto; float: left;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.

[/bg][/bg][/bg][/bg][bg=0px; height: 15px; width: 360px; padding: 0px; margin: auto;][/bg][comment]---
---
--- second relationship start ---
--- image ---
--- start copying here if you wanna add another! ---
---
---[/comment][bg=0px; height: 120px; width: 360px; padding: 0px; margin: auto;][bg=0px; height: 115px; width: 115px; padding: 0px; margin: auto; float: left; border-radius: 10px; background:url('https://i.imgur.com/a60wAzp.jpg'); position: relative; z-index: 2;][comment]---
---
--- image scroll + name ---
---
---[/comment][bg=transparent; overflow: hidden; height: 115px; width: 115px; padding: 0px;][bg=transparent; height: 125px; width: 135px; margin: auto; padding: 0px; overflow: auto; position: relative;][border=transparent; height: 20px; width: 95px; position: absolute; top: 115px; left: 0px; z-index: 3; background: #9f8bd0; opacity: 0.7; border-radius: 10px;][/border][border=0px; height: 45px; width: 115px; margin-top: 120px; position: relative; z-index: 3; color: #fff; font-size: 14px; text-align: center; letter-spacing: 0.5px; line-height: 15px;padding:0]Masato
Hirijikawa[/border][/bg][/bg][/bg][comment]---
---
--- text, hidden scroll. no set height, type as much as you want ---
---
---[/comment][bg=0px; height: 120px; width: 250px; padding: 0px; margin: auto; float: left; margin-top: -5px; margin-right: -5px;][bg=transparent; overflow: hidden; height: 115px; width: 250px; padding: 0px; margin: auto; float: left;][bg=transparent; height: 120px; width: 242px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin: auto; float: left;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.

[/bg][/bg][/bg][/bg][bg=0px; height: 15px; width: 360px; padding: 0px; margin: auto;][/bg][comment]---
---
--- and stop copying here! ---
--- third relationship start ---
--- image ---
---
---[/comment][bg=0px; height: 120px; width: 360px; padding: 0px; margin: auto;][bg=0px; height: 115px; width: 115px; padding: 0px; margin: auto; float: left; border-radius: 10px; background:url('https://i.imgur.com/hyfK6vK.jpg'); position: relative; z-index: 2;][comment]---
---
--- image scroll + name ---
---
---[/comment][bg=transparent; overflow: hidden; height: 115px; width: 115px; padding: 0px;][bg=transparent; height: 125px; width: 135px; margin: auto; padding: 0px; overflow: auto; position: relative;][border=transparent; height: 20px; width: 95px; position: absolute; top: 115px; left: 0px; z-index: 3; background: #9f8bd0; opacity: 0.7; border-radius: 10px;][/border][border=0px; height: 45px; width: 115px; margin-top: 120px; position: relative; z-index: 3; color: #fff; font-size: 14px; text-align: center; letter-spacing: 0.5px; line-height: 15px;padding:0]Natsuki
Shinomiya[/border][/bg][/bg][/bg][comment]---
---
--- text, hidden scroll. no set height, type as much as you want ---
---
---[/comment][bg=0px; height: 120px; width: 250px; padding: 0px; margin: auto; float: left; margin-top: -5px; margin-right: -5px;][bg=transparent; overflow: hidden; height: 115px; width: 250px; padding: 0px; margin: auto; float: left;][bg=transparent; height: 120px; width: 242px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin: auto; float: left;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.

[/bg][/bg][/bg][/bg][bg=0px; height: 15px; width: 360px; padding: 0px; margin: auto;][/bg][comment]---
---
--- fourth relationship start ---
--- image ---
---
---[/comment][bg=0px; height: 120px; width: 360px; padding: 0px; margin: auto;][bg=0px; height: 115px; width: 115px; padding: 0px; margin: auto; float: left; border-radius: 10px; background:url('https://i.imgur.com/H6gGCEp.jpg'); position: relative; z-index: 2;][comment]---
---
--- image scroll + name ---
---
---[/comment][bg=transparent; overflow: hidden; height: 115px; width: 115px; padding: 0px;][bg=transparent; height: 125px; width: 135px; margin: auto; padding: 0px; overflow: auto; position: relative;][border=transparent; height: 20px; width: 95px; position: absolute; top: 115px; left: 0px; z-index: 3; background: #9f8bd0; opacity: 0.7; border-radius: 10px;][/border][border=0px; height: 45px; width: 115px; margin-top: 120px; position: relative; z-index: 3; color: #fff; font-size: 14px; text-align: center; letter-spacing: 0.5px; line-height: 15px;padding:0]Ren
Jinguji[/border][/bg][/bg][/bg][comment]---
---
--- text, hidden scroll. no set height, type as much as you want ---
---
---[/comment][bg=0px; height: 120px; width: 250px; padding: 0px; margin: auto; float: left; margin-top: -5px; margin-right: -5px;][bg=transparent; overflow: hidden; height: 115px; width: 250px; padding: 0px; margin: auto; float: left;][bg=transparent; height: 120px; width: 242px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin: auto; float: left;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.

[/bg][/bg][/bg][/bg][bg=0px; height: 15px; width: 360px; padding: 0px; margin: auto;][/bg][comment]---
---
--- fifth relationship start ---
--- image ---
---
---[/comment][bg=0px; height: 120px; width: 360px; padding: 0px; margin: auto;][bg=0px; height: 115px; width: 115px; padding: 0px; margin: auto; float: left; border-radius: 10px; background:url('https://i.imgur.com/wEVnOWX.jpg'); position: relative; z-index: 2;][comment]---
---
--- image scroll + name ---
---
---[/comment][bg=transparent; overflow: hidden; height: 115px; width: 115px; padding: 0px;][bg=transparent; height: 125px; width: 135px; margin: auto; padding: 0px; overflow: auto; position: relative;][border=transparent; height: 20px; width: 95px; position: absolute; top: 115px; left: 0px; z-index: 3; background: #9f8bd0; opacity: 0.7; border-radius: 10px;][/border][border=0px; height: 45px; width: 115px; margin-top: 120px; position: relative; z-index: 3; color: #fff; font-size: 14px; text-align: center; letter-spacing: 0.5px; line-height: 15px;padding:0]Syo
Kurusu[/border][/bg][/bg][/bg][comment]---
---
--- text, hidden scroll. no set height, type as much as you want ---
---
---[/comment][bg=0px; height: 120px; width: 250px; padding: 0px; margin: auto; float: left; margin-top: -5px; margin-right: -5px;][bg=transparent; overflow: hidden; height: 115px; width: 250px; padding: 0px; margin: auto; float: left;][bg=transparent; height: 120px; width: 242px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin: auto; float: left;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.

[/bg][/bg][/bg][/bg][bg=0px; height: 15px; width: 360px; padding: 0px; margin: auto;][/bg][comment]---
---
--- sixth relationship start ---
--- image ---
---
---[/comment][bg=0px; height: 120px; width: 360px; padding: 0px; margin: auto;][bg=0px; height: 115px; width: 115px; padding: 0px; margin: auto; float: left; border-radius: 10px; background:url('https://i.imgur.com/NqELsxK.jpg'); position: relative; z-index: 2;][comment]---
---
--- image scroll + name ---
---
---[/comment][bg=transparent; overflow: hidden; height: 115px; width: 115px; padding: 0px;][bg=transparent; height: 125px; width: 135px; margin: auto; padding: 0px; overflow: auto; position: relative;][border=transparent; height: 20px; width: 95px; position: absolute; top: 115px; left: 0px; z-index: 3; background: #9f8bd0; opacity: 0.7; border-radius: 10px;][/border][border=0px; height: 45px; width: 115px; margin-top: 120px; position: relative; z-index: 3; color: #fff; font-size: 14px; text-align: center; letter-spacing: 0.5px; line-height: 15px;padding:0]Cecil
Aijima[/border][/bg][/bg][/bg][comment]---
---
--- text, hidden scroll. no set height, type as much as you want ---
---
---[/comment][bg=0px; height: 120px; width: 250px; padding: 0px; margin: auto; float: left; margin-top: -5px; margin-right: -5px;][bg=transparent; overflow: hidden; height: 115px; width: 250px; padding: 0px; margin: auto; float: left;][bg=transparent; height: 120px; width: 242px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin: auto; float: left;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.

[/bg][/bg][/bg][/bg][bg=0px; height: 15px; width: 360px; padding: 0px; margin: auto;][/bg][comment]---
---
--- seventh relationship start ---
--- image ---
---
---[/comment][bg=0px; height: 120px; width: 360px; padding: 0px; margin: auto;][bg=0px; height: 115px; width: 115px; padding: 0px; margin: auto; float: left; border-radius: 10px; background:url('https://i.imgur.com/MTPXIgt.jpg'); position: relative; z-index: 2;][comment]---
---
--- image scroll + name ---
---
---[/comment][bg=transparent; overflow: hidden; height: 115px; width: 115px; padding: 0px;][bg=transparent; height: 125px; width: 135px; margin: auto; padding: 0px; overflow: auto; position: relative;][border=transparent; height: 20px; width: 95px; position: absolute; top: 115px; left: 0px; z-index: 3; background: #9f8bd0; opacity: 0.7; border-radius: 10px;][/border][border=0px; height: 45px; width: 115px; margin-top: 120px; position: relative; z-index: 3; color: #fff; font-size: 14px; text-align: center; letter-spacing: 0.5px; line-height: 15px;padding:0]Reiji
Kotobuki[/border][/bg][/bg][/bg][comment]---
---
--- text, hidden scroll. no set height, type as much as you want ---
---
---[/comment][bg=0px; height: 120px; width: 250px; padding: 0px; margin: auto; float: left; margin-top: -5px; margin-right: -5px;][bg=transparent; overflow: hidden; height: 115px; width: 250px; padding: 0px; margin: auto; float: left;][bg=transparent; height: 120px; width: 242px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin: auto; float: left;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.

[/bg][/bg][/bg][/bg][bg=0px; height: 15px; width: 360px; padding: 0px; margin: auto;][/bg][comment]---
---
--- eighth relationship start ---
--- image ---
---
---[/comment][bg=0px; height: 120px; width: 360px; padding: 0px; margin: auto;][bg=0px; height: 115px; width: 115px; padding: 0px; margin: auto; float: left; border-radius: 10px; background:url('https://i.imgur.com/LtUW2KU.jpg'); position: relative; z-index: 2;][comment]---
---
--- image scroll + name ---
---
---[/comment][bg=transparent; overflow: hidden; height: 115px; width: 115px; padding: 0px;][bg=transparent; height: 125px; width: 135px; margin: auto; padding: 0px; overflow: auto; position: relative;][border=transparent; height: 20px; width: 95px; position: absolute; top: 115px; left: 0px; z-index: 3; background: #9f8bd0; opacity: 0.7; border-radius: 10px;][/border][border=0px; height: 45px; width: 115px; margin-top: 120px; position: relative; z-index: 3; color: #fff; font-size: 14px; text-align: center; letter-spacing: 0.5px; line-height: 15px;padding:0]Ranmaru
Kurosaki[/border][/bg][/bg][/bg][comment]---
---
--- text, hidden scroll. no set height, type as much as you want ---
---
---[/comment][bg=0px; height: 120px; width: 250px; padding: 0px; margin: auto; float: left; margin-top: -5px; margin-right: -5px;][bg=transparent; overflow: hidden; height: 115px; width: 250px; padding: 0px; margin: auto; float: left;][bg=transparent; height: 120px; width: 242px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin: auto; float: left;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.

[/bg][/bg][/bg][/bg][bg=0px; height: 15px; width: 360px; padding: 0px; margin: auto;][/bg][comment]---
---
--- ninth relationship start ---
--- image ---
---
---[/comment][bg=0px; height: 120px; width: 360px; padding: 0px; margin: auto;][bg=0px; height: 115px; width: 115px; padding: 0px; margin: auto; float: left; border-radius: 10px; background:url('https://i.imgur.com/yUNcGPm.jpg'); position: relative; z-index: 2;][comment]---
---
--- image scroll + name ---
---
---[/comment][bg=transparent; overflow: hidden; height: 115px; width: 115px; padding: 0px;][bg=transparent; height: 125px; width: 135px; margin: auto; padding: 0px; overflow: auto; position: relative;][border=transparent; height: 20px; width: 95px; position: absolute; top: 115px; left: 0px; z-index: 3; background: #9f8bd0; opacity: 0.7; border-radius: 10px;][/border][border=0px; height: 45px; width: 115px; margin-top: 120px; position: relative; z-index: 3; color: #fff; font-size: 14px; text-align: center; letter-spacing: 0.5px; line-height: 15px;padding:0]Ai
Mikaze[/border][/bg][/bg][/bg][comment]---
---
--- text, hidden scroll. no set height, type as much as you want ---
---
---[/comment][bg=0px; height: 120px; width: 250px; padding: 0px; margin: auto; float: left; margin-top: -5px; margin-right: -5px;][bg=transparent; overflow: hidden; height: 115px; width: 250px; padding: 0px; margin: auto; float: left;][bg=transparent; height: 120px; width: 242px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin: auto; float: left;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.

[/bg][/bg][/bg][/bg][bg=0px; height: 15px; width: 360px; padding: 0px; margin: auto;][/bg][comment]---
---
--- tenth relationship start ---
--- image ---
---
---[/comment][bg=0px; height: 120px; width: 360px; padding: 0px; margin: auto;][bg=0px; height: 115px; width: 115px; padding: 0px; margin: auto; float: left; border-radius: 10px; background:url('https://i.imgur.com/dbo1mL7.jpg'); position: relative; z-index: 2;][comment]---
---
--- image scroll + name ---
---
---[/comment][bg=transparent; overflow: hidden; height: 115px; width: 115px; padding: 0px;][bg=transparent; height: 125px; width: 135px; margin: auto; padding: 0px; overflow: auto; position: relative;][border=transparent; height: 20px; width: 95px; position: absolute; top: 115px; left: 0px; z-index: 3; background: #9f8bd0; opacity: 0.7; border-radius: 10px;][/border][border=0px; height: 45px; width: 115px; margin-top: 120px; position: relative; z-index: 3; color: #fff; font-size: 14px; text-align: center; letter-spacing: 0.5px; line-height: 15px;padding:0]Camus[/border][/bg][/bg][/bg][comment]---
---
--- text, hidden scroll. no set height, type as much as you want ---
---
---[/comment][bg=0px; height: 120px; width: 250px; padding: 0px; margin: auto; float: left; margin-top: -5px; margin-right: -5px;][bg=transparent; overflow: hidden; height: 115px; width: 250px; padding: 0px; margin: auto; float: left;][bg=transparent; height: 120px; width: 242px; overflow: auto; color: #fff; font-size: 12px; text-align: justify; line-height: 15px; letter-spacing: 0.5px; margin: auto; float: left;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Neque convallis a cras semper auctor neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere.

Dignissim sodales ut eu sem integer vitae. Est placerat in egestas erat imperdiet sed euismod nisi. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Ornare aenean euismod elementum nisi quis eleifend. Suscipit adipiscing bibendum est ultricies integer quis.

[/bg][/bg][/bg][/bg][bg=0px; height: 15px; width: 360px; padding: 0px; margin: auto;][/bg][comment]---
---
--- this is where you would paste a new relationship section if you need to add one ---
---
---[/comment]
[/bg][/bg][/bg]
[/bg][/tab][/tabs][comment]---
---
--- tab labels ---
---
---[/comment][bg=0px; height: 50px; background: #32234b; position: relative; margin: auto; top: -600px; width: 400px; padding: 0px; pointer-events: none; font-size: 30px;][center][color=#e6b244][fa]fa-home[/fa][/color][color=transparent]........[/color][color=#e6b244][fa]fa-heart[/fa][/color][color=transparent]........[/color][color=#e6b244][fa]fa-book[/fa][/color][color=transparent]........[/color][color=#e6b244][fa]fa-users[/fa][/color][/center][/bg][/bg][/bg]
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top