<!---
DEEP COMA / by cati/dogboy
NOTES
accent: #992B4F
(use ctrl+f + replace for accent 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!!
--->
<!--- bg pattern --->
<div class="container-fluid" style="background:url(https://64.media.tumblr.com/790dd1d36ecb55a56dc3bb2bf283192f/tumblr_inline_ml9be4dDcn1qz4rgp.gif) repeat fixed;padding:20px;border-radius:10px;max-width:800px;margin:30px auto 5px;">
<div class="mx-2" style="border-radius:0px;background-color:#992B4F;">
<!--- quote --->
<p class="text-uppercase mb-3 p-3 font-italic" style="color:#FFFFFF;font-size:18px;letter-spacing:1px;font-weight:800;" align="center"><i class="fas fa-quote-left" style="color:#FFFFFF" />
quote here!
<i class="fas fa-quote-right" style="color:#FFFFFF" /></p>
</div>
<div class="row no-gutters">
<div class="col-sm-3">
<!--- first image --->
<div class="card mx-2 my-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/27793382_uvhcBU7YajWyEgQ.png);background-size:cover;background-position:center;height:300px;border:1px solid #992B4F;"></div>
</div>
<div class="col-lg-9">
<div class="card mx-2" style="background-color:#FFFFFF;border:1px solid #992B4F;">
<div class="row no-gutters">
<div class="col-lg-6 my-3 p-3">
<!--- column info --->
<div class="justify-content-between">
<div><span class="font-italic" style="color:#992B4F;font-size:12px;letter-spacing:3px;">NAME</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<hr style="width:95%;background-color:#992B4F;">
<div class="justify-content-between">
<div><span class="font-italic" style="color:#992B4F;font-size:12px;letter-spacing:3px;">AGE</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<hr style="width:95%;background-color:#992B4F;">
<div class="justify-content-between">
<div><span class="font-italic" style="color:#992B4F;font-size:12px;letter-spacing:3px;">GENDER</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<hr style="width:95%;background-color:#992B4F;">
<div class="justify-content-between">
<div><span class="font-italic" style="color:#992B4F;font-size:12px;letter-spacing:3px;">BIRTHDAY</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<hr style="width:95%;background-color:#992B4F;">
<div class="justify-content-between">
<div><span class="font-italic" style="color:#992B4F;font-size:12px;letter-spacing:3px;">SPECIES</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
</div>
<div class="col-lg-6 my-3 p-3">
<!--- column info 2 --->
<div class="justify-content-between">
<div><span class="font-italic" style="color:#992B4F;font-size:12px;letter-spacing:3px;">HEIGHT</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<hr style="width:95%;background-color:#992B4F;">
<div class="justify-content-between">
<div><span class="font-italic" style="color:#992B4F;font-size:12px;letter-spacing:3px;">RESIDENCE</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<hr style="width:95%;background-color:#992B4F;">
<div class="justify-content-between">
<div><span class="font-italic" style="color:#992B4F;font-size:12px;letter-spacing:3px;">OCCUPATION</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<hr style="width:95%;background-color:#992B4F;">
<div class="justify-content-between">
<div><span class="font-italic" style="color:#992B4F;font-size:12px;letter-spacing:3px;">STATUS</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<hr style="width:95%;background-color:#992B4F;">
<div class="justify-content-between">
<div><span class="font-italic" style="color:#992B4F;font-size:12px;letter-spacing:3px;">WORTH</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters mt-3">
<div class="col-lg-9">
<div class="card mx-2 p-3" style="background-color:#FFFFFF;border:1px solid #992B4F;height:307px;overflow:auto;">
<div class="tab-content">
<!--- first panel, basics --->
<div class="tab-pane active show card-block" id="BASICS">
<h1 class="text-uppercase text-center font-italic" style="color:#992B4F;font-size:30px;font-weight:800;">TITLE</h1>
<div class="text-center">
<!--- stamps --->
<img class="m-2" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c17b76db-1cc0-436b-806a-ba5cdb38c998/datmrvf-d3e04ddf-671a-4bf8-bc7a-3e68753c0b6f.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvYzE3Yjc2ZGItMWNjMC00MzZiLTgwNmEtYmE1Y2RiMzhjOTk4XC9kYXRtcnZmLWQzZTA0ZGRmLTY3MWEtNGJmOC1iYzdhLTNlNjg3NTNjMGI2Zi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.A-IF70j8G5i12pc3P58V3rOcVCEdCxB_hCKsq125aq4">
<img class="m-2" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/68c1425c-d3f4-47d1-91f6-1d62e178b725/d6dpjex-043cc47d-ef99-4180-9868-a54a8b24186b.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNjhjMTQyNWMtZDNmNC00N2QxLTkxZjYtMWQ2MmUxNzhiNzI1XC9kNmRwamV4LTA0M2NjNDdkLWVmOTktNDE4MC05ODY4LWE1NGE4YjI0MTg2Yi5naWYifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.NHM89fszAzpn7ygmv2bWAEJx9sqItfbR73ImI7mbzKY">
<img class="m-2" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9865a25b-3dcf-4076-ad61-b1e7a6a31980/darpryy-ba895b23-0848-4267-9112-d025a1fd449f.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvOTg2NWEyNWItM2RjZi00MDc2LWFkNjEtYjFlN2E2YTMxOTgwXC9kYXJwcnl5LWJhODk1YjIzLTA4NDgtNDI2Ny05MTEyLWQwMjVhMWZkNDQ5Zi5naWYifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.nj-w_O_714TJIugPeo4N6tYglaeE7xyAZ2YKziFmsVE">
</div>
<!--- intro description --->
<p class="text-center" style="color:#992B4F;font-size:13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
</div>
<!--- second tab, stats --->
<div class="tab-pane card-block pb-0" id="STATS">
<h1 class="text-uppercase text-center font-italic" style="color:#992B4F;font-size:25px;font-weight:800;">STATS</h1>
<!--- stats bars, higher percentage = closer to the right! credit to Eggy for this concept. if you change the name of the stat the width of the overall progress bar will change, so keep that in mind! --->
<div class="col-12 mb-4">
<span class="pr-3 text-uppercase font-weight-bold font-italic pull-left" style="color:#992B4F;font-size:14px;letter-spacing:1px;border-radius:8px;">intro</span>
<span class="pl-3 text-uppercase font-weight-bold font-italic pull-right" style="color:#992B4F;font-size:14px;letter-spacing:1px;border-radius:8px;">extro</span>
<div class="progress rounded-0 mt-3">
<div class="progress-bar" style="color:#992B4F;background:none;border-right-width:8px;border-right-style:solid;
width:51%">
</div>
</div>
<br>
<span class="pr-3 text-uppercase font-weight-bold font-italic pull-left" style="color:#992B4F;font-size:14px;letter-spacing:1px;border-radius:8px;">logic</span>
<span class="pl-3 text-uppercase font-weight-bold font-italic pull-right" style="color:#992B4F;font-size:14px;letter-spacing:1px;border-radius:8px;">feelin</span>
<div class="progress rounded-0">
<div class="progress-bar" style="color:#992B4F;background:none;border-right-width:8px;border-right-style:solid;
width:52%">
</div>
</div>
<br>
<span class="pr-3 text-uppercase font-weight-bold font-italic pull-left" style="color:#992B4F;font-size:14px;letter-spacing:1px;border-radius:8px;">order</span>
<span class="pl-3 text-uppercase font-weight-bold font-italic pull-right" style="color:#992B4F;font-size:14px;letter-spacing:1px;border-radius:8px;">haste</span>
<div class="progress rounded-0">
<div class="progress-bar" style="color:#992B4F;background:none;border-right-width:8px;border-right-style:solid;
width:51%">
</div>
</div>
</div>
<!--- appearance --->
<h1 class="text-uppercase text-center font-italic" style="color:#992B4F;font-size:25px;font-weight:800;">APPEARANCE</h1>
<p class="text-center" style="color:#992B4F;font-size:13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
<div class="row no-gutters mt-3">
<!--- likes and dislikes --->
<div class="col-lg-6">
<h1 class="text-uppercase text-center font-italic" style="color:#992B4F;font-size:25px;font-weight:800;">LIKES <i class="fas fa-heart"></i></h1>
<ul class="mt-2" style="color:#992B4F;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-lg-6">
<h1 class="text-uppercase text-center font-italic" style="color:#992B4F;font-size:25px;font-weight:800;">DISLIKES <i class="fas fa-heart-broken"></i></h1>
<ul class="mt-2" style="color:#992B4F;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--- trivia and notes --->
<h1 class="text-uppercase text-center font-italic" style="color:#992B4F;font-size:25px;font-weight:800;">TRIVIA AND NOTES</h1>
<ul class="mt-2" style="color:#992B4F;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<!--- third tab, history and personality --->
<div class="tab-pane card-block pb-0" id="HISTORY">
<!--- personality --->
<h1 class="text-uppercase text-center font-italic" style="color:#992B4F;font-size:25px;font-weight:800;">PERSONALITY</h1>
<p class="text-center" style="color:#992B4F;font-size:13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
<!--- history --->
<h1 class="text-uppercase text-center font-italic" style="color:#992B4F;font-size:25px;font-weight:800;">HISTORY</h1>
<p class="text-center" style="color:#992B4F;font-size:13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
</div>
<!--- fourth tab, relationships --->
<div class="tab-pane card-block pb-0" id="RELATIONSHIPS">
<h1 class="text-uppercase text-center font-italic" style="color:#992B4F;font-size:25px;font-weight:800;">RELATIONSHIPS</h1>
<div class="row no-gutters">
<!--- character 1 --->
<div class="col-4 mt-3 my-3 text-center">
<img class="fr-rounded" style="width:100px;border:2px solid #992B4F;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/27687170_2nn.png">
<h3 class="mt-2 text-uppercase text-center" style="color:#992B4F;letter-spacing:1px;"><a href="URLHERE" style="color:#992B4F;">name</a></h3>
<i class="fas fa-heart" style="font-size:22px;color:#992B4F;"></i>
<i class="fas fa-heart" style="font-size:22px;color:#992B4F;"></i>
<i class="far fa-heart" style="font-size:22px;color:#992B4F;"></i>
<p class="m-1" style="color: #992B4F;font-size:12px;height:100px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui.
</p>
</div>
<!--- character 2 --->
<div class="col-4 mt-3 my-3 text-center">
<img class="fr-rounded" style="width:100px;border:2px solid #992B4F;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/27763086_nc6.png">
<h3 class="mt-2 text-uppercase text-center" style="color:#992B4F;letter-spacing:1px;"><a href="URLHERE" style="color:#992B4F;">name</a></h3>
<i class="fas fa-heart" style="font-size:22px;color:#992B4F;"></i>
<i class="fas fa-heart" style="font-size:22px;color:#992B4F;"></i>
<i class="far fa-heart" style="font-size:22px;color:#992B4F;"></i>
<p class="m-1" style="color: #992B4F;font-size:12px;height:100px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui.
</p>
</div>
<!--- character 3, if you want to add more characters highlight until the next </div> and copy+paste! --->
<div class="col-4 mt-3 my-3 text-center">
<img class="fr-rounded" style="width:100px;border:2px solid #992B4F;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/27683755_Rro.png">
<h3 class="mt-2 text-uppercase text-center" style="color:#992B4F;letter-spacing:1px;"><a href="URLHERE" style="color:#992B4F;">name</a></h3>
<i class="fas fa-heart" style="font-size:22px;color:#992B4F;"></i>
<i class="fas fa-heart" style="font-size:22px;color:#992B4F;"></i>
<i class="far fa-heart" style="font-size:22px;color:#992B4F;"></i>
<p class="m-1" style="color: #992B4F;font-size:12px;height:100px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<!--- second image --->
<div class="card mx-2 my-1" style="background-image:url(https://cdn.discordapp.com/attachments/721095388492333169/770706700822249482/16.png);background-size:cover;background-position:center;height:300px;border:1px solid #992B4F;"></div>
</div>
</div>
<!--- navigation buttons --->
<div class="col-lg-12">
<ul class="nav nav-pills nav-justified mt-2">
<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:1px solid #992B4F;background-color:#FFFFFF;"><i class="fas fa-star" style="font-size:20px;color:#992B4F;"></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:1px solid #992B4F;background-color:#FFFFFF;"><i class="fas fa-chart-bar" style="font-size:20px;color:#992B4F;"></i></a></li>
<li class="nav-item mx-1 m-1 shadow-sm"><a class="nav-link" data-toggle="pill" href="#HISTORY" style="border-radius:10px;border:1px solid #992B4F;background-color:#FFFFFF;"><i class="fas fa-book" style="font-size:20px;color:#992B4F;"></i></a></li>
<li class="nav-item mx-1 m-1 shadow-sm"><a class="nav-link" data-toggle="pill" href="#RELATIONSHIPS" style="border-radius:10px;border:1px solid #992B4F;background-color:#FFFFFF;"><i class="fas fa-user-friends" style="font-size:20px;color:#992B4F;"></i></a></li>
</ul>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="https://toyhou.se/8662322.deep-coma-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
