<!---
REMNANT VIBE / by cati/dogboy
NOTES
accent: #8C4994
fav-icon: fas fa-bolt
(use ctrl+f + replace for accent/icon replacement)
mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<div class="container-fluid shadow" style="background:url(https://64.media.tumblr.com/tumblr_lvuln9WYkZ1r1ne7to5_250.png) repeat fixed;padding:10px;max-width:70%;margin:30px auto 5px;border:4px solid #8C4994;">
<div class="row no-gutters">
<div class="col-md-4 ml-2 p-2">
<div class="card col-12" style="background:none;border:0px;">
<ul class="nav nav-pills mb-1 mx-auto">
<li class="nav-item mr-1 m-1 shadow-sm"><a class="nav-link active" data-toggle="pill" href="#BASICS" style="border-radius:10px;border:0px;background-color:#FFFFFF;"><i class="fas fa-user" style="font-size:20px;color:#8C4994;"></i></a></li>
<li class="nav-item mx-1 m-1 shadow-sm"><a class="nav-link" data-toggle="pill" href="#STATS" style="border-radius:10px;border:0px;background-color:#FFFFFF;"><i class="fas fa-chart-bar" style="font-size:20px;color:#8C4994;"></i></a></li>
<li class="nav-item mx-1 m-1 shadow-sm"><a class="nav-link" data-toggle="pill" href="#TASTES" style="border-radius:10px;border:0px;background-color:#FFFFFF;"><i class="fas fa-heart-square" style="font-size:20px;color:#8C4994;"></i></a></li>
</ul>
</div>
<div class="card col-12 p-2 shadow" style="background-color:#FFFFFF;border-radius:10px;border:0px;">
<div class="tab-content" style="height:322px;overflow:auto;">
<div class="tab-pane active show card-block" style="height:322px;overflow:auto;" id="BASICS">
<!--- avatar --->
<center><div class="card shadow-sm" style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/26547680_wJg.png); background-size:cover;background-position:center;height:100px;width:100px;border:2px solid #8C4994;"></div></center>
<hr style="width:75%;background-color:#8C4994;">
<!--- first column info --->
<div class="justify-content-between my-2">
<div><div style="border-radius:8px;background-color:#8C4994;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">name</h3></div></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:8px;background-color:#8C4994;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">gender</h3></div></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:8px;background-color:#8C4994;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">height</h3></div></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:8px;background-color:#8C4994;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">specie</h3></div></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:8px;background-color:#8C4994;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">status</h3></div></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
</div>
<div class="tab-pane card-block pb-0" style="height:322px;overflow:auto;" id="STATS">
<!--- first column, second tab --->
<div class="row mx-auto">
<div class="col-12 mb-3">
<div class="row align-items-center">
<div class="col-lg">
<div class="card" style="background-color:#8C4994;"></div>
</div>
<div class="col-lg-auto">
<h1 class="font-italic text-uppercase text-center" style="color:#8C4994;font-size:25px;letter-spacing:3px;">STATS</h1>
</div>
<div class="col-lg">
<div class="card" style="background-color:#8C4994;"></div>
</div>
</div>
</div>
<!--- stats bars, higher percentage = closer to the right! credit to Eggy for this concept --->
<div class="col-12 mb-3">
<span class="p-1 text-uppercase font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:1px;background:#8C4994;border-radius:8px;">extro</span>
<span class="p-1 text-uppercase font-weight-bold pull-right" style="color:#FFFFFF;font-size:12px;letter-spacing:1px;background:#8C4994;border-radius:8px;">intro</span>
<div class="progress rounded-0 m-2">
<div class="progress-bar" style="color:#8C4994;background:none;border-right-width:8px;border-right-style:solid;
width:50%">
</div>
</div>
</div>
<div class="col-12 mb-3">
<span class="p-1 text-uppercase font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:1px;background:#8C4994;border-radius:8px;">real</span>
<span class="p-1 text-uppercase font-weight-bold pull-right" style="color:#FFFFFF;font-size:12px;letter-spacing:1px;background:#8C4994;border-radius:8px;">intui</span>
<div class="progress rounded-0 m-2">
<div class="progress-bar" style="color:#8C4994;background:none;border-right-width:8px;border-right-style:solid;
width:50%">
</div>
</div>
</div>
<div class="col-12 mb-3">
<span class="p-1 text-uppercase font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:1px;background:#8C4994;border-radius:8px;">logic</span>
<span class="p-1 text-uppercase font-weight-bold pull-right" style="color:#FFFFFF;font-size:12px;letter-spacing:1px;background:#8C4994;border-radius:8px;">feel</span>
<div class="progress rounded-0 m-2">
<div class="progress-bar" style="color:#8C4994;background:none;border-right-width:8px;border-right-style:solid;
width:50%">
</div>
</div>
</div>
<div class="col-12 mb-3">
<span class="p-1 text-uppercase font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:1px;background:#8C4994;border-radius:8px;">order</span>
<span class="p-1 text-uppercase font-weight-bold pull-right" style="color:#FFFFFF;font-size:12px;letter-spacing:1px;background:#8C4994;border-radius:8px;">hasty</span>
<div class="progress rounded-0 m-2">
<div class="progress-bar" style="color:#8C4994;background:none;border-right-width:8px;border-right-style:solid;
width:50%">
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane card-block pb-0" style="height:322px;overflow:auto;" id="TASTES">
<!--- first column, third tab --->
<div class="row align-items-center">
<div class="col-lg">
<h1 class="font-italic text-uppercase text-center" style="color:#8C4994;font-size:25px;letter-spacing:3px;">LIKES</h1>
</div>
<div class="col-lg">
<div class="card" style="background-color:#8C4994;"></div>
</div>
</div>
<ul class="mt-2" style="color:#8C4994;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<div class="row align-items-center">
<div class="col-lg">
<h1 class="font-italic text-uppercase text-center" style="color:#8C4994;font-size:25px;letter-spacing:2px;">DISLIKES</h1>
</div>
<div class="col-lg">
<div class="card" style="background-color:#8C4994;"></div>
</div>
</div>
<ul class="mt-2" style="color:#8C4994;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<div class="row align-items-center">
<div class="col-lg">
<h1 class="font-italic text-uppercase text-center" style="color:#8C4994;font-size:25px;letter-spacing:2px;">TRIVIA</h1>
</div>
<div class="col-lg">
<div class="card" style="background-color:#8C4994;"></div>
</div>
</div>
<ul class="mt-2" style="color:#8C4994;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 p-1">
<div class="card ml-2 my-3 col-12 shadow" style="background-color:#FFFFFF;border-radius:10px;border:0px;">
<div class="tab-content" style="height:322px;overflow:auto;">
<div class="tab-pane active show card-block" style="height:322px;overflow:auto;" id="INTRO">
<div class="mx-auto p-1 my-2 mb-3" style="border-radius:8px;background-color:#8C4994;border:4px #FFFFFF;"><p class="text-lowercase m-2 font-italic" style="color:#FFFFFF;font-size:20px;letter-spacing:1px;" align="center">
<!--- quote/title/etc, keep it short! --->
<i class="far fa-quote-left" style="color:#FFFFFF" /> today's vibes are wicked. <i class="far fa-quote-right" style="color:#FFFFFF" /></p></div>
<div align="center">
<!--- traits --->
<span class="p-1 text-uppercase font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:1px;background:#8C4994;border-radius:8px;">trait</span>
<i class="p-2 fas fa-bolt m-auto" style="color:#8C4994"></i>
<span class="p-1 text-uppercase font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:1px;background:#8C4994;border-radius:8px;">trait</span>
<i class="p-2 fas fa-bolt m-auto" style="color:#8C4994"></i>
<span class="p-1 text-uppercase font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:1px;background:#8C4994;border-radius:8px;">trait</span>
<!--- summary --->
<p class="text-center p-3 font-italic" style="color:#8C4994;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.</p>
<!--- color palette --->
<center>
<i class="fas fa-bolt fa-2x" style="color: #B1E6F8;"></i>
<i class="fas fa-bolt fa-2x ml-2" style="color: #6C4491;"></i>
<i class="fas fa-bolt fa-2x ml-2" style="color: #BC8268;"></i>
<i class="fas fa-bolt fa-2x ml-2" style="color: #2D0E43;"></i>
<i class="fas fa-bolt fa-2x ml-2" style="color: #75408D;"></i></center>
<!--- stamps --->
<img class="mt-3"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0f6807d7-7fe9-4898-918b-a61c0d545d75/ddmnv2f-6fef7e79-cc8b-40ce-9584-6d856d973474.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMGY2ODA3ZDctN2ZlOS00ODk4LTkxOGItYTYxYzBkNTQ1ZDc1XC9kZG1udjJmLTZmZWY3ZTc5LWNjOGItNDBjZS05NTg0LTZkODU2ZDk3MzQ3NC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.sxsCc7FaUxBbTYTpC1QMpkYetL6ItAL3OfDUyIiwIro">
<img class="mt-3 ml-2"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2f5cf225-3fed-42e2-819a-6b96622e434f/ddl379j-86c55ac4-2b21-4884-9e22-c6ebd42327c5.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMmY1Y2YyMjUtM2ZlZC00MmUyLTgxOWEtNmI5NjYyMmU0MzRmXC9kZGwzNzlqLTg2YzU1YWM0LTJiMjEtNDg4NC05ZTIyLWM2ZWJkNDIzMjdjNS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.WsytoQ14H7bkZxx7nEWPeubVPcD9DD4ico4YqGyNI8M">
<img class="mt-3 ml-2"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/bcc6e2dd-7490-47d2-8261-07474db5646e/d47oudc-d3bf6cfc-497a-425d-bc94-87d59f215b99.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvYmNjNmUyZGQtNzQ5MC00N2QyLTgyNjEtMDc0NzRkYjU2NDZlXC9kNDdvdWRjLWQzYmY2Y2ZjLTQ5N2EtNDI1ZC1iYzk0LTg3ZDU5ZjIxNWI5OS5naWYifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.Y6F1IEgaj1uhQ56OHXgAw2mD4AtQ3OpEvWR8qTiPw6Y"><br></div>
</div>
<div class="tab-pane card-block pb-0" id="STORY">
<h3 class="text-uppercase font-italic my-3 p-0 pull-left" style="color:#8C4994;font-size:20px;letter-spacing:3px;" align="center">Personality</h3>
<hr class="my-1" style="width:90%;background-color:#8C4994;">
<!--- personality --->
<p class="p-3" style="color:#8C4994;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.</p>
<h3 class="text-uppercase font-italic p-0 pull-left" style="color:#8C4994;font-size:20px;letter-spacing:3px;" align="center">History</h3>
<hr class="my-1" style="width:90%;background-color:#8C4994;">
<!--- backstory --->
<p class="p-3" style="color:#8C4994;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.</p>
</div>
<div class="tab-pane card-block pb-0" id="LINKS">
<!--- relationships, fas fa-heart is a complete heart, far fa-heart is an empty one! --->
<!--- character 1 --->
<h3 class="text-uppercase font-italic my-2 p-0 pull-left"><a href="URLHERE" style="color:#8C4994;font-size:20px;letter-spacing:2px;">Name</a></h3>
<i class="fas fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="fas fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="fas fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="fas fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="fas fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<hr class="my-1" style="width:100%;background-color:#8C4994;">
<img class="fr-rounded mt-2 shadow-sm" style="height:140px;border:2px solid #8C4994;" align="right" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/26551665_YhF.png">
<p class="p-3" style="color:#8C4994;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.</p>
<!--- character 2 --->
<h3 class="text-uppercase font-italic p-0 pull-left"><a href="URLHERE" style="color:#8C4994;font-size:20px;letter-spacing:2px;">Name</a></h3>
<i class="far fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="fas fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="fas fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="fas fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="fas fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<hr class="my-1" style="width:100%;background-color:#8C4994;">
<img class="fr-rounded mt-2 shadow-sm" style="height:140px;border:2px solid #8C4994;" align="right" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/26549708_Dwb.png">
<p class="p-3" style="color:#8C4994;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.</p>
<!--- character 3 --->
<h3 class="text-uppercase font-italic p-0 pull-left"><a href="URLHERE" style="color:#8C4994;font-size:20px;letter-spacing:2px;">Name</a></h3>
<i class="far fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="far fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="fas fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="fas fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="fas fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<hr class="my-1" style="width:100%;background-color:#8C4994;">
<img class="fr-rounded mt-2 shadow-sm" style="height:140px;border:2px solid #8C4994;" align="right" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/26549000_BzV.png">
<p class="p-3" style="color:#8C4994;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.</p>
<!--- character 4 --->
<h3 class="text-uppercase font-italic p-0 pull-left"><a href="URLHERE" style="color:#8C4994;font-size:20px;letter-spacing:2px;">Name</a></h3>
<i class="far fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="far fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="far fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="fas fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<i class="fas fa-heart my-2 pull-right" style="font-size:22px;color:#8C4994;"></i>
<hr class="my-1" style="width:100%;background-color:#8C4994;">
<img class="fr-rounded mt-2 shadow-sm" style="height:140px;border:2px solid #8C4994;" align="right" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/26518763_Ypz.png">
<p class="p-3" style="color:#8C4994;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.</p>
</div>
</div>
</div>
<ul class="nav nav-pills nav-justified mb-1 ml-2">
<li class="nav-item mr-1 m-1 shadow-sm"><a class="nav-link active" data-toggle="pill" href="#INTRO" style="border-radius:10px;border:0px;background-color:#FFFFFF;"><i class="fas fa-star" style="font-size:20px;color:#8C4994;"></i></a></li>
<li class="nav-item mx-1 m-1 shadow-sm"><a class="nav-link" data-toggle="pill" href="#STORY" style="border-radius:10px;border:0px;background-color:#FFFFFF;"><i class="fas fa-book" style="font-size:20px;color:#8C4994;"></i></a></li>
<li class="nav-item mx-1 m-1 shadow-sm"><a class="nav-link" data-toggle="pill" href="#LINKS" style="border-radius:10px;border:0px;background-color:#FFFFFF;"><i class="fas fa-user-friends" style="font-size:20px;color:#8C4994;"></i></a></li>
</ul>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="https://toyhou.se/8484569.remnant-vibe-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
<!--- pagedoll --->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/27269849_EKtrdwaFN3p8ZV4.png" style="margin-top:-38%;margin-left:70%;max-width:25%;">
