Gossip (FTU)
created by:AnsuCodes
Custom ColorsHTMLCharacter
Copy
<!----------------------------------------------------
LIVE PREVIEW + RESOURCES & TIPS:
https://toyhou.se/25721501.gossip
Pastebin:
https://pastebin.com/FivmYhHD
Alter Version Pastebin:
https://pastebin.com/WvrMR9mB
Do "Ctrl" + "F" to find, jump to, replace and
change info faster
CUSTOM COLORS hex number / rgb number
- TEXT & SHADOW: #000 / rgba(0, 0, 0, 1)
- HEADER & DECOR: #fff / rgba(255, 255, 255, .75) + rgba(255, 255, 255, 1)
- ACCENT: #88a1db
- BG COLOR: #30477d
INFO TO FILL OUT
Can use replace all to fill out
- background image: BG_IMG_LINK
- bg image credit: BG_CREDIT_LINK
- char profile link: CHAR_LINK
- character image: MAIN_CHAR_IMG_LINK
Jump to fill out
- relation img: REL_IMG_LINK
- link: LOREM_LINK
- general: LOREM
---------------------------------------------------->
<!-- BACKGROUND IMAGE ------------------------------>
<div class="h-100 w-100" style="z-index:-1; position:absolute; top:0; bottom:0; left:0; filter:brightness(50%); background-image:url('BG_IMG_LINK'); background-position:center; background-size:cover; background-repeat:no-repeat; background-color:#30477d;"></div>
<!-- CODE ----------------------------------------->
<div class="mx-auto row" style="z-index:10; position:relative; max-width:800px; overflow:hidden; filter:drop-shadow(8px 8px 10px rgba(0, 0, 0, 1)); color:#000;">
<div class="col-12"><hr style="background-color:rgba(255, 255, 255, 1);"></div>
<!-- MAIN CODE - TOP MOBILE / LEFT COMPUTER --
- z-index:0
- if you want it to be behindcharacter image
-
- z-index:10
- or any number greater than 0 to make it
- infront of image
------------------------------------------------>
<div class="col-lg-8 d-flex row no-gutters" style="overflow:hidden; position:relative; border-radius:10px;
background-image:url('BG_IMG_LINK'); background-color:#30477d;
background-size:cover; background-position:center top; background-repeat:no-repeat;">
<!-- TOP DECOR ----------------------------->
<div class="col-12 d-flex my-3" style="z-index:0;">
<div class="col-7 mr-2 pt-2" style="background-color:rgba(255, 255, 255, 1);"></div>
<div class="mr-2 pt-2 px-4" style="background-color:rgba(255, 255, 255, 1);"></div>
<div class="mr-2 pt-2 px-2" style="background-color:rgba(255, 255, 255, 1);"></div>
<div class="pt-2 px-1" style="background-color:rgba(255, 255, 255, 1);"></div>
</div>
<!-- END TOP DECOR ------------------------->
<!-- NAME + SUB TEXT ----------------------->
<div class="col mx-3 mb-3 text-capitalize" style="z-index:0; color:#fff; font-style:italic; font-family:'Times New Roman';">
<div class="display-1" style="text-shadow:2px 2px #88a1db;">LOREM</div>
<div class="ml-5 display-4">LOREM</div>
</div>
<!-- END NAME + SUB TEXT ------------------->
<!-- CHARACTER INFO ------------------------>
<div class="col-10 d-flex my-5 mx-auto" style="position:relative; z-index:10; height:410px; background-color:rgba(255, 255, 255, .75);">
<!-- LEFT DECOR ------------------------>
<div class="col-5 my-3" style="position:absolute; top:0; height:100%;"><div class="card rounded-0 faded" style="height:30%; border-width:2px 0 0 2px; background-color:transparent; border-color:#88a1db;"></div></div>
<!-- MIDDLE BOX ------------------------>
<div class="col d-flex row no-gutters my-auto mx-4 mx-lg-5" style="height:90%;">
<!-- TAB CONTENT -------------------
- make sure id is different than one
- another and match a href in nav
-
- id should NOT have # and no spaces
-
- only one tab and its href in the
- nav should have active in the class
-
- active tab should have show in class
------------------------------------>
<div class="tab-content col-12 mt-3" style="overflow:auto; max-height:330px;">
<!-- TAB 1 --------------------->
<div id="TAB_ID1" class="active show tab-pane fade">
<div class="row no-gutters mb-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">name</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right text-capitalize">LOREM</div>
</div>
<div class="row no-gutters mb-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">pronunciation</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">age</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">gender</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">pronouns </div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">birthday</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right text-capitalize">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">species</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">height</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">role</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">sexuality</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<!-- add more above here -->
</div>
<!-- END TAB 1 ----------------->
<!-- TAB 2 --------------------->
<div id="TAB_ID2" class="tab-pane fade">
<!-- ABOUT HEADER ---------->
<div class="row no-gutters align-items-end display-3 text-capitalize">
<div class="mx-4" style="color:#88a1db; font-style:italic; font-family:'Times New Roman';">about</div>
<div class="col-10"><hr class="my-0" style="background-color:#88a1db;"></div>
<div class="col-10 ml-4"><hr class="my-1" style="background-color:#88a1db;"></div>
</div>
<!-- END ABOUT HEADER ------>
<!-- ABOUT INFO ------------>
<div class="mx-1">
<div class="my-2"><span class="ml-3"></span>LOREM</div>
<div class="my-2"><span class="ml-3"></span>LOREM</div>
<div class="my-2"><span class="ml-3"></span>LOREM</div>
<!-- add more above here -->
</div>
<!-- END ABOUT INFO -------->
</div>
<!-- END TAB 2 ----------------->
<!-- TAB 3 --------------------->
<div id="TAB_ID3" class="tab-pane fade">
<!-- ABILITY 1 ------------->
<div>
<!-- HEADER -->
<div class="row no-gutters align-items-end pl-3 text-capitalize" style="color:#88a1db; font-style:italic; border-bottom:1px dashed #88a1db;">
<div class="col" style="font-size:20px; font-family:'Times New Roman';">ability
<span style="font-size:15px;">1</span>
</div>
<div class="col-auto mb-1" style="font-size:10px;">LOREM</div>
</div>
<!-- INFO -->
<div class="my-1"><span class="mx-2"></span>LOREM</div>
<!-- add more above here -->
</div>
<!-- END ABILITY 1 --------->
<!-- ABILITY 2 ------------->
<div class="mt-3">
<!-- HEADER -->
<div class="row no-gutters align-items-end pl-3 text-capitalize" style="color:#88a1db; font-style:italic; border-bottom:1px dashed #88a1db;">
<div class="col" style="font-size:20px; font-family:'Times New Roman';">ability
<span style="font-size:15px;">2</span>
</div>
<div class="col-auto mb-1" style="font-size:10px;">LOREM</div>
</div>
<!-- INFO -->
<div class="my-1"><span class="mx-2"></span>LOREM</div>
<!-- add more above here -->
</div>
<!-- END ABILITY 2 --------->
<!-- ABILITY 3 ------------->
<div class="mt-3">
<!-- HEADER -->
<div class="row no-gutters align-items-end pl-3 text-capitalize" style="color:#88a1db; font-style:italic; border-bottom:1px dashed #88a1db;">
<div class="col" style="font-size:20px; font-family:'Times New Roman';">ability
<span style="font-size:15px;">3</span>
</div>
<div class="col-auto mb-1" style="font-size:10px;">LOREM</div>
</div>
<!-- INFO -->
<div class="my-1"><span class="mx-2"></span>LOREM</div>
<!-- add more above here -->
</div>
<!-- END ABILITY 3 --------->
</div>
<!-- END TAB 2 ----------------->
<!-- TAB 4 --------------------->
<div id="TAB_ID4" class="tab-pane fade">
<!-- DESIGN NOTES ---------->
<div>
<!-- HEADER -->
<div class="row no-gutters align-items-end pl text-capitalize" style="font-style:italic;">
<div class="col display-3" style="color:#88a1db; font-size:20px; font-family:'Times New Roman';">design notes</div>
</div>
<!-- INFO -->
<div class="my-1 mx-3">
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<!-- add more above here -->
</div>
</div>
<!-- END DESIGN NOTES ------>
<!-- LIKES ----------------->
<div class="mt-3">
<!-- HEADER -->
<div class="row no-gutters align-items-end pl text-capitalize" style="font-style:italic;">
<div class="col display-3" style="color:#88a1db; font-size:20px; font-family:'Times New Roman';">likes</div>
</div>
<!-- INFO -->
<div class="my-1 mx-3">
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<!-- add more above here -->
</div>
</div>
<!-- END LIKES ------------->
<!-- DISLIKES -------------->
<div class="mt-3">
<!-- HEADER -->
<div class="row no-gutters align-items-end pl text-capitalize" style="font-style:italic;">
<div class="col display-3" style="color:#88a1db; font-size:20px; font-family:'Times New Roman';">dislikes</div>
</div>
<!-- INFO -->
<div class="my-1 mx-3">
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<!-- add more above here -->
</div>
</div>
<!-- END DISLIKES ---------->
<!-- TRIVIA ---------------->
<div class="mt-3">
<!-- HEADER -->
<div class="row no-gutters align-items-end pl text-capitalize" style="font-style:italic;">
<div class="col display-3" style="color:#88a1db; font-size:20px; font-family:'Times New Roman';">trivia</div>
</div>
<!-- INFO -->
<div class="my-1 mx-3">
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<!-- add more above here -->
</div>
</div>
<!-- END TRIVIA ------------>
</div>
<!-- END TAB 4 ----------------->
<!-- add more above here -->
</div>
<!-- END TAB CONTENT --------------->
<!-- TAB NAVIGATION BUTTONS ---------
- make sure href is different from one
- another and match an id in tab
-
- href should have # and no spaces
-
- only one href and id in tab content
- should have active in the class
------------------------------------>
<div class="col-12 d-flex row no-gutters text-center">
<a href="#COLLAPSE_ID" data-toggle="collapse" role="button" aria-expanded="false" class="col-12" style="color:#88a1db;"><i class="fa-solid fa-caret-down"></i></a>
<!-- DROP DOWN MENU ------------>
<div id="COLLAPSE_ID" class="collapse text-center mx-auto"><ul class="nav card" style="border-color:#88a1db; background-color:rgba(255, 255, 255, .75); font-variant:small-caps;">
<li class="nav-item mx-1" style="border-bottom:1px dashed #88a1db;"><a href="#TAB_ID1" data-toggle="tab" class="active nav-link" style="color:#88a1db;">basic</a></li>
<li class="nav-item mx-1" style="border-bottom:1px dashed #88a1db;"><a href="#TAB_ID2" data-toggle="tab" class="nav-link" style="color:#88a1db;">about</a></li>
<li class="nav-item mx-1" style="border-bottom:1px dashed #88a1db;"><a href="#TAB_ID3" data-toggle="tab" class="nav-link" style="color:#88a1db;">abilities</a></li>
<!-- add more above here -->
<li class="nav-item"><a href="#TAB_ID4" data-toggle="tab" class="nav-link" style="color:#88a1db;">extra</a></li>
</ul></div>
<!-- END DROP DOWN MENU -------->
</div>
<!-- END TAB NAVIGATION BUTTONS ---->
</div>
<!-- END MIDDLE BOX -------------------->
<!-- RIGHT DECOR ----------------------->
<div class="col-4 mb-3" style="position:absolute; bottom:0; right:0; height:100%;"><div style="height:70%;"></div><div class="card rounded-0 faded" style="height:30%; border-width:0 2px 2px 0; background-color:transparent; border-color:#88a1db;"></div></div>
</div>
<!-- END CHARACTER INFO -------------------->
<!-- QUOTE --------------------------------->
<div class="col-11 my-3 mx-auto display-4" style="z-index:0; color:#fff; font-style:italic; font-family:'Times New Roman'; text-shadow:2px 2px #88a1db;">
<!-- first half of quote -->
<div class="col-9 row no-gutters">
<i class="fa-solid fa-quote-left"></i>
<div class="col ml-3 pt-3">LOREM</div>
</div>
<!-- second half of quote -->
<div class="col-9 ml-auto row no-gutters align-items-end text-right">
<div class="col mr-3 pb-3">LOREM</div>
<i class="fa-solid fa-quote-right"></i>
</div>
</div>
<!-- END QUOTE ----------------------------->
<!-- BOTTOM DECOR -------------------------->
<div class="col-12 d-flex my-3 justify-content-end" style="z-index:0;">
<div class="pt-2 px-1" style="background-color:rgba(255, 255, 255, 1);"></div>
<div class="ml-2 pt-2 px-2" style="background-color:rgba(255, 255, 255, 1);"></div>
<div class="ml-2 pt-2 px-4" style="background-color:rgba(255, 255, 255, 1);"></div>
<div class="col-7 ml-2 pt-2" style="background-color:rgba(255, 255, 255, 1);"></div>
</div>
<!-- END BOTTOM DECOR ---------------------->
<!-- CHARACTER IMAGE -----------------------
- you might need to mess with image position
- to make it look nice or right value
-
- left number is horintal (x axis)
- right number is vertical (y axis)
-
- will look better if image is transparent
-------------------------------------------->
<div style="position:absolute; top:0; right:0px; height:100%; width:100%;
background-image:url('MAIN_CHAR_IMG_LINK');
background-size:cover; background-position:-50px 0px; background-repeat:no-repeat;"></div>
</div>
<!-- END MAIN CODE - TOP MOBILE / LEFT COMPUTER -->
<!-- PROFILE - BOTTOM MOBILE / RIGHT COMPUTER --->
<div class="col-lg mt-2 mt-lg-0 ml-lg-2 mb-2" style="overflow-y:auto; max-height:800px;">
<!-- RELATIONSHIP 1 -------------------->
<div class="mt-4 mb-2" style="position:relative;">
<!-- IMG / LINK / REL STATS ------------>
<div class="mt-5 mx-4 mx-lg-3">
<a href="LOREM_LINK" class="p-2 card border-0" style="background-image:url('BG_IMG_LINK'); background-color:#30477d;"><img src="REL_IMG_LINK" alt="" class=" rounded" style="height:200px; width:100%; object-position:top center; object-fit:cover; background-color:rgba(255, 255, 255, 1)"></a>
<!-- rel status -->
<div class="mb-2 mr-5 text-capitalize" style="position:absolute; bottom:0; right:0; color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-weight:800;">LOREM</div>
</div>
<!-- END IMG / LINK / REL STATS -------->
<!-- TEXT BOX -------------------------->
<div class="col-10 pt-2 pb-5" style="position:absolute; top:-40px; right:0; clip-path:polygon(0% 0%, 100% 0%, 100% 75%, 80% 75%, 65% 100%, 60% 75%, 0% 75%); color:#88a1db; background-color:rgba(255, 255, 255, .75);">
<div class="text-center" style="overflow:auto; max-height:80px;">LOREM</div>
</div>
</div>
<!-- END RELATIONSHIP 1 ---------------->
<!-- RELATIONSHIP 2 -------------------->
<div class="mt-4 mb-2" style="position:relative;">
<!-- IMG / LINK / REL STATS ------------>
<div class="mt-5 mx-4 mx-lg-3">
<a href="LOREM_LINK" class="p-2 card border-0" style="background-image:url('BG_IMG_LINK'); background-color:#30477d;"><img src="REL_IMG_LINK" alt="" class=" rounded" style="height:200px; width:100%; object-position:top center; object-fit:cover; background-color:rgba(255, 255, 255, 1)"></a>
<!-- rel status -->
<div class="mb-2 mr-5 text-capitalize" style="position:absolute; bottom:0; right:0; color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-weight:800;">LOREM</div>
</div>
<!-- END IMG / LINK / REL STATS -------->
<!-- TEXT BOX -------------------------->
<div class="col-10 pt-2 pb-5" style="position:absolute; top:-40px; right:0; clip-path:polygon(0% 0%, 100% 0%, 100% 75%, 80% 75%, 65% 100%, 60% 75%, 0% 75%); color:#88a1db; background-color:rgba(255, 255, 255, .75);">
<div class="text-center" style="overflow:auto; max-height:80px;">LOREM</div>
</div>
</div>
<!-- END RELATIONSHIP 2 ---------------->
<!-- RELATIONSHIP 3 -------------------->
<div class="mt-4 mb-2" style="position:relative;">
<!-- IMG / LINK / REL STATS ------------>
<div class="mt-5 mx-4 mx-lg-3">
<a href="LOREM_LINK" class="p-2 card border-0" style="background-image:url('BG_IMG_LINK'); background-color:#30477d;"><img src="REL_IMG_LINK" alt="" class=" rounded" style="height:200px; width:100%; object-position:top center; object-fit:cover; background-color:rgba(255, 255, 255, 1)"></a>
<!-- rel status -->
<div class="mb-2 mr-5 text-capitalize" style="position:absolute; bottom:0; right:0; color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-weight:800;">LOREM</div>
</div>
<!-- END IMG / LINK / REL STATS -------->
<!-- TEXT BOX -------------------------->
<div class="col-10 pt-2 pb-5" style="position:absolute; top:-40px; right:0; clip-path:polygon(0% 0%, 100% 0%, 100% 75%, 80% 75%, 65% 100%, 60% 75%, 0% 75%); color:#88a1db; background-color:rgba(255, 255, 255, .75);">
<div class="text-center" style="overflow:auto; max-height:80px;">LOREM</div>
</div>
</div>
<!-- END RELATIONSHIP 3 ---------------->
<!-- add more above here -->
</div>
<!-- END PROFILE - BOTTOM MOBILE / RIGHT COMPUTER -->
<!-- CREDITS - FEEL FREE TO MOVE --------------->
<div class="col-12 mt-1 row no-gutters align-items-center text-center" style="font-size:10px;">
<div class="col"><hr style="background-color:rgba(255, 255, 255, 1);"></div>
<div class="col-auto mx-1">
<a href="https://toyhou.se/12087247.-genshin-character-splash" data-toggle="tooltip" title="Inspo Credit"><i class="fa-regular fa-sparkle fa-xs" style="color:rgba(255, 255, 255, 1);"></i></a>
<a href="https://toyhou.se/25721501.gossip" data-toggle="tooltip" title="Code Credit"><i class="fa-solid fa-trash" style="color:rgba(255, 255, 255, 1);"></i></a>
<a href="BG_CREDIT_LINK" data-toggle="tooltip" title="Background Image Credit"><i class="fa-regular fa-sparkle fa-xs" style="color:rgba(255, 255, 255, 1);"></i></a>
</div>
<div class="col"><hr style="background-color:rgba(255, 255, 255, 1);"></div>
</div>
<!-- END CREDITS ------------------------------->
</div>Copy
<!----------------------------------------------------
!!! PLEASE DO NOT DELETE OR REMOVE THE OPTION TO TURN
OFF CUSTOM CSS !!!
LIVE PREVIEW + RESOURCES & TIPS:
https://toyhou.se/25721501.gossip
CODE LINK:
https://stor8.vercel.app/87
Do "Ctrl" + "F" to find, jump to, replace and
change info faster
CUSTOM COLORS hex number / rgb number
- HEADER & DECOR: #fff / rgba(255, 255, 255, .75) + rgba(255, 255, 255, 1)
- ACCENT: #88a1db
- BG COLOR: #BG_CC
INFO TO FILL OUT
Can use replace all to fill out
- background image: https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
- bg image credit: https://unsplash.com/photos/a-close-up-view-of-ice-and-water-Bycd2wF5vQU
- char profile link: CHAR_LINK
- character image: https://f2.toyhou.se/file/f2-toyhou-se/images/30558913_RVHLwslAUnfKGVv.png?1641885769
- youtube link: YOUTUBE_LINK
Jump to fill out
- relation img: https://f2.toyhou.se/file/f2-toyhou-se/images/58838498_C6yzAnYXb3qZtyu.jpg?1689486855
- tag link: https://toyhou.se/Ansuperope/characters/folder:all/tags:1/taga:1/tagged:LOREM_TAG
- tag title: LOREM_TAG
- link: LOREM_LINK
- general: LOREM
---------------------------------------------------->
<!-- BACKGROUND IMAGE - SHOW DEFAULT ---------------
- do NOT delete FAKE_CSS collapse from class
-
- you can remove "show" if you don't want it to be
- shown by default
---------------------------------------------------->
<div class="FAKE_CSS collapse show h-100 w-100" style="transition:0s; z-index:1; position:absolute; top:0; bottom:0; left:0; filter:brightness(50%); background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
background-position:center;
background-size:cover;
background-repeat:no-repeat;"></div>
<!-- MARGIN TOP - SHOWN DEFAULT -------------------->
<div class="FAKE_CSS collapse show" style="transition:0s; position:relative;">
<!-- COMPUTER & MEDIUM DEVICE MARGIN -->
<div class="hidden-sm-down" style="margin-top:-100px;"></div>
<!-- MOBILE MARGIN -->
<div class="hidden-lg-up" style="margin-top:-350px;"></div>
</div>
<!-- END MARGIN TOP - SHOWN DEFAULT ---------------->
<!-- START - CHARACTER CODE ------------------------>
<div class="mx-auto row" style="z-index:10; position:relative; max-width:800px; overflow:hidden; filter:drop-shadow(8px 8px 10px #000); color:#000;">
<div class="order-lg-1 col-12"><hr style="background-color:rgba(255, 255, 255, 1);"></div>
<!-- PROFILE - TOP MOBILE / RIGHT COMPUTER ---->
<div class="order-lg-3 col-lg mt-2 mt-lg-0 ml-lg-2 mb-2" style="overflow-y:auto; ">
<!-- RELATIONSHIPS -------------------------
- make sure only one has active in the class
-------------------------------------------->
<div id="REL_CAROUSEL" class="d-flex align-items-center carousel slide" data-pause="false">
<!-- RIGHT ARROW / PREV CAROUSEL -->
<a href="#REL_CAROUSEL" role="button" data-slide="prev" class="carousel-prev mt-5 display-1" style="z-index:10; position:absolute; left:-15px; color:#88a1db;"><i class="fa-regular fa-angle-left"></i></a>
<div class="carousel-inner">
<!-- RELATIONSHIP 1 -------------------->
<div class="active carousel-item"><div class="mt-4 mb-2" style="position:relative;">
<!-- IMG / LINK / REL STATS ------------>
<div class="mt-5 mx-4 mx-lg-3">
<a href="LOREM_LINK" class="p-2 card border-0" style="background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-color:#BG_CC;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/58838498_C6yzAnYXb3qZtyu.jpg?1689486855" alt="" class=" rounded" style="height:200px; width:100%; object-position:top center; object-fit:cover; background-color:rgba(255, 255, 255, 1)"></a>
<!-- rel status -->
<div class="mb-2 mr-5 text-capitalize" style="position:absolute; bottom:0; right:0; color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-weight:800;">LOREM</div>
</div>
<!-- END IMG / LINK / REL STATS -------->
<!-- TEXT BOX -------------------------->
<div class="col-10 pt-2 pb-5" style="position:absolute; top:-40px; right:0; clip-path:polygon(0% 0%, 100% 0%, 100% 75%, 80% 75%, 65% 100%, 60% 75%, 0% 75%); color:#88a1db; background-color:rgba(255, 255, 255, .75);">
<div class="text-center" style="overflow:auto; max-height:80px;">LOREM</div>
</div>
</div></div>
<!-- END RELATIONSHIP 1 ---------------->
<!-- RELATIONSHIP 2 -------------------->
<div class="carousel-item"><div class="mt-4 mb-2" style="position:relative;">
<!-- IMG / LINK / REL STATS ------------>
<div class="mt-5 mx-4 mx-lg-3">
<a href="LOREM_LINK" class="p-2 card border-0" style="background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-color:#BG_CC;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/58838498_C6yzAnYXb3qZtyu.jpg?1689486855" alt="" class=" rounded" style="height:200px; width:100%; object-position:top center; object-fit:cover; background-color:rgba(255, 255, 255, 1)"></a>
<!-- rel status -->
<div class="mb-2 mr-5 text-capitalize" style="position:absolute; bottom:0; right:0; color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-weight:800;">LOREM</div>
</div>
<!-- END IMG / LINK / REL STATS -------->
<!-- TEXT BOX -------------------------->
<div class="col-10 pt-2 pb-5" style="position:absolute; top:-40px; right:0; clip-path:polygon(0% 0%, 100% 0%, 100% 75%, 80% 75%, 65% 100%, 60% 75%, 0% 75%); color:#88a1db; background-color:rgba(255, 255, 255, .75);">
<div class="text-center" style="overflow:auto; max-height:80px;">LOREM</div>
</div>
</div></div>
<!-- END RELATIONSHIP 2 ---------------->
<!-- add more above here -->
</div>
<!-- RIGHT ARROW / NEXT CAROUSEL -->
<a href="#REL_CAROUSEL" role="button" data-slide="next" class="carousel-next mt-5 display-1" style="z-index:10; position:absolute; right:-15px; color:#88a1db;"><i class="fa-regular fa-angle-right"></i></a>
</div>
<!-- END RELATIONSHIPS --------------------->
<!-- PROFILE INFO HEADER ------------------->
<div class="display-4 my-2 text-left text-capitalize" style="color:#fff; text-shadow:1px 2px #88a1db; font-style:italic; font-family:'Times New Roman';">profile info</div>
<!-- MUSIC PLAYER -------------------------->
<div class="d-flex my-2 p-2 rounded" style="background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-color:#BG_CC;">
<!-- MUSIC ----------------------------->
<div class="col-auto mr-2 py-1 px-2" style="color:#88a1db; background-color:rgba(255, 255, 255, 1);">
<iframe src="https://www.youtube.com/embed/YOUTUBE_LINK" frameborder="0" style="z-index:10; position:absolute; top:8px; right:8px; opacity:0; height:20px; width:20px;"></iframe>
<i class="fa-solid fa-compact-disc fa-spin"></i>
</div>
<!-- SONG LINK ------------------------->
<a href="https://www.youtube.com/YOUTUBE_LINK" class="col py-1 px-2 text-capitalize" style="color:#000; background-color:rgba(255, 255, 255, 1); font-style:italic; font-family:'Times New Roman';">LOREM</a>
</div>
<!-- END MUSIC PLAYER ---------------------->
<!-- CHARACTER PROFILE --------------------->
<div class="mt-3 p-2 rounded" style="background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-color:#BG_CC;">
<!-- TH FAVE BUTTON --------------------
- you don't need to touch anything
- except change colors or input bg image
---------------------------------------->
<a href="#" data-toggle="th-favorite" class="d-flex mb-2 py-1 text-capitalize" style="background-color:rgba(255, 255, 255, 1); color:#000;">
<!-- favorite character -->
<span class="favorite" data-toggle="tooltip" title="Favorite">
<span class="py-1 pl-2 pr-1" style="color:#88a1db;"><i class="fa-regular fa-heart"></i></span>
<span class="py-2 px-1" style="background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-color:#BG_CC;"></span>
<span class="px-2" style="color:#000;">favorite</span>
</span>
<!-- unfave character -->
<span class="unfavorite" data-toggle="tooltip" title="Unfavorite">
<span class="py-1 pl-2 pr-1" style="color:#88a1db;"><i class="fa-solid fa-heart"></i></span>
<span class="py-2 px-1" style="background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-color:#BG_CC;"></span>
<span class="px-2" style="color:#000;">unfavorite</span>
</span>
</a>
<!-- COMMENTS ------------------------->
<div class="d-flex mb-2" data-toggle="tooltip" title="Comment">
<div class="col-auto mr-2 py-1 px-2" style="background-color:rgba(255, 255, 255, 1);">
<a href="CHAR_LINK/comments" class="col py-1 px-0 text-capitalize" style="color:#88a1db; background-color:rgba(255, 255, 255, 1); font-style:italic; font-family:'Times New Roman';"><i class="fa-solid fa-comment"></i></a>
</div>
<a href="CHAR_LINK/comments" class="col py-1 px-2 text-capitalize" style="color:#000; background-color:rgba(255, 255, 255, 1);">comment</a>
</div>
<!-- GALLERY ------------------------->
<div class="d-flex" data-toggle="tooltip" title="Images / Gallery">
<div class="col-auto mr-2 py-1 px-2" style="background-color:rgba(255, 255, 255, 1);">
<a href="CHAR_LINK/gallery" class="col py-1 px-0 text-capitalize" style="color:#88a1db; background-color:rgba(255, 255, 255, 1); font-style:italic; font-family:'Times New Roman';"><i class="fa-solid fa-image"></i></a>
</div>
<a href="CHAR_LINK/gallery" class="col py-1 px-2 text-capitalize" style="color:#000; background-color:rgba(255, 255, 255, 1);">gallery</a>
</div>
</div>
<!-- END CHARACTER PROFILE ----------------->
<!-- CHARACTER CREDITS --------------------->
<div data-toggle="tooltip" title="Creator Link" class="mt-3 p-2 rounded" style="background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-color:#BG_CC;">
<!-- CREATOR -->
<div class="d-flex mb-2">
<div class="col-auto mr-2 py-1 px-2" style="background-color:rgba(255, 255, 255, 1);">
<a href="LOREM_LINK" class="col py-1 px-0 text-capitalize" style="color:#88a1db; background-color:rgba(255, 255, 255, 1); font-style:italic; font-family:'Times New Roman';"><i class="fa-solid fa-palette"></i></a>
</div>
<a href="LOREM_LINK" class="col py-1 px-2" style="color:#000; background-color:rgba(255, 255, 255, 1);">LOREM</a>
</div>
<!-- WORLD -->
<div class="d-flex mb-2" data-toggle="tooltip" title="World Link">
<div class="col-auto mr-2 py-1 px-2" style="background-color:rgba(255, 255, 255, 1);">
<a href="LOREM_LINK" class="col py-1 px-0 text-capitalize" style="color:#88a1db; background-color:rgba(255, 255, 255, 1); font-style:italic; font-family:'Times New Roman';"><i class="fa-solid fa-globe"></i></a>
</div>
<a href="LOREM_LINK" class="col py-1 px-2 text-capitalize" style="color:#000; background-color:rgba(255, 255, 255, 1);">LOREM</a>
</div>
<!-- WORTH -->
<div class="d-flex" data-toggle="tooltip" title="Worth">
<div class="col-auto mr-2 py-1 px-2" style="color:#88a1db; background-color:rgba(255, 255, 255, 1);">
<i class="fa-solid fa-dollar px-1"></i>
</div>
<div class="col py-1 px-2 text-capitalize" style="color:#000; background-color:rgba(255, 255, 255, 1);">LOREM</div>
</div>
</div>
<!-- END CHARACTER CREDITS ----------------->
<!-- TAGS ---------------------------------->
<div class="my-3 mx-1 text-center">
<div class="display-4 mb-2 text-left text-capitalize" style="color:#fff; text-shadow:1px 2px #88a1db; font-style:italic; font-family:'Times New Roman';">tags</div>
<div class="mx-2">
<a href="https://toyhou.se/Ansuperope/characters/folder:all/tags:1/taga:1/tagged:LOREM_TAG" class="badge rounded-pill m-1 px-2 text-lowercase" style="color:#fff; background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-color:#BG_CC;">LOREM_TAG</a>
<a href="https://toyhou.se/Ansuperope/characters/folder:all/tags:1/taga:1/tagged:LOREM_TAG" class="badge rounded-pill m-1 px-2 text-lowercase" style="color:#fff; background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-color:#BG_CC;">LOREM_TAG</a>
<a href="https://toyhou.se/Ansuperope/characters/folder:all/tags:1/taga:1/tagged:LOREM_TAG" class="badge rounded-pill m-1 px-2 text-lowercase" style="color:#fff; background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-color:#BG_CC;">LOREM_TAG</a>
<a href="https://toyhou.se/Ansuperope/characters/folder:all/tags:1/taga:1/tagged:LOREM_TAG" class="badge rounded-pill m-1 px-2 text-lowercase" style="color:#fff; background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-color:#BG_CC;">LOREM_TAG</a>
<a href="https://toyhou.se/Ansuperope/characters/folder:all/tags:1/taga:1/tagged:LOREM_TAG" class="badge rounded-pill m-1 px-2 text-lowercase" style="color:#fff; background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-color:#BG_CC;">LOREM_TAG</a>
<a href="https://toyhou.se/Ansuperope/characters/folder:all/tags:1/taga:1/tagged:LOREM_TAG" class="badge rounded-pill m-1 px-2 text-lowercase" style="color:#fff; background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-color:#BG_CC;">LOREM_TAG</a>
<!-- add more above here -->
</div>
</div>
<!-- END TAGS ------------------------------>
</div>
<!-- END PROFILE - TOP MOBILE / RIGHT COMPUTER -->
<!-- MAIN CODE - BOTTOM MOBILE / LEFT COMPUTER --
- z-index:0
- if you want it to be behindcharacter image
-
- z-index:10
- or any number greater than 0 to make it
- infront of image
------------------------------------------------>
<div class="order-lg-2 col-lg-8 d-flex row no-gutters" style="overflow:hidden; position:relative; border-radius:10px;
background-image:url('https://images.unsplash.com/photo-1486246772917-8947d0f7f541?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-color:#BG_CC;
background-size:cover; background-position:center top; background-repeat:no-repeat;">
<!-- TOP DECOR ----------------------------->
<div class="col-12 d-flex my-3" style="z-index:0;">
<div class="col-7 mr-2 pt-2" style="background-color:rgba(255, 255, 255, 1);"></div>
<div class="mr-2 pt-2 px-4" style="background-color:rgba(255, 255, 255, 1);"></div>
<div class="mr-2 pt-2 px-2" style="background-color:rgba(255, 255, 255, 1);"></div>
<div class="pt-2 px-1" style="background-color:rgba(255, 255, 255, 1);"></div>
</div>
<!-- END TOP DECOR ------------------------->
<!-- NAME + SUB TEXT ----------------------->
<div class="col mx-3 mb-3 text-capitalize" style="z-index:1; color:#fff; font-style:italic; font-family:'Times New Roman';">
<div class="display-1" style="text-shadow:2px 2px #88a1db;">LOREM</div>
<div class="ml-5 display-4">LOREM</div>
</div>
<!-- END NAME + SUB TEXT ------------------->
<!-- CHARACTER INFO ------------------------>
<div class="col-10 d-flex my-5 mx-auto" style="position:relative; z-index:10; height:410px; background-color:rgba(255, 255, 255, .75);">
<!-- LEFT DECOR ------------------------>
<div class="col-5 my-3" style="position:absolute; top:0; height:100%;"><div class="card rounded-0 faded" style="height:30%; border-width:2px 0 0 2px; background-color:transparent; border-color:#88a1db;"></div></div>
<!-- MIDDLE BOX ------------------------>
<div class="col d-flex row no-gutters my-auto mx-4 mx-lg-5" style="height:90%;">
<!-- TAB CONTENT -------------------
- make sure id is different than one
- another and match a href in nav
-
- id should NOT have # and no spaces
-
- only one tab and its href in the
- nav should have active in the class
-
- active tab should have show in class
------------------------------------>
<div class="tab-content col-12 mt-3" style="overflow:auto; max-height:330px;">
<!-- TAB 1 --------------------->
<div id="TAB_ID1" class="active show tab-pane fade">
<div class="row no-gutters mb-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">name</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right text-capitalize">LOREM</div>
</div>
<div class="row no-gutters mb-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">pronunciation</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">age</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">gender</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">pronouns </div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">birthday</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right text-capitalize">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">species</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">height</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">role</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<div class="row no-gutters my-1 justify-content-between align-items-end">
<div class="col-auto text-capitalize" style="color:#88a1db; font-style:italic; font-family:'Times New Roman'; font-size:18px;">sexuality</div>
<div class="col mb-2 mx-1" style="border-bottom:1px dashed #88a1db;"></div>
<div class="col-auto text-right">LOREM</div>
</div>
<!-- add more above here -->
</div>
<!-- END TAB 1 ----------------->
<!-- TAB 2 --------------------->
<div id="TAB_ID2" class="tab-pane fade">
<!-- ABOUT HEADER ---------->
<div class="row no-gutters align-items-end display-3 text-capitalize">
<div class="mx-4" style="color:#88a1db; font-style:italic; font-family:'Times New Roman';">about</div>
<div class="col-10"><hr class="my-0" style="background-color:#88a1db;"></div>
<div class="col-10 ml-4"><hr class="my-1" style="background-color:#88a1db;"></div>
</div>
<!-- END ABOUT HEADER ------>
<!-- ABOUT INFO ------------>
<div class="mx-1">
<div class="my-2"><span class="ml-3"></span>LOREM</div>
<div class="my-2"><span class="ml-3"></span>LOREM</div>
<div class="my-2"><span class="ml-3"></span>LOREM</div>
<!-- add more above here -->
</div>
<!-- END ABOUT INFO -------->
</div>
<!-- END TAB 2 ----------------->
<!-- TAB 3 --------------------->
<div id="TAB_ID3" class="tab-pane fade">
<!-- ABILITY 1 ------------->
<div>
<!-- HEADER -->
<div class="row no-gutters align-items-end pl-3 text-capitalize" style="color:#88a1db; font-style:italic; border-bottom:1px dashed #88a1db;">
<div class="col" style="font-size:20px; font-family:'Times New Roman';">ability
<span style="font-size:15px;">1</span>
</div>
<div class="col-auto mb-1" style="font-size:10px;">LOREM</div>
</div>
<!-- INFO -->
<div class="my-1"><span class="mx-2"></span>LOREM</div>
<!-- add more above here -->
</div>
<!-- END ABILITY 1 --------->
<!-- ABILITY 2 ------------->
<div class="mt-3">
<!-- HEADER -->
<div class="row no-gutters align-items-end pl-3 text-capitalize" style="color:#88a1db; font-style:italic; border-bottom:1px dashed #88a1db;">
<div class="col" style="font-size:20px; font-family:'Times New Roman';">ability
<span style="font-size:15px;">2</span>
</div>
<div class="col-auto mb-1" style="font-size:10px;">LOREM</div>
</div>
<!-- INFO -->
<div class="my-1"><span class="mx-2"></span>LOREM</div>
<!-- add more above here -->
</div>
<!-- END ABILITY 2 --------->
<!-- ABILITY 3 ------------->
<div class="mt-3">
<!-- HEADER -->
<div class="row no-gutters align-items-end pl-3 text-capitalize" style="color:#88a1db; font-style:italic; border-bottom:1px dashed #88a1db;">
<div class="col" style="font-size:20px; font-family:'Times New Roman';">ability
<span style="font-size:15px;">3</span>
</div>
<div class="col-auto mb-1" style="font-size:10px;">LOREM</div>
</div>
<!-- INFO -->
<div class="my-1"><span class="mx-2"></span>LOREM</div>
<!-- add more above here -->
</div>
<!-- END ABILITY 3 --------->
</div>
<!-- END TAB 2 ----------------->
<!-- TAB 4 --------------------->
<div id="TAB_ID4" class="tab-pane fade">
<!-- DESIGN NOTES ---------->
<div>
<!-- HEADER -->
<div class="row no-gutters align-items-end pl text-capitalize" style="font-style:italic;">
<div class="col display-3" style="color:#88a1db; font-size:20px; font-family:'Times New Roman';">design notes</div>
</div>
<!-- INFO -->
<div class="my-1 mx-3">
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<!-- add more above here -->
</div>
</div>
<!-- END DESIGN NOTES ------>
<!-- LIKES ----------------->
<div class="mt-3">
<!-- HEADER -->
<div class="row no-gutters align-items-end pl text-capitalize" style="font-style:italic;">
<div class="col display-3" style="color:#88a1db; font-size:20px; font-family:'Times New Roman';">likes</div>
</div>
<!-- INFO -->
<div class="my-1 mx-3">
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<!-- add more above here -->
</div>
</div>
<!-- END LIKES ------------->
<!-- DISLIKES -------------->
<div class="mt-3">
<!-- HEADER -->
<div class="row no-gutters align-items-end pl text-capitalize" style="font-style:italic;">
<div class="col display-3" style="color:#88a1db; font-size:20px; font-family:'Times New Roman';">dislikes</div>
</div>
<!-- INFO -->
<div class="my-1 mx-3">
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<!-- add more above here -->
</div>
</div>
<!-- END DISLIKES ---------->
<!-- TRIVIA ---------------->
<div class="mt-3">
<!-- HEADER -->
<div class="row no-gutters align-items-end pl text-capitalize" style="font-style:italic;">
<div class="col display-3" style="color:#88a1db; font-size:20px; font-family:'Times New Roman';">trivia</div>
</div>
<!-- INFO -->
<div class="my-1 mx-3">
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<div class="d-flex no-gutters"><i class="pt-1 fa-regular fa-bookmark"></i>
<div class="col ml-2 ">LOREM</div></div>
<!-- add more above here -->
</div>
</div>
<!-- END TRIVIA ------------>
</div>
<!-- END TAB 4 ----------------->
<!-- add more above here -->
</div>
<!-- END TAB CONTENT --------------->
<!-- TAB NAVIGATION BUTTONS ---------
- make sure href is different from one
- another and match an id in tab
-
- href should have # and no spaces
-
- only one href and id in tab content
- should have active in the class
------------------------------------>
<div class="col-12 d-flex row no-gutters text-center">
<a href="#COLLAPSE_ID" data-toggle="collapse" role="button" aria-expanded="false" class="col-12" style="color:#88a1db;"><i class="fa-solid fa-caret-down"></i></a>
<!-- DROP DOWN MENU ------------>
<div id="COLLAPSE_ID" class="collapse text-center mx-auto"><ul class="nav card" style="border-color:#88a1db; background-color:rgba(255, 255, 255, .75); font-variant:small-caps;">
<li class="nav-item mx-1" style="border-bottom:1px dashed #88a1db;"><a href="#TAB_ID1" data-toggle="tab" class="active nav-link" style="color:#88a1db;">basic</a></li>
<li class="nav-item mx-1" style="border-bottom:1px dashed #88a1db;"><a href="#TAB_ID2" data-toggle="tab" class="nav-link" style="color:#88a1db;">about</a></li>
<li class="nav-item mx-1" style="border-bottom:1px dashed #88a1db;"><a href="#TAB_ID3" data-toggle="tab" class="nav-link" style="color:#88a1db;">abilities</a></li>
<!-- add more above here -->
<li class="nav-item"><a href="#TAB_ID4" data-toggle="tab" class="nav-link" style="color:#88a1db;">extra</a></li>
</ul></div>
<!-- END DROP DOWN MENU -------->
</div>
<!-- END TAB NAVIGATION BUTTONS ---->
</div>
<!-- END MIDDLE BOX -------------------->
<!-- RIGHT DECOR ----------------------->
<div class="col-4 mb-3" style="position:absolute; bottom:0; right:0; height:100%;"><div style="height:70%;"></div><div class="card rounded-0 faded" style="height:30%; border-width:0 2px 2px 0; background-color:transparent; border-color:#88a1db;"></div></div>
</div>
<!-- END CHARACTER INFO -------------------->
<!-- QUOTE --------------------------------->
<div class="col-11 my-3 mx-auto display-4" style="z-index:1; color:#fff; font-style:italic; font-family:'Times New Roman'; text-shadow:2px 2px #88a1db;">
<!-- first half of quote -->
<div class="col-9 row no-gutters">
<i class="fa-solid fa-quote-left"></i>
<div class="col ml-3 pt-3">LOREM</div>
</div>
<!-- second half of quote -->
<div class="col-9 ml-auto row no-gutters align-items-end text-right">
<div class="col mr-3 pb-3">LOREM</div>
<i class="fa-solid fa-quote-right"></i>
</div>
</div>
<!-- END QUOTE ----------------------------->
<!-- BOTTOM DECOR -------------------------->
<div class="col-12 d-flex my-3 justify-content-end" style="z-index:0;">
<div class="pt-2 px-1" style="background-color:rgba(255, 255, 255, 1);"></div>
<div class="ml-2 pt-2 px-2" style="background-color:rgba(255, 255, 255, 1);"></div>
<div class="ml-2 pt-2 px-4" style="background-color:rgba(255, 255, 255, 1);"></div>
<div class="col-7 ml-2 pt-2" style="background-color:rgba(255, 255, 255, 1);"></div>
</div>
<!-- END BOTTOM DECOR ---------------------->
<!-- CHARACTER IMAGE -----------------------
- you might need to mess with image position
- to make it look nice or right value
-
- left number is horintal (x axis)
- right number is vertical (y axis)
-
- will look better if image is transparent
-------------------------------------------->
<div style="position:absolute; top:0; right:0px; height:100%; width:100%;
background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/30558913_RVHLwslAUnfKGVv.png?1641885769');
background-size:cover; background-position:-50px 0px; background-repeat:no-repeat;"></div>
</div>
<!-- END MAIN CODE - BOTTOM MOBILE / LEFT COMPUTER -->
<!-- CREDITS - FEEL FREE TO MOVE --------------->
<div class="order-lg-4 col-12 mt-1 row no-gutters align-items-center text-center" style="font-size:10px;">
<div class="col"><hr style="background-color:rgba(255, 255, 255, 1);"></div>
<div class="col-auto mx-1">
<a href="https://toyhou.se/12087247.-genshin-character-splash" data-toggle="tooltip" title="Inspo Credit"><i class="fa-regular fa-sparkle fa-xs" style="color:rgba(255, 255, 255, 1);"></i></a>
<a href="https://toyhou.se/25721501.gossip" data-toggle="tooltip" title="Code Credit"><i class="fa-solid fa-trash" style="color:rgba(255, 255, 255, 1);"></i></a>
<a href="https://unsplash.com/photos/a-close-up-view-of-ice-and-water-Bycd2wF5vQU" data-toggle="tooltip" title="Background Image Credit"><i class="fa-regular fa-sparkle fa-xs" style="color:rgba(255, 255, 255, 1);"></i></a>
</div>
<div class="col"><hr style="background-color:rgba(255, 255, 255, 1);"></div>
</div>
<!-- END CREDITS ------------------------------->
</div>
<!-- END - CHARACTER CODE -------------------------->
<!-- MARGIN BOTTOM - SHOWN DEFAULT ----------------->
<div class="FAKE_CSS collapse show" style="transition:0s; position:relative;">
<!-- COMPUTER & MEDIUM DEVICE MARGIN -->
<div class="hidden-sm-down" style="margin-bottom:-150px;"></div>
<!-- MOBILE MARGIN -->
<div class="hidden-lg-up" style="margin-bottom:-150px;"></div>
</div>
<!-- END MARGIN BOTTOM - SHOWN DEFAULT ------------->
<!-- BUTTON - DO NOT DELETE ------------------------>
<div class="mb-2 mx-3" style="z-index:100; position:fixed; bottom:0; right:0;">
<!-- DEFAULT - TURNS OFF CSS ------------------->
<div class="FAKE_CSS collapse show" style="transition:0s;">
<a href=".FAKE_CSS" data-toggle="collapse" role="button" aria-expanded="true" class="btn btn-sm" style="color:#fff; background-color:#88a1db; filter:drop-shadow(8px 8px 10px #000);">Disable CSS</a>
</div>
<!-- END DEFAULT - TURNS OFF CSS --------------->
<!-- DEFAULT - TURNS OFF CSS ------------------->
<div class="FAKE_CSS collapse" style="transition:0s;">
<a href=".FAKE_CSS" data-toggle="collapse" role="button" aria-expanded="false" class="btn btn-secondary btn-sm">Enables CSS</a>
</div>
<!-- END DEFAULT - TURNS OFF CSS --------------->
</div>
<!-- END BUTTON - DO NOT DELETE -->