<!--
TOS & RULES:
- Turn off WYSIWYG in the display settings and turn on code editor or it will most likely break
- Don't remove my credit; you may can move or edit it but it must be visible
- Don't redistribute my codes and/or claim them as your own
- Frankensteining is ok as long as the other coders TOS allows it and credit is given
- Edit to your heart's content!
- Have fun :]
If you have any questions don't be afraid to ask! I can't assure you i'll be able to answer every question, as i'm new to coding, but i'll try nonetheless. Tell me if something breaks, i'll try to fix as soon as i can
ALSO uhhh, main char image, name and music player are in the third column, in case you were searching for them
(totally not saying this because i kept getting lost in my own code haha wdym)
-->
<!--
COLORS:
Main accent: #b3cecf
rga: 179,206,207 - remember to change this too!
Lighter/secondary accent: #ddebec
text-white
-->
<!-- BACKGROUND IMAGE -->
<div class="container p-2" style="background:url(
https://images.unsplash.com/photo-1574260031597-bcd9eb192b4f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80
) center fixed;
background-size: cover;
background-repeat: no-repeat">
<!-- BACKGROUND IMAGE END -->
<!-- -->
<div class="row no-gutters">
<!-- -->
<!-- COLUMN 1 -->
<div class="col-12 order-lg-1 order-1">
<div class="card p-2" style="border-radius: 30% 50px 0 0; border-width:4px">
<!-- BUTTONS - don't touch anything here unless you want to change the icons -->
<ul class="nav row justify-content-center mx-1 my-3">
<li class="col-3"><a class="btn btn-block active text-white" data-toggle="tab" href="#basic" style="border:solid #ddebec; border-radius: 55% 0 0 0; background: #b3cecf;"><i class="fa-duotone fa-caravan fa-lg"></i></a></li>
<li class="col-3"><a class="btn btn-block text-white" data-toggle="tab" href="#lore" style="border:solid #ddebec; border-radius: 0 0 0 0; background: #b3cecf;"><i class="fa-duotone fa-cassette-tape fa-lg"></i></a></li>
<li class="col-3"><a class="btn btn-block text-white" data-toggle="tab" href="#trivia" style="border:solid #ddebec; border-radius: 0 0 0 0; background: #b3cecf;"><i class="fa-solid fa-splotch fa-lg"></i></a></li>
<li class="col-3"><a class="btn btn-block text-white" data-toggle="tab" href="#related" style="border:solid #ddebec; border-radius: 0px 50px 0px 0px; background: #b3cecf"><i class="fa-duotone fa-users fa-lg"></i></a></li>
</ul>
<!-- BUTTONS END -->
</div>
</div>
<!-- COLUMN 1 END -->
<!-- COLUMN 2 -->
<div class="col-lg-9 col-12 order-lg-2 order-3">
<div class="card p-2 border-right-0" style="height:420px; border-radius: 0 0 0 10px; border-width: 1px 1px 4px 4px">
<div class="tab-content">
<!-- GENERAL STUFF -->
<div class="tab-pane fade show active" id="basic">
<div class="card p-2 m-1 bg-faded" style="height:392px; overflow-y:auto; overflow-x:hidden; border-width:2px;">
<h1 style="font-variant:small-caps; font-weight:bold; letter-spacing:1px; z-index:1">General Stuff
<span class="pull-right">...<i class="fa-duotone fa-caravan"></i></span></h1>
<div style="z-index:1"><hr class="mt-0 mb-2 border-top-0 border-right-0 border-left-0" style="border-style:dashed; border-width:2px;"></div>
<i class="fa-light fa-compass" style="position:absolute; margin-left:-25px; margin-top:-25px;font-size:250px; color:rgba(179,206,207,0.26); z-index:0"></i>
<div style="height:392px; overflow-y:auto; overflow-x:hidden;">
<!-- BASIC INFO -->
<div class="row">
<div class="col-lg-6 col-12">
<span style="font-weight:bold; font-variant: small-caps; color: #b3cecf; letter-spacing: 1px">Pronouns</span>
<span class="pull-right">con/tent</span>
<hr class="mt-0 mb-2 border-top-0 border-right-0 border-left-0" style="color: #b3cecf; border-style:double; border-width:4px">
</div>
<div class="col-lg-6 col-12">
<span style="font-weight:bold; font-variant: small-caps; color: #b3cecf; letter-spacing: 1px">Gender</span>
<span class="pull-right">content</span>
<hr class="mt-0 mb-2 border-top-0 border-right-0 border-left-0" style="color: #b3cecf; border-style:double; border-width:4px">
</div>
<div class="col-lg-6 col-12">
<span style="font-weight:bold; font-variant: small-caps; color: #b3cecf; letter-spacing: 1px">Orientation</span>
<span class="pull-right">content</span>
<hr class="mt-0 mb-2 border-top-0 border-right-0 border-left-0" style="color: #b3cecf; border-style:double; border-width:4px">
</div>
<div class="col-lg-6 col-12">
<span style="font-weight:bold; font-variant: small-caps; color: #b3cecf; letter-spacing: 1px">Species</span>
<span class="pull-right">content</span>
<hr class="mt-0 mb-2 border-top-0 border-right-0 border-left-0" style="color: #b3cecf; border-style:double; border-width:4px">
</div>
<div class="col-lg-6 col-12">
<span style="font-weight:bold; font-variant: small-caps; color: #b3cecf; letter-spacing: 1px">Birthday</span>
<span class="pull-right">content</span>
<hr class="mt-0 mb-2 border-top-0 border-right-0 border-left-0" style="color: #b3cecf; border-style:double; border-width:4px">
</div>
<div class="col-lg-6 col-12">
<span style="font-weight:bold; font-variant: small-caps; color: #b3cecf; letter-spacing: 1px">Age</span>
<span class="pull-right">content</span>
<hr class="mt-0 mb-2 border-top-0 border-right-0 border-left-0" style="color: #b3cecf; border-style:double; border-width:4px">
</div>
</div>
<!-- BASIC INFO END -->
<!-- DIVIDER IMAGE -->
<div class="card my-2" style="height:80px; border: double 4px #b3cecf; background:url(
https://images.unsplash.com/photo-1446034295857-c39f8844fad4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80
) center;
background-size:102%;
background-repeat:no-repeat">
<!-- LINK TO THE IMAGE -->
<a href="https://unsplash.com/photos/NQSWvyVRIJk" class="mx-2 mt-1" style="color: #b3cecf"><i class="far fa-circle"></i></a>
<!-- LINK TO THE IMAGE END -->
</div>
<!-- DIVIDER IMAGE END -->
<!-- SUMMARY - write whatever you want here actually lol -->
<p>just a quick description for your character! you can make this as long as you want ofc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- SUMMARY END -->
</div>
</div>
</div>
<!-- GENERAL STUFF END -->
<!-- STORY -->
<div class="tab-pane fade" id="lore">
<div class="card p-2 m-1 bg-faded" style="height:392px; overflow-y:auto; overflow-x:hidden; border-width:2px;">
<h1 style="font-variant:small-caps; font-weight:bold; letter-spacing:1px; z-index:1">Story
<span class="pull-right">...<i class="fa-duotone fa-cassette-tape"></i></span></h1>
<div style="z-index:1"><hr class="mt-0 mb-2 border-top-0 border-right-0 border-left-0" style="border-style:dashed; border-width:2px;"></div>
<i class="fa-light fa-compass" style="position:absolute; margin-left:-25px; margin-top:-25px;font-size:250px; color:rgba(179,206,207,0.26); z-index:0"></i>
<div style="height:392px; overflow-y:auto; overflow-x:hidden;">
<!-- STORY 1 -->
<!-- TITLE -->
<h4 style="font-variant:small-caps; letter-spacing:1px; color: #b3cecf">Title</h4>
<!-- TITLE END -->
<hr class="my-0 border-top-0 border-right-0 border-left-0" style="color: #b3cecf; border-style:double; border-width:4px">
<!-- ACTUAL STORY -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- ACTUAL STORY END -->
<!-- STORY 1 END -->
<!-- STORY 2 -->
<!-- TITLE -->
<h4 style="font-variant:small-caps; letter-spacing:1px; color: #b3cecf">Title</h4>
<!-- TITLE END -->
<hr class="my-0 border-top-0 border-right-0 border-left-0" style="color: #b3cecf; border-style:double; border-width:4px">
<!-- ACTUAL STORY -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- ACTUAL STORY END -->
<!-- STORY 2 END -->
<!-- STORY 3 -->
<!-- TITLE -->
<h4 style="font-variant:small-caps; letter-spacing:1px; color: #b3cecf">Title</h4>
<!-- TITLE END -->
<hr class="my-0 border-top-0 border-right-0 border-left-0" style="color: #b3cecf; border-style:double; border-width:4px">
<!-- ACTUAL STORY -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- ACTUAL STORY END -->
<!-- STORY 3 END -->
</div>
</div>
</div>
<!-- STORY END -->
<!-- TRIVIA -->
<div class="tab-pane fade" id="trivia">
<div class="card p-2 m-1 bg-faded" style="height:392px; overflow-y:auto; overflow-x:hidden; border-width:2px;">
<h1 style="font-variant:small-caps; font-weight:bold; letter-spacing:1px; z-index:1">Trivia & Misc
<span class="pull-right">...<i class="fa-solid fa-splotch"></i></span></h1>
<div style="z-index:1"><hr class="mt-0 mb-2 border-top-0 border-right-0 border-left-0" style="border-style:dashed; border-width:2px;"></div>
<i class="fa-light fa-compass" style="position:absolute; margin-left:-25px; margin-top:-25px;font-size:250px; color:rgba(179,206,207,0.26); z-index:0"></i>
<div style="height:392px; overflow-y:auto; overflow-x:hidden;">
<!-- IMAGE ON THE LEFT - you can just remove this if you dont want it -->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/68485937_F8siGgqSBf5frzY.png
" class="float-left mr-2 mb-3" style="max-height:235px">
<!-- IMAGE ON THE LEFT END -->
<!-- FUN FACTS - if you want to change the icons, they can all be found here: https://fontawesome.com/search -->
<ul class="list-unstyled">
<li class="mb-1"><i class="fa-duotone fa-mug-tea" style="color: #b3cecf"></i> a fun fact!</li>
<li class="mb-1"><i class="fa-duotone fa-mug-tea" style="color: #b3cecf"></i> a trivia, even</li>
<li class="mb-1"><i class="fa-solid fa-comment" style="color: #ddebec"></i> a comment on their design? or something else idk</li>
<li class="mb-1"><i class="fa-solid fa-comment" style="color: #ddebec"></i> dont ask about aela there, i just dont have more raymond art oop</li>
</ul>
<!-- FUN FACTS END -->
<hr class="mt-2 border-bottom-0 border-right-0 border-left-0" style="border-width:4px; border-style:double">
<!-- IMAGES / PHOTOS / MOODBOARD - you can change the rotation by changing the number in "transform:rotate(NUMBERdeg)" -->
<div class="row no-gutters">
<!-- IMAGE 1 -->
<div class="col justify-content-center">
<div class="card my-2" style="height:150px; width:150px; border: solid 3px #ddebec; background:url(
https://images.unsplash.com/photo-1564591110952-a125ef21c374?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80
) center;
background-size:cover;
background-repeat:no-repeat;
transform:rotate(10deg)">
<!-- LINK TO THE IMAGE -->
<a href="https://unsplash.com/photos/0GCs1LYIUjE" class="mx-2 mt-1" style="color: #ddebec"><i class="far fa-circle"></i></a>
<!-- LINK TO THE IMAGE -->
</div>
</div>
<!-- IMAGE 1 END -->
<!-- IMAGE 2 -->
<div class="col justify-content-center">
<div class="card my-2" style="height:150px; width:150px; border: solid 3px #ddebec; background:url(
https://images.unsplash.com/photo-1534540378968-85a7b8fde19f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80
) center;
background-size:cover;
background-repeat:no-repeat;
transform:rotate(-12deg)">
<!-- LINK TO THE IMAGE -->
<a href="https://unsplash.com/photos/lkNl4Vbqo6g" class="mx-2 mt-1" style="color: #ddebec"><i class="far fa-circle"></i></a>
<!-- LINK TO THE IMAGE -->
</div>
</div>
<!-- IMAGE 2 END -->
<!-- IMAGE 3 -->
<div class="col justify-content-center">
<div class="card my-2" style="height:150px; width:150px; border: solid 3px #ddebec; background:url(
https://images.unsplash.com/photo-1606468130108-32cca4fc71f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80
) center;
background-size:cover;
background-repeat:no-repeat;
transform:rotate(3deg)">
<!-- LINK TO THE IMAGE -->
<a href="https://unsplash.com/photos/QNRYa6O7Hsw" class="mx-2 mt-1" style="color: #ddebec"><i class="far fa-circle"></i></a>
<!-- LINK TO THE IMAGE -->
</div>
</div>
<!-- IMAGE 3 END -->
</div>
<!-- IMAGES / PHOTOS / MOODBOARD END -->
</div>
</div>
</div>
<!-- TRIVIA END -->
<!-- RELATED -->
<div class="tab-pane fade" id="related">
<div class="card p-2 m-1 bg-faded" style="height:392px; overflow-y:auto; overflow-x:hidden; border-width:2px;">
<h1 style="font-variant:small-caps; font-weight:bold; letter-spacing:1px; z-index:1">Related
<span class="pull-right">...<i class="fa-duotone fa-users"></i></span></h1>
<div style="z-index:1"><hr class="mt-0 mb-2 border-top-0 border-right-0 border-left-0" style="border-style:dashed; border-width:2px;"></div>
<div style="height:392px; overflow-y:auto; overflow-x:hidden;">
<!-- CHARACTERS -->
<div class="row">
<!-- CHARACTER 1 -->
<div class="col-4 col-lg-2 my-2">
<i class="fa-duotone fa-seat-airline text-dark" style="position:absolute; margin-left:-12px; margin-top:7px; font-size:130px; opacity:0.7;"></i>
<!-- IMAGE -->
<div class="card mx-auto d-block" style="height:100px; width:100px; border: solid #b3cecf 2px; border-radius: 2px 2px 2px 50%; background:url(
https://f2.toyhou.se/file/f2-toyhou-se/characters/23341993?1694117226
) center;
background-size:cover;
background-repeat:no-repeat;">
</div>
<!-- IMAGE END -->
</div>
<div class="col-8 col-lg-4 my-2">
<!-- LINK, NAME & STATUS -->
<a href="LINK HERE" style="font-variant:small-caps; font-weight:bold; color: #b3cecf">Name</a>
<span class="pull-right" style="font-weight:bold">Status</span>
<!-- LINK, NAME & STATUS END -->
<!-- SUMMARY -->
<div class="p-1" style="height:116px; overflow-y:auto; overflow-x:hidden; background: rgba(0,0,0,0.05)">
This will scroll! 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>
<!-- SUMMARY END -->
</div>
<!-- CHARACTER 1 END -->
<!-- CHARACTER 2 -->
<div class="col-4 col-lg-2 my-2">
<i class="fa-duotone fa-seat-airline text-dark" style="position:absolute; margin-left:-12px; margin-top:7px; font-size:130px; opacity:0.7;"></i>
<!-- IMAGE -->
<div class="card mx-auto d-block" style="height:100px; width:100px; border: solid #b3cecf 2px; border-radius: 2px 2px 2px 50%; background:url(
https://f2.toyhou.se/file/f2-toyhou-se/images/69873819_IDqeAdgqnjf0KMB.png
) center;
background-size:cover;
background-repeat:no-repeat;">
</div>
<!-- IMAGE END -->
</div>
<div class="col-8 col-lg-4 my-2">
<!-- LINK, NAME & STATUS -->
<a href="LINK HERE" style="font-variant:small-caps; font-weight:bold; color: #b3cecf">Name</a>
<span class="pull-right" style="font-weight:bold">Status</span>
<!-- LINK, NAME & STATUS END -->
<!-- SUMMARY -->
<div class="p-1" style="height:116px; overflow-y:auto; overflow-x:hidden; background: rgba(0,0,0,0.05)">
This will scroll! 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>
<!-- SUMMARY END -->
</div>
<!-- CHARACTER 2 END -->
<!-- CHARACTER 3 -->
<div class="col-4 col-lg-2 my-2">
<i class="fa-duotone fa-seat-airline text-dark" style="position:absolute; margin-left:-12px; margin-top:7px; font-size:130px; opacity:0.7;"></i>
<!-- IMAGE -->
<div class="card mx-auto d-block" style="height:100px; width:100px; border: solid #b3cecf 2px; border-radius: 2px 2px 2px 50%; background:url(
https://f2.toyhou.se/file/f2-toyhou-se/characters/22934159?1691867286
) center;
background-size:cover;
background-repeat:no-repeat;">
</div>
<!-- IMAGE END -->
</div>
<div class="col-8 col-lg-4 my-2">
<!-- LINK, NAME & STATUS -->
<a href="LINK HERE" style="font-variant:small-caps; font-weight:bold; color: #b3cecf">Name</a>
<span class="pull-right" style="font-weight:bold">Status</span>
<!-- LINK, NAME & STATUS END -->
<!-- SUMMARY -->
<div class="p-1" style="height:116px; overflow-y:auto; overflow-x:hidden; background: rgba(0,0,0,0.05)">
This will scroll! 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>
<!-- SUMMARY END -->
</div>
<!-- CHARACTER 3 END -->
</div>
<!-- CHARACTERS END -->
</div>
</div>
</div>
<!-- RELATED END -->
</div>
</div>
<a href="https://toyhou.se/TamyMew" class="text-light" data-toggle="tooltip" title="Code by TamyMew!"><i class="far fa-code mx-2" style="text-shadow: 0 0 5px, 0 0 2px"></i></a>
<a href="https://unsplash.com/photos/ryfptJi3fAM" class="text-light"><i class="far fa-circle" style="text-shadow: 0 0 5px, 0 0 2px"></i></a>
<i class="fa-duotone fa-tire d-none d-lg-block text-dark fa-spin" style="font-size:80px; position:absolute; top:379px; left:160px; z-index:1"></i>
</div>
<!-- COLUMN 2 END -->
<!-- COLUMN 3 -->
<div class="col-lg-3 col-12 order-lg-3 order-2">
<div class="card p-2" style="height:420px; border-radius: 0 180px 0 0; border-style: solid solid solid double; border-width: 1px 4px 4px 7px">
<!-- CHARACTER IMAGE -->
<div style="border-radius: 0 180px 0 0; height:250px; border:solid #b3cecf 5px; background:url(
https://f2.toyhou.se/file/f2-toyhou-se/characters/23341993?1694117226
) center;
background-repeat: no-repeat;
background-size: cover;
"></div>
<!-- CHARACTER IMAGE END -->
<!-- NAME -->
<div class="text-center mt-1" style="font-size:25px; font-weight:bold; letter-spacing:1px; color: #b3cecf">Name</div>
<div><hr class="mt-2 ml-n2 border-bottom-0 border-right-0 border-left-0" style="border-style:double; border-width:7px"></div>
<!-- NAME END -->
<!-- MUSIC PLAYER -->
<div class="py-1 px-2 mt-n2" style="background:#b3cecf">
<div class="row no-gutters">
<!-- -->
<div class="col-3">
<i class="fa-solid fa-radio fa-fade text-white" style="font-size:35px; animation-duration: 1.5s"></i>
<!-- SONG LINK - for this to work, copy the url in the EMBED link, not the url in the search bar -->
<iframe src="https://www.youtube.com/embed/ChVV5EVL4W4" frameborder="0" style="opacity:0; position:absolute; height:35px; width:35px; margin-left:-34px; margin-top:1px"></iframe>
<!-- SONG LINK END -->
</div>
<!-- -->
<!-- ARTIST/BAND NAME + TITLE - if it gets too long, you can change the size by adding style="font-size:NUMBERpx" in the divs before the names. ofc change the NUMBER to yknow, a number -->
<div class="col-9 text-white">
<div class="text-right text-white" style="font-size:11px">
Thus Always To Tyrants
</div>
<hr class="my-0 mr-n2" style="background:#ddebec">
<div class="text-right font-italic" style="color:#ddebec">
The Oh Hellos
</div>
</div>
<!-- ARTIST/BAND NAME + TITLE END -->
</div>
</div>
<!-- MUSIC PLAYER END -->
</div>
<i class="fa-duotone fa-tire d-none d-lg-block text-dark fa-spin" style="font-size:80px; position:absolute; top:379px; left:50%; z-index:1"></i>
</div>
<!-- COLUMN 3 END -->
<!-- ROAD / COLUMN 4 -->
<div class="col-12 order-lg-4 order-4">
<hr class="mx-1 mb-1 mt-lg-4 mt-1 border-bottom-0" style="border:dashed #ddebec 4px">
</div>
<!-- ROAD / COLUMN 4 END -->
<!-- -->
</div>
<!-- -->
<!-- -->
</div>
