<!--
TOS / RULES
- Don't remove my credit; you can move it, edit it, etc. but dont remove it please
- Don't redistribute my codes and/or claim them as your own
- Edit to your heart's content! You may frankenstein my code with others as long as their TOS allows and credit is given
- Have fun :]
- turn off WYSIWYG in the display settings and turn on code editor
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
-->
<!--
COLORS: #6b3232 - #8F4545 - #9C4C6D - #955E9A - #7176C1 - #0090D8
Nice site for generating color palettes: https://mycolor.space
-->
<!-- -->
<div class="container p-3 mt-2 bg-faded" style="border-radius:10px; max-width:1050px; box-shadow: 0px 0px 20px rgba(0,0,0,0.28)">
<div class="row">
<!-- -->
<!-- COLUMN 1 -->
<div class="col-lg-3 col-12">
<!-- -->
<!-- -->
<div class="card border-0 mb-2" style="height:350px; border-radius: 10px 10px 0px 0px; background:#8F4545">
<!-- PROFILE PICTURE - change the link in "background:url(LINK TO IMAGE)" to the one you want -->
<div class="card mx-auto" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/users/TamyMew?1); background-position: center; background-size:cover; background-repeat:no-repeat; height:175px; width:175px; border:8px solid #6b3232; position:relative; left:63px; margin-top:15px; border-radius: 10px 10px 0px 0px"></div>
<!-- PROFILE PICTURE END -->
<!-- FRIEND BOX -->
<div class="container p-1 text-nowrap text-center" style="height:80px; width:175px; position:relative; left:63px; margin-top:15px; overflow-y:hidden; overflow-x:auto; background:#8F4545; border:2px solid #6b3232">
<!-- FRIENDS - copy-paste one if you want to add more
change the link in "src="LINK"" to the profile pic of your friend
you can put as many friends as you want btw! this will scroll horizontally -->
<a href="LINK OF YOUR FRIEND" class="mx-2"><img src="https://f2.toyhou.se/file/f2-toyhou-se/users/Death_sAngel?1" style="max-height:68px; max-width:68px;"></a>
<a href="LINK OF YOUR FRIEND" class="mx-2"><img src="https://f2.toyhou.se/file/f2-toyhou-se/users/Death_sAngel?1" style="max-height:68px; max-width:68px;"></a>
<!-- FRIENDS END -->
</div>
<div class="container text-light p-1 text-center border-top-0" style="font-weight:bold; letter-spacing:1px; width:175px; position:relative; left:63px; border-radius: 0px 0px 10px 10px; background:#6b3232; border:2px solid #6b3232">Friends <i class="fa-solid fa-heart fa-xs"></i></div>
<!-- FRIEND BOX END -->
</div>
<!-- -->
<!-- -->
<div class="card border-0 mb-2" style="height:90px; border-radius: 0px; background:#9C4C6D"></div>
<div class="card border-0 mb-2" style="height:55px; border-radius: 0px; background:#955E9A"></div>
<div class="card border-0 mb-lg-0 mb-3" style="height:30px; border-radius: 0px; background:#7176C1"></div>
<!-- -->
<!-- -->
</div>
<!-- COLUMN 1 END -->
<!-- COLUMN 2 -->
<div class="col-lg ml-lg-5 col-12">
<!-- -->
<!-- PEN -->
<div class="row no-gutters">
<!-- CREDITS - DONT REMOVE THIS THANKS <3 -->
<div class="col-1 text-center card p-1 my-1 border-0" style="border-radius: 15px 0px 0px 15px; background:#0090D8;"><a href="https://toyhou.se/TamyMew" data-toggle="tooltip" title="Code by TamyMew!"><i class="fa-solid fa-code text-light"></i></a></div>
<!-- CREDITS END -->
<!-- NAME & PRONOUNS - or whatever you want to put here -->
<div class="col card bg-dark p-1 text-light text-center border-top-0 border-bottom-0" style="font-weight:bold; font-size:20px; letter-spacing:1px; border-radius: 0px; border:1px solid">
Name - pron/ouns</div>
<!-- NAME & PRONOUNS END -->
<!-- -->
<div class="col-1 card bg-dark p-1 border-0 text-center" style="border-radius: 0px; clip-path: polygon(0 0, 84% 26%, 84% 35%, 100% 41%, 100% 61%, 84% 65%, 84% 74%, 0 100%);"></div>
<!-- -->
</div>
<!-- PEN END -->
<!-- TABLET -->
<div class="card mt-3 p-3 px-4 bg-dark" style="border-radius:20px; height:457px; border:double 4px rgba(0,0,0,0.38)">
<!-- -->
<!-- BUTTONS - don't touch anything here unless you want to change the icons -->
<ul class="nav row no-gutters p-1 justify-content-center" style="border:1px solid rgba(0,0,0,0.38); border-radius: 20px;">
<li class="col-3"><a class="btn btn-block active text-light" data-toggle="tab" href="#uno" style="border:1px solid rgba(0,0,0,0.38); border-radius: 15px 0px 0px 15px; background: #8F4545;"><i class="fa-solid fa-house-chimney fa-lg"></i></a></li>
<li class="col-3"><a class="btn btn-block text-light" data-toggle="tab" href="#due" style="border:1px solid rgba(0,0,0,0.38); border-radius: 0px 0px 0px 0px; background: #9C4C6D;"><i class="fa-solid fa-triangle-exclamation fa-lg"></i></a></li>
<li class="col-3"><a class="btn btn-block text-light" data-toggle="tab" href="#tre" style="border:1px solid rgba(0,0,0,0.38); border-radius: 0px 0px 0px 0px; background: #955E9A;"><i class="fa-solid fa-pen-to-square fa-lg"></i></a></li>
<li class="col-3"><a class="btn btn-block text-light" data-toggle="tab" href="#quattro" style="border:1px solid rgba(0,0,0,0.38); border-radius: 0px 15px 15px 0px; background: #7176C1;"><i class="fa-solid fa-hands-holding-heart fa-lg"></i></a></li>
</ul>
<!-- BUTTONS END -->
<!-- TAB CONTENT - if you want to change the texture, change the url in "background:url(LINK TO IMAGE)", or just delete it if you dont want it
Trasparent textures: https://transparenttextures.com -->
<div class="tab-content">
<!-- -->
<!-- ABOUT -->
<div class="tab-pane fade active show" id="uno">
<div class="card mt-2 pt-2 px-2 text-light" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/70710160_hi4xnSZdGK4dFkC.png); height:374px; border-radius: 10px;">
<h1>About <i class="fa-solid fa-house-chimney pull-right"></i></h1>
<div><hr class="my-0 mb-1"></div>
<div style="height:322px; overflow-y:auto; overflow-x:hidden;">
<!-- -->
<!-- IMAGE - delete this if you dont want/need this -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69170108_kckP1uafyECC5oT.png" class="col float-right" style="max-height:350px; max-width:350px">
<!-- IMAGE END -->
<!-- DESCRIPTION -->
<p>Tell something about yourself here! 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>
<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>
<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>
<!-- DESCRIPTION END -->
<!-- -->
</div>
</div>
</div>
<!-- ABOUT END -->
<!-- DO & DON'Ts -->
<div class="tab-pane fade" id="due">
<div class="card mt-2 pt-2 px-2 text-light" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/70710160_hi4xnSZdGK4dFkC.png); height:374px; border-radius: 10px;">
<h1>Do & Don'ts <i class="fa-solid fa-triangle-exclamation pull-right"></i></h1>
<div><hr class="my-0 mb-1"></div>
<div style="height:322px; overflow-y:auto; overflow-x:hidden;">
<!-- -->
<!-- -->
<div class="row">
<!-- DOs -->
<div class="col-lg-4 col-12">
<h3>Do...</h3>
<ul>
<li class="ml-n2">copy-paste one of these to add more!</li>
<li class="ml-n2">content</li>
<li class="ml-n2">content</li>
</ul>
</div>
<!-- DOs END -->
<!-- DON'Ts -->
<div class="col-lg-4 col-12">
<h3>Don't...</h3>
<ul>
<li class="ml-n2">content</li>
<li class="ml-n2">content</li>
<li class="ml-n2">content</li>
</ul>
</div>
<!-- DON'Ts END -->
<!-- GENERAL CWs -->
<div class="col-lg-4 col-12">
<h3>General CWs</h3>
<ul>
<li class="ml-n2">content</li>
<li class="ml-n2">content</li>
<li class="ml-n2">content</li>
</ul>
</div>
<!-- -->
</div>
<!-- -->
<!-- ADDITIONAL INFOS -->
<p>Maybe some additional infos? 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>
<!-- ADDITIONAL INFOS END -->
<!-- -->
</div>
</div>
</div>
<!-- DO & DON'Ts END -->
<!-- ART INFO -->
<div class="tab-pane fade" id="tre">
<div class="card mt-2 pt-2 px-2 text-light" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/70710160_hi4xnSZdGK4dFkC.png); height:374px; border-radius: 10px;">
<h1>Art Info <i class="fa-solid fa-pen-to-square pull-right"></i></h1>
<div><hr class="my-0 mb-1"></div>
<div style="height:322px; overflow-y:auto; overflow-x:hidden;">
<!-- -->
<!-- NOTICE -->
<div class="p-2 mt-2" style="border-radius:10px; background:#955E9A">
<i class="fa-regular fa-circle-exclamation"></i>
<b>Some important notice here. Like idk, delays, hiatus, whatever you want</b>
</div>
<hr class="mb-1">
<!-- NOTICE END -->
<!-- COMMS, TRADES AND REQS -->
<ul class="list-unstyled mt-2">
<li class="my-1"><a href="COMMISSION SHEET LINK" class="text-warning"><b>Commissions</b></a> <div class="pull-right">content</div></li>
<li class="my-1"><b>Trades</b> <div class="pull-right">content</div></li>
<li class="my-1"><b>Requests</b> <div class="pull-right">content</div></li>
</ul>
<hr class="mb-3">
<!-- COMMS, TRADES AND REQS END -->
<!-- TOS -->
<a href="TOS LINK if you have it" class="text-warning"><h3 class="mb-1">TOS</h3></a>
<ul>
<li class="ml-n2">content</li>
<li class="ml-n2">content</li>
<li class="ml-n2">content</li>
</ul>
<!-- TOS END -->
<!-- ADDITIONAL TOS INFO -->
<p>Put some additional infos here if you need to or just delete this if you dont. 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>
<!-- ADDITIONAL TOS INFO END -->
<!-- -->
</div>
</div>
</div>
<!-- ART INFO END -->
<!-- FEATURED CHARACTERS -->
<div class="tab-pane fade" id="quattro">
<div class="card mt-2 pt-2 px-2 text-light" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/70710160_hi4xnSZdGK4dFkC.png); height:374px; border-radius: 10px;">
<h1>Featured Characters <i class="fa-solid fa-hands-holding-heart pull-right"></i></h1>
<div><hr class="my-0 mb-1"></div>
<div style="height:322px; overflow-y:auto; overflow-x:hidden;">
<!-- -->
<!-- CHARACTERS - you can add as many as you want, just copy-paste one -->
<div class="row no-gutters justify-content-center">
<!-- CHARACTER 1 -->
<div class="card p-2 m-2" style="height:200px; max-width:170px; background:rgba(0,0,0,0.18)">
<!-- LINK AND IMAGE - Change the link in "src="LINK"" for the image -->
<a href="LINK TO YOUR CHARACTER"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69873819_IDqeAdgqnjf0KMB.png" class="mx-auto d-block" style="height:150px; width:150px;"></a>
<!-- LINK AND IMAGE END -->
<!-- NAME - if it gets too big, add a font-size:NUMBERpx in style, after letter-spacing. Ofc, change the NUMBER to the one of your choosing -->
<h2 class="text-center pt-2" style="letter-spacing:1px;">Name</h2>
<!-- NAME END -->
</div>
<!-- CHARACTER 1 END -->
<!-- CHARACTER 2 -->
<div class="card p-2 m-2" style="height:200px; max-width:170px; background:rgba(0,0,0,0.18)">
<!-- LINK AND IMAGE - Change the link in "src="LINK"" for the image -->
<a href="LINK TO YOUR CHARACTER"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69873819_IDqeAdgqnjf0KMB.png" class="mx-auto d-block" style="height:150px; width:150px;"></a>
<!-- LINK AND IMAGE END -->
<!-- NAME - if it gets too big, add a font-size:NUMBERpx in style, after letter-spacing. Ofc, change the NUMBER to the one of your choosing -->
<h2 class="text-center pt-2" style="letter-spacing:1px;">Name</h2>
<!-- NAME END -->
</div>
<!-- CHARACTER 2 END -->
<!-- CHARACTER 3 -->
<div class="card p-2 m-2" style="height:200px; max-width:170px; background:rgba(0,0,0,0.18)">
<!-- LINK AND IMAGE - Change the link in "src="LINK"" for the image -->
<a href="LINK TO YOUR CHARACTER"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69873819_IDqeAdgqnjf0KMB.png" class="mx-auto d-block" style="height:150px; width:150px;"></a>
<!-- LINK AND IMAGE END -->
<!-- NAME - if it gets too big, add a font-size:NUMBERpx in style, after letter-spacing. Ofc, change the NUMBER to the one of your choosing -->
<h2 class="text-center pt-2" style="letter-spacing:1px;">Name</h2>
<!-- NAME END -->
</div>
<!-- CHARACTER 3 END -->
</div>
<!-- CHARACTERS END -->
<!-- -->
</div>
</div>
</div>
<!-- FEATURED CHARACTERS END -->
<!-- -->
</div>
<!-- TAB CONTENT END -->
<!-- -->
</div>
<!-- TABLET END -->
<!-- LINKS - if you want to add more, just copy-paste one - you can change the icons ofc! they can all be found on fontawesome.com -->
<div class="container mt-2 border-0 p-1 text-center" style="border-radius:0px; height:30px; background: #7176C1">
<a href="LINK" class="text-light mx-1" data-toggle="tooltip" title="NAME OF LINK"><i class="fa-brands fa-deviantart fa-lg"></i></a>
<a href="LINK" class="text-light mx-1" data-toggle="tooltip" title="NAME OF LINK"><i class="fa-brands fa-twitter fa-lg"></i></a>
<a href="LINK" class="text-light mx-1" data-toggle="tooltip" title="NAME OF LINK"><i class="fa-brands fa-tumblr fa-lg"></i></a>
<a href="LINK" class="text-light mx-1" data-toggle="tooltip" title="NAME OF LINK"><i class="fa-brands fa-instagram fa-lg"></i></a>
<a href="LINK" class="text-light mx-1" data-toggle="tooltip" title="NAME OF LINK"><i class="fa-solid fa-tree fa-lg"></i></a>
</div>
<!-- LINKS END -->
<!-- -->
</div>
<!-- COLUMN 2 END -->
<!-- MUSIC PLAYER -->
<div class="col-12 mt-2">
<div class="card border-0 p-2" style="border-radius: 0px 0px 10px 10px; background:#0090D8">
<div class="row mx-0">
<!-- -->
<!-- -->
<div class="col-auto">
<i class="fa-solid fa-play fa-fade fa-lg text-light"></i>
<!-- SONG LINK - for this to work, copy the EMBED link, not the url in the search bar -->
<iframe src="https://www.youtube.com/embed/6WK6iQfS-FY" frameborder="0" style="opacity:0; position:absolute; height:20px; width:20px; margin-left:-17px; margin-top:1px"></iframe>
<!-- SONG LINK END -->
</div>
<!-- -->
<div class="col"><hr class="my-1 mx-n3 bg-light" style="position:relative; top:7px"></div>
<!-- ARTIST/BAND NAME + TITLE -->
<div class="col-auto text-light">Owl City - The Tornado</div>
<!-- ARTIST/BAND NAME + TITLE END -->
<!-- -->
</div>
</div>
</div>
<!-- MUSIC PLAYER END -->
<!-- -->
</div>
</div>
