<!--
Compact: Style 2 /// non-wysiwyg friendly
-- 6/17/22
a combination of my phantump code that i just couldn't fix up how i wanted it to be and the underwhelming original compact code
it's going to be better than both by combining the simplicity of the phantump with the heaviness of the code compact
this code will look the best (in my opinion) on mobile
useful links for this code:
-- https://th.circlejourney.net/
-- https://fontawesome.com/search
-- https://unsplash.com/
-->
<!-- background -->
<div class="card rounded-0 border-0" style="position:absolute;top:0;bottom:0;left:0;width:100%;z-index:-1;
background-image: url(https://images.unsplash.com/photo-1442458017215-285b83f65851?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
background-attachment: fixed;background-size: cover;background-position: center;">
</div>
<!---------------->
<!-- pagedoll -->
<div class="hidden-sm-down fixed-bottom" style="left: inherit">
<a href="https://www.deviantart.com/methuselah-alchemist/art/Garchomp-Pokedoll-Art-347368038" data-toggle="tooltip" title="artist link">
<img src="https://img00.deviantart.net/4c2b/i/2013/007/b/1/garchomp_pokedoll_art_by_methuselah_alchemist-d5qtaw6.png" style="width:350px;">
</div>
<!-- end pagedoll -->
<div class="card my-1 mx-auto col-md-3 p-1" style="border-radius:0px; border: solid #000000; text-align:center"></div>
<div class="card p-2 mx-auto col-md-3" style="border-radius:0px; border: solid #000000;"><span style="font-family: courier; text-align:right; font-size:20px">
<!-- song -->
<div class="hidden-sm-down">
<!-- 1 -->
<a target="_BLANK" class="text-muted">
<!--- change FwwkXADfBjI to the video id from any youtube video -- double click it in the code to go to the youtube video --->
<iframe src="https://www.youtube.com/embed/FwwkXADfBjI" style="position:absolute; top:0; bottom:0; left:465px; right:0; opacity:0; height:50px; width:50px" frameborder="0"></iframe>
<div class="text-info">
<i class="fa-solid fa-music m-2"></i>
</div>
</a>
</div>
<!-- end song -->
</span></div>
<div class="row no-gutters justify-content-center">
<!-- picture -->
<div class="card col-md-1"
style="height: 200px;
background:url(https://gifimage.net/wp-content/uploads/2017/11/garchomp-gif-10.gif); background-size:cover;
background-position:center; background-repeat:no-repeat; border-radius:0px; border: solid #000000">
</div>
<!-- text box -->
<div class="card col-md-2 p-3" style="border-radius:0px; border: solid #000000; background: #fffff5; height:200px; overflow:auto">
<div class="text-dark">
<h1 style="text-align:center">name</h1>
<p style="font-size:15px; text-align:center">info . info . info</p>
<hr class="my-1" style="background:#000000">
<hr class="my-1" style="background:#000000">
<i class="fad fa-bookmark fa-2x" style="top:-8px"></i>
<p class="my-1" style="text-align:right; font-family:trebuchet; font-size:20px;">Content</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.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<hr class="my-1" style="background:#000000">
<hr class="my-1" style="background:#000000">
<i class="hidden-sm-down fad fa-note fa-2x" style="top:-10px; left: 270px"></i>
<!-- notes -->
<div class="row no-gutters">
<div class="container col-md-8" style="max-height:150px; overflow:auto">
<p class="my-1" style="text-align:left; font-family:trebuchet; font-size:20px;">Notes</p>
<li class="mx-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li class="mx-3">Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </li>
<li class="mx-3">Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li class="mx-3">Duis porta eros et velit blandit dapibus.</li>
<li class="mx-3">Curabitur ac finibus eros. </li>
<li class="mx-3">Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
</div>
<!-- picture 2 -->
<div class="my-4 card col-md-4 border-0" style="border-radius:0px; background:#fffff5">
<img src="https://professorlotus.com/Sprites/Garchomp.gif">
</div>
</div>
<hr class="my-1" style="background:#000000">
<hr class="my-1" style="background:#000000">
<i class="fad fa-bookmark fa-2x" style="top:-8px"></i>
<p class="my-1" style="text-align:right; font-family:trebuchet; font-size:20px;">Content</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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
<!-- bottom boxes -->
<!-- info box -->
<a href="#info" data-toggle="collapse">
<div class="card mt-1 mx-auto col-md-3" style="border-radius:0px; border: solid #000000; text-align:center">
<h1 class="mt-2" style="font-family: trebuchet">INFO</h1></div>
</a>
<div id="info" class="collapse">
<div class="container col-md-3">
<div class="my-1" style="height:400px; overflow:auto;background-color:rgba(23, 23, 23, 0.6); border-radius:0px; border: solid #000000; font-size:15px; text-align:center">
<!-- info -->
<!-- info box top picture -->
<div class="my-0 card col-md-12 mx-auto"
style="height: 50px; background:url(https://images.unsplash.com/photo-1565214975484-3cfa9e56f914?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=654&q=80); background-size:cover;
background-position:center; background-repeat:no-repeat; border-radius:0px; border: solid #000000">
</div>
<!---->
<div class="container">
<!-- info list 1 -->
<h1 class="mt-1 text-right font-weight-bold text-uppercase text-light">general info</h1>
<hr class="my-1" style="background:#000000">
<hr class="my-1" style="background:#000000">
<!------->
<div class="d-flex justify-content-between p-1 text-light">
<span class="text-left font-weight-bold text-uppercase" style="">nickname</span>
<span class="text-light text-right mr-3">content</span>
</div>
<!------->
<div class="d-flex justify-content-between p-1 text-light">
<span class=" text-left font-weight-bold text-uppercase" style="">species/race</span>
<span class="text-light text-right mr-3">content</span>
</div>
<!------->
<div class="d-flex justify-content-between p-1 text-light">
<span class=" text-left font-weight-bold text-uppercase" style="">age</span>
<span class="text-light text-right mr-3">content</span>
</div>
<!------->
<div class="d-flex justify-content-between p-1 text-light">
<span class=" text-left font-weight-bold text-uppercase" style="">gender</span>
<span class="text-light text-right mr-3">content</span>
</div>
<!------->
<div class="d-flex justify-content-between p-1 text-light">
<span class=" text-left font-weight-bold text-uppercase" style="">pronouns</span>
<span class="text-light text-right mr-3">content</span>
</div>
<!------->
<div class="d-flex justify-content-between p-1 text-light">
<span class=" text-left font-weight-bold text-uppercase" style="">orientation</span>
<span class="text-light text-right mr-3">content</span>
</div>
<!------->
<div class="d-flex justify-content-between p-1 text-light">
<span class=" text-left font-weight-bold text-uppercase" style="">residence</span>
<span class="text-light text-right mr-3">content</span>
</div>
<!------->
<div class="d-flex justify-content-between p-1 text-light">
<span class=" text-left font-weight-bold text-uppercase" style="">birthplace</span>
<span class="text-light text-right mr-3">content</span>
</div>
<!-- text border -->
<hr class="my-1" style="background:#000000">
<hr class="my-1" style="background:#000000">
<div class="text-muted" style="font-weight:10"><i>quote here?" or perhaps just some words</i></div>
<hr class="my-1" style="background:#000000">
<hr class="my-1" style="background:#000000">
</div>
<!-- notes -->
<div class="container">
<h1 class="mt-1 text-left font-weight-bold text-uppercase text-light">design notes</h1>
</div>
<div class="row no-gutters">
<div class="container col-md-7" style="max-height:200px; overflow:auto; text-align:justify">
<ul class="list-unstyled font-weight-lighter text-light">
<li class="my-2"><b class="text-muted"><i class="fa-solid fa-circle-chevron-right fa-xs"></i></b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li class="my-2"><b class="text-muted"><i class="fa-solid fa-circle-chevron-right fa-xs"></i></b>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li class="my-2"><b class="text-muted"><i class="fa-solid fa-circle-chevron-right fa-xs"></i></b>
Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li class="my-2"><b class="text-muted"><i class="fa-solid fa-circle-chevron-right fa-xs"></i></b>
Duis porta eros et velit blandit dapibus.</li>
<li class="my-2"><b class="text-muted"><i class="fa-solid fa-circle-chevron-right fa-xs"></i></b>
Curabitur ac finibus eros.</li>
<li class="my-2"><b class="text-muted"><i class="fa-solid fa-circle-chevron-right fa-xs"></i></b>
Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
</ul>
</div>
<!-- picture 2 -->
<div class="card col-md-5 mx-auto"
style="height: 200px;
background:url(https://pa1.narvii.com/6949/7a09755cfc582ac8ab61f2087a76853fd5ae9525r1-500-253_hq.gif); background-size:cover;
background-position:center; background-repeat:no-repeat; border-radius:0px; border: solid #000000">
</div>
</div>
<!-- end info -->
<!-- progress bars -->
<div class="container">
<h1 class="mt-1 text-right font-weight-bold text-uppercase text-light">stats</h1>
<hr class="my-1" style="background:#000000">
<hr class="my-1" style="background:#000000">
</div>
<!------ start progress bar ------>
<div class="px-1 py-1 col-lg-12 col-sm-6">
<!--- STAT NAME --->
<div class="progress my-0 rounded-0 bg-dark" style="height: 15px;">
<div class="h-100"
style="background:#d65327; width: 10%">
</div>
</div>
</div>
<div class="d-flex justify-content-between mt-2">
<p style="text-align: left;"><span style="font-family: courier new, courier;color:#ffffff">
stat 1
</span></p>
<p style="text-align: right;"><span style="font-family: courier new, courier;color:#ffffff">
stat 2
</span></p>
</div>
<!------- end progress bar ------>
<!------ start progress bar ------>
<div class="px-1 py-1 col-lg-12 col-sm-6">
<!--- STAT NAME --->
<div class="progress my-0 rounded-0 bg-dark" style="height: 15px;">
<div class="h-100"
style="background:#d65327; width: 10%">
</div>
</div>
</div>
<div class="d-flex justify-content-between mt-2">
<p style="text-align: left;"><span style="font-family: courier new, courier;color:#ffffff">
stat 1
</span></p>
<p style="text-align: right;"><span style="font-family: courier new, courier;color:#ffffff">
stat 2
</span></p>
</div>
<!------- end progress bar ------>
<!------ start progress bar ------>
<div class="px-1 py-1 col-lg-12 col-sm-6">
<!--- STAT NAME --->
<div class="progress my-0 rounded-0 bg-dark" style="height: 15px;">
<div class="h-100"
style="background:#d65327; width: 10%">
</div>
</div>
</div>
<div class="d-flex justify-content-between mt-2">
<p style="text-align: left;"><span style="font-family: courier new, courier;color:#ffffff">
stat 1
</span></p>
<p style="text-align: right;"><span style="font-family: courier new, courier;color:#ffffff">
stat 2
</span></p>
</div>
<!------- end progress bar ------>
<!------ start progress bar ------>
<div class="px-1 py-1 col-lg-12 col-sm-6">
<!--- STAT NAME --->
<div class="progress my-0 rounded-0 bg-dark" style="height: 15px;">
<div class="h-100"
style="background:#d65327; width: 10%">
</div>
</div>
</div>
<div class="d-flex justify-content-between mt-2">
<p style="text-align: left;"><span style="font-family: courier new, courier;color:#ffffff">
stat 1
</span></p>
<p style="text-align: right;"><span style="font-family: courier new, courier;color:#ffffff">
stat 2
</span></p>
</div>
<!------- end progress bar ------>
<!------ start progress bar ------>
<div class="px-1 py-1 col-lg-12 col-sm-6">
<!--- STAT NAME --->
<div class="progress my-0 rounded-0 bg-dark" style="height: 15px;">
<div class="h-100"
style="background:#d65327; width: 10%">
</div>
</div>
</div>
<div class="d-flex justify-content-between mt-2">
<p style="text-align: left;"><span style="font-family: courier new, courier;color:#ffffff">
stat 1
</span></p>
<p style="text-align: right;"><span style="font-family: courier new, courier;color:#ffffff">
stat 2
</span></p>
</div>
<!------- end progress bar ------>
<!-- add more above this line -->
<!-- info box bottom picture -->
<div class="my-0 card col-md-12 mx-auto"
style="height: 50px;;
background:url(https://images.unsplash.com/photo-1565214975484-3cfa9e56f914?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=654&q=80); background-size:cover;
background-position:center; background-repeat:no-repeat; border-radius:0px; border: solid #000000">
</div>
<!---->
</div>
</div>
</div>
<!-- relationships box -->
<a href="#relations" data-toggle="collapse">
<div class="card mt-1 mx-auto col-md-3" style="border-radius:0px; border: solid #000000; text-align:center">
<h1 class="mt-2" style="font-family: trebuchet">RELATIONSHIPS</h1></div>
</a>
<div id="relations" class="collapse">
<div class="container col-md-3">
<!-- 1 -->
<a href="LINK_HERE">
<div class="mt-4 card col-md-12 mx-auto"
style="height: 200px;
background:url(https://pa1.narvii.com/6793/799a82146a25840941ac4d2704002dd7be7c133a_hq.gif); background-size:cover;
background-position:center; background-repeat:no-repeat; border-radius:0px; border: solid #000000">
</div>
<div class="card" style="background-color:rgba(23, 23, 23, 0.6); border-radius:0px; border: solid #000000; font-size:15px; text-align:center">
name | relationship
</div>
</a>
<!-- 2 -->
<a href="LINK_HERE">
<div class="mt-4 card col-md-12 mx-auto"
style="height: 200px;
background:url(https://pa1.narvii.com/6949/7a09755cfc582ac8ab61f2087a76853fd5ae9525r1-500-253_hq.gif); background-size:cover;
background-position:center; background-repeat:no-repeat; border-radius:0px; border: solid #000000">
</div>
<div class="card" style="background-color:rgba(23, 23, 23, 0.6); border-radius:0px; border: solid #000000; font-size:15px; text-align:center">
name | relationship
</div>
</a>
<!-- add more above here -->
</div>
</div>
<!-- end relationship box -->
<!-- aesthetics/moodboard box -->
<a href="#aesthetic" data-toggle="collapse">
<div class="card mt-1 mx-auto col-md-3" style="border-radius:0px; border: solid #000000; text-align:center">
<h1 class="mt-2" style="font-family: trebuchet">AESTHETICS + MOODBOARD</h1></div>
</a>
<div id="aesthetic" class="collapse">
<!-- top picture decoration -->
<div class="my-0 card col-md-3 mx-auto"
style="height: 30px; background:url(https://images.unsplash.com/photo-1565214975484-3cfa9e56f914?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&);
background-size:cover;background-position:center; background-repeat:no-repeat; border-radius:0px; border: solid #000000">
</div>
<div class="container p-1 col-md-3" style="background-color:rgba(23, 23, 23, 0.6);">
<!-- stamps -->
<p style="text-align:center">
<img src="https://windowsme.neocities.org/images/stamps/stamps4/43.gif">
<img src="https://windowsme.neocities.org/images/stamps/stamps4/43.gif">
<img src="https://windowsme.neocities.org/images/stamps/stamps4/43.gif">
<!-- add more above this line -- they do best on mobile in groups of 3's! -->
</p>
<!-- end stamps -->
<!-- mini moodboard -->
<div class="row no-gutters mt-3">
<!--1-->
<div class="card col-md-3 mx-auto"
style="height: 100px; background:url(https://images.unsplash.com/photo-1655565851330-f70827154728?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
background-size:cover;background-position:center; background-repeat:no-repeat; border-radius:0px; border: solid #000000">
</div>
<!--2-->
<div class="card col-md-3 mx-auto"
style="height: 100px; background:url(https://images.unsplash.com/photo-1533294652670-73facaa10b64?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80);
background-size:cover;background-position:center; background-repeat:no-repeat; border-radius:0px; border: solid #000000">
</div>
<!--3-->
<div class="card col-md-3 mx-auto"
style="height: 100px; background:url(https://images.unsplash.com/photo-1607185864766-e79e0315bfbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
background-size:cover;background-position:center; background-repeat:no-repeat; border-radius:0px; border: solid #000000">
</div>
<!--4-->
<div class="card col-md-3 mx-auto"
style="height: 100px; background:url(https://images.unsplash.com/photo-1614113675082-37516c154f9a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
background-size:cover;background-position:center; background-repeat:no-repeat; border-radius:0px; border: solid #000000">
</div>
</div>
<!-- end moodboard -->
</div>
<div class="my-0 card col-md-3 mx-auto"
style="height: 30px; background:url(https://images.unsplash.com/photo-1565214975484-3cfa9e56f914?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&);
background-size:cover;background-position:center; background-repeat:no-repeat; border-radius:0px; border: solid #000000">
</div>
<div class="container p-1 col-md-3" style="background-color:rgba(23, 23, 23, 0.6);">
<!-- blinkies -->
<p style="text-align:center">
<img src="https://blinkies.neocities.org/b/display/0092-computerconnect.gif">
<img src="https://blinkies.neocities.org/b/display/0092-computerconnect.gif">
<img src="https://blinkies.neocities.org/b/display/0092-computerconnect.gif">
<!-- add more above this line -- they do best on mobile in groups of 3's! -->
</p>
<!-- end stamps -->
</div>
</div>
<!--
Profile Navigation
replace IDHERE with your character's id.
this would be the numbers you see when you go and look at your character's profile url.
if you need help with it/don't know what i mean, please ask ^^'
-->
<div class="card mt-1 mx-auto col-md-3" style="border-radius:0px; border: solid #000000; text-align:center">
<div class="text-info" style="letter-spacing:1rem; font-size:20px">
<!--- favorite --->
<a data-toggle="th-favorite" title="favorite"><i class="fa-solid fa-star"></i></a>
<!--- gallery --->
<a href="https://toyhou.se/IDHERE/gallery" data-toggle="tooltip" title="gallery"><i class="fa-solid fa-image"></i></a>
<!--- library --->
<a href="https://toyhou.se/IDHERE/literatures" data-toggle="tooltip" title="literature library"><i class="fa-solid fa-book"></i></a>
<!--- worlds --->
<a href="https://toyhou.se/IDHERE/worlds" data-toggle="tooltip" title="worlds"><i class="fa-solid fa-globe"></i></a>
<!--- links --->
<a href="https://toyhou.se/IDHERE/links" data-toggle="tooltip" title="links"><i class="fa-solid fa-link"></i></a>
<!--- comments --->
<a href="https://toyhou.se/IDHERE/comments" data-toggle="tooltip" title="character comments"><i class="fa-solid fa-comment"></i></a>
</div></div>
<!-- end profile nav -->
<!-- Top Font Awesome Icon -->
<div class="hidden-sm-down">
<i class="fa-solid fa-dragon fa-4x" style="position:absolute; top:230px; left:810px"></i>
</div>
<!-------------->
<!-- credit -->
<div class="card my-1 mx-auto col-md-3" style="border-radius:0px; border: solid #000000; text-align:center">
<a href="https://toyhou.se/MK_/characters/folder:3368881" class="mt-1" data-toggle="tooltip" title="Code by MK_" style="font-family: trebuchet">
<i class="far mb-1 fa-code fa-1x"></i>
</a>
</div>
<!------------>
<div class="card my-1 mx-auto col-md-3 p-1" style="border-radius:0px; border: solid #000000; text-align:center"></div>
