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 cirlce ]-->
</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-->