Twins / Dec 2023
created by:AnsuCodes
HTMLCustom ColorsMixed ColorsBootstrapCharacter
Copy
<!-------------------------------------------------------
BOOTSTRAP COLORS
- MAIN / LINKS: bg-secondary / text-secondary
- BOX BG: bg-faded
- SEC bg-dark / text-dark
CUSTOM COLORS
- TEXT COLOR: #CC_TEXT
- MAIN / LINKS: #CC_MAIN
- BOX BG: #CC_BOX
- SEC: #CC_SEC
TIPS & HELPFUL INFO
SHORT CUTS:
"Ctrl" + "F" - find, replace, delete and edit text faster
"Ctrl" + "Z" - undo
"Ctrl" + "Y" - redo
LIVE CODE EDITOR (highly recommend using):
https://th.circlejourney.net/
HELP THREAD / ASK FOR HELP HERE:
https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
BOOSTRAP COLORS:
https://getbootstrap.com/docs/4.0/utilities/colors/
ICONS (you can use ones labled pro):
https://fontawesome.com/search
COLOR PICKER WEBSITE:
https://imagecolorpicker.com/color-code/2596be
-------------------------------------------------------->
<!-- BACKGROUND IMAGE ---------------------------------->
<div class="h-100 w-100" style="z-index:-1000; position:absolute; top:0; bottom:0; left:0; background-image:url(''); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
<!-- END BACKGROUND IMAGE ------------------------------>
<!-- TOP INFO / 3 BOXES -------------------------------->
<div class="row no-gutters d-flex align-items-end h-100" style="color:#CC_TEXT;">
<!-- IMAGE ----------------------------------------->
<div class="col-12 col-lg-3 py-1 card rounded-0 bg-dark" style="background-color:#CC_SEC;"><div class="card border-left-0 border-right-0 rounded-0 p-2 bg-faded" style="background-color:#CC_BOX;">
<div class="bg-secondary" style="height:200px; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/61892970_HX4HtyfLXg2cYzv.png?1678054815'); background-position:top center; background-size:150%; background-repeat:no-repeat; background-color:#CC_MAIN;"></div>
</div></div>
<!-- END IMAGE ------------------------------------->
<!-- NAME + ICON ----------------------------------->
<div class="col-12 col-lg-9 align-items-end row no-gutters">
<!-- NAME -------------------------------------->
<div class="col-12 col-lg mt-2 mr-2 mx-lg-2">
<hr class="mt-0 mb-1 bg-dark" style="background-color:#CC_SEC;">
<hr class="mt-0 mb-2 mx-2 bg-faded" style="background-color:#CC_BOX;">
<div class="mx-2 pt-1 py-2 justify-content-center display-3 bg-secondary" style="font-variant:small-caps; font-style:italic; background-color:#CC_MAIN;">
<!-- NAME -->
<div class="justify-content-center" style="position:absolute;font-variant:small-caps; font-style:italic;">
<div class="text-left" style="">Twin 1</div>
<div class="my-2 mx-3">&</div>
<div class="mt-4 text-right">Twin 2</div>
</div>
<!-- END NAME -->
<!-- SHADOW -->
<div class="ml-1 justify-content-center text-dark" style="color:#CC_SEC;">
<div class="text-left">Twin 1</div>
<div class="my-2 mx-3">&</div>
<div class="mt-4 text-right">Twin 2</div>
</div>
<!-- END SHADOW -->
</div>
<hr class="mt-2 mb-0 mx-2 bg-faded" style="background-color:#CC_BOX;">
<hr class="mt-1 mb-0 bg-dark" style="background-color:#CC_SEC;">
</div>
<!-- END NAME ---------------------------------->
<!-- DECOR / ONLY VISIBLE ON COMPUTER ---------->
<div class="col-auto d-none d-lg-block">
<hr class="mt-0 mb-1 bg-dark" style="background-color:#CC_SEC;">
<hr class="mt-0 mb-2 mx-2 bg-faded" style="background-color:#CC_BOX;">
<div class="ml-n1 card border-top-0 border-bottom-0 rounded-0 px-2 display-4 bg-transparent" style="border-color:#CC_SEC;"><div class="mx-1 py-4 px-3 bg-secondary" style="background-color:#CC_MAIN;">
<div class="mt-1 text-dark" style="position:absolute; transform:rotate(-145deg); color:#CC_SEC;"><i class="fa-light fa-salt-shaker fa-shake"></i></div>
<div style="transform:rotate(-145deg);"><i class="fa-light fa-salt-shaker fa-shake"></i></div>
</div></div>
<hr class="mt-2 mb-0 mx-2 bg-faded" style="background-color:#CC_BOX;">
<hr class="mt-1 mb-0 bg-dark" style="background-color:#CC_SEC;">
</div>
<!-- END DECOR / ONLY VISIBLE ON COMPUTER ------>
</div>
<!-- END NAME + ICON ------------------------------->
</div>
<!-- TOP INFO / 3 BOXES -------------------------------->
<!-- BOTTOM INFO --------------------------------------->
<div class="row no-gutters" style="color:#CC_TEXT;">
<!-- REF AND DESIGN NOTES -------------------------->
<div class="col-12 col-lg-3 mt-2 px-1 card rounded-0 bg-dark" style="background-color:#CC_SEC;"><div class="p-2 card rounded-0 border-top-0 border-bottom-0 bg-faded" style="background-color:#CC_BOX;">
<!-- REF PICS ---------------------------------->
<div id="REF_CAROUSEL" class="carousel slide">
<!-- PICTURES ----------------------------->
<div class="carousel-inner">
<!-- 1 - ACTIVE ----------------------->
<div class="carousel-item active">
<div class="bg-secondary" style="height:350px; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/61892970_HX4HtyfLXg2cYzv.png?1678054815'); background-position:center; background-size:cover; background-repeat:no-repeat; background-color:#CC_MAIN;"></div>
<!-- image cred -->
<div class="card px-1 rounded-0 m-1" style="position:absolute; top:0; left:0; background-color:#CC_SEC;"><a href="" title="Image Credit" class="text-secondary" style="color:#CC_MAIN;"><i class="fa-solid fa-paintbrush fa-xs"></i></a></div>
<!-- image link -->
<div class="card px-1 rounded-0 m-1" style="position:absolute; top:0; right:0; background-color:#CC_SEC;"><a href="" title="Image Link" class="text-secondary" style="color:#CC_MAIN;"><i class="fa-solid fa-image fa-xs"></i></a></div>
</div>
<!-- END 1 - ACTIVE ------------------->
<!-- 2 -------------------------------->
<div class="carousel-item">
<div class="bg-secondary" style="height:350px; background-image:url('https://th.bing.com/th/id/OIP.edsEIWxcNIA9PYvmkZlN3QHaEK?rs=1&pid=ImgDetMain'); background-position:center; background-size:cover; background-repeat:no-repeat; background-color:#CC_MAIN;"></div>
<!-- image cred -->
<div class="card px-1 rounded-0 m-1" style="position:absolute; top:0; left:0; background-color:#CC_SEC;"><a href="" title="Image Credit" class="text-secondary" style="color:#CC_MAIN;"><i class="fa-solid fa-paintbrush fa-xs"></i></a></div>
<!-- image link -->
<div class="card px-1 rounded-0 m-1" style="position:absolute; top:0; right:0; background-color:#CC_SEC;"><a href="" title="Image Link" class="text-secondary" style="color:#CC_MAIN;"><i class="fa-solid fa-image fa-xs"></i></a></div>
</div>
<!-- END 2 ---------------------------->
<!-- add more above here ------------
-- make sure only one says active -->
</div>
<!-- END PICTURES ------------------------->
<!-- BUTTONS ------------------------------>
<ol class="carousel-indicators mb-0">
<li data-target="#REF_CAROUSEL" data-slide-to="0" class="active" style="background-color:#CC_SEC;"></li>
<li data-target="#REF_CAROUSEL" data-slide-to="1" style="background-color:#CC_SEC;"></li>
<!-- add more above here -----------
-- make sure only one has active -->
</ol>
<!-- END BUTTONS -------------------------->
</div>
<!-- END REF PICS ------------------------------>
<!-- QUICK INFO -------------------------------->
<div class="my-2">
<!-- HEIGHT -->
<div class="card mt-1 rounded-0" style="background-color:#CC_SEC;"><div class="p-2 row no-gutters">
<div class="col-auto bg-secondary py-1 px-2 mr-2 align-items-center" style="background-color:#CC_MAIN;"><i class="fa-regular fa-ruler-vertical"></i></div>
<div class="col" style="font-variant:small-caps;">content</div>
</div></div>
<!-- AGE -->
<div class="card mt-1 rounded-0" style="background-color:#CC_SEC;"><div class="p-2 row no-gutters">
<div class="col-auto bg-secondary py-1 px-1 mr-2 align-items-center" style="background-color:#CC_MAIN;"><i class="fa-regular fa-birthday-cake"></i></div>
<div class="col" style="font-variant:small-caps;">content</div>
</div></div>
<!-- SPECIES -->
<div class="card mt-1 rounded-0" style="background-color:#CC_SEC;"><div class="p-2 row no-gutters">
<div class="col-auto bg-secondary py-1 px-1 mr-2 align-items-center" style="background-color:#CC_MAIN;"><i class="fa-regular fa-globe"></i></div>
<div class="col" style="font-variant:small-caps;">content</div>
</div></div>
<!-- WORTH -->
<div class="card mt-1 rounded-0" style="background-color:#CC_SEC;"><div class="p-2 row no-gutters">
<div class="col-auto bg-secondary py-1 px-2 mr-2 align-items-center" style="background-color:#CC_MAIN;"><i class="fa-regular fa-dollar"></i></div>
<div class="col" style="font-variant:small-caps;">content</div>
</div></div>
</div>
<!-- END QUICK INFO ---------------------------->
<!-- DESIGN NOTES ------------------------------>
<div style="overflow:auto; max-height:185px;">
<!-- 1 -->
<div class="mb-2 row no-gutters">
<div class="col-auto bg-secondary py-1 px-1 mr-2 align-items-center" style="background-color:#CC_MAIN;"><i class="fa-regular fa-pen"></i></div>
<div class="col" style="font-variant:small-caps;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</div>
</div>
<!-- 2 -->
<div class="my-2 row no-gutters">
<div class="col-auto bg-secondary py-1 px-1 mr-2 align-items-center" style="background-color:#CC_MAIN;"><i class="fa-regular fa-pen"></i></div>
<div class="col" style="font-variant:small-caps;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</div>
</div>
<!-- add more above here -->
<!-- 3 -->
<div class="mt-2 row no-gutters">
<div class="col-auto bg-secondary py-1 px-1 mr-2 align-items-center" style="background-color:#CC_MAIN;"><i class="fa-regular fa-pen"></i></div>
<div class="col" style="font-variant:small-caps;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</div>
</div>
</div>
<!-- END DESIGN NOTES -------------------------->
</div></div>
<!-- END REF AND DESIGN NOTES ---------------------->
<!-- RIGHT CONTENT / EVERYTHING ELSE --------------->
<div class="col-12 col-lg-9 pt-2 pl-lg-2 row no-gutters h-100">
<!-- TOP LONG BOX / COLOR PALETTE -------------->
<div class="col-12 card rounded-0 bg-dark px-1" style="background-color:#CC_SEC;"><div class="card rounded-0 p-1 border-right-0 border-left-0 bg-faded" style="background-color:#CC_BOX;"><div class="row no-gutters">
<div class="col mr-1 p-1" style="background-color:#685c56;"></div>
<div class="col mr-1 p-1" style="background-color:#cc8e69;"></div>
<div class="col mr-1 p-1" style="background-color:#c2bab2;"></div>
<div class="col mr-1 p-1" style="background-color:#46352d;"></div>
<!-- add more above here -->
<div class="col p-1" style="background-color:#544944;"></div>
</div></div></div>
<!-- END TOP LONG BOX / COLOR PALETTE ---------->
<!-- BOTTOM 3 BOXES / TWIN / GENERAL ----------->
<div class="row no-gutters">
<!-- 2 BOXES / TWINS ----------------------->
<div class="col-12 col-lg-6">
<!-- TWIN 1 ---------------------------->
<div class="mt-2 card rounded-0 py-1 bg-dark" style="background-color:#CC_SEC;"><div class="card rounded-0 p-2 border-right-0 border-left-0 bg-faded" style="max-height:400px; background-color:#CC_BOX;">
<!-- NAME -->
<div class="card rounded-0 mt-1 mb-2 p-1" style="background-color:#CC_SEC;"><div class="bg-secondary text-center display-4 pb-1" style="font-variant:small-caps; background-color:#CC_MAIN;">Name</div></div>
<!-- INFO + PIC -------------------->
<div class="row no-gutters">
<!-- SHORT INFO ---------------->
<div class="col-6 mr-2"><div class="card rounded-0" style="background-color:#CC_SEC;">
<!-- GENDER -->
<div class="row no-gutters mx-1 p-2">
<div class="col-auto bg-secondary py-1 px-2 mr-2 align-items-center" style="background-color:#CC_MAIN;"><i class="fa-regular fa-venus-mars"></i></div>
<div class="col" style="font-variant:small-caps;">gender</div>
</div>
<div class="card my-0 mx-2 border-top-0" style="background-color:#CC_MAIN;"></div>
<!-- SEXUALITY -->
<div class="row no-gutters mx-1 p-2">
<div class="col-auto bg-secondary py-1 px-2 mr-2 align-items-center" style="background-color:#CC_MAIN;"><i class="fa-regular fa-heart"></i></div>
<div class="col" style="font-variant:small-caps;">sexuality</div>
</div>
<div class="card my-0 mx-2 border-top-0" style="background-color:#CC_MAIN;"></div>
<!-- SONG -->
<div class="row no-gutters mx-1 p-2">
<div class="col-auto bg-secondary py-1 px-2 mr-2 justify-content-center align-items-center" style="background-color:#CC_MAIN;">
<i class="fa-regular fa-record-vinyl"></i>
<!-- play song -->
<iframe src="https://www.youtube.com/embed/TRWSj95xsTc?si=uf8eXXlWN7z3swqj" frameborder="0" style="position:absolute; opacity:0; height:20px; width:20px;"></iframe>
</div>
<a href="" title="Song Link" class="col text-secondary" style="font-variant:small-caps; color:#CC_MAIN;">song</a>
</div>
</div></div>
<!-- END SHORT INFO ------------>
<!-- IMAGE ---------------------->
<div class="col card rounded-0 p-1" style="background-color:#CC_SEC;"><div class="bg-secondary h-100" style="background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/61892970_HX4HtyfLXg2cYzv.png?1678054815'); background-position:top center; background-size:150%; background-repeat:no-repeat; background-color:#CC_MAIN;"></div></div>
</div>
<!-- END INFO + PIC ---------------->
<!-- PERSONALITY TRAITS ------------>
<div class="mt-2 d-flex justify-content-center">
<div class="m-1 badge bg-secondary" style="background-color:#CC_MAIN;">personality trait</div>
<div class="m-1 badge bg-secondary" style="background-color:#CC_MAIN;">personality trait</div>
<div class="m-1 badge bg-secondary" style="background-color:#CC_MAIN;">personality trait</div>
</div>
<!-- END PERSONALITY TRAITS -------->
<!-- ABOUT ------------------------->
<div class="card py-1 px-2 text-center rounded-0 my-2" style="height:100px; overflow:auto; background-color:#CC_SEC;">
<div class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</div>
</div>
<!-- END ABOUT --------------------->
</div></div>
<!-- END TWIN 1 ------------------------>
<!-- TWIN 2 ---------------------------->
<div class="mt-2 card rounded-0 py-1 bg-dark" style="background-color:#CC_SEC;"><div class="card rounded-0 p-2 border-right-0 border-left-0 bg-faded" style="max-height:400px; background-color:#CC_BOX;">
<!-- NAME -->
<div class="card rounded-0 mt-1 mb-2 p-1" style="background-color:#CC_SEC;"><div class="bg-secondary text-center display-4 pb-1" style="font-variant:small-caps; background-color:#CC_MAIN;">Name</div></div>
<!-- INFO + PIC -------------------->
<div class="row no-gutters">
<!-- SHORT INFO ---------------->
<div class="col-6 mr-2"><div class="card rounded-0" style="background-color:#CC_SEC;">
<!-- GENDER -->
<div class="row no-gutters mx-1 p-2">
<div class="col-auto bg-secondary py-1 px-2 mr-2 align-items-center" style="background-color:#CC_MAIN;"><i class="fa-regular fa-venus-mars"></i></div>
<div class="col" style="font-variant:small-caps;">gender</div>
</div>
<div class="card my-0 mx-2 border-top-0" style="background-color:#CC_MAIN;"></div>
<!-- SEXUALITY -->
<div class="row no-gutters mx-1 p-2">
<div class="col-auto bg-secondary py-1 px-2 mr-2 align-items-center" style="background-color:#CC_MAIN;"><i class="fa-regular fa-heart"></i></div>
<div class="col" style="font-variant:small-caps;">sexuality</div>
</div>
<div class="card my-0 mx-2 border-top-0" style="background-color:#CC_MAIN;"></div>
<!-- SONG -->
<div class="row no-gutters mx-1 p-2">
<div class="col-auto bg-secondary py-1 px-2 mr-2 justify-content-center align-items-center" style="background-color:#CC_MAIN;">
<i class="fa-regular fa-record-vinyl"></i>
<!-- play song -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=pDXBmQpP7-Od4nC6" frameborder="0" style="position:absolute; opacity:0; height:20px; width:20px;"></iframe>
</div>
<a href="" title="Song Link" class="col text-secondary" style="font-variant:small-caps; color:#CC_MAIN;">song</a>
</div>
</div></div>
<!-- END SHORT INFO ------------>
<!-- IMAGE ---------------------->
<div class="col card rounded-0 p-1" style="background-color:#CC_SEC;"><div class="bg-secondary h-100" style="background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/61892970_HX4HtyfLXg2cYzv.png?1678054815'); background-position:top center; background-size:150%; background-repeat:no-repeat; background-color:#CC_MAIN;"></div></div>
</div>
<!-- END INFO + PIC ---------------->
<!-- PERSONALITY TRAITS ------------>
<div class="mt-2 d-flex justify-content-center">
<div class="m-1 badge bg-secondary" style="background-color:#CC_MAIN;">personality trait</div>
<div class="m-1 badge bg-secondary" style="background-color:#CC_MAIN;">personality trait</div>
<div class="m-1 badge bg-secondary" style="background-color:#CC_MAIN;">personality trait</div>
</div>
<!-- END PERSONALITY TRAITS -------->
<!-- ABOUT ------------------------->
<div class="card py-1 px-2 text-center rounded-0 my-2" style="height:100px; overflow:auto; background-color:#CC_SEC;">
<div class="mb-1 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</div>
</div>
<!-- END ABOUT --------------------->
</div></div>
<!-- END TWIN 2 ------------------------>
</div>
<!-- END 2 BOXES / TWINS ------------------>
<!-- GENERAL INFO -------------------------->
<div class="col mt-2 ml-lg-2 px-1 card rounded-0 bg-dark" style="background-color:#CC_SEC;"><div class="card rounded-0 p-1 border-top-0 border-bottom-0 bg-faded" style="overflow:auto; max-height:714px; background-color:#CC_BOX;">
<!-- BACKSTORY SECTION ----------------->
<div class="mb-1">
<!-- HEADER ------------------------>
<div class="mx-2">
<hr class="flex-fill bg-dark" style="background-color:#CC_SEC;">
<div class="pb-1 text-center display-4 text-secondary" style="font-variant:small-caps; color:#CC_MAIN;">Backstory</div>
<!-- BOTTOM LINE --------------->
<div class="d-flex align-items-center">
<hr class="flex-fill bg-dark" style="background-color:#CC_SEC;">
<div class="mx-3">
<i class="fa-regular fa-bracket-curly-left text-dark" style="color:#CC_SEC;"></i>
<i class="fa-regular fa-book-open px-2 text-secondary" style="color:#CC_MAIN;"></i>
<i class="fa-regular fa-bracket-curly-right text-dark" style="color:#CC_SEC;"></i>
</div>
<hr class="flex-fill bg-dark" style="background-color:#CC_SEC;">
</div>
<!-- END BOTTOM LINE ----------->
</div>
<!-- END HEADER -------------------->
<!-- BACKSTORY CONTENT ------------->
<div class="mx-3">
<!-- 1 -->
<div class="my-2 row no-gutters">
<div class="col-auto bg-secondary py-1 px-2 mr-2 align-items-center" style="background-color:#CC_MAIN;"><i class="fa-regular fa-bookmark"></i></div>
<div class="col" style="font-variant:small-caps;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</div>
</div>
<!-- 2 -->
<div class="my-2 row no-gutters">
<div class="col-auto bg-secondary py-1 px-2 mr-2 align-items-center" style="background-color:#CC_MAIN;"><i class="fa-regular fa-bookmark"></i></div>
<div class="col" style="font-variant:small-caps;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</div>
</div>
<!-- 3 -->
<div class="my-2 row no-gutters">
<div class="col-auto bg-secondary py-1 px-2 mr-2 align-items-center" style="background-color:#CC_MAIN;"><i class="fa-regular fa-bookmark"></i></div>
<div class="col" style="font-variant:small-caps;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</div>
</div>
<!-- add more above here -->
</div>
<!-- END BACKSTORY CONTENT --------->
</div>
<!-- END BACKSTORY SECTION ------------->
<!-- RELATIONSHIPS SECTION ------------->
<div class="mb-1">
<!-- HEADER ------------------------>
<div class="mx-2">
<hr class="flex-fill bg-dark" style="background-color:#CC_SEC;">
<div class="pb-1 text-center display-4 text-secondary" style="font-variant:small-caps; color:#CC_MAIN;">Relationships</div>
<!-- BOTTOM LINE --------------->
<div class="d-flex align-items-center">
<hr class="flex-fill bg-dark" style="background-color:#CC_SEC;">
<div class="mx-3">
<i class="fa-regular fa-bracket-curly-left text-dark" style="color:#CC_SEC;"></i>
<i class="fa-regular fa-heart px-2 text-secondary" style="color:#CC_MAIN;"></i>
<i class="fa-regular fa-bracket-curly-right text-dark" style="color:#CC_SEC;"></i>
</div>
<hr class="flex-fill bg-dark" style="background-color:#CC_SEC;">
</div>
<!-- END BOTTOM LINE ----------->
</div>
<!-- END HEADER -------------------->
<!-- RELATIONSHIPS CONTENT --------->
<div class="mt-2 ml-3">
<!-- REL 1 --------------------->
<div class="my-2 d-flex align-items-end">
<div class="col card rounded-0 p-1" style="background-color:#CC_SEC;"><div class="bg-secondary" style="height:150px; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/61892970_HX4HtyfLXg2cYzv.png?1678054815'); background-position:top center; background-size:150%; background-repeat:no-repeat; background-color:#CC_MAIN;"></div></div>
<!-- CHAR INFO -->
<div class="col ml-n2">
<div class="mb-2" style="font-variant:small-caps;">
<a href="" class="text-secondary" style="font-size:18px; color:#CC_MAIN;">name</a>
<div class="mt-n1" style="font-size:12px; color:#CC_SEC;">status</div>
</div>
<div class="card rounded-0 py-1 px-2" style="overflow:auto; max-height:110px; background-color:#CC_SEC;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio</div>
</div>
<!-- END CHAR INFO -->
</div>
<!-- END REL 1 ----------------->
<!-- REL 2 --------------------->
<div class="my-2 d-flex align-items-end">
<div class="col card rounded-0 p-1" style="background-color:#CC_SEC;"><div class="bg-secondary" style="height:150px; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/61892970_HX4HtyfLXg2cYzv.png?1678054815'); background-position:top center; background-size:150%; background-repeat:no-repeat; background-color:#CC_MAIN;"></div></div>
<!-- CHAR INFO -->
<div class="col ml-n2">
<div class="mb-2" style="font-variant:small-caps;">
<a href="" class="text-secondary" style="font-size:18px; color:#CC_MAIN;">name</a>
<div class="mt-n1" style="font-size:12px; color:#CC_SEC;">status</div>
</div>
<div class="card rounded-0 py-1 px-2" style="overflow:auto; max-height:110px; background-color:#CC_SEC;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio</div>
</div>
<!-- END CHAR INFO -->
</div>
<!-- END REL 2 ----------------->
<!-- add more above here -->
</div>
<!-- END RELATIONSHIPS CONTENT ----->
</div>
<!-- END RELATIONSHIPS SECTION --------->
</div></div>
<!-- END GENERAL INFO ---------------------->
</div>
<!-- END BOTTOM 3 BOXES / TWIN / GENERAL ------->
</div>
<!-- END RIGHT CONTENT / EVERYTHING ELSE ----------->
</div>
<!-- END BOTTOM INFO ----------------------------------->
<!-- CREDITS / FEEL FREE TO MOVE ----------------------->
<div class="mt-1 row no-gutters justify-content-center" style="font-size:12px;">
<a href="https://toyhou.se/24813341.f2u-twins" title="Code Credit" class="mr-1 text-secondary" style="color:#CC_MAIN;"><i class="fa-regular fa-trash"></i></a>
<a href="https://toyhou.se/~world/82691.coders-quarters/page/107272.december-challenge" title="Layout Credit" class="text-secondary" style="color:#CC_MAIN;"><i class="fa-regular fa-table-layout"></i></a>
</div>
<!-- END CREDITS / FEEL FREE TO MOVE ------------------->Copy
<!-------------------------------------------------------
LIVE PREVIEW
https://toyhou.se/24813341.f2u-twins-dec-2023
CODE LINK
https://stor8.vercel.app/136
BOOTSTRAP COLORS
- MAIN / LINKS: {{?Use BS for Main?{{u!Main BS!}}?end?}}
- BOX BG: {{?Use BS for Boxes?{{u!Box BS!}}?end?}}
- SEC {{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}
CUSTOM COLORS
- TEXT COLOR: {{?Use CC for Text?{{c!Text Color!}}?end?}}
- MAIN / LINKS: {{?Use CC for Main?{{c!Main Color!}}?end?}}
- BOX BG: {{?Use CC for Boxes?{{c!Box Color!}}?end?}}
- SEC: {{?Use CC for Sec?{{c!Sec Color!}}?end?}}
TIPS & HELPFUL INFO
SHORT CUTS:
"Ctrl" + "F" - find, replace, delete and edit text faster
"Ctrl" + "Z" - undo
"Ctrl" + "Y" - redo
SAFEHOUSE
https://safehou-se.vercel.app/
LIVE CODE EDITOR (highly recommend using):
https://th.circlejourney.net/
HELP THREAD / ASK FOR HELP HERE:
https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
BOOSTRAP COLORS:
https://getbootstrap.com/docs/4.0/utilities/colors/
ICONS (you can use ones labled pro):
https://fontawesome.com/search
COLOR PICKER WEBSITE:
https://imagecolorpicker.com/color-code/2596be
-------------------------------------------------------->
<!-- BACKGROUND IMAGE ---------------------------------->
{{?Background Optional?
<div class="h-100 w-100" style="z-index:-1000; position:absolute; top:0; bottom:0; left:0; background-image:url('{{u!Background Image!}}'); background-color:{{c!Background Color!}}background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
?end?}}
<!-- END BACKGROUND IMAGE ------------------------------>
<!-- TOP INFO / 3 BOXES -------------------------------->
<div class="row no-gutters d-flex align-items-end h-100" style="color:{{?Use CC for Text?{{c!Text Color!}}?end?}};">
<!-- IMAGE ----------------------------------------->
<div class="col-12 col-lg-3 py-1 card rounded-0 bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><div class="card border-left-0 border-right-0 rounded-0 p-2 bg-{{?Use BS for Boxes?{{u!Box BS!}}?end?}}" style="background-color:{{?Use CC for Boxes?{{c!Box Color!}}?end?}};">
<div class="bg-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="height:200px; background-image:url('{{u!Top Image!}}'); background-position:top center; background-size:150%; background-repeat:no-repeat; background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"></div>
</div></div>
<!-- END IMAGE ------------------------------------->
<!-- NAME + ICON ----------------------------------->
<div class="col-12 col-lg-9 align-items-end row no-gutters">
<!-- NAME -------------------------------------->
<div class="col-12 col-lg mt-2 mr-2 mx-lg-2">
<hr class="mt-0 mb-1 bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
<hr class="mt-0 mb-2 mx-2 bg-{{?Use BS for Boxes?{{u!Box BS!}}?end?}}" style="background-color:{{?Use CC for Boxes?{{c!Box Color!}}?end?}};">
<div class="mx-2 pt-1 py-2 justify-content-center display-3 bg-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="font-variant:small-caps; font-style:italic; background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">
<!-- NAME -->
<div class="justify-content-center" style="position:absolute;font-variant:small-caps; font-style:italic;">
<div class="text-left" style="">{{!Twin 1 Name!}}</div>
<div class="my-2 mx-3">&</div>
<div class="mt-4 text-right">{{!Twin 2 Name!}}</div>
</div>
<!-- END NAME -->
<!-- SHADOW -->
<div class="ml-1 justify-content-center text-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
<div class="text-left">{{!Twin 1 Name!}}</div>
<div class="my-2 mx-3">&</div>
<div class="mt-4 text-right">{{!Twin 2 Name!}}</div>
</div>
<!-- END SHADOW -->
</div>
<hr class="mt-2 mb-0 mx-2 bg-{{?Use BS for Boxes?{{u!Box BS!}}?end?}}" style="background-color:{{?Use CC for Boxes?{{c!Box Color!}}?end?}};">
<hr class="mt-1 mb-0 bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
</div>
<!-- END NAME ---------------------------------->
<!-- DECOR / ONLY VISIBLE ON COMPUTER ---------->
<div class="col-auto d-none d-lg-block">
<hr class="mt-0 mb-1 bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
<hr class="mt-0 mb-2 mx-2 bg-{{?Use BS for Boxes?{{u!Box BS!}}?end?}}" style="background-color:{{?Use CC for Boxes?{{c!Box Color!}}?end?}};">
<div class="ml-n1 card border-top-0 border-bottom-0 rounded-0 px-2 display-4 bg-transparent" style="border-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><div class="mx-1 py-4 px-3 bg-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">
<div class="mt-1 text-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="position:absolute; transform:rotate(-145deg); color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><i class="{{i!Top Icon!}}"></i></div>
<div style="transform:rotate(-145deg);"><i class="{{i!Top Icon!}}"></i></div>
</div></div>
<hr class="mt-2 mb-0 mx-2 bg-{{?Use BS for Boxes?{{u!Box BS!}}?end?}}" style="background-color:{{?Use CC for Boxes?{{c!Box Color!}}?end?}};">
<hr class="mt-1 mb-0 bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
</div>
<!-- END DECOR / ONLY VISIBLE ON COMPUTER ------>
</div>
<!-- END NAME + ICON ------------------------------->
</div>
<!-- TOP INFO / 3 BOXES -------------------------------->
<!-- BOTTOM INFO --------------------------------------->
<div class="row no-gutters" style="color:{{?Use CC for Text?{{c!Text Color!}}?end?}};">
<!-- REF AND DESIGN NOTES -------------------------->
<div class="col-12 col-lg-3 mt-2 px-1 card rounded-0 bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><div class="p-2 card rounded-0 border-top-0 border-bottom-0 bg-{{?Use BS for Boxes?{{u!Box BS!}}?end?}}" style="background-color:{{?Use CC for Boxes?{{c!Box Color!}}?end?}};">
<!-- REF PICS ---------------------------------->
<div id="REF_CAROUSEL" class="carousel slide">
<!-- PICTURES ----------------------------->
<div class="carousel-inner">
<!-- PIC 1 ---------------------------->
{{%Reference Images%
<div class="carousel-item {{?First Shown or Not?active?end?}}">
<div class="bg-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="height:350px; background-image:url('{{u%Ref Image%}}'); background-position:center; background-size:cover; background-repeat:no-repeat; background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"></div>
<!-- image cred -->
<div class="card px-1 rounded-0 m-1" style="position:absolute; top:0; left:0; background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><a href="{{u%Image Credit%}}" title="Image Credit" class="text-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"><i class="fa-solid fa-paintbrush fa-xs"></i></a></div>
<!-- image link -->
<div class="card px-1 rounded-0 m-1" style="position:absolute; top:0; right:0; background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><a href="{{u%Image Link%}}" title="Image Link" class="text-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"><i class="fa-solid fa-image fa-xs"></i></a></div>
</div>
%end%}}
<!-- END PIC 1 ------------------------>
</div>
<!-- END PICTURES ------------------------->
<!-- BUTTONS ------------------------------>
<ol class="carousel-indicators mb-0">
{{%Carousel Buttons%
<li data-target="#REF_CAROUSEL" data-slide-to="{{%Slide Number%}}" class="{{?Show Image First?active?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"></li>
%end%}}
</ol>
<!-- END BUTTONS -------------------------->
</div>
<!-- END REF PICS ------------------------------>
<!-- QUICK INFO -------------------------------->
<div class="my-2">
{{%Quick Info%
<div class="card mt-1 rounded-0" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><div class="p-2 row no-gutters">
<div class="col-auto bg-{{?Use BS for Main?{{u!Main BS!}}?end?}} py-1 px-2 mr-2 align-items-center" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"><i class="{{i%Info Text%}}"></i></div>
<div class="col" style="font-variant:small-caps;">{{%Info Text%}}</div>
</div></div>
%end%}}
</div>
<!-- END QUICK INFO ---------------------------->
<!-- DESIGN NOTES ------------------------------>
<div style="overflow:auto; max-height:185px;">
{{% Design Notes%
<div class="mb-2 row no-gutters">
<div class="col-auto bg-{{?Use BS for Main?{{u!Main BS!}}?end?}} py-1 px-1 mr-2 align-items-center" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"><i class="{{i%Notes Icon%}}"></i></div>
<div class="col" style="font-variant:small-caps;">{{l%Notes%}}</div>
</div>
%end%}}
</div>
<!-- END DESIGN NOTES -------------------------->
</div></div>
<!-- END REF AND DESIGN NOTES ---------------------->
<!-- RIGHT CONTENT / EVERYTHING ELSE --------------->
<div class="col-12 col-lg-9 pt-2 pl-lg-2 row no-gutters h-100">
<!-- TOP LONG BOX / COLOR PALETTE -------------->
<div class="col-12 card rounded-0 bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}} px-1" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><div class="card rounded-0 p-1 border-right-0 border-left-0 bg-{{?Use BS for Boxes?{{u!Box BS!}}?end?}}" style="background-color:{{?Use CC for Boxes?{{c!Box Color!}}?end?}};"><div class="row no-gutters">
{{%Color Pallete% <div class="col mx-1 p-1" style="background-color:{{c%Color%}};"></div>%end%}}
</div></div></div>
<!-- END TOP LONG BOX / COLOR PALETTE ---------->
<!-- BOTTOM 3 BOXES / TWIN / GENERAL ----------->
<div class="row no-gutters">
<!-- 2 BOXES / TWINS ----------------------->
<div class="col-12 col-lg-6">
<!-- TWIN 1 ---------------------------->
<div class="mt-2 card rounded-0 py-1 bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><div class="card rounded-0 p-2 border-right-0 border-left-0 bg-{{?Use BS for Boxes?{{u!Box BS!}}?end?}}" style="max-height:400px; background-color:{{?Use CC for Boxes?{{c!Box Color!}}?end?}};">
<!-- NAME -->
<div class="card rounded-0 mt-1 mb-2 p-1" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><div class="bg-{{?Use BS for Main?{{u!Main BS!}}?end?}} text-center display-4 pb-1" style="font-variant:small-caps; background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">{{!Twin 1 Name!}}</div></div>
<!-- INFO + PIC -------------------->
<div class="row no-gutters">
<!-- SHORT INFO ---------------->
<div class="col-6 mr-2"><div class="card rounded-0" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
<!-- GENDER -->
<div class="row no-gutters mx-1 p-2">
<div class="col-auto bg-{{?Use BS for Main?{{u!Main BS!}}?end?}} py-1 px-2 mr-2 align-items-center" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"><i class="fa-regular fa-venus-mars"></i></div>
<div class="col" style="font-variant:small-caps;">{{!Twin 1 Gender!}}</div>
</div>
<div class="card my-0 mx-2 border-top-0" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"></div>
<!-- SEXUALITY -->
<div class="row no-gutters mx-1 p-2">
<div class="col-auto bg-{{?Use BS for Main?{{u!Main BS!}}?end?}} py-1 px-2 mr-2 align-items-center" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"><i class="fa-regular fa-heart"></i></div>
<div class="col" style="font-variant:small-caps;">{{!Twin 1 Sexuality!}}</div>
</div>
<div class="card my-0 mx-2 border-top-0" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"></div>
<!-- SONG -->
<div class="row no-gutters mx-1 p-2">
<div class="col-auto bg-{{?Use BS for Main?{{u!Main BS!}}?end?}} py-1 px-2 mr-2 justify-content-center align-items-center" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">
<i class="fa-regular fa-record-vinyl"></i>
<!-- play song -->
<iframe src="{{u!Twin 1 Song Link!}}" frameborder="0" style="position:absolute; opacity:0; height:20px; width:20px;"></iframe>
</div>
<a href="{{u!Twin 1 Song Link!}}" title="Song Link" class="col text-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="font-variant:small-caps; color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">{{!Twin 1 Song!}}</a>
</div>
</div></div>
<!-- END SHORT INFO ------------>
<!-- IMAGE ---------------------->
<div class="col card rounded-0 p-1" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><div class="bg-{{?Use BS for Main?{{u!Main BS!}}?end?}} h-100" style="background-image:url('{{u!Twin 1 Pic!}}'); background-position:top center; background-size:150%; background-repeat:no-repeat; background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"></div></div>
</div>
<!-- END INFO + PIC ---------------->
<!-- PERSONALITY TRAITS ------------>
<div class="mt-2 d-flex justify-content-center">
<div class="m-1 badge bg-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">{{!Twin 1 Personality Trait 1!}}</div>
<div class="m-1 badge bg-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">{{!Twin 1 Personality Trait 2!}}</div>
<div class="m-1 badge bg-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">{{!Twin 1 Personality Trait 3!}}</div>
</div>
<!-- END PERSONALITY TRAITS -------->
<!-- ABOUT ------------------------->
<div class="card py-1 px-2 text-center rounded-0 my-2" style="height:100px; overflow:auto; background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
<div class="mb-1">{{l!Twin 1 Personality Description!}}</div>
</div>
<!-- END ABOUT --------------------->
</div></div>
<!-- END TWIN 1 ------------------------>
<!-- TWIN 2 ---------------------------->
<div class="mt-2 card rounded-0 py-1 bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><div class="card rounded-0 p-2 border-right-0 border-left-0 bg-{{?Use BS for Boxes?{{u!Box BS!}}?end?}}" style="max-height:400px; background-color:{{?Use CC for Boxes?{{c!Box Color!}}?end?}};">
<!-- NAME -->
<div class="card rounded-0 mt-1 mb-2 p-1" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><div class="bg-{{?Use BS for Main?{{u!Main BS!}}?end?}} text-center display-4 pb-1" style="font-variant:small-caps; background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">{{!Twin 2 Name!}}</div></div>
<!-- INFO + PIC -------------------->
<div class="row no-gutters">
<!-- SHORT INFO ---------------->
<div class="col-6 mr-2"><div class="card rounded-0" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
<!-- GENDER -->
<div class="row no-gutters mx-1 p-2">
<div class="col-auto bg-{{?Use BS for Main?{{u!Main BS!}}?end?}} py-1 px-2 mr-2 align-items-center" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"><i class="fa-regular fa-venus-mars"></i></div>
<div class="col" style="font-variant:small-caps;">{{!Twin 2 Gender!}}</div>
</div>
<div class="card my-0 mx-2 border-top-0" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"></div>
<!-- SEXUALITY -->
<div class="row no-gutters mx-1 p-2">
<div class="col-auto bg-{{?Use BS for Main?{{u!Main BS!}}?end?}} py-1 px-2 mr-2 align-items-center" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"><i class="fa-regular fa-heart"></i></div>
<div class="col" style="font-variant:small-caps;">{{!Twin 2 Sexuality!}}</div>
</div>
<div class="card my-0 mx-2 border-top-0" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"></div>
<!-- SONG -->
<div class="row no-gutters mx-1 p-2">
<div class="col-auto bg-{{?Use BS for Main?{{u!Main BS!}}?end?}} py-1 px-2 mr-2 justify-content-center align-items-center" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">
<i class="fa-regular fa-record-vinyl"></i>
<!-- play song -->
<iframe src="{{u!Twin 2 Song Link!}}" frameborder="0" style="position:absolute; opacity:0; height:20px; width:20px;"></iframe>
</div>
<a href="{{u!Twin 2 Song Link!}}" title="Song Link" class="col text-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="font-variant:small-caps; color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">{{!Twin 2 Song!}}</a>
</div>
</div></div>
<!-- END SHORT INFO ------------>
<!-- IMAGE ---------------------->
<div class="col card rounded-0 p-1" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><div class="bg-{{?Use BS for Main?{{u!Main BS!}}?end?}} h-100" style="background-image:url('{{u!Twin 2 Pic!}}'); background-position:top center; background-size:150%; background-repeat:no-repeat; background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"></div></div>
</div>
<!-- END INFO + PIC ---------------->
<!-- PERSONALITY TRAITS ------------>
<div class="mt-2 d-flex justify-content-center">
<div class="m-1 badge bg-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">{{!Twin 2 Personality Trait 1!}}</div>
<div class="m-1 badge bg-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">{{!Twin 2 Personality Trait 2!}}</div>
<div class="m-1 badge bg-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">{{!Twin 2 Personality Trait 3!}}</div>
</div>
<!-- END PERSONALITY TRAITS -------->
<!-- ABOUT ------------------------->
<div class="card py-1 px-2 text-center rounded-0 my-2" style="height:100px; overflow:auto; background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
<div class="mb-1">{{l!Twin 2 Personality Description!}}</div>
</div>
<!-- END ABOUT --------------------->
</div></div>
<!-- END TWIN 2 ------------------------>
</div>
<!-- END 2 BOXES / TWINS ------------------>
<!-- GENERAL INFO -------------------------->
<div class="col mt-2 ml-lg-2 px-1 card rounded-0 bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><div class="card rounded-0 p-1 border-top-0 border-bottom-0 bg-{{?Use BS for Boxes?{{u!Box BS!}}?end?}}" style="overflow:auto; max-height:714px; background-color:{{?Use CC for Boxes?{{c!Box Color!}}?end?}};">
<!-- BACKSTORY SECTION ----------------->
{{%Shared Info%
<div class="mb-1">
<!-- HEADER ------------------------>
<div class="mx-2">
<hr class="flex-fill bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
<div class="pb-1 text-center display-4 text-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="font-variant:small-caps; color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">{{%Section Title%}}</div>
<!-- BOTTOM LINE --------------->
<div class="d-flex align-items-center">
<hr class="flex-fill bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
<div class="mx-3">
<i class="fa-regular fa-bracket-curly-left text-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"></i>
<i class="{{i%Section Icon%}} px-2 text-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"></i>
<i class="fa-regular fa-bracket-curly-right text-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"></i>
</div>
<hr class="flex-fill bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
</div>
<!-- END BOTTOM LINE ----------->
</div>
<!-- END HEADER -------------------->
<!-- BACKSTORY CONTENT ------------->
<div class="mx-3">
<!-- 1 -->
{{%Secttion Info%
<div class="my-2 row no-gutters">
<div class="col-auto bg-{{?Use BS for Main?{{u!Main BS!}}?end?}} py-1 px-2 mr-2 align-items-center" style="background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"><i class="{{i%Mini Icon%}}"></i></div>
<div class="col" style="font-variant:small-caps;">{{l%Sextion Title%}}</div>
</div>
%end%}}
</div>
<!-- END BACKSTORY CONTENT --------->
</div>
%end%}}
<!-- END BACKSTORY SECTION ------------->
<!-- RELATIONSHIPS SECTION ------------->
<div class="mb-1">
<!-- HEADER ------------------------>
<div class="mx-2">
<hr class="flex-fill bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
<div class="pb-1 text-center display-4 text-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="font-variant:small-caps; color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">Relationships</div>
<!-- BOTTOM LINE --------------->
<div class="d-flex align-items-center">
<hr class="flex-fill bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
<div class="mx-3">
<i class="fa-regular fa-bracket-curly-left text-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"></i>
<i class="fa-regular fa-heart px-2 text-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"></i>
<i class="fa-regular fa-bracket-curly-right text-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"></i>
</div>
<hr class="flex-fill bg-{{?Use BS for Sec and Text?{{u!Sec BS!}}?end?}}" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">
</div>
<!-- END BOTTOM LINE ----------->
</div>
<!-- END HEADER -------------------->
<!-- RELATIONSHIPS CONTENT --------->
<div class="mt-2 ml-3">
<!-- REL 1 --------------------->
{{%Relationships%
<div class="my-2 d-flex align-items-end">
<div class="col card rounded-0 p-1" style="background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};"><div class="bg-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="height:150px; background-image:url('{{u% Rel Image%}}'); background-position:top center; background-size:150%; background-repeat:no-repeat; background-color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"></div></div>
<!-- CHAR INFO -->
<div class="col ml-n2">
<div class="mb-2" style="font-variant:small-caps;">
<a href="{{u%Rel Link%}}" class="text-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="font-size:18px; color:{{?Use CC for Main?{{c!Main Color!}}?end?}};">{{%Rel Name%}}</a>
<div class="mt-n1" style="font-size:12px; color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">{{%Rel Status%}}</div>
</div>
<div class="card rounded-0 py-1 px-2" style="overflow:auto; max-height:110px; background-color:{{?Use CC for Sec?{{c!Sec Color!}}?end?}};">{{l%Rel Description%}}</div>
</div>
<!-- END CHAR INFO -->
</div>
%end%}}
<!-- END REL 1 ----------------->
</div>
<!-- END RELATIONSHIPS CONTENT ----->
</div>
<!-- END RELATIONSHIPS SECTION --------->
</div></div>
<!-- END GENERAL INFO ---------------------->
</div>
<!-- END BOTTOM 3 BOXES / TWIN / GENERAL ------->
</div>
<!-- END RIGHT CONTENT / EVERYTHING ELSE ----------->
</div>
<!-- END BOTTOM INFO ----------------------------------->
<!-- CREDITS / FEEL FREE TO MOVE ----------------------->
<div class="mt-1 row no-gutters justify-content-center" style="font-size:12px;">
<a href="https://toyhou.se/24813341.f2u-twins" title="Code Credit" class="mr-1 text-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"><i class="fa-regular fa-trash"></i></a>
<a href="https://toyhou.se/~world/82691.coders-quarters/page/107272.december-challenge" title="Layout Credit" class="text-{{?Use BS for Main?{{u!Main BS!}}?end?}}" style="color:{{?Use CC for Main?{{c!Main Color!}}?end?}};"><i class="fa-regular fa-table-layout"></i></a>
</div>
<!-- END CREDITS / FEEL FREE TO MOVE ------------------->