Copy
<!-----------------------------------------------------------------------------------------
code request by skysong
c o l o r p a l e t t e
accent 1 #fcff9d
accent 2 #c3edfe
(ctrl + f to change)
r e s o u r c e s
icons https://fontawesome.com/
editing (TH) https://th.circlejourney.net/#
editing (AF) https://af.circlejourney.net/#
img hosting https://freeimage.host/
code link https://stor8.vercel.app/357
things to edit (that aren't text)- if you're not customizing more- should be marked in brackets with instructions on what to change
-----------------------------------------------------------------------[ ART FIGHT NOTES ]--
Art fight will automatically delete code that doesn't display properly onsite- this includes comments so I HIGHLY RECOMMEND using a live editor and/or saving the file with comments!
------------------------------------------------------------------------------------------->
<div class="m-3 d-flex align-items-center justify-content-center overflow-hidden position-relative" style="border-radius:15px; background:url(https://iili.io/CCouMzb.png); background-size:cover; background-position:center;background-repeat:no-repeat">
<!--[ background:url(EDITHERE) | replace with your new image url if you want to switch the background ]-->
<!--CONTENT CONTAINERS-->
<div class="col-xl-8 col-lg-10 col-sm-6 my-lg-5 m-3 p-0 position-relative" style="z-index:1;">
<div class="row m-0 overflow-hidden" style="border-radius:15px;">
<!-------------------------------------------------------------------------- [ SIDEBAR ] -->
<div class="col-lg-4 p-0 mr-lg-2 mb-lg-0 mb-2">
<div class="row m-0 h-100">
<!--COLOR BLOCK-->
<div class="col-lg-1" style="background:#c3edfe; min-height:30px;"></div>
<!--CONTENT COL START-->
<div class="col-lg card rounded-0 border-0 p-3">
<!--PFP-->
<div class="mx-lg-3" style="background:url(https://placehold.co/500?text=placeholder); background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:100%; border:5px solid #fcff9d">
<!--[ background:url(EDITHERE) | replace with your image ]-->
<!--SPACER-->
<img class="w-100" src="https://iili.io/CCnszBt.png">
<!--[ don't edit this! it's so the icon can stay a perfect circle ]-->
</div>
<!--PRIDE FLAGS AREA-->
<div class="my-4 d-flex flex-wrap justify-content-center">
<!--FLAGS-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ src="EDITHERE" | replace with your flag ]-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ copy/paste as much as you need above this line ]-->
</div>
<!--BASICS ROW - AGE-->
<div class="row m-0 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-cake-candles fa-fw"></i>
<!--[ fa-cake-candles | replace cake-candles with a different icon if you want to switch it out ]-->
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">AGE</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">01</div>
</div> <!--end basics row-->
<!--BASICS ROW - PRNS-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-comments fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">PRNS.</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">They/Them</div>
</div> <!--end basics row-->
<!--BASICS ROW - GENDER-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2 h-100" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-transgender fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">GENDER</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Non-binary</div>
</div> <!--end basics row-->
<!--BASICS ROW - ORIENT-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-heartbeat fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">ORIENT.</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Sexuality</div>
</div> <!--end basics row-->
<!--BASICS ROW - SPECIES-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-crow fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">SPECIES</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Human</div>
</div> <!--end basics row-->
<!--BASICS ROW - JOB-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-suitcase fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">JOB</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Performer</div>
</div> <!--end basics row-->
</div> <!--content col end-->
</div></div> <!--end sidebar-->
<!--------------------------------------------------------------- [ MAIN CONTENT START ] -->
<div class="col-lg card rounded-0 border-0 p-0">
<!--CHARACTER NAME-->
<div class="px-3 py-1" style="font-size:30pt"><span style="color:#c3edfe">N</span>ame goes here</div>
<!--TAB BUTTONS-->
<ul class="nav nav-fill">
<!--TRAITS BUTTON-->
<li class="nav-item" style="background:#fcff9d">
<a class="nav-link btn active" href="#user_traits" style="color:#000; font-weight:bold" data-toggle="tab">
<!--ICON-->
<i class="far fa-user fa-fw mr-1"></i>
TRAITS
</a></li>
<!--ABOUT BUTTON-->
<li class="nav-item" style="background:#c3edfe">
<a class="nav-link btn" href="#user_story" style="color:#000; font-weight:bold" data-toggle="tab">
<!--ICON-->
<i class="far fa-bookmark fa-fw mr-1"></i>
STORY
</a></li>
<!--DESIGN BUTTON-->
<li class="nav-item" style="background:#fcff9d">
<a class="nav-link btn" href="#user_design" style="color:#000; font-weight:bold" data-toggle="tab">
<!--ICON-->
<i class="far fa-palette fa-fw mr-1"></i>
DESIGN
</a></li>
<!--EXTRA BUTTON-->
<li class="nav-item" style="background:#c3edfe">
<a class="nav-link btn" href="#user_extra" style="color:#000; font-weight:bold" data-toggle="tab">
<!--ICON-->
<i class="far fa-sparkle fa-fw mr-1"></i>
EXTRA
</a></li>
</ul> <!--tab buttons end-->
<!--TAB CONTENT CONTAINER-->
<div class="tab-content h-100">
<!----------------------------------------------------------------------- [ TRAITS TAB ] -->
<div id="user_traits" class="tab-pane fade active show h-100">
<div class="d-flex flex-column h-100">
<!--HEADING AREA-->
<div class="d-flex align-items-center px-3 pt-2">
<!--TITLE-->
<div style="font-size:20pt"><span style="color:#c3edfe">P</span>ERSONALITY</div>
<!--LINE-->
<div class="flex-fill ml-3" style="height:1px; background:#fcff9d"></div>
</div>
<!--QUOTE-->
<div class="card bg-light border-0 mb-3 mx-3 mt-2 px-4 py-2" style="color:#c3edfe"><p class="m-0">
"<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i> Duis sollicitudin elit sed tellus blandit viverra sed eget odio."
</p></div>
<!--TAB CONTENT CONTAINER-->
<div class="px-3 pb-3 flex-fill overflow-auto" style="height:0; min-height:300px;">
<!--PARAGRAPHS-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--[ copy/paste as much as you need above this line ]-->
</div> <!--end content-->
</div></div> <!--end traits tab-->
<!------------------------------------------------------------------------ [ STORY TAB ] -->
<div id="user_story" class="tab-pane fade h-100">
<div class="d-flex flex-column h-100">
<!--HEADING AREA-->
<div class="d-flex align-items-center px-3 pt-2">
<!--TITLE-->
<div style="font-size:20pt"><span style="color:#c3edfe">B</span>ACKSTORY</div>
<!--LINE-->
<div class="flex-fill ml-3" style="height:1px; background:#fcff9d"></div>
</div>
<!--TAB CONTENT CONTAINER-->
<div class="px-3 pt-2 pb-3 flex-fill overflow-auto" style="height:0; min-height:300px;">
<!--HEADER-->
<div class="ml-3" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 1</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--HEADER-->
<div class="ml-3 mt-3" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 2</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--HEADER-->
<div class="ml-3 mt-3" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 3</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--[ copy/paste as much as you need above this line ]-->
</div> <!--end content-->
</div></div> <!--end story tab-->
<!----------------------------------------------------------------------- [ DESIGN TAB ] -->
<div id="user_design" class="tab-pane fade h-100">
<div class="d-flex flex-column h-100">
<!--HEADING AREA-->
<div class="d-flex align-items-center px-3 pt-2">
<!--TITLE-->
<div style="font-size:20pt"><span style="color:#c3edfe">D</span>ESIGN NOTES</div>
<!--LINE-->
<div class="flex-fill ml-3" style="height:1px; background:#fcff9d"></div>
</div>
<!--TAB CONTENT CONTAINER-->
<div class="px-3 pt-2 flex-fill overflow-auto" style="height:0; min-height:180px;">
<!--LIST START-->
<ul class="ml-n2">
<!--LIST ITEM-->
<li>Lipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<!--LIST ITEM-->
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<!--LIST ITEM-->
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
<!--LIST ITEM-->
<li>Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<!--LIST ITEM-->
<li>Lipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<!--LIST ITEM-->
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<!--LIST ITEM-->
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
<!--LIST ITEM-->
<li>Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<!--[ copy/paste as much as you need above this line ]-->
</ul> <!--end list-->
</div> <!--end content-->
<!--FOOTER-->
<div class="p-3 w-100">
<!--MEASUREMENTS-->
<div class="row m-0">
<!--HEIGHT-->
<div class="col-sm p-0">
<div class="row m-0 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#c3edfe; color:#000">
<i class="fal fa-ruler-vertical fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">HEIGHT</div>
<!--CONTENT-->
<div class="col mr-3 p-0 text-right">0'00"</div>
</div></div> <!--end height-->
<!--WEIGHT-->
<div class="col-sm p-0 ml-sm-1 mt-sm-0 mt-1">
<div class="row m-0 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2 " style="font-weight:bold; font-size:15pt; background:#c3edfe; color:#000;">
<i class="fal fa-weight-scale fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">WEIGHT</div>
<!--CONTENT-->
<div class="col mr-3 p-0 text-right">000</div>
</div></div> <!--end weight-->
</div> <!--end measurements-->
<!--GALLERY-->
<div class="row m-0 mt-2" style="height:150px;">
<!--IMAGE 1-->
<div class="col p-0" style="border-radius:5px; background:url(https://placehold.co/500?text=placeholder); background-size:cover; background-position:center;background-repeat:no-repeat;"></div>
<!--[ background:url(EDITHERE) | replace with your image ]-->
<!--IMAGE 2-->
<div class="col p-0 ml-2" style="border-radius:5px; background:url(https://placehold.co/500?text=placeholder); background-size:cover; background-position:center;background-repeat:no-repeat"></div>
<!--IMAGE 3-->
<div class="col p-0 ml-2" style="border-radius:5px; background:url(https://placehold.co/500?text=placeholder); background-size:cover; background-position:center;background-repeat:no-repeat"></div>
<!--IMAGE 4-->
<div class="col p-0 ml-2" style="border-radius:5px; background:url(https://placehold.co/500?text=placeholder); background-size:cover; background-position:center;background-repeat:no-repeat"></div>
</div>
</div> <!--end footer-->
</div></div> <!--end design tab-->
<!------------------------------------------------------------------------ [ EXTRA TAB ] -->
<div id="user_extra" class="tab-pane fade h-100">
<div class="d-flex flex-column h-100">
<!--HEADING AREA-->
<div class="d-flex align-items-center px-3 pt-2">
<!--TITLE-->
<div style="font-size:20pt"><span style="color:#c3edfe">E</span>XTRA INFO</div>
<!--LINE-->
<div class="flex-fill ml-3" style="height:1px; background:#fcff9d"></div>
</div>
<!--TAB CONTENT CONTAINER-->
<div class="px-3 pt-2 flex-fill overflow-auto" style="height:0; min-height:300px;">
<!--LIST START-->
<ul class="ml-n2">
<!--LIST ITEM-->
<li>Lipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<!--LIST ITEM-->
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<!--LIST ITEM-->
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
<!--LIST ITEM-->
<li>Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<!--LIST ITEM-->
<li>Lipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<!--LIST ITEM-->
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<!--LIST ITEM-->
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
<!--LIST ITEM-->
<li>Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<!--[ copy/paste as much as you need above this line ]-->
</ul> <!--end list-->
</div> <!--end content-->
<!--LINKS FOOTER-->
<div class="p-3">
<!--ROW 1-->
<div class="row m-0">
<!--LINK 1-->
<div class="col p-0">
<a href="https://google.com" class="d-block text-reset" style="text-decoration:none">
<!--[ href="EDITHERE" | replace with your link ]-->
<div class="row m-0 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#c3edfe; color:#000">
<i class="fal fa-music fa-fw"></i>
<!--[ fa-music | replace music with a different icon if you want to switch it out ]-->
</div>
<!--LABEL-->
<div class="col mr-3 p-0 text-right">Playlist</div>
</div></a></div> <!--end link 1-->
<!--LINK 2-->
<div class="col p-0 ml-1">
<a href="https://google.com" class="d-block text-reset" style="text-decoration:none">
<!--[ href="EDITHERE" | replace with your link ]-->
<div class="row m-0 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2 " style="font-weight:bold; font-size:15pt; background:#c3edfe; color:#000;">
<i class="fa-brands fa-pinterest fa-fw"></i>
<!--[ fa-pinterest | replace pinterest with a different icon if you want to switch it out ]-->
<!--[ if you do switch it, also take out "fa-brands" and replace with "fal" ! ]-->
</div>
<!--LABEL-->
<div class="col mr-3 p-0 text-right">Pinterest</div>
</div></a></div> <!--end link 2-->
</div>
<!--ROW 2-->
<div class="row m-0 mt-2">
<!--LINK 3-->
<div class="col p-0">
<a href="https://google.com" class="d-block text-reset" style="text-decoration:none">
<!--[ href="EDITHERE" | replace with your link ]-->
<div class="row m-0 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-link fa-fw"></i>
<!--[ fa-link | replace link with a different icon if you want to switch it out ]-->
</div>
<!--LABEL-->
<div class="col mr-3 p-0 text-right">Link</div>
</div></a></div> <!--end link 1-->
<!--LINK 4-->
<div class="col p-0 ml-1">
<a href="https://google.com" class="d-block text-reset" style="text-decoration:none">
<!--[ href="EDITHERE" | replace with your link ]-->
<div class="row m-0 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-link fa-fw"></i>
<!--[ fa-link | replace link with a different icon if you want to switch it out ]-->
</div>
<!--LABEL-->
<div class="col mr-3 p-0 text-right">Link</div>
</div></a></div> <!--end link 1-->
</div>
</div>
</div></div> <!--end extra tab-->
<!----------------------------------------------------------------------------------------->
</div> <!--end tab content-->
</div> <!--end content column-->
</div> <!--end content-->
<!--CREDITS-->
<!--[ feel free to move around or recolor, just make sure it's visible! ]-->
<div class="text-right">
<a href="https://artfight.net/~skysong_" class="text-primary" title="code by sky">
<i class="fad fa-ticket-airline"></i>
</a>
</div>
<!----------------------------------------------------------------------------------------->
</div></div> <!--end code-->
Copy
<!-----------------------------------------------------------------------------------------
code request by skysong
c o l o r p a l e t t e
accent 1 #fcff9d
accent 2 #c3edfe
(ctrl + f to change)
r e s o u r c e s
icons https://fontawesome.com/
editing (TH) https://th.circlejourney.net/#
editing (AF) https://af.circlejourney.net/#
img hosting https://freeimage.host/
code link https://stor8.vercel.app/357
comment remove https://techyall.com/tools/html-comment-remover
things to edit (that aren't text)- if you're not customizing more- should be marked in brackets with instructions on what to change
-----------------------------------------------------------------------[ ART FIGHT NOTES ]--
- Art fight will automatically delete code that doesn't display properly onsite- this includes comments so I HIGHLY RECOMMEND using a live editor and/or saving the file with comments!
------------------------------------------------------------------------------------------->
<div class="m-3 d-flex align-items-center justify-content-center overflow-hidden position-relative" style="border-radius:15px; background:url(https://iili.io/CCouMzb.png); background-size:cover; background-position:center;background-repeat:no-repeat">
<!--[ background:url(EDITHERE) | replace with your new image url if you want to switch the background ]-->
<!--CONTENT CONTAINER-->
<div class="col-xl-8 col-lg-10 col-sm-6 my-lg-5 m-3 p-0 position-relative" style="z-index:1;">
<!--TAB BUTTONS-->
<ul class="nav nav-fill overflow-hidden mb-2">
<!--OC 1 BUTTON-->
<li class="nav-item" style="background:#c3edfe; border-radius:15px">
<a class="nav-link btn active d-block" href="#user_one" style="color:#000; font-weight:bold;" data-toggle="tab">
<!--ICON-->
<i class="far fa-sparkle fa-fw mr-1"></i>
<!--[ fa-sparkle | replace sparkle with your new icon ]-->
NAME 1
</a></li>
<!--OC 2 BUTTON-->
<li class="nav-item ml-1" style="background:#fcff9d; border-radius:15px">
<a class="nav-link btn" href="#user_two" style="color:#000; font-weight:bold" data-toggle="tab">
<!--ICON-->
<i class="far fa-sparkle fa-fw mr-1"></i>
NAME 2
</a></li>
<!--OC 3 BUTTON-->
<li class="nav-item ml-1" style="background:#c3edfe; border-radius:15px">
<a class="nav-link btn" href="#user_three" style="color:#000; font-weight:bold" data-toggle="tab">
<!--ICON-->
<i class="far fa-sparkle fa-fw mr-1"></i>
NAME 3
</a></li>
<!--OC 4 BUTTON-->
<li class="nav-item ml-lg-1 mt-lg-0 mt-1" style="background:#fcff9d; border-radius:15px">
<a class="nav-link btn" href="#user_four" style="color:#000; font-weight:bold" data-toggle="tab">
<!--ICON-->
<i class="far fa-sparkle fa-fw mr-1"></i>
NAME 4
</a></li>
<!--OC 5 BUTTON-->
<li class="nav-item ml-1 mt-lg-0 mt-1" style="background:#c3edfe; border-radius:15px">
<a class="nav-link btn" href="#user_five" style="color:#000; font-weight:bold" data-toggle="tab">
<!--ICON-->
<i class="far fa-sparkle fa-fw mr-1"></i>
NAME 5
</a></li>
<!--OC 6 BUTTON-->
<li class="nav-item ml-1 mt-lg-0 mt-1" style="background:#fcff9d; border-radius:15px">
<a class="nav-link btn" href="#user_six" style="color:#000; font-weight:bold" data-toggle="tab">
<!--ICON-->
<i class="far fa-sparkle fa-fw mr-1"></i>
NAME 6
</a></li>
</ul> <!--tab buttons end-->
<!--MORE CONTENT CONTAINERS-->
<div class="tab-content">
<!-------------------------------------------------------------------------------------------
OC 1 TAB START
-------------------------------------------------------------------------------------------->
<div id="user_one" class="tab-pane fade active show" >
<div class="row m-0 overflow-hidden" style="border-radius:15px;">
<!----------------------------------------------------------------------- [ OC 1 BASICS ] -->
<div class="col-lg-4 p-0 mr-lg-2 mb-lg-0 mb-2" >
<div class="row m-0 h-100 w-100">
<!--COLOR BLOCK-->
<div class="col-lg-1" style="background:#c3edfe; min-height:30px;"></div>
<!--SIDEBAR CONTENT START-->
<div class="col-lg card rounded-0 border-0 p-3" >
<!--PFP-->
<div class="mx-lg-3" style="background:url(https://placehold.co/500?text=placeholder1); background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:100%;">
<!--[ background:url(EDITHERE) | replace with your image ]-->
<!--SPACER-->
<img class="w-100" src="https://iili.io/CCnszBt.png">
<!--[ don't edit this! it's so the icon can stay a perfect circle ]-->
</div>
<!--PRIDE FLAGS AREA-->
<div class="my-4 d-flex flex-wrap justify-content-center">
<!--FLAGS-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ src="EDITHERE" | replace with your flag ]-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ copy/paste as much as you need above this line ]-->
</div>
<!--BASICS ROW - AGE-->
<div class="row m-0 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px" >
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-cake-candles fa-fw"></i>
<!--[ fa-cake-candles | replace cake-candles with a different icon if you want to switch it out ]-->
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">AGE</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">01</div>
</div> <!--end basics row-->
<!--BASICS ROW - PRNS-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-comments fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">PRNS.</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">They/Them</div>
</div> <!--end basics row-->
<!--BASICS ROW - GENDER-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2 h-100" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-transgender fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">GENDER</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Non-binary</div>
</div> <!--end basics row-->
<!--BASICS ROW - ORIENT-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-heartbeat fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">ORIENT.</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Sexuality</div>
</div> <!--end basics row-->
<!--BASICS ROW - SPECIES-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-crow fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">SPECIES</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Human</div>
</div> <!--end basics row-->
<!--BASICS ROW - JOB-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-suitcase fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">JOB</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Performer</div>
</div> <!--end basics row-->
</div> <!--end sidebar content-->
</div></div> <!--end sidebar-->
<!------------------------------------------------------------ [ OC 1 CONTENT CONTAINER ] -->
<div class="col-lg card rounded-0 border-0 p-0">
<!--CHARACTER NAME-->
<div class="px-3 py-1" style="font-size:30pt"><span style="color:#c3edfe">N</span>ame 1</div>
<!--AES DIVIDER-->
<div class="row mx-0" style="height:0.5em">
<!--COLOR 1-->
<div class="col" style="background:#c3edfe;"></div>
<!--COLOR 2-->
<div class="col" style="background:#fcff9d;"></div>
<!--COLOR 3-->
<div class="col" style="background:#c3edfe;"></div>
<!--COLOR 4-->
<div class="col" style="background:#fcff9d;"></div>
</div>
<div class="d-flex flex-column h-100">
<div class="px-3 pt-2 pb-3 flex-fill overflow-auto" style="height:0; min-height:500px;">
<!------------------------------------------------------------------ [ OC 1 INFORMATION ] -->
<!--QUOTE-->
<div class="card bg-light border-0 mb-3 mt-2 px-4 py-2" style="color:#c3edfe"><p class="m-0">
"<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i> Duis sollicitudin elit sed tellus blandit viverra sed eget odio."
</p></div>
<!--PARAGRAPHS-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--BACKSTORY SECTION-->
<div class="ml-3 mt-2" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 1</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--BACKSTORY SECTION-->
<div class="ml-3 mt-2" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 2</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--[ copy/paste as much as you need ]-->
<!----------------------------------------------------------------------------------------->
</div></div></div><!--end oc 1 content-->
</div></div> <!--end oc 1-->
<!-------------------------------------------------------------------------------------------
OC 2 TAB START
-------------------------------------------------------------------------------------------->
<div id="user_two" class="tab-pane fade">
<div class="row m-0 overflow-hidden" style="border-radius:15px;">
<!----------------------------------------------------------------------- [ OC 2 BASICS ] -->
<div class="col-lg-4 p-0 mr-lg-2 mb-lg-0 mb-2">
<div class="row m-0 h-100 w-100" >
<!--COLOR BLOCK-->
<div class="col-lg-1" style="background:#c3edfe; min-height:30px;"></div>
<!--SIDEBAR CONTENT START-->
<div class="col-lg card rounded-0 border-0 p-3">
<!--PFP-->
<div class="mx-lg-3" style="background:url(https://placehold.co/500?text=placeholder2); background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:100%;">
<!--[ background:url(EDITHERE) | replace with your image ]-->
<!--SPACER-->
<img class="w-100" src="https://iili.io/CCnszBt.png">
<!--[ don't edit this! it's so the icon can stay a perfect circle ]-->
</div>
<!--PRIDE FLAGS AREA-->
<div class="my-4 d-flex flex-wrap justify-content-center">
<!--FLAGS-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ src="EDITHERE" | replace with your flag ]-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ copy/paste as much as you need above this line ]-->
</div>
<!--BASICS ROW - AGE-->
<div class="row m-0 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-cake-candles fa-fw"></i>
<!--[ fa-cake-candles | replace cake-candles with a different icon if you want to switch it out ]-->
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">AGE</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">01</div>
</div> <!--end basics row-->
<!--BASICS ROW - PRNS-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-comments fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">PRNS.</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">They/Them</div>
</div> <!--end basics row-->
<!--BASICS ROW - GENDER-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2 h-100" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-transgender fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">GENDER</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Non-binary</div>
</div> <!--end basics row-->
<!--BASICS ROW - ORIENT-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-heartbeat fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">ORIENT.</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Sexuality</div>
</div> <!--end basics row-->
<!--BASICS ROW - SPECIES-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-crow fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">SPECIES</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Human</div>
</div> <!--end basics row-->
<!--BASICS ROW - JOB-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-suitcase fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">JOB</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Performer</div>
</div> <!--end basics row-->
</div> <!--end sidebar content-->
</div></div> <!--end sidebar-->
<!------------------------------------------------------------ [ OC 2 CONTENT CONTAINER ] -->
<div class="col-lg card rounded-0 border-0 p-0">
<!--CHARACTER NAME-->
<div class="px-3 py-1" style="font-size:30pt"><span style="color:#c3edfe">N</span>ame 2</div>
<!--AES DIVIDER-->
<div class="row mx-0" style="height:0.5em">
<!--COLOR 1-->
<div class="col" style="background:#c3edfe;"></div>
<!--COLOR 2-->
<div class="col" style="background:#fcff9d;"></div>
<!--COLOR 3-->
<div class="col" style="background:#c3edfe;"></div>
<!--COLOR 4-->
<div class="col" style="background:#fcff9d;"></div>
</div>
<div class="d-flex flex-column h-100">
<div class="px-3 pt-2 pb-3 flex-fill overflow-auto" style="height:0; min-height:500px;">
<!------------------------------------------------------------------ [ OC 2 INFORMATION ] -->
<!--QUOTE-->
<div class="card bg-light border-0 mb-3 mt-2 px-4 py-2" style="color:#c3edfe"><p class="m-0">
"<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i> Duis sollicitudin elit sed tellus blandit viverra sed eget odio."
</p></div>
<!--PARAGRAPHS-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--BACKSTORY SECTION-->
<div class="ml-3 mt-2" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 1</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--BACKSTORY SECTION-->
<div class="ml-3 mt-2" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 2</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--[ copy/paste as much as you need ]-->
<!----------------------------------------------------------------------------------------->
</div></div></div><!--end oc 2 content-->
</div></div> <!--end oc 2-->
<!-------------------------------------------------------------------------------------------
OC 3 TAB START
-------------------------------------------------------------------------------------------->
<div id="user_three" class="tab-pane fade">
<div class="row m-0 overflow-hidden" style="border-radius:15px;">
<!----------------------------------------------------------------------- [ OC 3 BASICS ] -->
<div class="col-lg-4 p-0 mr-lg-2 mb-lg-0 mb-2">
<div class="row m-0 h-100 w-100">
<!--COLOR BLOCK-->
<div class="col-lg-1" style="background:#c3edfe; min-height:30px;"></div>
<!--SIDEBAR CONTENT START-->
<div class="col-lg card rounded-0 border-0 p-3">
<!--PFP-->
<div class="mx-lg-3" style="background:url(https://placehold.co/500?text=placeholder3); background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:100%;">
<!--[ background:url(EDITHERE) | replace with your image ]-->
<!--SPACER-->
<img class="w-100" src="https://iili.io/CCnszBt.png">
<!--[ don't edit this! it's so the icon can stay a perfect circle ]-->
</div>
<!--PRIDE FLAGS AREA-->
<div class="my-4 d-flex flex-wrap justify-content-center">
<!--FLAGS-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ src="EDITHERE" | replace with your flag ]-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ copy/paste as much as you need above this line ]-->
</div>
<!--BASICS ROW - AGE-->
<div class="row m-0 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-cake-candles fa-fw"></i>
<!--[ fa-cake-candles | replace cake-candles with a different icon if you want to switch it out ]-->
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">AGE</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">01</div>
</div> <!--end basics row-->
<!--BASICS ROW - PRNS-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-comments fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">PRNS.</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">They/Them</div>
</div> <!--end basics row-->
<!--BASICS ROW - GENDER-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2 h-100" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-transgender fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">GENDER</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Non-binary</div>
</div> <!--end basics row-->
<!--BASICS ROW - ORIENT-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-heartbeat fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">ORIENT.</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Sexuality</div>
</div> <!--end basics row-->
<!--BASICS ROW - SPECIES-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-crow fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">SPECIES</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Human</div>
</div> <!--end basics row-->
<!--BASICS ROW - JOB-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-suitcase fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">JOB</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Performer</div>
</div> <!--end basics row-->
</div> <!--end sidebar content-->
</div></div> <!--end sidebar-->
<!------------------------------------------------------------ [ OC 3 CONTENT CONTAINER ] -->
<div class="col-lg card rounded-0 border-0 p-0">
<!--CHARACTER NAME-->
<div class="px-3 py-1" style="font-size:30pt"><span style="color:#c3edfe">N</span>ame 3</div>
<!--AES DIVIDER-->
<div class="row mx-0" style="height:0.5em">
<!--COLOR 1-->
<div class="col" style="background:#c3edfe;"></div>
<!--COLOR 2-->
<div class="col" style="background:#fcff9d;"></div>
<!--COLOR 3-->
<div class="col" style="background:#c3edfe;"></div>
<!--COLOR 4-->
<div class="col" style="background:#fcff9d;"></div>
</div>
<div class="d-flex flex-column h-100">
<div class="px-3 pt-2 pb-3 flex-fill overflow-auto" style="height:0; min-height:500px;">
<!------------------------------------------------------------------ [ OC 3 INFORMATION ] -->
<!--QUOTE-->
<div class="card bg-light border-0 mb-3 mt-2 px-4 py-2" style="color:#c3edfe"><p class="m-0">
"<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i> Duis sollicitudin elit sed tellus blandit viverra sed eget odio."
</p></div>
<!--PARAGRAPHS-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--BACKSTORY SECTION-->
<div class="ml-3 mt-2" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 1</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--BACKSTORY SECTION-->
<div class="ml-3 mt-2" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 2</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--[ copy/paste as much as you need ]-->
<!----------------------------------------------------------------------------------------->
</div></div></div><!--end oc 3 content-->
</div></div> <!--end oc 3-->
<!-------------------------------------------------------------------------------------------
OC 4 TAB START
-------------------------------------------------------------------------------------------->
<div id="user_four" class="tab-pane fade">
<div class="row m-0 overflow-hidden" style="border-radius:15px;">
<!----------------------------------------------------------------------- [ OC 4 BASICS ] -->
<div class="col-lg-4 p-0 mr-lg-2 mb-lg-0 mb-2">
<div class="row m-0 h-100 w-100">
<!--COLOR BLOCK-->
<div class="col-lg-1" style="background:#c3edfe; min-height:30px;"></div>
<!--SIDEBAR CONTENT START-->
<div class="col-lg card rounded-0 border-0 p-3">
<!--PFP-->
<div class="mx-lg-3" style="background:url(https://placehold.co/500?text=placeholder4); background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:100%;">
<!--[ background:url(EDITHERE) | replace with your image ]-->
<!--SPACER-->
<img class="w-100" src="https://iili.io/CCnszBt.png">
<!--[ don't edit this! it's so the icon can stay a perfect circle ]-->
</div>
<!--PRIDE FLAGS AREA-->
<div class="my-4 d-flex flex-wrap justify-content-center">
<!--FLAGS-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ src="EDITHERE" | replace with your flag ]-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ copy/paste as much as you need above this line ]-->
</div>
<!--BASICS ROW - AGE-->
<div class="row m-0 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-cake-candles fa-fw"></i>
<!--[ fa-cake-candles | replace cake-candles with a different icon if you want to switch it out ]-->
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">AGE</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">01</div>
</div> <!--end basics row-->
<!--BASICS ROW - PRNS-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-comments fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">PRNS.</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">They/Them</div>
</div> <!--end basics row-->
<!--BASICS ROW - GENDER-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2 h-100" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-transgender fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">GENDER</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Non-binary</div>
</div> <!--end basics row-->
<!--BASICS ROW - ORIENT-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-heartbeat fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">ORIENT.</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Sexuality</div>
</div> <!--end basics row-->
<!--BASICS ROW - SPECIES-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-crow fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">SPECIES</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Human</div>
</div> <!--end basics row-->
<!--BASICS ROW - JOB-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-suitcase fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">JOB</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Performer</div>
</div> <!--end basics row-->
</div> <!--end sidebar content-->
</div></div> <!--end sidebar-->
<!------------------------------------------------------------ [ OC 4 CONTENT CONTAINER ] -->
<div class="col-lg card rounded-0 border-0 p-0">
<!--CHARACTER NAME-->
<div class="px-3 py-1" style="font-size:30pt"><span style="color:#c3edfe">N</span>ame 4</div>
<!--AES DIVIDER-->
<div class="row mx-0" style="height:0.5em">
<!--COLOR 1-->
<div class="col" style="background:#c3edfe;"></div>
<!--COLOR 2-->
<div class="col" style="background:#fcff9d;"></div>
<!--COLOR 3-->
<div class="col" style="background:#c3edfe;"></div>
<!--COLOR 4-->
<div class="col" style="background:#fcff9d;"></div>
</div>
<div class="d-flex flex-column h-100">
<div class="px-3 pt-2 pb-3 flex-fill overflow-auto" style="height:0; min-height:500px;">
<!------------------------------------------------------------------ [ OC 4 INFORMATION ] -->
<!--QUOTE-->
<div class="card bg-light border-0 mb-3 mt-2 px-4 py-2" style="color:#c3edfe"><p class="m-0">
"<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i> Duis sollicitudin elit sed tellus blandit viverra sed eget odio."
</p></div>
<!--PARAGRAPHS-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--BACKSTORY SECTION-->
<div class="ml-3 mt-2" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 1</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--BACKSTORY SECTION-->
<div class="ml-3 mt-2" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 2</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--[ copy/paste as much as you need ]-->
<!----------------------------------------------------------------------------------------->
</div></div></div><!--end oc 4 content-->
</div></div> <!--end oc 4-->
<!-------------------------------------------------------------------------------------------
OC 5 TAB START
-------------------------------------------------------------------------------------------->
<div id="user_five" class="tab-pane fade">
<div class="row m-0 overflow-hidden" style="border-radius:15px;">
<!----------------------------------------------------------------------- [ OC 5 BASICS ] -->
<div class="col-lg-4 p-0 mr-lg-2 mb-lg-0 mb-2">
<div class="row m-0 h-100 w-100">
<!--COLOR BLOCK-->
<div class="col-lg-1" style="background:#c3edfe; min-height:30px;"></div>
<!--SIDEBAR CONTENT START-->
<div class="col-lg card rounded-0 border-0 p-3">
<!--PFP-->
<div class="mx-lg-3" style="background:url(https://placehold.co/500?text=placeholder5); background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:100%;">
<!--[ background:url(EDITHERE) | replace with your image ]-->
<!--SPACER-->
<img class="w-100" src="https://iili.io/CCnszBt.png">
<!--[ don't edit this! it's so the icon can stay a perfect circle ]-->
</div>
<!--PRIDE FLAGS AREA-->
<div class="my-4 d-flex flex-wrap justify-content-center">
<!--FLAGS-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ src="EDITHERE" | replace with your flag ]-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ copy/paste as much as you need above this line ]-->
</div>
<!--BASICS ROW - AGE-->
<div class="row m-0 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-cake-candles fa-fw"></i>
<!--[ fa-cake-candles | replace cake-candles with a different icon if you want to switch it out ]-->
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">AGE</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">01</div>
</div> <!--end basics row-->
<!--BASICS ROW - PRNS-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-comments fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">PRNS.</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">They/Them</div>
</div> <!--end basics row-->
<!--BASICS ROW - GENDER-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2 h-100" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-transgender fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">GENDER</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Non-binary</div>
</div> <!--end basics row-->
<!--BASICS ROW - ORIENT-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-heartbeat fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">ORIENT.</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Sexuality</div>
</div> <!--end basics row-->
<!--BASICS ROW - SPECIES-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-crow fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">SPECIES</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Human</div>
</div> <!--end basics row-->
<!--BASICS ROW - JOB-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-suitcase fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">JOB</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Performer</div>
</div> <!--end basics row-->
</div> <!--end sidebar content-->
</div></div> <!--end sidebar-->
<!------------------------------------------------------------ [ OC 5 CONTENT CONTAINER ] -->
<div class="col-lg card rounded-0 border-0 p-0">
<!--CHARACTER NAME-->
<div class="px-3 py-1" style="font-size:30pt"><span style="color:#c3edfe">N</span>ame 5</div>
<!--AES DIVIDER-->
<div class="row mx-0" style="height:0.5em">
<!--COLOR 1-->
<div class="col" style="background:#c3edfe;"></div>
<!--COLOR 2-->
<div class="col" style="background:#fcff9d;"></div>
<!--COLOR 3-->
<div class="col" style="background:#c3edfe;"></div>
<!--COLOR 4-->
<div class="col" style="background:#fcff9d;"></div>
</div>
<div class="d-flex flex-column h-100">
<div class="px-3 pt-2 pb-3 flex-fill overflow-auto" style="height:0; min-height:500px;">
<!------------------------------------------------------------------ [ OC 5 INFORMATION ] -->
<!--QUOTE-->
<div class="card bg-light border-0 mb-3 mt-2 px-4 py-2" style="color:#c3edfe"><p class="m-0">
"<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i> Duis sollicitudin elit sed tellus blandit viverra sed eget odio."
</p></div>
<!--PARAGRAPHS-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--BACKSTORY SECTION-->
<div class="ml-3 mt-2" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 1</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--BACKSTORY SECTION-->
<div class="ml-3 mt-2" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 2</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--[ copy/paste as much as you need ]-->
<!----------------------------------------------------------------------------------------->
</div></div></div><!--end oc 5 content-->
</div></div> <!--end oc 5-->
<!-------------------------------------------------------------------------------------------
OC 6 TAB START
-------------------------------------------------------------------------------------------->
<div id="user_six" class="tab-pane fade">
<div class="row m-0 overflow-hidden" style="border-radius:15px;">
<!----------------------------------------------------------------------- [ OC 6 BASICS ] -->
<div class="col-lg-4 p-0 mr-lg-2 mb-lg-0 mb-2">
<div class="row m-0 h-100 w-100">
<!--COLOR BLOCK-->
<div class="col-lg-1" style="background:#c3edfe; min-height:30px;"></div>
<!--SIDEBAR CONTENT START-->
<div class="col-lg card rounded-0 border-0 p-3">
<!--PFP-->
<div class="mx-lg-3" style="background:url(https://placehold.co/500?text=placeholder6); background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:100%;">
<!--[ background:url(EDITHERE) | replace with your image ]-->
<!--SPACER-->
<img class="w-100" src="https://iili.io/CCnszBt.png">
<!--[ don't edit this! it's so the icon can stay a perfect circle ]-->
</div>
<!--PRIDE FLAGS AREA-->
<div class="my-4 d-flex flex-wrap justify-content-center">
<!--FLAGS-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ src="EDITHERE" | replace with your flag ]-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ copy/paste as much as you need above this line ]-->
</div>
<!--BASICS ROW - AGE-->
<div class="row m-0 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-cake-candles fa-fw"></i>
<!--[ fa-cake-candles | replace cake-candles with a different icon if you want to switch it out ]-->
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">AGE</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">01</div>
</div> <!--end basics row-->
<!--BASICS ROW - PRNS-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-comments fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">PRNS.</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">They/Them</div>
</div> <!--end basics row-->
<!--BASICS ROW - GENDER-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2 h-100" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-transgender fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">GENDER</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Non-binary</div>
</div> <!--end basics row-->
<!--BASICS ROW - ORIENT-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-heartbeat fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">ORIENT.</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Sexuality</div>
</div> <!--end basics row-->
<!--BASICS ROW - SPECIES-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-crow fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">SPECIES</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Human</div>
</div> <!--end basics row-->
<!--BASICS ROW - JOB-->
<div class="row m-0 mt-2 bg-light overflow-hidden d-flex align-items-center" style="border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt; background:#fcff9d; color:#000">
<i class="fal fa-suitcase fa-fw"></i>
</div>
<!--LABEL-->
<div class="col-auto ml-3 p-0" style="font-weight:bold;">JOB</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Performer</div>
</div> <!--end basics row-->
</div> <!--end sidebar content-->
</div></div> <!--end sidebar-->
<!------------------------------------------------------------ [ OC 6 CONTENT CONTAINER ] -->
<div class="col-lg card rounded-0 border-0 p-0">
<!--CHARACTER NAME-->
<div class="px-3 py-1" style="font-size:30pt"><span style="color:#c3edfe">N</span>ame 6</div>
<!--AES DIVIDER-->
<div class="row mx-0" style="height:0.5em">
<!--COLOR 1-->
<div class="col" style="background:#c3edfe;"></div>
<!--COLOR 2-->
<div class="col" style="background:#fcff9d;"></div>
<!--COLOR 3-->
<div class="col" style="background:#c3edfe;"></div>
<!--COLOR 4-->
<div class="col" style="background:#fcff9d;"></div>
</div>
<div class="d-flex flex-column h-100">
<div class="px-3 pt-2 pb-3 flex-fill overflow-auto" style="height:0; min-height:500px;">
<!------------------------------------------------------------------ [ OC 6 INFORMATION ] -->
<!--QUOTE-->
<div class="card bg-light border-0 mb-3 mt-2 px-4 py-2" style="color:#c3edfe"><p class="m-0">
"<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i> Duis sollicitudin elit sed tellus blandit viverra sed eget odio."
</p></div>
<!--PARAGRAPHS-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--BACKSTORY SECTION-->
<div class="ml-3 mt-2" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 1</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--BACKSTORY SECTION-->
<div class="ml-3 mt-2" style="font-size:17pt; font-style:italic; color:#c3edfe">Header 2</div>
<!--CONTENT-->
<div class="card bg-light border-0 p-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<!--[ copy/paste as much as you need ]-->
<!----------------------------------------------------------------------------------------->
</div></div></div><!--end oc 6 content-->
</div></div> <!--end oc 6-->
<!----------------------------------------------------------------------------------------->
</div> <!--end code content-->
<!--CREDITS-->
<!--[ feel free to move around or recolor, just make sure it's visible! ]-->
<div class="text-right">
<a href="https://artfight.net/~skysong_" class="text-primary" title="code by sky">
<i class="fad fa-ticket-airline"></i>
</a>
</div>
<!----------------------------------------------------------------------------------------->
</div></div> <!--end code-->
Copy
<!-----------------------------------------------------------------------------------------
code request by skysong
c o l o r p a l e t t e
accent 1 #fcff9d
accent 2 #c3edfe
(ctrl + f to change)
r e s o u r c e s
icons https://fontawesome.com/
editing (TH) https://th.circlejourney.net/#
editing (AF) https://af.circlejourney.net/#
img hosting https://freeimage.host/
code link https://stor8.vercel.app/357
comment remove https://techyall.com/tools/html-comment-remover
things to edit (that aren't text)- if you're not customizing more- should be marked in brackets with instructions on what to change
-----------------------------------------------------------------------[ ART FIGHT NOTES ]--
- Art fight will automatically delete code that doesn't display properly onsite- this includes comments so I HIGHLY RECOMMEND using a live editor and/or saving the file with comments!
------------------------------------------------------------------------------------------->
<div class="row mx-0">
<!--------------------------------------------------------------------- [ IMAGES COL 1 ] -->
<div class="col-lg d-flex flex-column p-0">
<!--IMAGE 1-->
<div class="flex-fill" style="background:url(https://placehold.co/600x400?text=placeholder); background-size:cover; background-repeat:no-repeat; background-position:center; border-radius:10px; border:5px solid #522c19; min-height:120px;"></div>
<!--[ background:url(EDITHERE) | replace with your new image url if you want to switch the background ]-->
<!--IMAGE 2-->
<div class="flex-fill my-lg-3 my-1" style="background:url(https://placehold.co/600x400?text=placeholder); background-size:cover; background-repeat:no-repeat; background-position:center; border-radius:10px; border:5px solid #522c19; min-height:120px;"></div>
<!--[ background:url(EDITHERE) | replace with your new image url if you want to switch the background ]-->
<!--IMAGE 3-->
<div class="flex-fill" style="background:url(https://placehold.co/600x400?text=placeholder); background-size:cover; background-repeat:no-repeat; background-position:center; border-radius:10px; border:5px solid #522c19; min-height:120px;"></div>
<!--[ background:url(EDITHERE) | replace with your new image url if you want to switch the background ]-->
</div> <!--end images col 1-->
<!----------------------------------------------------------------- [ MAIN CONTENT START ] -->
<div class="col-lg-5 mx-lg-3 my-lg-0 my-2 p-lg-1 p-0" style="background:#522c19; border-radius:10px; border:5px solid #522c19; padding:5px">
<!--HEADER IMAGE-->
<div style="height:100px; background:url(https://placehold.co/600x400?text=placeholder); background-size:cover; background-repeat:no-repeat; background-position:center; border-radius:10px;"></div>
<!--[ background:url(EDITHERE) | replace with your new image url if you want to switch the background ]-->
<!--ROW CONTAINER-->
<div class="row mx-auto my-3 p-3" style="background:#7e5a44; color:#522c19; font-family:serif; border-radius:15px">
<!--------------------------------------------------------------- [ LEFT CONTENT - BASICS ] -->
<div class="col-lg-4 col-sm-5 p-0">
<!--PROFILE IMAGE-->
<div class="mx-sm-0 mx-5" style="margin-top:-7em; border-radius:100%; border:5px solid #522c19; background:url(https://placehold.co/500?text=placeholder); background-size:cover; background-position:center; background-repeat:no-repeat; ">
<!--[ background:url(EDITHERE) | replace with your image ]-->
<!--SPACER-->
<img class="w-100" src="https://iili.io/CCnszBt.png">
<!--[ don't edit this! it's so the icon can stay a perfect circle ]-->
</div>
<!--PRIDE FLAGS-->
<div class="my-2 d-flex flex-wrap justify-content-center">
<!--IMAGES-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ src="EDITHERE" | replace with your flag ]-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ copy/paste as much as you need above this line ]-->
</div>
<!--BASICS ROW - PRONOUNS-->
<div class="row m-0 overflow-hidden d-flex align-items-center" style="background:#f1e8d7; border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt;">
<i class="fal fa-comments fa-fw"></i>
<!--[ fa-comments | replace comments with a different icon if you want to switch it out ]-->
</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Pronouns</div>
</div> <!--end basics row-->
<!--BASICS ROW - AGE-->
<div class="row m-0 mt-2 overflow-hidden d-flex align-items-center" style="background:#f1e8d7; border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt;">
<i class="fal fa-cake-candles fa-fw"></i>
<!--[ fa-cake-candles | replace cake-candles with a different icon if you want to switch it out ]-->
</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Age</div>
</div> <!--end basics row-->
<!--BASICS ROW - SEXUALITY-->
<div class="row m-0 mt-2 overflow-hidden d-flex align-items-center" style="background:#f1e8d7; border-radius:50px">
<!--ICON-->
<div class="col-auto py-1 px-2" style="font-weight:bold; font-size:15pt;">
<i class="fal fa-heartbeat fa-fw"></i>
<!--[ fa-heartbeat | replace heartbeat with a different icon if you want to switch it out ]-->
</div>
<!--CONTENT-->
<div class="col ml-2 mr-3 p-0 text-right">Sexuality</div>
</div> <!--end basics row-->
<!--LINKS-->
<div class="row mx-0 mt-2 d-flex align-items-center justify-content-center">
<!--LINK 1-->
<div class="d-flex align-items-center justify-content-center" style="background:#f1e8d7; border-radius:100%; height:35px; width:35px;">
<a href="https://artfight.net/" class="text-reset">
<!--ICON-->
<i class="fa-brands fa-bluesky fa-fw"></i>
<!--[ fa-bluesky | replace bluesky with a different icon if you want to switch it out; don't forget to replace fa-brands with fa if it's not a brand ]-->
</a></div>
<!--LINK 2-->
<div class="d-flex align-items-center justify-content-center mx-1" style="background:#f1e8d7; border-radius:100%; height:35px; width:35px;">
<a href="https://artfight.net/" class="text-reset">
<!--ICON-->
<i class="fa-brands fa-tumblr fa-fw"></i>
<!--[ fa-tumblr | replace tumblr with a different icon if you want to switch it out; don't forget to replace fa-brands with fa if it's not a brand ]-->
</a></div>
<!--LINK 3-->
<div class="d-flex align-items-center justify-content-center" style="background:#f1e8d7; border-radius:100%; height:35px; width:35px;">
<a href="https://artfight.net/" class="text-reset">
<!--ICON-->
<i class="fa fa-house fa-fw"></i>
<!--[ fa-house | replace house with a different icon if you want to switch it out ]-->
</a></div>
</div>
</div> <!--end left content-->
<!------------------------------------------------------------ [ RIGHT CONTENT - DETAILS ] -->
<div class="col-sm ml-sm-3 mt-sm-0 mt-2 p-0 d-flex flex-column">
<!--NAME-->
<div style="color:#f1e8d7; font-style:italic; font-weight:bold; font-size:28pt">
<!--ICON-->
<i class="fal fa-sparkle"></i>
<!--[ fa-sparkle | replace sparkle with a different icon if you want to switch it out ]-->
Name
</div>
<!--TAGLINE-->
<div class="mt-n2 mb-3" style="font-style:italic; font-weight:bold;">
Tagline goes here
</div>
<!--INFORMATION-->
<div class="flex-fill p-3 overflow-auto" style="background:#f1e8d7; border-radius:10px; font-style:italic; height:0; min-height:250px;">
<p>Profile info goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--[ copy/paste as much as you need above this line ]-->
</div>
</div> <!--end right content-->
<!----------------------------------------------------------------------------------------->
</div> <!--end row-->
<!--STAMPS-->
<div class="mx-auto px-3 py-2" style="background:#7e5a44; color:#522c19; font-family:serif; border-radius:15px">
<!--ROW 1-->
<div class="d-flex flex-wrap justify-content-center">
<!--IMAGES-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ src="EDITHERE" | replace with your flag ]-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ copy/paste as much as you need above this line ]-->
</div>
<!--ROW 2-->
<div class="d-flex flex-wrap justify-content-center">
<!--IMAGES-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ src="EDITHERE" | replace with your flag ]-->
<img class="m-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/76775458_R9wYVEc01WVUB0V.png">
<!--[ copy/paste as much as you need above this line ]-->
</div>
</div>
</div> <!--main content col-->
<!---------------------------------------------------------------------- [ IMAGES COL 2 ] -->
<div class="col-lg d-flex flex-column p-0">
<!--IMAGE 1-->
<div class="flex-fill" style="background:url(https://placehold.co/600x400?text=placeholder); background-size:cover; background-repeat:no-repeat; background-position:center; border-radius:10px; border:5px solid #522c19; min-height:120px;"></div>
<!--[ background:url(EDITHERE) | replace with your image ]-->
<!--IMAGE 2-->
<div class="flex-fill my-lg-3 my-1" style="background:url(https://placehold.co/600x400?text=placeholder); background-size:cover; background-repeat:no-repeat; background-position:center; border-radius:10px; border:5px solid #522c19; min-height:120px;"></div>
<!--[ background:url(EDITHERE) | replace with your image ]-->
<!--IMAGE 3-->
<div class="flex-fill" style="background:url(https://placehold.co/600x400?text=placeholder); background-size:cover; background-repeat:no-repeat; background-position:center; border-radius:10px; border:5px solid #522c19; min-height:120px;"></div>
<!--[ background:url(EDITHERE) | replace with your image ]-->
</div> <!--end images col 2-->
<!------------------------------------------------------------------------------------------>
</div> <!--end code-->
<!--CREDITS-->
<!--[ feel free to move around or recolor, just make sure it's visible! ]-->
<div class="text-right mt-2 mr-2" style="font-family:serif">
<a href="https://artfight.net/~skysong_" style="color:#7e5a44; text-decoration:none">
<i><b>code by sky</b></i><i class="fa fa-ticket-airline ml-2"></i>
</a>
</div>