(FTU) Custom for Zairenzu
created by:AnsuCodes
Custom ColorsMixed ColorsBootstrapHTMLCharacter
Copy
<!-- ================================================================================
Custom for Zairenzu, they want it to be a FTU code so
please thank them for their generosity! :D
Please let me know if you have any questions or need help.
I tried including notes that might help you with coding /
editing. You can delete them and these notes if you want to
My socials: https://linktr.ee/ansuperope
Can:
- edit / frakenstein
- share with friends and other people
- can move or edit credits as long as it's somewhere
Cannot:
- use for AI trianing / learning
- upload to mass distribute it / upload as
a template for others to use. (If you want to
do that please let me know first.)
- remove credits
PREVIEW:
https://toyhou.se/28207163.ftu-custom-for-zairenzu
CODE LINK:
https://stor8.vercel.app/159
https://pastebin.com/JmEhTMRf
- - -
Use "Ctrl" + "F" to find, edit and replace things easier
You might need to delete boostrap colors in order to use
custom colors and vice versa. You can use a mix of both
BOOTSTRAP COLORS
- HEADERS: text-primary
- SECONDARY TEXT: text-muted
- BORDERS: card-outline-primary
CUSTOM COLORS
- HEADERS: #CC_HEAD
- SECONDARY TEXT: #CC_SECOND
- BORDER: #CC_BORDER
FONTS
- HEADERS: 'Georgia'
JUMP TO FILL OUT
- GENERAL: LOREM
- IMAGES: LOREM_IMAGE
- LINKS: LOREM_LINK
- - -
RESOURCES
Live Code Editor (Shows How Code will Look as You Type, Recommend Using)
https://th.circlejourney.net/
Help Thread
https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-?page=0
Get Hex Color
https://imagecolorpicker.com/
Bootstrap Colors
https://getbootstrap.com/docs/4.0/utilities/colors/
Web Safe Fonts
https://www.w3schools.com/csSref/css_websafe_fonts.php
Icons
https://fontawesome.com/search
Bootstrap Spacing (px, py, my, mx, etc.)
https://getbootstrap.com/docs/4.0/utilities/spacing/
Columns / Widths (col, col-12, etc.)
https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns
Object Fit (images)
https://www.w3schools.com/csS/css3_object-fit.asp
Object Postion (images)
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
================================================================================= -->
<!-- START CODE ===================================================================
= mx-auto
= can delete. Will center code if you give it a width
=
= max-width:850px;
= changes how wide the code is. If you want it to take the entire screen then
= delete
================================================================================= -->
<div class="mx-auto" style="max-width:850px;">
<!-- ===== TOP - AVATAR + SHORT ABOUT =========================================
= row no-gutters
= don't delete or touch, allows avatar and about to be side by side
=
= align-items-center
= can delete or change. Allows content (right side about) to be centered
============================================================================= -->
<div class="row no-gutters align-items-center">
<!-- ========== LEFT SIDE - CHAR NAME + AVATAR ============================
= col-12
= width for mobile devices. Will take entire row, don't delete
=
= col-lg
= width for large / computer devices. I don't recommend touching, it will
= automatically change based off of right side width
=
= ml-lg-2
= left spacing for computer devices. Can change to be 1-5 or delete
========================================================================= -->
<div class="col-12 col-lg ml-lg-2">
<!-- CHARACTER NAME ===================================================
= text-center
= centers text, can delete
=
= display-4
= font height. Can delete or change to be 1-4 with 1 being biggest
=
= text-capitalize
= makes first letter of each word uppercase
===================================================================== -->
<div class="text-center text-primary display-4 text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</div>
<!-- AVATAR ===========================================================
= mt-3
= top spacing for all devices (mobile and computer). Can change to be
= 1-5 or delete
=
= mx-auto
= side spacing for all devies. Makes image centered
=
= card
= adds border to image
=
= rounded-circle
= makes corners rounded like a circle. Must make height and
= width the same in order for it to be a circle or else it will be
= and oval
=
= background-size:cover;
= don't recommend touching
=
= background-position:top center;
= changes position of image. Can change to be top, right, bottom,
= left or center. Don't delete
=
= background-repeat:no-repeat;
= don't recommend touching, makes sure image doesn't repeat
===================================================================== -->
<div class="mt-3 mx-auto card rounded-circle card-outline-primary" style="height:250px; width:250px; border-color:#CC_BORDER;
background-size:cover; background-position:top center; background-repeat:no-repeat;
background-image:url('LOREM_IMAGE');">
</div>
</div>
<!-- ========== END LEFT SIDE - CHAR NAME + PIC ========================= -->
<!-- ========== RIGHT SIDE - SHORT ABOUT ==================================
= col-12
= width for mobile devices. Will take entire row, don't delete
=
= col-lg-6
= width for large / computer devices. Can change to be 1-12
=
= mt-4
= top spacing for mobile devices. Can change to be 1-5 or delete
=
= mt-lg-0
= top spacing for computer. Can change to be 1-5 or delete
=
= card
= adds border, can delete. It's corners are rounded by 5px too
=
= rounded-0
= makes borders not rounded. Can delete for rounded corners
=
= py-2
= top and bottom space between border and text. Can change to be 1-5 or
= delete
=
= px-3
= right and left space between border and text. Can change to be 1-5 or
= delete
========================================================================= -->
<div class="col-12 col-lg-6 mt-4 mt-lg-0">
<div class="card py-2 px-3 card-outline-primary rounded-0"> <!-- decor -->
<!-- ===== NOTES ABOUT INFO =====================================
= row no-gutters
= don't touch, allows text to be side by side
=
= col-auto
= don't need to touch. Will automatically adjust width based off
= of how long text is
=
= mr-2
= adds right spacing on all devices. Can change to be 1-5 or
= delete
=
= text-capitalize
= makes first letter of each word uppercase. Can delete
=
= col
= you don't need to touch. Will automatically adjust width
================================================================= -->
<!-- SPECIES -->
<div class="row no-gutters">
<div class="col-auto mr-2 text-capitalize text-primary" style="font-family:'Georgia'; color:#CC_HEAD;">species:</div>
<div class="col text-capitalize">LOREM</div>
</div>
<!-- LEVEL -->
<div class="row no-gutters">
<div class="col-auto mr-2 text-capitalize text-primary" style="font-family:'Georgia'; color:#CC_HEAD;">level:</div>
<div class="col">LOREM</div>
</div>
<!-- TYPE -->
<div class="row no-gutters">
<div class="col-auto mr-2 text-capitalize text-primary" style="font-family:'Georgia';color:#CC_HEAD;">type:</div>
<div class="col text-capitalize">LOREM</div>
</div>
<!-- ATTRIBUTE -->
<div class="row no-gutters">
<div class="col-auto mr-2 text-capitalize text-primary" style="font-family:'Georgia'; color:#CC_HEAD;">attribute:</div>
<div class="col text-capitalize">LOREM, LOREM</div>
</div>
<!-- FAMILY / FEILD -->
<div class="row no-gutters">
<div class="col-auto mr-2 text-capitalize text-primary" style="font-family:'Georgia'; color:#CC_HEAD;">family / feild:</div>
<div class="col text-capitalize">
<a href="LOREM_LINK" class="text-muted">LOREM</a>,
<a href="LOREM_LINK" class="text-muted">LOREM</a>,
<a href="LOREM_LINK" class="text-muted">LOREM</a>,
<a href="LOREM_LINK" class="text-muted">LOREM</a>
</div>
</div>
<!-- ===== ADD MORE ABOVE HERE ==================================
<div class="mt-2 row no-gutters">
<div class="col-auto mr-2 text-capitalize text-primary" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM:</div>
<div class="col text-capitalize">LOREM</div>
</div>
================================================================= -->
</div> <!-- end decor -->
</div>
<!-- ========== RIGHT SIDE - SHORT ABOUT ================================ -->
</div>
<!-- ===== END TOP - CHAR PIC + SHORT ABOUT ================================= -->
<!-- border -->
<hr class="my-4 card-outline-primary" style="border-color:#CC_BORDER;">
<!-- ===== DESCRIPTION / ABOUT SECTION ====================================== -->
<div>
<!-- HEADER -->
<div class="mb-3 text-primary display-4 text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">
<u>Description / about</u>
</div>
<p>LOREM</p>
<p>LOREM</p>
</div>
<!-- ===== END DESCRIPTION / ABOUT SECTION ================================== -->
<!-- border -->
<hr class="my-4 card-outline-primary" style="border-color:#CC_BORDER;">
<!-- ===== ATTACKS SECTION ================================================== -->
<div>
<!-- HEADER -->
<div class="mb-1 text-primary display-4 text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">
<u>attacks</u>
</div>
<!-- ATTACK 1 -->
<div class="mt-3 row no-gutters">
<div class="col-auto mr-2 text-capitalize text-primary" style="font-family:'Georgia'; color:#CC_HEAD; font-weight:600;">LOREM_ATTACK:</div>
<div class="col text-muted">LOREM_EXTRA</div>
<div class="col-12">LOREM</div>
</div>
<!-- ATTACK 2 -->
<div class="mt-3 row no-gutters">
<div class="col-auto mr-2 text-capitalize text-primary" style="font-family:'Georgia'; color:#CC_HEAD; font-weight:600;">LOREM_ATTACK:</div>
<div class="col text-muted">LOREM_EXTRA</div>
<div class="col-12">LOREM</div>
</div>
<!-- ===== ADD MORE ABOVE HERE ==========================================
<div class="mt-3 row no-gutters">
<div class="col-auto mr-2 text-capitalize text-primary" style="font-family:'Georgia'; color:#CC_HEAD; font-weight:600;">LOREM_ATTACK:</div>
<div class="col text-muted">LOREM_EXTRA</div>
<div class="col-12">LOREM_DESCRIPTION</div>
</div>
========================================================================= -->
</div>
<!-- ===== END ATTACKS SECTION ============================================== -->
<!-- border -->
<hr class="my-4 card-outline-primary" style="border-color:#CC_BORDER;">
<!-- ===== FORM SECTION ===================================================== -->
<div>
<!-- HEADER -->
<div class="mb-4 text-primary display-4 text-center text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">
<u>form section</u>
</div>
<!-- ======== TAB BUTTONS ===============================================
= row no-gutters
= don't delete or touch, allows buttons to be side by side
=
= justify-content-center
= centers buttons on small devices
=
= justify-content-lg-between
= evenly spaces buttons on computer
========================================================================= -->
<ul class="nav nav-pills text-capitalize row no-gutters justify-content-center justify-content-lg-between" style="font-family:'Georgia'; color:#CC_HEAD;">
<!-- ===== NOTE ABOUT BUTTONS =========================================
= href should have a # and should be different from one another
= href should match an id in the tab contents below
=
= only one button should have active in it's class and that's the
= button of the content you want to see first
= it's matching id should have active in it's class
=
= card
= adds border, can delete. It's corners are rounded by 5px too
=
= border-radius:0px;
= changes border radius / roundness
=
= py-2
= top and bottom spacing between border and text. Can change to be
= 1-5 or delete
===================================================================== -->
<!-- ===== BUTTON 1 - ACTIVE - TAB_FRESH -->
<li class="nav-item card card-outline-primary rounded-0">
<a href="#TAB_FRESH" data-toggle="tab" class="active nav-link py-2" style="border-radius:0px;">fresh</a>
</li>
<!-- ===== BUTTON 2 - TAB_INTRAINING =========================== -->
<li class="nav-item card card-outline-primary rounded-0">
<a href="#TAB_INTRAINING" data-toggle="tab" class="nav-link py-2 text-" style="border-radius:0px;">in-training</a>
</li>
<!-- ===== BUTTON 3 - TAB_ROOKIES =========================== -->
<li class="nav-item card card-outline-primary rounded-0">
<a href="#TAB_ROOKIES" data-toggle="tab" class="nav-link py-2" style="border-radius:0px;">rookie</a>
</li>
<!-- ===== BUTTON 4 - TAB_CHAMPION =========================== -->
<li class="nav-item card card-outline-primary rounded-0">
<a href="#TAB_CHAMPION" data-toggle="tab" class="nav-link py-2" style="border-radius:0px;">champion</a>
</li>
<!-- ===== BUTTON 5 - TAB_ULTIMATE =========================== -->
<li class="nav-item card card-outline-primary rounded-0">
<a href="#TAB_ULTIMATE" data-toggle="tab" class="nav-link py-2" style="border-radius:0px;">ultimate</a>
</li>
<!-- ===== BUTTON 6 - TAB_MEGA =========================== -->
<li class="nav-item card card-outline-primary rounded-0">
<a href="#TAB_MEGA" data-toggle="tab" class="nav-link py-2" style="border-radius:0px;">mega</a>
</li>
<!-- ===== BUTTON 7 - TAB_SUPER =========================== -->
<li class="nav-item card card-outline-primary rounded-0">
<a href="#TAB_SUPER" data-toggle="tab" class="nav-link py-2" style="border-radius:0px;">super ultimate</a>
</li>
<!-- ===== BUTTON 8 - TAB_ARMOR =========================== -->
<li class="nav-item card card-outline-primary rounded-0">
<a href="#TAB_ARMOR" data-toggle="tab" class="nav-link py-2" style="border-radius:0px;">armor</a>
</li>
<!-- ===== BUTTON 9 - TAB_OTHER =========================== -->
<li class="nav-item card card-outline-primary rounded-0">
<a href="#TAB_OTHER" data-toggle="tab" class="nav-link py-2" style="border-radius:0px;">other</a>
</li>
<!-- ===== ADD MORE ABOVE HERE ======================================
<li class="nav-item card card-outline-primary rounded-0">
<a href="#TAB_LOREM" data-toggle="tab" class="nav-link py-2" style="border-radius:0px;">LOREM</a>
</li>
===================================================================== -->
</ul>
<!-- ======== END HEADERS / TAB BUTTONS ================================= -->
<!-- ======== TAB CONTENT =============================================== -->
<div class="tab-content pt-4 pb-3 px-3 card card-outline-primary rounded-0" style="border-color:#CC_BORDER;">
<!-- ===== NOTE ABOUT TABS ==========================================
= id should NOT have a # and should be different from one another
= id should match a href in the tab contents below
=
= only one tab should have active in it's class and that's the tab
= you want to see first
= it's matching button should have active in it's class
===================================================================== -->
<!-- ===== COPY AND ADD MORE CHARACTERS IN TABS =====================
<div class="mx-auto flex-column col-auto">
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM</a>
</div>
===================================================================== -->
<!-- ========== TAB 1 - ACTIVE - TAB_FRESH ========================== -->
<div id="TAB_FRESH" class="active tab-pane">
<div class="justify-content-center"><div class="align-items-center" style="overflow-x:auto; overflow-y:hidden;">
<!-- CHAR 1 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 1 -->
<!-- CHAR 2 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 2 -->
<!-- CHAR 3 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 3 -->
<!-- CHAR 4 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 4 -->
<!-- CHAR 5 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 5 -->
</div></div>
</div>
<!-- END TAB 1 - ACTIVE - TAB_FRESH ================================= -->
<!-- ========== TAB 2 - TAB_INTRAINING ============================== -->
<div id="TAB_INTRAINING" class="tab-pane fade">
<div class="justify-content-center"><div class="align-items-center" style="overflow-x:auto; overflow-y:hidden;">
<!-- CHAR 1 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 1 -->
<!-- CHAR 2 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 2 -->
</div></div>
</div>
<!-- ========== END TAB 2 - TAB_INTRAINING ========================== -->
<!-- ========== TAB 3 - TAB_ROOKIES ================================= -->
<div id="TAB_ROOKIES" class="tab-pane fade">
<div class="justify-content-center"><div class="align-items-center" style="overflow-x:auto; overflow-y:hidden;">
<!-- CHAR 1 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 1 -->
<!-- CHAR 2 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 2 -->
</div></div>
</div>
<!-- ========== END TAB 3 - TAB_ROOKIES ============================= -->
<!-- ========== TAB 4 - TAB_CHAMPION ================================ -->
<div id="TAB_CHAMPION" class="tab-pane fade">
<div class="justify-content-center"><div class="align-items-center" style="overflow-x:auto; overflow-y:hidden;">
<!-- CHAR 1 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 1 -->
</div></div>
</div>
<!-- ========== END TAB 4 - TAB_CHAMPION ============================ -->
<!-- ========== TAB 5 - TAB_ULTIMATE ================================ -->
<div id="TAB_ULTIMATE" class="tab-pane fade">
<div class="justify-content-center"><div class="align-items-center" style="overflow-x:auto; overflow-y:hidden;">
<!-- CHAR 1 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 1 -->
</div></div>
</div>
<!-- ========== END TAB 5 - TAB_ULTIMATE ============================ -->
<!-- ========== TAB 6 - TAB_MEGA ==================================== -->
<div id="TAB_MEGA" class="tab-pane fade">
<div class="justify-content-center"><div class="align-items-center" style="overflow-x:auto; overflow-y:hidden;">
<!-- CHAR 1 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 1 -->
</div></div>
</div>
<!-- ========== END TAB 6 - TAB_MEGA ================================ -->
<!-- ========== TAB 7 - TAB_SUPER =================================== -->
<div id="TAB_SUPER" class="tab-pane fade">
<div class="justify-content-center"><div class="align-items-center" style="overflow-x:auto; overflow-y:hidden;">
<!-- CHAR 1 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 1 -->
</div></div>
</div>
<!-- ========== END TAB 7 - TAB_SUPER =============================== -->
<!-- ========== TAB 8 - TAB_ARMOR =================================== -->
<div id="TAB_ARMOR" class="tab-pane fade">
<div class="justify-content-center"><div class="align-items-center" style="overflow-x:auto; overflow-y:hidden;">
<!-- CHAR 1 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 1 -->
</div></div>
</div>
<!-- ========== END TAB 8 - TAB_ARMOR =============================== -->
<!-- ========== TAB 9 - TAB_OTHER =================================== -->
<div id="TAB_OTHER" class="tab-pane fade">
<div class="justify-content-center"><div class="align-items-center" style="overflow-x:auto; overflow-y:hidden;">
<!-- CHAR 1 -->
<div class="flex-column col-auto">
<!-- avatar -->
<a href="LOREM_LINK">
<img class="mx-auto card rounded-circle card-outline-primary" style="height:150px; width:150px; border-color:#CC_BORDER;
object-fit:cover; object-position:top center;"
alt=""
src="LOREM_IMAGE">
</a>
<!-- char name -->
<a href="LOREM_LINK" class="mt-1 text-center text-primary text-capitalize" style="font-family:'Georgia'; color:#CC_HEAD;">LOREM_NAME</a>
</div>
<!-- END CHAR 1 -->
</div></div>
</div>
<!-- ========== END TAB 9 - TAB_OTHER =============================== -->
<!-- ===== ADD MORE TABS ABOVE HERE =================================
<div id="LOREM" class="tab-pane fade">
<div class="justify-content-center"><div class="align-items-center" style="overflow-x:auto; overflow-y:hidden;">
</div></div>
</div>
===================================================================== -->
</div>
<!-- ======== END TAB CONTENT =========================================== -->
</div>
<!-- ===== END FORM SECTION ================================================= -->
<!-- ===== CREDITS - FEEL FREE TO EDIT OR MOVE BUT DON'T DELETE ============= -->
<div class="text-right">
<a href="https://toyhou.se/28207163.ftu-custom-for-zairenzu" data-toggle="tooltip" title="Code by Ansuperope"><i class="fa-solid fa-trash fa-2xs"></i></a>
<a href="https://toyhou.se/Zairenzu" data-toggle="tooltip" title="Layout by Zairenzu"><i class="fa-solid fa-table-layout fa-2xs"></i></a>
</div>
<!-- ===== END CREDITS - FEEL FREE TO EDIT OR MOVE BUT DON'T DELETE ========= -->
</div>
<!-- END CODE =================================================================== -->