Profile
<!---------====== Boxed In | [F2U by cosmical, commissioned by wiindywolfa] ======----------->
<!---------
Thank you for choosing to use my code! Before you start editing, keep the following things in mind:
You MAY:
- Edit! You may modify my codes however you'd like!
- Frankenstein my codes with others' as long as they allow it in their T.O.S. (Do NOT redistribute it, however).
- Ask me for help with my code! I'll do my best to respond! ^^
You may NOT:
- Remove the credit. However you edit it, the credit MUST be on there!
- Redistribute my codes. Making edited versions for PERSONAL USE is completely fine, but do not redistribute them!
Other notes:
- Turn WYSIWYG off. My codes won't work otherwise
-Leave a post in my forum page: https://toyhou.se/~forums/16.htmlcss-graphics/163815.- (I'd love to see what you do! ^^)
----------->
<!---------======
Modification Note
- Accent Color: #0c948d
======----------->
<div class="row no-gutters">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="row no-gutters">
<div class="col-md-4 row no-gutters">
<div class="col-12 p-1">
<div class="card rounded-0 h-100">
<div class="bg-faded h-100">
<!----- Carousel ----->
<div id="carousel3" class="carousel slide mx-auto p-1" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel3" data-slide-to="0" class="active"></li>
<li data-target="#carousel3" data-slide-to="1"></li>
<li data-target="#carousel3" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!----- Image 1 ----->
<div class="carousel-item active h-100">
<div style="background-image:url(https://images.unsplash.com/photo-1608579687988-8d6b8fa711be?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);min-height:320px;background-position:center center;background-size:cover"></div>
</div>
<!----- Image 2 ----->
<div class="carousel-item h-100">
<div style="background-image:url(https://images.unsplash.com/photo-1599499865410-656f187adf74?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);min-height:320px;background-position:center center;background-size:cover"></div>
</div>
<!----- Image 3 ----->
<div class="carousel-item h-100">
<div style="background-image:url(https://images.unsplash.com/photo-1610361865487-b35d98a74a5e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=925&q=80);min-height:320px;background-position:center center;background-size:cover"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel3" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel3" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<!----- Name//Quote Box ----->
<div class="col-12 p-1">
<div class="card rounded-0 p-0 h-100">
<div class="bg-faded p-3 h-100">
<p class="text-uppercase text-center" style="color: #0c948d"><b>
Name Here
</b></p>
<p class="text-center text-muted" style="font-size: 12px">
<i class="fas fa-quote-left pull-left"></i>
awesome quote goes here...
<i class="fas fa-quote-right pull-right"></i>
</p>
</div>
</div>
</div>
</div>
<!----- Info Box ----->
<div class="col-md-7 row no-gutters">
<div class="col-12 p-1">
<div class="card rounded-0 h-100">
<div class="bg-faded p-3 h-100" style="overflow: auto; max-height: 440px; min-height: 440px">
<div class="tab-content">
<!----- Tab 1-Basics ----->
<div class="tab-pane fade active show h-100" id="basics">
<blockquote><b class="text-uppercase" style="font-spacing: 2px; font-size: 12px">o1 - Basics</b></blockquote><hr>
<!----- Basic Info ----->
<div class="row no-gutters">
<div class="col-6 p-2">
<p>
<span class="text-uppercase" style="color:#0c948d;">Name:</span>
<span class="text-muted pull-right">content</span>
</p>
<hr class="my-1">
<p>
<span class="text-uppercase" style="color:#0c948d;">Age:</span>
<span class="text-muted pull-right">content</span>
</p>
<hr class="my-1">
<p>
<span class="text-uppercase" style="color:#0c948d;">Species:</span>
<span class="text-muted pull-right">content</span>
</p>
<hr class="my-1">
<p>
<span class="text-uppercase" style="color:#0c948d;">MBTI:</span>
<span class="text-muted pull-right">content</span>
</p>
</div>
<div class="col-6 p-2">
<p>
<span class="text-uppercase" style="color:#0c948d;">Nickname:</span>
<span class="text-muted pull-right">content</span>
</p>
<hr class="my-1">
<p>
<span class="text-uppercase" style="color:#0c948d;">Gender:</span>
<span class="text-muted pull-right">content</span>
</p>
<hr class="my-1">
<p>
<span class="text-uppercase" style="color:#0c948d;">Alignment:</span>
<span class="text-muted pull-right">content</span>
</p>
<hr class="my-1">
<p>
<span class="text-uppercase" style="color:#0c948d;">Role:</span>
<span class="text-muted pull-right">content</span>
</p>
</div>
</div>
<br>
<!----- notes ----->
<ul class="fa-ul text-muted" style="margin-left: 25px">
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>LIST. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>SOME. Vestibulum laoreet nulla velit, vulputate finibus enim tincidunt id.</li>
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>NOTES. Etiam pharetra leo non sem bibendum, id sodales sapien sollicitudin.</li>
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>HERE. Sed pulvinar luctus faucibus.</li>
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>This box scrolls, so you don't have to worry about adding too many!</li>
</ul>
</div>
<!----- Tab 2-Design ----->
<div class="tab-pane fade" id="design">
<blockquote><b class="text-uppercase" style="font-spacing: 2px; font-size: 12px">o2 - Design</b></blockquote><hr>
<!----- Design Notes ----->
<ul class="fa-ul text-muted" style="margin-left: 25px">
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>LIST. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>SOME. Vestibulum laoreet nulla velit, vulputate finibus enim tincidunt id.</li>
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>DESIGN. Etiam pharetra leo non sem bibendum, id sodales sapien sollicitudin.</li>
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>NOTES. Sed pulvinar luctus faucibus.</li>
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>HERE. Vivamus mattis elementum purus a congue.</li>
</ul>
<!----- Palette ----->
<div class="row no-gutters p-2">
<div class="col-2 tooltipster" style="background-color: #000000; height: 60px;" title="#000000"></div>
<div class="col-2 tooltipster" style="background-color: #313131; height: 60px" title="#313131"></div>
<div class="col-2 tooltipster" style="background-color: #545454; height: 60px" title="#545454"></div>
<div class="col-2 tooltipster" style="background-color: #787878; height: 60px;" title="#787878"></div>
<div class="col-2 tooltipster" style="background-color: #a2a2a2; height: 60px;" title="#a2a2a2"></div>
<div class="col-2 tooltipster" style="background-color: #c4c4c4; height: 60px;" title="#c4c4c4"></div>
</div>
<div class="p-2">
<hr class="my-1">
<!----- Character Reference ----->
<p class="text-uppercase" style="color:#0c948d;"><b>Reference:</b></p>
<p><a href="https://unsplash.com/photos/5gkYsrH_ebY" target="_blank"><img class="tooltipster" src="https://images.unsplash.com/photo-1516762689617-e1cffcef479d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=654&q=80" title="Art by USER"></a></p>
</div>
</div>
<!----- Tab 3-Personality ----->
<div class="tab-pane fade" id="personality">
<blockquote><b class="text-uppercase" style="font-spacing: 2px; font-size: 12px">o3 - Personality</b></blockquote><hr>
<!----- Stat Bars ----->
<p class="text-uppercase my-1" style="color:#0c948d;">Intellect:</p>
<div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:14px"></div></div>
<p class="text-uppercase my-1" style="color:#0c948d;">Charisma:</p>
<div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:14px"></div></div>
<p class="text-uppercase my-1" style="color:#0c948d;">Integrity:</p>
<div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:14px"></div></div>
<p class="text-uppercase my-1" style="color:#0c948d;">Confidence:</p>
<div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:14px"></div></div>
<p class="text-uppercase my-1" style="color:#0c948d;">Courage:</p>
<div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:14px"></div></div>
<p class="text-uppercase my-1" style="color:#0c948d;">Luck:</p>
<div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:14px"></div></div>
<hr>
<!----- Likes//Dislikes ----->
<div class="row no-gutters">
<div class="col-6 p-2">
<span class="text-uppercase" style="color:#0c948d;">Likes:</span>
<ul class="fa-ul text-muted" style="margin-top: 5px">
<li><span class="fa-li"><i class="far fa-heart"></i></span>put</li>
<li><span class="fa-li"><i class="far fa-heart"></i></span>some</li>
<li><span class="fa-li"><i class="far fa-heart"></i></span>likes</li>
<li><span class="fa-li"><i class="far fa-heart"></i></span>here</li>
</ul>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="color:#0c948d;">Dislikes:</span>
<ul class="fa-ul text-muted" style="margin-top: 5px">
<li><span class="fa-li"><i class="far fa-heart-broken"></i></span>put</li>
<li><span class="fa-li"><i class="far fa-heart-broken"></i></span>some</li>
<li><span class="fa-li"><i class="far fa-heart-broken"></i></span>dislikes</li>
<li><span class="fa-li"><i class="far fa-heart-broken"></i></span>here</li>
</ul>
</div>
</div>
</div>
<!----- Tab 4-Trivia ----->
<div class="tab-pane fade" id="trivia">
<blockquote><b class="text-uppercase" style="font-spacing: 2px; font-size: 12px">o4 - Trivia</b></blockquote><hr>
<!----- Moodboard ----->
<div class="row no-gutters">
<!----- Image 1 ----->
<div class="col-md-4 p-1">
<div class="card rounded-10 border-0" style="background-image:url(https://images.unsplash.com/photo-1584559582147-e47c7cf8805a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80); background-position: center; background-repeat: no-repeat; background-size: cover; height: 150px"></div>
</div>
<!----- Image 2 ----->
<div class="col-md-4 p-1">
<div class="card rounded-10 border-0" style="background-image:url(https://images.unsplash.com/photo-1584559582147-e47c7cf8805a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80); background-position: center; background-repeat: no-repeat; background-size: cover; height: 150px"></div>
</div>
<!----- Image 3 ----->
<div class="col-md-4 p-1">
<div class="card rounded-10 border-0" style="background-image:url(https://images.unsplash.com/photo-1584559582147-e47c7cf8805a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80); background-position: center; background-repeat: no-repeat; background-size: cover; height: 150px"></div>
</div>
<!----- Image 4 ----->
<div class="col-md-4 p-1">
<div class="card rounded-10 border-0" style="background-image:url(https://images.unsplash.com/photo-1584559582147-e47c7cf8805a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80); background-position: center; background-repeat: no-repeat; background-size: cover; height: 150px"></div>
</div>
<!----- Image 5 ----->
<div class="col-md-4 p-1">
<div class="card rounded-10 border-0" style="background-image:url(https://images.unsplash.com/photo-1584559582147-e47c7cf8805a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80); background-position: center; background-repeat: no-repeat; background-size: cover; height: 150px"></div>
</div>
<!----- Image 6 ----->
<div class="col-md-4 p-1">
<div class="card rounded-10 border-0" style="background-image:url(https://images.unsplash.com/photo-1584559582147-e47c7cf8805a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80); background-position: center; background-repeat: no-repeat; background-size: cover; height: 150px"></div>
</div>
</div>
<hr>
<!----- Trivia ----->
<ul class="fa-ul text-muted" style="margin-left: 25px">
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>LIST. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>SOME. Vestibulum laoreet nulla velit, vulputate finibus enim tincidunt id.</li>
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>TRIVIA. Etiam pharetra leo non sem bibendum, id sodales sapien sollicitudin.</li>
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>NOTES. Sed pulvinar luctus faucibus.</li>
<li><span class="fa-li"><i class="fas fa-caret-right" style="color:#0c948d;"></i></span>HERE. Vivamus mattis elementum purus a congue.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!----- Nav Tabs ----->
<div class="col-md-1 row no-gutters">
<div class="col-12">
<div class="card-transparent h-100">
<ul class="nav row no-gutters h-100">
<li class="col-md-12 col-3 mb-1 w-100 p-1"><a style="min-height:100px" class="btn bg-faded btn-block btn-outline-secondary active" data-toggle="tab" href="#basics" align="center"><br><br><i class="far fa-bookmark" style="color: #0c948d"></i></a></li>
<li class="col-md-12 col-3 mb-1 w-100 p-1"><a style="min-height:100px" class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#design"><br><br><i class="far fa-palette" style="color: #0c948d"></i></a></li>
<li class="col-md-12 col-3 mb-1 w-100 p-1"><a style="min-height:100px" class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#personality"><br><br><i class="far fa-heart" style="color: #0c948d"></i></a></li>
<li class="col-md-12 col-3 w-100 p-1"><a style="min-height:100px" class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#trivia"><br><br><i class="far fa-thumbtack" style="color: #0c948d"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="p-1">
<!---------------------------------------------
Playlist 3 by Bakuqou
how to use this code:
https://toyhou.se/8682081.all-music-players-wip/8682087.tutorial
---------------------------------------------->
<div class="card rounded-0">
<div class="bg-faded p-2">
<div class="row no-gutters mt-2 mb-0">
<div class="col-1 p-1">
<a class="p-0 mt-2 btn btn-outline-dark melody-embed" style="border:0;position:relative;height:1.5rem;width:1.5rem;z-index:2;color:#999;">
<!---- playlist ID ----->
<iframe style="opacity:.01;position:absolute;left:0;right:0;top:0;bottom:0;" class="h-100 w-100"
src="
https://www.youtube-nocookie.com/embed/videoseries?controls=0&list=PL_ID_HERE
" frameborder="0"></iframe>
<i class="fas fa-play fa-fw fa-2x" style="z-index:-1;position:absolute;left:0;top:0;font-size:1rem;text-align:center;height:100%;width:100%;"></i>
</a></div>
<!--- line --->
<div class="col-6 p-1">
<hr class="mt-3 p-1"> </div>
<!--- SONG INFO --->
<div class="col-5 p-1 text-center mt-1">
<!--- PLAYLIST CAROUSEL --->
<div id="carousel1" class="carousel slide mx-auto p-0 mb-0" data-ride="carousel" style="color:#999;">
<div class="carousel-inner">
<!---- SONG INFO ---->
<div class="carousel-item active text-truncate">
SONG - ARTIST
</div>
<!---- SONG INFO ---->
<div class="carousel-item text-truncate">
SONG - ARTIST
</div>
<!---- SONG INFO ---->
<div class="carousel-item text-truncate">
SONG - ARTIST
</div>
<!--- put more songs before this line --->
</div>
</div>
</div></div></div>
<!--- end music player --->
</div>
<!----- Credits [DO NOT REMOVE!] ----->
<p class="text-right small pull-right"><a href="https://toyhou.se/9527828.-f2u-boxed-in">
<i class="fas fa-meteor tooltipster" title="code by cosmical" style="color: #0c948d"></i>
</a> .
<a href="https://toyhou.se/8682081.all-music-players">
<i class="fas fa-music tooltipster" title="music player by BakuCodes" style="color: #0c948d"></i>
</a> .
<a href="https://toyhou.se/wiindywolfa">
<i class="fas fa-code tooltipster" title="layout by wiindywolfa" style="color: #0c948d"></i>
</a></p>
</div>
<div class="col-md-1"></div>
</div>
Recent Images
No images.