Nintendo DS
created by:AnsuCodes
Custom ColorsMixed ColorsBootstrapHTMLCharacter
Copy
<!--
Thank you for downloading! If you notice anything broken,
looking odd or need to contact me feel free to.
SOCIALS:
https://linktr.ee/ansuperope
CODE LINK:
https://stor8.vercel.app/285
LIVE PREVIEW:
- - -
Do "Ctrl" + "F" to find and replace things easier and faster
FILL OUT
GENERAL: LOREM
LINK: LOREM_LINK
CHAR IMAGE: LOREM_IMG
REL IMAGE: LOREM_REL
- - -
CUSTOMIZATIONS
CASE: CUS_CASE
SCREEN GENERAL: CUS_GEN
SCREEN IN TABS: CUS_TAB
TEXT SHADOW: #000000
- - -
CUSTOM COLORS
TEXT: #CC_TEXT
HEADERS: #CC_HEAD
CASE BG: #CC_CASE
SCREEN BG: #CC_SCR
SCREEN TAB: #CC_TAB
ACCENTS: #CC_ACC
BORDER: #CC_BOR
- - -
BOOTSTRAP COLORS
TEXT / BORDER: card-outline-BS_BOR / text-BS_BOR
HEADERS: text-BS_HEAD / card-outline-BS_HEAD
CASE BG: bg-BS_CASE
SCREEN BG: bg-BS_SCR
ACCENTS: bg-BS_ACC / text-BS_ACC
- - -
FONT AWESOME ICON DECORE
fa-solid <- have icons filled in and colored
fa-light <- have icons not filled in, only outline
text-BS_COLOR <- changes color of icon, change BS_COLOR to a bootstrap color
- - -
STICKERS
if you want to add things like stickers to the case you will need to know
positioning. I do NOT recommend trying it if you are new to coding since
it is a big complicated and tricky. If you do attempt to try i've coded it
to already be compatible.
!!! Keep in mind sticker positioning WILL look different on computer and mobile !!!
- - -
GENERAL BASE CODE
<div class="" style="z-index:1; position:absolute; top:0px; right:0px; bottom:0px; left:0px;
height:50px; width:50px; transform: rotate(0deg);
background-position:center; background-size:contain; background-repeat:no-repeat;
background-image:url('STICKER_IMG');"></div>
- - -
RESOURCES
POSITION
https://www.w3schools.com/Css/css_positioning.asp
ROTATE
https://www.w3schools.com/css/css3_2dtransforms.asp
Z-INDEX
https://www.w3schools.com/cssref/pr_pos_z-index.php
HIDE ON DIFFERENT DEVICE SIZES
https://getbootstrap.com/docs/5.0/utilities/display/
- - -
GENERAL RESOURCES
LIVE CODE EDITOR (shows code as you edit, I highly recommend using)
https://th.circlejourney.net/
BOOSTRAP COLORS
https://getbootstrap.com/docs/4.0/utilities/colors/
CUSTOM COLORS
https://imagecolorpicker.com/
FONT AWESOME (GET ICONS)
https://fontawesome.com/search
FONT AWESOME (ICON) STYLES
https://docs.fontawesome.com/web/style/style-cheatsheet
HELP THREAD
https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
-->
<div class="mx-n2 mx-lg-auto text-BS_BOR" style="max-width:600px; color:#CC_TEXT; font-size:#px; font-family:'Tahoma'; font-variant:small-caps;">
<!-- TOP CASE - FILL OUT HERE -->
<div class="bg-BS_CASE card-outline-BS_BOR" style="position:relative; overflow:auto; border-radius:20px 20px 10px 10px; border-width:2px; border-style:solid;
border-color:#CC_BOR; background-color:#CC_CASE;
background-position:center center; background-size:cover; background-repeat:no-repeat;
background-image:url('CUS_CASE');">
<!-- PUT STICKERS HERE -->
<!-- END STICKERS -->
<!-- TOP DECORE -->
<div class="text-BS_BOR row no-gutters text-center justify-content-center align-items-center" style="color:#CC_BOR;">
<!-- LEFT CIRCLE -->
<div class="col"><i class="fa-light fa-lg fa-circle-small"></i></div>
<!-- MIDDLE CIRCLES -->
<div class="col-auto row no-gutters align-items-center">
<div class="align-items-center justify-content-center fa-stack fa-lg mr-n2">
<i class="fa-stack-1x fa-light fa-circle"></i>
<i class="text-BS_ACC fa-stack-1x fa-solid fa-circle-small" style="color:#CC_ACC;"></i>
</div>
<i class="fa-light fa-circle-small"></i>
</div>
<!-- END MIDDLE CIRCLES -->
<!-- RIGHT CIRCLE -->
<div class="col"><i class="fa-light fa-lg fa-circle-small"></i></div>
</div>
<!-- END TOP DECORE -->
<!-- DECORE + TOP SCREEN - FILL OUT HERE -->
<div class="row no-gutters align-items-center justify-content-center">
<!-- LEFT SPEARKER DECORE -->
<div class="text-BS_BOR col mr-2 flex-column">
<!-- SPEAKER CIRCLES -->
<div class="flex-column align-items-center fa-xs" style="color:#CC_BOR;">
<i class="fa-regular fa-circle-small"></i>
<div class="row no-gutters">
<i class="fa-regular fa-circle-small"></i>
<i class="mx-1 fa-regular fa-circle-small"></i>
<i class="fa-regular fa-circle-small"></i>
</div>
<i class="fa-light fa-circle-small"></i>
</div>
<!-- END SPEAKER CIRCLES -->
<!-- VOLUME DECORE -->
<div class="bg-BS_ACC card-outline-BS_BOR py-1" style="width:6px; height:50px; border-radius:0px 10px 10px 0px; border-width:2px; border-style:solid; border-left:0; border-color:#CC_BOR; background-color:#CC_ACC;">
<div class="card-outline-BS_BOR py-1" style="border-bottom-width:2px; border-bottom-style:solid; border-color:#CC_BOR; "></div>
</div>
<!-- END VOLUME DECORE -->
</div>
<!-- END LEFT SPEARKER DECORE -->
<!-- TOP SCREEN - FILL OUT HERE -->
<div class="bg-BS_ACC card-outline-BS_BOR col-8 mb-1 p-2" style="border-radius:10px; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_ACC;">
<!-- INNER SCREEN -->
<div class="bg-BS_SCR p-1" style="overflow:auto; height:200px; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_SCR;
background-position:center center; background-size:cover; background-repeat:no-repeat;
background-image:url('CUS_GEN');">
<!-- IMAGE -->
<div class="w-100 h-100" style="position:relative; background-size:cover; background-position:center center; background-repeat:no-repeat;
background-image:url('LOREM_IMG');">
<!-- QUOTE OR HEAD TEXT -->
<div class="text-BS_HEAD mx-2" style="position:absolute; bottom:5px; right:0; text-shadow:0px 1px #000000, 0px -1px #000000, 1px 0px #000000, -1px 0px #000000; color:#CC_HEAD; font-size:16px; font-style:italic;">
<i class="fa-2xs fa-solid fa-quote-left"></i>
<!-- FILL OUT HERE -->
<span class="mx-1">LOREM</span>
<i class="fa-2xs fa-solid fa-quote-right"></i>
</div>
<!-- END QUOTE OR HEAD TEXT -->
</div>
<!-- END IMAGE -->
</div>
<!-- END INNER SCREEN -->
</div>
<!-- END TOP SCREEN -->
<!-- RIGHT SPEARKER DECORE -->
<div class="text-BS_BOR col ml-2 flex-column">
<!-- SPEAKER CIRCLES -->
<div class="flex-column align-items-center fa-xs" style="color:#CC_BOR;">
<i class="fa-regular fa-circle-small"></i>
<div class="row no-gutters">
<i class="fa-regular fa-circle-small"></i>
<i class="mx-1 fa-regular fa-circle-small"></i>
<i class="fa-regular fa-circle-small"></i>
</div>
<i class="fa-light fa-circle-small"></i>
</div>
<!-- END SPEAKER CIRCLES -->
<!-- VOLUME DECORE -->
<div class="bg-BS_ACC card-outline-BS_BOR py-1 ml-auto" style="width:6px; height:50px; border-radius:10px 0px 0px 10px; border-width:2px; border-style:solid; border-right:0; border-color:#CC_BOR; background-color:#CC_ACC;">
<div class="card-outline-BS_BOR py-1" style="border-bottom-width:2px; border-bottom-style:solid; border-color:#CC_BOR;"></div>
</div>
<!-- END VOLUME DECORE -->
</div>
<!-- END RIGHT SPEARKER DECORE -->
</div>
<!-- END DECORE + TOP SCREEN -->
</div>
<!-- END TOP CASE -->
<!-- MIDDLE PART -->
<div class="bg-BS_ACC card-outline-BS_BOR row no-gutters justify-content-center" style="overflow:hidden; border-radius:10px; border-width:2px; border-style:solid; border-top:0; border-BOTTOM:0; border-color:#CC_BOR; background-color:#CC_ACC;">
<div class="col"></div>
<div class="card-outline-BS_BOR col-9 col-lg-10" style="border-width:2px; border-style:solid; border-top:0; border-bottom:0; border-color:#CC_BOR;"></div>
<div class="text-BS_BOR col text-center" style="color:#CC_BOR;"><i class="fa-light fa-circle-small"></i></div>
</div>
<!-- END MIDDLE PART -->
<!-- BOTTOM CASE - FILL OUT HERE -->
<div class="bg-BS_CASE card-outline-BS_BOR" style="position:relative; overflow:auto; border-radius:10px 10px 20px 20px; border-width:2px; border-style:solid;
border-color:#CC_BOR; background-color:#CC_CASE;
background-position:center center; background-size:cover; background-repeat:no-repeat;
background-image:url('CUS_CASE');">
<!-- PUT STICKERS HERE -->
<!-- END STICKERS -->
<!-- DECORE + BOTTOM SCREEN - FILL OUT HERE -->
<div class="row no-gutters align-items-center justify-content-center">
<!-- LEFT DECORE -->
<div class="col mx-1 flex-column align-items-center justify-content-center">
<!-- CIRCLE DECORE -->
<div class="flex-column align-items-center">
<div class="bg-BS_ACC card-outline-BS_BOR p-2 p-lg-2" style="border-radius:50%; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_ACC;">
<div class="card-outline-BS_BOR p-3 p-lg-3" style="border-radius:50%; border-width:2px; border-style:solid; border-color:#CC_BOR;"></div>
</div>
</div>
<!-- END CIRCLES DECORE -->
<!-- PLUS DECORE -->
<div class="mt-3 flex-column align-items-center justify-content-center">
<div class="bg-BS_ACC card-outline-BS_BOR p-2" style="border-radius:5px 5px 0px 0px; border-width:2px; border-style:solid; border-bottom:0; border-color:#CC_BOR; background-color:#CC_ACC;"></div>
<div class="row no-gutters">
<div class="bg-BS_ACC card-outline-BS_BOR p-2" style="border-radius:5px 0px 0px 5px; border-width:2px; border-style:solid; border-right:0; border-color:#CC_BOR; background-color:#CC_ACC;"></div>
<div class="bg-BS_ACC p-2" style="background-color:#CC_ACC;"></div>
<div class="bg-BS_ACC card-outline-BS_BOR p-2" style="border-radius:0px 5px 5px 0px; border-width:2px; border-style:solid; border-left:0; border-color:#CC_BOR; background-color:#CC_ACC;"></div>
</div>
<div class="bg-BS_ACC card-outline-BS_BOR p-2" style="border-radius:0px 0px 5px 5px; border-width:2px; border-style:solid; border-top:0; border-color:#CC_BOR; background-color:#CC_ACC;"></div>
</div>
<!-- END PLUS DECORE -->
</div>
<!-- END LEFT DECORE -->
<!-- BOTTOM SCREEN - FILL OUT -->
<div class="bg-BS_ACC card-outline-BS_BOR col-8 col-lg-8 p-2 flex-column" style="max-width:; border-radius:10px; border-width:2px; border-style:solid; border-top:0; border-bottom:0; border-color:#CC_BOR; background-color:#CC_ACC;">
<!-- INNER SCREEN - TAB CONTENT - FILL OUT -->
<div class="tab-content bg-BS_SCR card-outline-BS_BOR" style="border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_SCR;
background-position:center center; background-size:cover; background-repeat:no-repeat;
background-image:url('CUS_GEN');">
<!-- TAB 1 - FRONT - TAB_FRONT - ACTIVE -->
<div id="TAB_FRONT" class="active tab-pane">
<div class="text-center align-items-center justify-content-center" style="overflow:auto; scrollbar-width:thin; height:200px;
background-position:center center; background-size:cover; background-repeat:no-repeat;
background-color:#CC_TAB;
background-image:url('CUS_TAB');">
<div class="my-auto p-1">
<!-- NAME + ICONS -->
<div class="text-BS_HEAD row no-gutters justify-content-center align-items-center fa-fade" style="color:#CC_HEAD; font-size:20px; font-style:italic; letter-spacing:2px; animation-duration:2s;">
<i class="fa-solid fa-trillium fa-spin" style="animation-duration:5s;"></i>
<!-- NAME -->
<div class="mx-1 px-3 card-outline-BS_HEAD" style="border-radius:10px; border-width:2px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">LOREM</div>
<i class="fa-solid fa-trillium fa-spin" style="animation-duration:5s;"></i>
</div>
<!-- END NAME + ICONS -->
<!-- AGE AND PRONOUNS -->
<div class="justify-content-center mt-2 px-2 text-lowercase"><div class="px-2" style="font-size:12px; font-variant:small-caps; border-radius:15px; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_SCR;">
<span>LOREM</span>
<!-- DIVIDER -->
<i class="mx-1 fa-2xs fa-light fa-circle-small"></i>
<span>LOREM</span>
</div></div>
<!-- END AGE AND PRONOUNS -->
</div></div>
</div>
<!-- END TAB 1 - FRONT - TAB_FRONT - ACTIVE -->
<!-- TAB 2 - LORE - TAB_LORE -->
<div id="TAB_LORE" class="tab-pane fade">
<div class="row no-gutters" style="background-position:center center; background-size:cover; background-repeat:no-repeat;
background-color:#CC_TAB;
background-image:url('CUS_TAB');">
<!-- LEFT JUMP BUTTONS -->
<div class="col-auto mt-1 ml-1 flex-column" style="position:sticky; top:0; left:0;">
<!-- SECTION 1 - STORY_CC_1 -->
<a href="#STORY_CC_1" class="mb-1 px-1 text-BS_HEAD card-outline-BS_HEAD bg-BS_SCR" style="color:#CC_HEAD; border-width:1px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">
<i class="fa-xs fa-solid fa-bookmark"></i>
</a>
<!-- SECTION 2 - STORY_CC_2 -->
<a href="#STORY_CC_2" class="mb-1 px-1 text-BS_HEAD card-outline-BS_HEAD bg-BS_SCR" style="color:#CC_HEAD; border-width:1px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">
<i class="fa-xs fa-solid fa-bookmark"></i>
</a>
<!-- SECTION 3 - STORY_CC_3 -->
<a href="#STORY_CC_3" class="mb-1 px-1 text-BS_HEAD card-outline-BS_HEAD bg-BS_SCR" style="color:#CC_HEAD; border-width:1px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">
<i class="fa-xs fa-solid fa-bookmark"></i>
</a>
</div>
<!-- END LEFT JUMP BUTTONS -->
<!-- RIGHT STORY SECTION -->
<div class="col" style="overflow:auto; scrollbar-width:thin; height:200px;">
<!-- STORY - STORY_CC_1 -->
<div id="STORY_CC_1" class="m-1 bg-BS_SCR" style="padding:3px; border-radius:10px; border-width:1px; border-style:solid; border-color:#CC_BOR; background-color:#CC_SCR;">
<div class="pb-1 px-1 card-outline-BS_HEAD" style="border-radius:5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;">
<!-- HEADER -->
<span class="ml-n1 px-2 border-top-0 border-left-0 text-lowercase text-BS_HEAD card-outline-BS_HEAD" style="color:#CC_HEAD; border-radius:0px 0px 5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD; font-weight:bold; font-size:14px;">LOREM</span>
<!-- INFO -->
<p>LOREM</p>
</div>
</div>
<!-- END STORY - STORY_CC_1 -->
<!-- STORY - STORY_CC_2 -->
<div id="STORY_CC_2" class="m-1 bg-BS_SCR" style="padding:3px; border-radius:10px; border-width:1px; border-style:solid; border-color:#CC_BOR; background-color:#CC_SCR;">
<div class="pb-1 px-1 card-outline-BS_HEAD" style="border-radius:5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;">
<!-- HEADER -->
<span class="ml-n1 px-2 border-top-0 border-left-0 text-lowercase text-BS_HEAD card-outline-BS_HEAD" style="color:#CC_HEAD; border-radius:0px 0px 5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD; font-weight:bold; font-size:14px;">LOREM</span>
<!-- INFO -->
<p>LOREM</p>
</div>
</div>
<!-- END STORY - STORY_CC_2 -->
<!-- STORY - STORY_CC_3 -->
<div id="STORY_CC_3" class="m-1 bg-BS_SCR" style="padding:3px; border-radius:10px; border-width:1px; border-style:solid; border-color:#CC_BOR; background-color:#CC_SCR;">
<div class="pb-1 px-1 card-outline-BS_HEAD" style="border-radius:5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;">
<!-- HEADER -->
<span class="ml-n1 px-2 border-top-0 border-left-0 text-lowercase text-BS_HEAD card-outline-BS_HEAD" style="color:#CC_HEAD; border-radius:0px 0px 5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD; font-weight:bold; font-size:14px;">LOREM</span>
<!-- INFO -->
<p>LOREM</p>
</div>
</div>
<!-- END STORY - STORY_CC_3 -->
</div>
<!-- END RIGHT STORY SECTION -->
</div>
</div>
<!-- END TAB 2 - LORE - TAB_LORE -->
<!-- TAB 3 - PERSONALITY - TAB_PER -->
<div id="TAB_PER" class="tab-pane fade">
<div class="text-center align-items-center justify-content-center" style="overflow:auto; scrollbar-width:thin; height:200px;
background-position:center center; background-size:cover; background-repeat:no-repeat;
background-color:#CC_TAB;
background-image:url('CUS_TAB');">
<div class="my-auto">
<!-- ADJECTIVES -->
<div class="mt-1 mb-1 row no-gutters text-lowercase justify-content-center text-BS_HEAD" style="font-size:12px; font-variant:small-caps; color:#CC_HEAD;">
<div class="m-1 px-2 card-outline-BS_HEAD bg-BS_SCR" style="border-radius:5px; border-width:2px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">LOREM</div>
<div class="m-1 px-2 card-outline-BS_HEAD bg-BS_SCR" style="border-radius:5px; border-width:2px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">LOREM</div>
<div class="m-1 px-2 card-outline-BS_HEAD bg-BG_SCR" style="border-radius:5px; border-width:2px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">LOREM</div>
</div>
<!-- END ADJECTIVES -->
<!-- PERSONALITY -->
<div class="m-1 bg-BS_SCR" style="padding:3px; border-radius:10px; border-width:1px; border-style:solid; border-color:#CC_TEXT; background-color:#CC_SCR;">
<div class="pb-1 px-1 card-outline-BS_HEAD" style="border-radius:5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;">
<p>LOREM</p>
</div>
</div>
<!-- END PERSONALITY -->
</div></div>
</div>
<!-- END TAB 3 - PERSONALITY - TAB_PER -->
<!-- TAB 4 - RELATIONSHIPS - TAB_REL -->
<div id="TAB_REL" class="tab-pane fade">
<div class="row no-gutters" style="background-position:center center; background-size:cover; background-repeat:no-repeat;
background-color:#CC_TAB;
background-image:url('CUS_TAB');">
<!-- LEFT JUMP BUTTONS -->
<div class="col-auto mt-1 ml-1 flex-column" style="position:sticky; top:0; left:0;">
<!-- RELATIONSHIP 1 - REL_CC_1 -->
<a href="#REL_CC_1" class="mb-1 px-1 text-BS_HEAD card-outline-BS_HEAD bg-BS_SCR" style="color:#CC_HEAD; border-width:1px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">
<i class="fa-xs fa-solid fa-user"></i>
</a>
<!-- RELATIONSHIP 2 - REL_CC_2 -->
<a href="#REL_CC_2" class="mb-1 px-1 text-BS_HEAD card-outline-BS_HEAD bg-BS_SCR" style="color:#CC_HEAD; border-width:1px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">
<i class="fa-xs fa-solid fa-user"></i>
</a>
<!-- RELATIONSHIP 3 - REL_CC_3 -->
<a href="#REL_CC_3" class="mb-1 px-1 text-BS_HEAD card-outline-BS_HEAD bg-BS_SCR" style="color:#CC_HEAD; border-width:1px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">
<i class="fa-xs fa-solid fa-user"></i>
</a>
</div>
<!-- END LEFT JUMP BUTTONS -->
<!-- RIGHT RELATIONSHIP SECTION -->
<div class="col" style="overflow:auto; scrollbar-width:thin; height:200px;">
<!-- RELATIONSHIP - REL_CC_1 -->
<div id="REL_CC_1" class="m-1 bg-BS_SCR" style="padding:3px; border-radius:10px; border-width:1px; border-style:solid; border-color:#CC_TEXT; background-color:#CC_SCR;">
<div class="pb-1 px-1 card-outline-BS_HEAD" style="border-radius:5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;">
<!-- CHAR IMG -->
<div class="float-left ml-n1 mr-1 mb-lg-1">
<div class="border-top-0 border-left-0 card-outline-BS_HEAD" style="width:100px; height:100px; border-radius:5px 0px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;
background-size:cover; background-position:center center; background-repeat:no-repeat;
background-image:url('LOREM_REL');"></div>
</div>
<!-- END CHAR IMG -->
<!-- CHAR LINK -->
<a class="ml-n1 px-2 border-top-0 border-left-0 text-lowercase text-BS_HEAD card-outline-BS_HEAD" style="border-radius:0px 0px 5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD; font-weight:bold; color:#CC_HEAD; font-size:14px;"
href="LOREM_LINK">LOREM</a>
<!-- END CHAR LINK -->
<!-- DESCRIP -->
<p>LOREM</p>
<!-- END DESCRIP -->
</div>
</div>
<!-- END RELATIONSHIP - REL_CC_1 -->
<!-- RELATIONSHIP - REL_CC_2 -->
<div id="REL_CC_2" class="m-1 bg-BS_SCR" style="padding:3px; border-radius:10px; border-width:1px; border-style:solid; border-color:#CC_TEXT; background-color:#CC_SCR;">
<div class="pb-1 px-1 card-outline-BS_HEAD" style="border-radius:5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;">
<!-- CHAR IMG -->
<div class="float-left ml-n1 mr-1 mb-lg-1">
<div class="border-top-0 border-left-0 card-outline-BS_HEAD" style="width:100px; height:100px; border-radius:5px 0px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;
background-size:cover; background-position:center center; background-repeat:no-repeat;
background-image:url('LOREM_REL');"></div>
</div>
<!-- END CHAR IMG -->
<!-- CHAR LINK -->
<a class="ml-n1 px-2 border-top-0 border-left-0 text-lowercase text-BS_HEAD card-outline-BS_HEAD" style="border-radius:0px 0px 5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD; font-weight:bold; color:#CC_HEAD; font-size:14px;"
href="LOREM_LINK">LOREM</a>
<!-- END CHAR LINK -->
<!-- DESCRIP -->
<p>LOREM</p>
<!-- END DESCRIP -->
</div>
</div>
<!-- END RELATIONSHIP - REL_CC_2 -->
<!-- RELATIONSHIP - REL_CC_3 -->
<div id="REL_CC_3" class="m-1 bg-BS_SCR" style="padding:3px; border-radius:10px; border-width:1px; border-style:solid; border-color:#CC_TEXT; background-color:#CC_SCR;">
<div class="pb-1 px-1 card-outline-BS_HEAD" style="border-radius:5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;">
<!-- CHAR IMG -->
<div class="float-left ml-n1 mr-1 mb-lg-1">
<div class="border-top-0 border-left-0 card-outline-BS_HEAD" style="width:100px; height:100px; border-radius:5px 0px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;
background-size:cover; background-position:center center; background-repeat:no-repeat;
background-image:url('LOREM_REL');"></div>
</div>
<!-- END CHAR IMG -->
<!-- CHAR LINK -->
<a class="ml-n1 px-2 border-top-0 border-left-0 text-lowercase text-BS_HEAD card-outline-BS_HEAD" style="border-radius:0px 0px 5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD; font-weight:bold; color:#CC_HEAD; font-size:14px;"
href="LOREM_LINK">LOREM</a>
<!-- END CHAR LINK -->
<!-- DESCRIP -->
<p>LOREM</p>
<!-- END DESCRIP -->
</div>
</div>
<!-- END RELATIONSHIP - REL_CC_3 -->
</div>
<!-- END RIGHT RELATIONSHIP SECTION -->
</div>
</div>
<!-- END TAB 4 - RELATIONSHIPS - TAB_REL -->
</div>
<!-- END INNER SCREEN - TAB CONTENT - FILL OUT -->
<!-- CREDITS - CAN MOVE AND EDIT BUT DON'T DELETE PLEASE -->
<a href="https://toyhou.se/Ansuperope" data-toggle="tooltip" title="Code by Ansuperope"
class="bg-BS_SCR card-outline-BS_BOR btn mt-2 mb-0 mx-auto py-1 pr-1" style="border-radius:15px; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_SCR;"></a>
</div>
<!-- END BOTTOM SCREEN -->
<!-- RIGHT SPEARKER DECORE -->
<div class="col mx-1 flex-column align-self-start">
<!-- TOP CIRCLE -->
<div class="text-BS_BOR my-4 ml-lg-3" style="color:#CC_BOR;">
<i class="fa-lg fa-light fa-circle"></i>
</div>
<!-- END TOP CIRCLE -->
<!-- TAB BUTTONS -->
<ul class="nav row no-gutters justify-content-center">
<!-- TOP BUTTON - FRONT PAGE - TAB_FRONT- ACTIVE -->
<li class="col-12 justify-content-center">
<a data-toggle="tab" href="#TAB_FRONT" title="Font Page"
class="active bg-BS_ACC card-outline-BS_BOR p-2 p-lg-2" style="border-radius:50%; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_ACC;"></a>
</li>
<!-- LEFT BUTTON - LORE - TAB_LORE -->
<li class="col-auto mr-3 justify-content-center">
<a data-toggle="tab" href="#TAB_LORE" title="Lore"
class="bg-BS_ACC card-outline-BS_BOR p-2 p-lg-2" style="border-radius:50%; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_ACC;"></a>
</li>
<!-- RIGHT BUTTON - PERSONALITY - TAB_PER -->
<li class="col-auto justify-content-center">
<a data-toggle="tab" href="#TAB_PER" title="Personality"
class="bg-BS_ACC card-outline-BS_BOR p-2 p-lg-2" style="border-radius:50%; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_ACC;"></a>
</li>
<!-- BOTTOM BUTTON - RELATIONSHIPS - TAB_REL -->
<li class="col-12 justify-content-center">
<a data-toggle="tab" href="#TAB_REL" title="Relationships"
class="bg-BS_ACC card-outline-BS_BOR p-2 p-lg-2" style="border-radius:50%; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_ACC;"></a>
</li>
</ul>
<!-- END TAB BUTTONS -->
<!-- BOTTOM 2 CIRCLES -->
<div class="text-BS_BOR mt-4 pt-3 ml-lg-3 flex-column fa-sm" style="color:#CC_BOR;">
<div class="mb-2"><i class="fa-light fa-circle"></i></div>
<div><i class="fa-light fa-circle"></i></div>
</div>
<!-- END BOTTOM 2 CIRCLES -->
</div>
<!-- END RIGHT SPEARKER DECORE -->
</div>
<!-- END DECORE + BOTTOM SCREEN -->
</div>
<!-- END BOTTOM CASE -->
</div>Copy
<!--
Thank you for downloading! If you notice anything broken,
looking odd or need to contact me feel free to.
SOCIALS:
https://linktr.ee/ansuperope
CODE LINK:
https://stor8.vercel.app/285
LIVE PREVIEW:
- - -
Do "Ctrl" + "F" to find and replace things easier and faster
FILL OUT
GENERAL: LOREM
LINK: LOREM_LINK
CHAR IMAGE: LOREM_IMG
REL IMAGE: LOREM_REL
- - -
CUSTOMIZATIONS
CASE: CUS_CASE
SCREEN GENERAL: CUS_GEN
SCREEN IN TABS: CUS_TAB
TEXT SHADOW: #000000
- - -
CUSTOM COLORS
TEXT: #CC_TEXT
HEADERS: #CC_HEAD
CASE BG: #CC_CASE
SCREEN BG: #CC_SCR
SCREEN TAB: #CC_TAB
ACCENTS: #CC_ACC
BORDER: #CC_BOR
- - -
BOOTSTRAP COLORS
TEXT / BORDER: card-outline-dark / text-dark
HEADERS: text-info / card-outline-info
CASE BG: bg-primary
SCREEN BG: bg-light
ACCENTS: bg-secondary / text-secondary
- - -
FONT AWESOME ICON DECORE
fa-solid <- have icons filled in and colored
fa-light <- have icons not filled in, only outline
text-BS_COLOR <- changes color of icon, change BS_COLOR to a bootstrap color
- - -
STICKERS
if you want to add things like stickers to the case you will need to know
positioning. I do NOT recommend trying it if you are new to coding since
it is a big complicated and tricky. If you do attempt to try i've coded it
to already be compatible.
!!! Keep in mind sticker positioning WILL look different on computer and mobile !!!
- - -
GENERAL BASE CODE
<div class="" style="z-index:1; position:absolute; top:0px; right:0px; bottom:0px; left:0px;
height:50px; width:50px; transform: rotate(0deg);
background-position:center; background-size:contain; background-repeat:no-repeat;
background-image:url('STICKER_IMG');"></div>
- - -
RESOURCES
POSITION
https://www.w3schools.com/Css/css_positioning.asp
ROTATE
https://www.w3schools.com/css/css3_2dtransforms.asp
Z-INDEX
https://www.w3schools.com/cssref/pr_pos_z-index.php
HIDE ON DIFFERENT DEVICE SIZES
https://getbootstrap.com/docs/5.0/utilities/display/
- - -
GENERAL RESOURCES
LIVE CODE EDITOR (shows code as you edit, I highly recommend using)
https://th.circlejourney.net/
BOOSTRAP COLORS
https://getbootstrap.com/docs/4.0/utilities/colors/
CUSTOM COLORS
https://imagecolorpicker.com/
FONT AWESOME (GET ICONS)
https://fontawesome.com/search
FONT AWESOME (ICON) STYLES
https://docs.fontawesome.com/web/style/style-cheatsheet
HELP THREAD
https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
-->
<div class="mx-n2 mx-lg-auto text-dark" style="max-width:600px; color:#CC_TEXT; font-size:#px; font-family:'Tahoma'; font-variant:small-caps;">
<!-- TOP CASE - FILL OUT HERE -->
<div class="bg-primary card-outline-dark" style="position:relative; overflow:auto; border-radius:20px 20px 10px 10px; border-width:2px; border-style:solid;
border-color:#CC_BOR; background-color:#CC_CASE;
background-position:center center; background-size:cover; background-repeat:no-repeat;
background-image:url('CUS_CASE');">
<!-- PUT STICKERS HERE -->
<!-- END STICKERS -->
<!-- TOP DECORE -->
<div class="text-dark row no-gutters text-center justify-content-center align-items-center" style="color:#CC_BOR;">
<!-- LEFT CIRCLE -->
<div class="col"><i class="fa-light fa-lg fa-circle-small"></i></div>
<!-- MIDDLE CIRCLES -->
<div class="col-auto row no-gutters align-items-center">
<div class="align-items-center justify-content-center fa-stack fa-lg mr-n2">
<i class="fa-stack-1x fa-light fa-circle"></i>
<i class="text-secondary fa-stack-1x fa-solid fa-circle-small" style="color:#CC_ACC;"></i>
</div>
<i class="fa-light fa-circle-small"></i>
</div>
<!-- END MIDDLE CIRCLES -->
<!-- RIGHT CIRCLE -->
<div class="col"><i class="fa-light fa-lg fa-circle-small"></i></div>
</div>
<!-- END TOP DECORE -->
<!-- DECORE + TOP SCREEN - FILL OUT HERE -->
<div class="row no-gutters align-items-center justify-content-center">
<!-- LEFT SPEARKER DECORE -->
<div class="text-dark col mr-2 flex-column">
<!-- SPEAKER CIRCLES -->
<div class="flex-column align-items-center fa-xs" style="color:#CC_BOR;">
<i class="fa-regular fa-circle-small"></i>
<div class="row no-gutters">
<i class="fa-regular fa-circle-small"></i>
<i class="mx-1 fa-regular fa-circle-small"></i>
<i class="fa-regular fa-circle-small"></i>
</div>
<i class="fa-light fa-circle-small"></i>
</div>
<!-- END SPEAKER CIRCLES -->
<!-- VOLUME DECORE -->
<div class="bg-secondary card-outline-dark py-1" style="width:6px; height:50px; border-radius:0px 10px 10px 0px; border-width:2px; border-style:solid; border-left:0; border-color:#CC_BOR; background-color:#CC_ACC;">
<div class="card-outline-dark py-1" style="border-bottom-width:2px; border-bottom-style:solid; border-color:#CC_BOR; "></div>
</div>
<!-- END VOLUME DECORE -->
</div>
<!-- END LEFT SPEARKER DECORE -->
<!-- TOP SCREEN - FILL OUT HERE -->
<div class="bg-secondary card-outline-dark col-8 mb-1 p-2" style="border-radius:10px; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_ACC;">
<!-- INNER SCREEN -->
<div class="bg-light p-1" style="overflow:auto; height:200px; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_SCR;
background-position:center center; background-size:cover; background-repeat:no-repeat;
background-image:url('CUS_GEN');">
<!-- IMAGE -->
<div class="w-100 h-100" style="position:relative; background-size:cover; background-position:center center; background-repeat:no-repeat;
background-image:url('LOREM_IMG');">
<!-- QUOTE OR HEAD TEXT -->
<div class="text-info mx-2" style="position:absolute; bottom:5px; right:0; text-shadow:0px 1px #000000, 0px -1px #000000, 1px 0px #000000, -1px 0px #000000; color:#CC_HEAD; font-size:16px; font-style:italic;">
<i class="fa-2xs fa-solid fa-quote-left"></i>
<!-- FILL OUT HERE -->
<span class="mx-1">LOREM</span>
<i class="fa-2xs fa-solid fa-quote-right"></i>
</div>
<!-- END QUOTE OR HEAD TEXT -->
</div>
<!-- END IMAGE -->
</div>
<!-- END INNER SCREEN -->
</div>
<!-- END TOP SCREEN -->
<!-- RIGHT SPEARKER DECORE -->
<div class="text-dark col ml-2 flex-column">
<!-- SPEAKER CIRCLES -->
<div class="flex-column align-items-center fa-xs" style="color:#CC_BOR;">
<i class="fa-regular fa-circle-small"></i>
<div class="row no-gutters">
<i class="fa-regular fa-circle-small"></i>
<i class="mx-1 fa-regular fa-circle-small"></i>
<i class="fa-regular fa-circle-small"></i>
</div>
<i class="fa-light fa-circle-small"></i>
</div>
<!-- END SPEAKER CIRCLES -->
<!-- VOLUME DECORE -->
<div class="bg-secondary card-outline-dark py-1 ml-auto" style="width:6px; height:50px; border-radius:10px 0px 0px 10px; border-width:2px; border-style:solid; border-right:0; border-color:#CC_BOR; background-color:#CC_ACC;">
<div class="card-outline-dark py-1" style="border-bottom-width:2px; border-bottom-style:solid; border-color:#CC_BOR;"></div>
</div>
<!-- END VOLUME DECORE -->
</div>
<!-- END RIGHT SPEARKER DECORE -->
</div>
<!-- END DECORE + TOP SCREEN -->
</div>
<!-- END TOP CASE -->
<!-- MIDDLE PART -->
<div class="bg-secondary card-outline-dark row no-gutters justify-content-center" style="overflow:hidden; border-radius:10px; border-width:2px; border-style:solid; border-top:0; border-BOTTOM:0; border-color:#CC_BOR; background-color:#CC_ACC;">
<div class="col"></div>
<div class="card-outline-dark col-9 col-lg-10" style="border-width:2px; border-style:solid; border-top:0; border-bottom:0; border-color:#CC_BOR;"></div>
<div class="text-dark col text-center" style="color:#CC_BOR;"><i class="fa-light fa-circle-small"></i></div>
</div>
<!-- END MIDDLE PART -->
<!-- BOTTOM CASE - FILL OUT HERE -->
<div class="bg-primary card-outline-dark" style="position:relative; overflow:auto; border-radius:10px 10px 20px 20px; border-width:2px; border-style:solid;
border-color:#CC_BOR; background-color:#CC_CASE;
background-position:center center; background-size:cover; background-repeat:no-repeat;
background-image:url('CUS_CASE');">
<!-- PUT STICKERS HERE -->
<!-- END STICKERS -->
<!-- DECORE + BOTTOM SCREEN - FILL OUT HERE -->
<div class="row no-gutters align-items-center justify-content-center">
<!-- LEFT DECORE -->
<div class="col mx-1 flex-column align-items-center justify-content-center">
<!-- CIRCLE DECORE -->
<div class="flex-column align-items-center">
<div class="bg-secondary card-outline-dark p-2 p-lg-2" style="border-radius:50%; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_ACC;">
<div class="card-outline-dark p-3 p-lg-3" style="border-radius:50%; border-width:2px; border-style:solid; border-color:#CC_BOR;"></div>
</div>
</div>
<!-- END CIRCLES DECORE -->
<!-- PLUS DECORE -->
<div class="mt-3 flex-column align-items-center justify-content-center">
<div class="bg-secondary card-outline-dark p-2" style="border-radius:5px 5px 0px 0px; border-width:2px; border-style:solid; border-bottom:0; border-color:#CC_BOR; background-color:#CC_ACC;"></div>
<div class="row no-gutters">
<div class="bg-secondary card-outline-dark p-2" style="border-radius:5px 0px 0px 5px; border-width:2px; border-style:solid; border-right:0; border-color:#CC_BOR; background-color:#CC_ACC;"></div>
<div class="bg-secondary p-2" style="background-color:#CC_ACC;"></div>
<div class="bg-secondary card-outline-dark p-2" style="border-radius:0px 5px 5px 0px; border-width:2px; border-style:solid; border-left:0; border-color:#CC_BOR; background-color:#CC_ACC;"></div>
</div>
<div class="bg-secondary card-outline-dark p-2" style="border-radius:0px 0px 5px 5px; border-width:2px; border-style:solid; border-top:0; border-color:#CC_BOR; background-color:#CC_ACC;"></div>
</div>
<!-- END PLUS DECORE -->
</div>
<!-- END LEFT DECORE -->
<!-- BOTTOM SCREEN - FILL OUT -->
<div class="bg-secondary card-outline-dark col-8 col-lg-8 p-2 flex-column" style="max-width:; border-radius:10px; border-width:2px; border-style:solid; border-top:0; border-bottom:0; border-color:#CC_BOR; background-color:#CC_ACC;">
<!-- INNER SCREEN - TAB CONTENT - FILL OUT -->
<div class="tab-content bg-light card-outline-dark" style="border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_SCR;
background-position:center center; background-size:cover; background-repeat:no-repeat;
background-image:url('CUS_GEN');">
<!-- TAB 1 - FRONT - TAB_CC_FRONT - ACTIVE -->
<div id="TAB_CC_FRONT" class="active tab-pane">
<div class="text-center align-items-center justify-content-center" style="overflow:auto; scrollbar-width:thin; height:200px;
background-position:center center; background-size:cover; background-repeat:no-repeat;
background-color:#CC_TAB;
background-image:url('CUS_TAB');">
<div class="my-auto p-1">
<!-- NAME + ICONS -->
<div class="text-info row no-gutters justify-content-center align-items-center fa-fade" style="color:#CC_HEAD; font-size:20px; font-style:italic; letter-spacing:2px; animation-duration:2s;">
<i class="fa-solid fa-trillium fa-spin" style="animation-duration:5s;"></i>
<!-- NAME -->
<div class="mx-1 px-3 card-outline-info" style="border-radius:10px; border-width:2px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">LOREM</div>
<i class="fa-solid fa-trillium fa-spin" style="animation-duration:5s;"></i>
</div>
<!-- END NAME + ICONS -->
<!-- AGE AND PRONOUNS -->
<div class="justify-content-center mt-2 px-2 text-lowercase"><div class="px-2" style="font-size:12px; font-variant:small-caps; border-radius:15px; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_SCR;">
<span>LOREM</span>
<!-- DIVIDER -->
<i class="mx-1 fa-2xs fa-light fa-circle-small"></i>
<span>LOREM</span>
</div></div>
<!-- END AGE AND PRONOUNS -->
</div></div>
</div>
<!-- END TAB 1 - FRONT - TAB_CC_FRONT - ACTIVE -->
<!-- TAB 2 - LORE - TAB_CC_LORE -->
<div id="TAB_CC_LORE" class="tab-pane fade">
<div class="row no-gutters" style="background-position:center center; background-size:cover; background-repeat:no-repeat;
background-color:#CC_TAB;
background-image:url('CUS_TAB');">
<!-- LEFT JUMP BUTTONS -->
<div class="col-auto mt-1 ml-1 flex-column" style="position:sticky; top:0; left:0;">
<!-- SECTION 1 - STORY_CC_1 -->
<a href="#STORY_CC_1" class="mb-1 px-1 text-info card-outline-info bg-light" style="color:#CC_HEAD; border-width:1px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">
<i class="fa-xs fa-solid fa-bookmark"></i>
</a>
<!-- SECTION 2 - STORY_CC_2 -->
<a href="#STORY_CC_2" class="mb-1 px-1 text-info card-outline-info bg-light" style="color:#CC_HEAD; border-width:1px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">
<i class="fa-xs fa-solid fa-bookmark"></i>
</a>
<!-- SECTION 3 - STORY_CC_3 -->
<a href="#STORY_CC_3" class="mb-1 px-1 text-info card-outline-info bg-light" style="color:#CC_HEAD; border-width:1px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">
<i class="fa-xs fa-solid fa-bookmark"></i>
</a>
</div>
<!-- END LEFT JUMP BUTTONS -->
<!-- RIGHT STORY SECTION -->
<div class="col" style="overflow:auto; scrollbar-width:thin; height:200px;">
<!-- STORY - STORY_CC_1 -->
<div id="STORY_CC_1" class="m-1 bg-light" style="padding:3px; border-radius:10px; border-width:1px; border-style:solid; border-color:#CC_BOR; background-color:#CC_SCR;">
<div class="pb-1 px-1 card-outline-info" style="border-radius:5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;">
<!-- HEADER -->
<span class="ml-n1 px-2 border-top-0 border-left-0 text-lowercase text-info card-outline-info" style="color:#CC_HEAD; border-radius:0px 0px 5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD; font-weight:bold; font-size:14px;">LOREM</span>
<!-- INFO -->
<p>LOREM</p>
</div>
</div>
<!-- END STORY - STORY_CC_1 -->
<!-- STORY - STORY_CC_2 -->
<div id="STORY_CC_2" class="m-1 bg-light" style="padding:3px; border-radius:10px; border-width:1px; border-style:solid; border-color:#CC_BOR; background-color:#CC_SCR;">
<div class="pb-1 px-1 card-outline-info" style="border-radius:5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;">
<!-- HEADER -->
<span class="ml-n1 px-2 border-top-0 border-left-0 text-lowercase text-info card-outline-info" style="color:#CC_HEAD; border-radius:0px 0px 5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD; font-weight:bold; font-size:14px;">LOREM</span>
<!-- INFO -->
<p>LOREM</p>
</div>
</div>
<!-- END STORY - STORY_CC_2 -->
<!-- STORY - STORY_CC_3 -->
<div id="STORY_CC_3" class="m-1 bg-light" style="padding:3px; border-radius:10px; border-width:1px; border-style:solid; border-color:#CC_BOR; background-color:#CC_SCR;">
<div class="pb-1 px-1 card-outline-info" style="border-radius:5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;">
<!-- HEADER -->
<span class="ml-n1 px-2 border-top-0 border-left-0 text-lowercase text-info card-outline-info" style="color:#CC_HEAD; border-radius:0px 0px 5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD; font-weight:bold; font-size:14px;">LOREM</span>
<!-- INFO -->
<p>LOREM</p>
</div>
</div>
<!-- END STORY - STORY_CC_3 -->
</div>
<!-- END RIGHT STORY SECTION -->
</div>
</div>
<!-- END TAB 2 - LORE - TAB_CC_LORE -->
<!-- TAB 3 - PERSONALITY - TAB_CC_PER -->
<div id="TAB_CC_PER" class="tab-pane fade">
<div class="text-center align-items-center justify-content-center" style="overflow:auto; scrollbar-width:thin; height:200px;
background-position:center center; background-size:cover; background-repeat:no-repeat;
background-color:#CC_TAB;
background-image:url('CUS_TAB');">
<div class="my-auto">
<!-- ADJECTIVES -->
<div class="mt-1 mb-1 row no-gutters text-lowercase justify-content-center text-info" style="font-size:12px; font-variant:small-caps; color:#CC_HEAD;">
<div class="m-1 px-2 card-outline-info bg-light" style="border-radius:5px; border-width:2px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">LOREM</div>
<div class="m-1 px-2 card-outline-info bg-light" style="border-radius:5px; border-width:2px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">LOREM</div>
<div class="m-1 px-2 card-outline-info bg-BG_SCR" style="border-radius:5px; border-width:2px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">LOREM</div>
</div>
<!-- END ADJECTIVES -->
<!-- PERSONALITY -->
<div class="m-1 bg-light" style="padding:3px; border-radius:10px; border-width:1px; border-style:solid; border-color:#CC_TEXT; background-color:#CC_SCR;">
<div class="pb-1 px-1 card-outline-info" style="border-radius:5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;">
<p>LOREM</p>
</div>
</div>
<!-- END PERSONALITY -->
</div></div>
</div>
<!-- END TAB 3 - PERSONALITY - TAB_CC_PER -->
<!-- TAB 4 - RELATIONSHIPS - TAB_CC_REL -->
<div id="TAB_CC_REL" class="tab-pane fade">
<div class="row no-gutters" style="background-position:center center; background-size:cover; background-repeat:no-repeat;
background-color:#CC_TAB;
background-image:url('CUS_TAB');">
<!-- LEFT JUMP BUTTONS -->
<div class="col-auto mt-1 ml-1 flex-column" style="position:sticky; top:0; left:0;">
<!-- RELATIONSHIP 1 - REL_CC_1 -->
<a href="#REL_CC_1" class="mb-1 px-1 text-info card-outline-info bg-light" style="color:#CC_HEAD; border-width:1px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">
<i class="fa-xs fa-solid fa-user"></i>
</a>
<!-- RELATIONSHIP 2 - REL_CC_2 -->
<a href="#REL_CC_2" class="mb-1 px-1 text-info card-outline-info bg-light" style="color:#CC_HEAD; border-width:1px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">
<i class="fa-xs fa-solid fa-user"></i>
</a>
<!-- RELATIONSHIP 3 - REL_CC_3 -->
<a href="#REL_CC_3" class="mb-1 px-1 text-info card-outline-info bg-light" style="color:#CC_HEAD; border-width:1px; border-style:solid; border-color:#CC_HEAD; background-color:#CC_SCR;">
<i class="fa-xs fa-solid fa-user"></i>
</a>
</div>
<!-- END LEFT JUMP BUTTONS -->
<!-- RIGHT RELATIONSHIP SECTION -->
<div class="col" style="overflow:auto; scrollbar-width:thin; height:200px;">
<!-- RELATIONSHIP - REL_CC_1 -->
<div id="REL_CC_1" class="m-1 bg-light" style="padding:3px; border-radius:10px; border-width:1px; border-style:solid; border-color:#CC_TEXT; background-color:#CC_SCR;">
<div class="pb-1 px-1 card-outline-info" style="border-radius:5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;">
<!-- CHAR IMG -->
<div class="float-left ml-n1 mr-1 mb-lg-1">
<div class="border-top-0 border-left-0 card-outline-info" style="width:100px; height:100px; border-radius:5px 0px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;
background-size:cover; background-position:center center; background-repeat:no-repeat;
background-image:url('LOREM_REL');"></div>
</div>
<!-- END CHAR IMG -->
<!-- CHAR LINK -->
<a class="ml-n1 px-2 border-top-0 border-left-0 text-lowercase text-info card-outline-info" style="border-radius:0px 0px 5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD; font-weight:bold; color:#CC_HEAD; font-size:14px;"
href="LOREM_LINK">LOREM</a>
<!-- END CHAR LINK -->
<!-- DESCRIP -->
<p>LOREM</p>
<!-- END DESCRIP -->
</div>
</div>
<!-- END RELATIONSHIP - REL_CC_1 -->
<!-- RELATIONSHIP - REL_CC_2 -->
<div id="REL_CC_2" class="m-1 bg-light" style="padding:3px; border-radius:10px; border-width:1px; border-style:solid; border-color:#CC_TEXT; background-color:#CC_SCR;">
<div class="pb-1 px-1 card-outline-info" style="border-radius:5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;">
<!-- CHAR IMG -->
<div class="float-left ml-n1 mr-1 mb-lg-1">
<div class="border-top-0 border-left-0 card-outline-info" style="width:100px; height:100px; border-radius:5px 0px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;
background-size:cover; background-position:center center; background-repeat:no-repeat;
background-image:url('LOREM_REL');"></div>
</div>
<!-- END CHAR IMG -->
<!-- CHAR LINK -->
<a class="ml-n1 px-2 border-top-0 border-left-0 text-lowercase text-info card-outline-info" style="border-radius:0px 0px 5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD; font-weight:bold; color:#CC_HEAD; font-size:14px;"
href="LOREM_LINK">LOREM</a>
<!-- END CHAR LINK -->
<!-- DESCRIP -->
<p>LOREM</p>
<!-- END DESCRIP -->
</div>
</div>
<!-- END RELATIONSHIP - REL_CC_2 -->
<!-- RELATIONSHIP - REL_CC_3 -->
<div id="REL_CC_3" class="m-1 bg-light" style="padding:3px; border-radius:10px; border-width:1px; border-style:solid; border-color:#CC_TEXT; background-color:#CC_SCR;">
<div class="pb-1 px-1 card-outline-info" style="border-radius:5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;">
<!-- CHAR IMG -->
<div class="float-left ml-n1 mr-1 mb-lg-1">
<div class="border-top-0 border-left-0 card-outline-info" style="width:100px; height:100px; border-radius:5px 0px; border-width:1px; border-style:dotted; border-color:#CC_HEAD;
background-size:cover; background-position:center center; background-repeat:no-repeat;
background-image:url('LOREM_REL');"></div>
</div>
<!-- END CHAR IMG -->
<!-- CHAR LINK -->
<a class="ml-n1 px-2 border-top-0 border-left-0 text-lowercase text-info card-outline-info" style="border-radius:0px 0px 5px; border-width:1px; border-style:dotted; border-color:#CC_HEAD; font-weight:bold; color:#CC_HEAD; font-size:14px;"
href="LOREM_LINK">LOREM</a>
<!-- END CHAR LINK -->
<!-- DESCRIP -->
<p>LOREM</p>
<!-- END DESCRIP -->
</div>
</div>
<!-- END RELATIONSHIP - REL_CC_3 -->
</div>
<!-- END RIGHT RELATIONSHIP SECTION -->
</div>
</div>
<!-- END TAB 4 - RELATIONSHIPS - TAB_CC_REL -->
</div>
<!-- END INNER SCREEN - TAB CONTENT - FILL OUT -->
<!-- CREDITS - CAN MOVE AND EDIT BUT DON'T DELETE PLEASE -->
<a href="https://toyhou.se/Ansuperope" data-toggle="tooltip" title="Code by Ansuperope"
class="bg-light card-outline-dark btn mt-2 mb-0 mx-auto py-1 pr-1" style="border-radius:15px; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_SCR;"></a>
</div>
<!-- END BOTTOM SCREEN -->
<!-- RIGHT SPEARKER DECORE -->
<div class="col mx-1 flex-column align-self-start">
<!-- TOP CIRCLE -->
<div class="text-dark my-4 ml-lg-3" style="color:#CC_BOR;">
<i class="fa-lg fa-light fa-circle"></i>
</div>
<!-- END TOP CIRCLE -->
<!-- TAB BUTTONS -->
<ul class="nav row no-gutters justify-content-center">
<!-- TOP BUTTON - FRONT PAGE - TAB_CC_FRONT- ACTIVE -->
<li class="col-12 justify-content-center">
<a data-toggle="tab" href="#TAB_CC_FRONT" title="Font Page"
class="active bg-secondary card-outline-dark p-2 p-lg-2" style="border-radius:50%; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_ACC;"></a>
</li>
<!-- LEFT BUTTON - LORE - TAB_CC_LORE -->
<li class="col-auto mr-3 justify-content-center">
<a data-toggle="tab" href="#TAB_CC_LORE" title="Lore"
class="bg-secondary card-outline-dark p-2 p-lg-2" style="border-radius:50%; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_ACC;"></a>
</li>
<!-- RIGHT BUTTON - PERSONALITY - TAB_CC_PER -->
<li class="col-auto justify-content-center">
<a data-toggle="tab" href="#TAB_CC_PER" title="Personality"
class="bg-secondary card-outline-dark p-2 p-lg-2" style="border-radius:50%; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_ACC;"></a>
</li>
<!-- BOTTOM BUTTON - RELATIONSHIPS - TAB_CC_REL -->
<li class="col-12 justify-content-center">
<a data-toggle="tab" href="#TAB_CC_REL" title="Relationships"
class="bg-secondary card-outline-dark p-2 p-lg-2" style="border-radius:50%; border-width:2px; border-style:solid; border-color:#CC_BOR; background-color:#CC_ACC;"></a>
</li>
</ul>
<!-- END TAB BUTTONS -->
<!-- BOTTOM 2 CIRCLES -->
<div class="text-dark mt-4 pt-3 ml-lg-3 flex-column fa-sm" style="color:#CC_BOR;">
<div class="mb-2"><i class="fa-light fa-circle"></i></div>
<div><i class="fa-light fa-circle"></i></div>
</div>
<!-- END BOTTOM 2 CIRCLES -->
</div>
<!-- END RIGHT SPEARKER DECORE -->
</div>
<!-- END DECORE + BOTTOM SCREEN -->
</div>
<!-- END BOTTOM CASE -->
</div>