Misty
created by:dragon-heist
HTMLCustom ColorsCharacter
Copy
<!-----------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------
All paper textures were sourced from freepik.com!
-------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------->
<!---------------- IMAGE BACKGROUND ----------------->
<div class="w-100 h-100" style="position:absolute; z-index:-2; top:0; left:0; overflow:hidden;">
<div class="w-100" style="position:absolute; z-index:-1; top:0px; bottom:0; background-size:cover; background-position:center; background-attachment:fixed;
background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/111534579_izXBnK6o3nvHbaY.jpg')"></div>
</div>
<!-------------- IMAGE BACKGROUND (end) ------------->
<!---------------- GRADIENT BACKGROUND --------------->
<div class="w-100 h-100" style="position:absolute; z-index:-1; top:0px; left:0px; overflow:hidden">
<div class="w-100" style="position:absolute; z-index:-1; top:30%; bottom:0;
background: linear-gradient(180deg,rgba(255, 255, 255, 0) 20%,rgba(183, 199, 191, 0.5) 100%);"></div>
</div>
<!------------ GRADIENT BACKGROUND (end) ------------->
<!-----------------------------------------------------------------------------------------
----------------------------------- MAIN PROFILE CONTENT ----------------------------------
------------------------------------------------------------------------------------------->
<div class="d-flex flex-wrap justify-content-center p-0" style="
--img-character-portrait: url('https://64.media.tumblr.com/51c22088f60d73f64e411dabbea9d4ae/c4f07e833c92ce1a-a8/s540x810/8c4908c2a78b49a0d936e8a3fd13f3ac4ed78409.gif');
--img-sidebar-first: url('https://64.media.tumblr.com/7d262c281e1f659fbbd5c8a2ac4c7c64/tumblr_njbul3JZi21t8xya8o1_540.gifv');
--img-sidebar-second: url('https://s03.video.glbimg.com/x240/13021294.jpg');
--img-sidebar-third: url('https://cdn.bagogames.com/wp-content/uploads/2015/11/04111317/Pathologic_Classic_HD_BagoGames_4.jpg');
--bg-img-sidebar: url('https://f2.toyhou.se/file/f2-toyhou-se/images/111534591_8kqaaXycgfGFkeE.jpg');
--bg-img-tabs: url('https://f2.toyhou.se/file/f2-toyhou-se/images/111534602_hqnGqpaT4IS90yI.jpg');
--bg-img-body: url('https://f2.toyhou.se/file/f2-toyhou-se/images/111534791_Jqwe1qPA35s3ZAi.jpg');
--bg-img-textbox: url('https://f2.toyhou.se/file/f2-toyhou-se/images/111534872_Mz50LCqSiHRANwb.jpg');
--infobox-bg-position-odd: center 5%;
--infobox-bg-position-even: center 95%;
--header-font-family: Avenir, serif;
--header-font-size: 2em;
--nav-font-family: Baskerville Old Face, serif;
--nav-font-size: 1.3em;
--body-font-family: Baskerville Old Face, serif;
--relation-name-font-size: 1.5em;
--relation-border-style: double;
--relation-border-width: 4px;
--border-color: #23171a;
--dropshadow-color: #23171a;
--name-color: #23171a;
--text-color: #201919;
--hard-shadow-color: rgba(0,0,0,.5);
--divider-color: #54484b;
--sidebar-info-shadow: drop-shadow(-.2em .2em 0 var(--dropshadow-color));
--textbox-shadow: drop-shadow(-.2em .2em .25em var(--dropshadow-color));
--sidebar-img-shadow: drop-shadow(.5em .5em 0 var(--dropshadow-color));
">
<!----------- CHARACTER SIDEBAR + INFO ---------->
<div class="col-xl-auto col-lg-4 p-lg-1" style="min-width:300px; filter:var(--sidebar-info-shadow);">
<div class="sticky-top p-0">
<!-- CHARACTER SIDEBAR -->
<div class="col-auto px-3 pt-3" style="
background:var(--bg-img-sidebar);
background-size;cover;
background-position:center;
background-repeat:no-repeat;
position:relative;
overflow:none;
font-size:2.5em;">
<div class="" style="position:absolute; bottom:-.2em; left:.15em; opacity:.5; color:var(--name-color);"><i class="far fa-signature"></i></div>
<!-- CHARACTER IMAGE -->
<div class="w-100" style="height:320px;
background:var(--img-character-portrait);
background-position:center;
background-size:cover;
background-repeat:no-repeat;"></div>
<!-- CHARACTER NAME -->
<div class="text-center mt-1 pb-2" style="font-family: var(--header-font-family); font-weight:600; color:var(--name-color)">
Character
</div>
</div>
<!-- CHARACTER SIDEBAR (end) -->
<!-- SIDEBAR INFO -->
<div class="py-0 px-2 mr-n1" style="font-size:1.2em;">
<!-- 1. 1ST INFO LABEL; make sure this stays on top! -->
<div class="card border-right-0 rounded-0 mt-1 py-1 px-3 mr-2" style="border-color:var(--border-color); color:var(--text-color); font-family:var(--body-font-family); background:var(--bg-img-tabs); background-position:var(--infobox-bg-position-odd);">
<div class="row no-gutters justify-content-between">
<!-- Label -->
<span class="font-weight-bold"><i class="far fa-cake"></i> Age</span>
<!-- Info -->
<span>content</span>
</div>
</div>
<!-- 2. EVEN INFO LABEL; make sure you use this on even numbers -->
<div class="card border-top-0 border-right-0 rounded-0 py-1 px-3 ml-2" style="border-color:var(--border-color); color:var(--text-color); font-family:var(--body-font-family); background:var(--bg-img-tabs); background-position:var(--infobox-bg-position-even);">
<div class="row no-gutters justify-content-between">
<!-- Label -->
<span class="font-weight-bold"><i class="far fa-venus-mars"></i> Pronouns</span>
<!-- Info -->
<span>content</span>
</div>
</div>
<!-- 3. ODD INFO LABEL; make sure you use this on odd numbers -->
<div class="card border-top-0 border-right-0 rounded-0 py-1 px-3 mr-2" style="border-color:var(--border-color); color:var(--text-color); font-family:var(--body-font-family); background:var(--bg-img-tabs); background-position:var(--infobox-bg-position-odd);">
<div class="row no-gutters justify-content-between">
<!-- Label -->
<span class="font-weight-bold"><i class="far fa-map"></i> Location</span>
<!-- Info -->
<span>content</span>
</div>
</div>
<!-- 4. EVEN INFO LABEL-->
<div class="card border-top-0 border-right-0 rounded-0 py-1 px-3 ml-2" style="border-color:var(--border-color); color:var(--text-color); font-family:var(--body-font-family); background:var(--bg-img-tabs); background-position:var(--infobox-bg-position-even);">
<div class="row no-gutters justify-content-between">
<!-- Label -->
<span class="font-weight-bold"><i class="far fa-suitcase"></i> Occupation</span>
<!-- Info -->
<span>content</span>
</div>
</div>
<!-- 5. ODD INFO LABEL -->
<div class="card border-top-0 border-right-0 rounded-0 py-1 px-3 mr-2" style="border-color:var(--border-color); color:var(--text-color); font-family:var(--body-font-family); background:var(--bg-img-tabs); background-position:var(--infobox-bg-position-odd);">
<div class="row no-gutters justify-content-between">
<span class="font-weight-bold"><i class="far fa-star"></i> Label</span>
<span>content</span>
</div>
</div>
<!-- 6. EVEN INFO LABEL-->
<div class="card border-top-0 border-right-0 rounded-0 py-1 px-3 ml-2" style="border-color:var(--border-color); color:var(--text-color); font-family:var(--body-font-family); background:var(--bg-img-tabs); background-position:var(--infobox-bg-position-even);">
<div class="row no-gutters justify-content-between">
<!-- Label -->
<span class="font-weight-bold"><i class="far fa-star"></i> Label</span>
<!-- Info -->
<span>content</span>
</div>
</div>
</div>
<!-- SIDEBAR INFO (end) -->
</div>
</div>
<!-------- CHARACTER SIDEBAR + INFO (end) ------->
<!----------- MAIN INFORMATION SECTION ----------->
<div class="col-xl-4 col-lg-8 d-flex flex-wrap p-lg-1 mt-lg-0 mt-4" id="basic">
<!-- NAVIGATION; tabs at the top of the info section -->
<div class="sticky-top mx-auto">
<!-- Basic Info Button -->
<a href="#basic" class="btn btn-default rounded-0 py-1 px-2" style="font-family:var(--nav-font-family); font-size:var(--nav-font-size); border-color:var(--border-color); color:var(--text-color); border-width:2px; background:var(--bg-img-tabs); background-position:center 3%;">
<i class="fa-regular fa-folders mr-md-2"></i><span class="d-md-inline d-none">Basic Info</span>
</a>
<!-- Personality Button -->
<a href="#personality" class="btn btn-default rounded-0 py-1 px-2" style="font-family:var(--nav-font-family); font-size:var(--nav-font-size); border-color:var(--border-color); color:var(--text-color); border-width:2px; background:var(--bg-img-tabs); background-position:center 3%;">
<i class="fa-regular fa-comments mr-md-2"></i><span class="d-md-inline d-none">Personality</span>
</a>
<!-- Relations Button -->
<a href="#relations" class="btn btn-default rounded-0 py-1 px-2" style="font-family:var(--nav-font-family); font-size:var(--nav-font-size); border-color:var(--border-color); color:var(--text-color); border-width:2px; background:var(--bg-img-tabs); background-position:center 3%;">
<i class="fa-regular fa-users mr-md-2"></i><span class="d-md-inline d-none">Relations</span>
</a>
</div>
<!-- NAVIGATION (end) -->
<!-- INFORMATION CONTENT -->
<div class="card rounded-0 p-lg-4 p-3 w-100" style="
background-attachment:fixed;
background:var(--bg-img-body);
font-family: serif; font-size:1.07em; letter-spacing:.3px; color:var(--text-color);
border: 2px solid var(--border-color);
margin-top:-2px;">
<!-- BASIC INFORMATION -->
<div>
<!-- Title -->
<div class="text-center font-weight-bold" style="font-family: var(--header-font-family); font-size:var(--header-font-size); letter-spacing:1px;">
Basic Information
</div>
<hr class="w-100 mt-2 mb-3" style="border-top-width:3px; border-style:dashed; border-color:var(--divider-color);">
<!-- Basic Information Content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et vestibulum tortor, sit amet luctus sapien. Nunc dapibus eros pharetra velit tincidunt, non tristique nunc eleifend. Quisque odio neque, rutrum eget augue sit amet, finibus dignissim nunc. Praesent dapibus blandit volutpat. Mauris nec sem ultrices nulla bibendum vulputate eu nec purus. Nullam vel rhoncus ligula, ac pulvinar mauris. Ut id lacus imperdiet, tincidunt urna at, lobortis est. Suspendisse sit amet nisi consequat, pretium turpis sed, fermentum libero. Fusce tempor, dui id fringilla faucibus, nisl orci malesuada quam, at faucibus nunc mauris id risus.</p>
<p>Aenean ex purus, interdum ac ornare sit amet, pellentesque id ipsum. Nulla consequat varius lacus, feugiat facilisis magna. Aliquam rutrum sem nibh, vel tincidunt nulla sodales laoreet. Praesent semper sollicitudin urna ac consectetur. Sed bibendum, nisi vel feugiat imperdiet, magna nunc ullamcorper massa, ut porttitor risus massa feugiat dolor. Proin cursus aliquam ornare. Sed sed cursus ante. Nunc dui massa, pharetra pharetra eros vel, viverra condimentum lacus. Phasellus elementum enim ac turpis aliquam, semper tincidunt sapien gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eget felis diam. Aliquam a tincidunt neque. Praesent dapibus elit at ligula dictum mattis. </p>
<!-- Basic Information Content (end); add more <p> above here to continue adding more text -->
</div>
<!-- BASIC INFORMATION (end) -->
<!-- PERSONALITY -->
<div id="personality" class="pt-4">
<div class="text-center font-weight-bold" style="font-family: var(--header-font-family); font-size:var(--header-font-size); letter-spacing:1px;">
Personality
</div>
<hr class="w-100 mt-2 mb-3" style="border-top-width:3px; border-style:dashed; border-color:var(--divider-color);">
<!-- Traits Box; optional, remove if you don't want to have this here! -->
<div class="p-0 mr-lg-4 my-lg-3 mt-2 mb-4 float-left">
<div class="p-2 ml-lg-n2 mr-lg-0 mx-5" style="width:175px; background:var(--bg-img-textbox);
background-repeat:no-repeat; background-position:top; filter:var(--textbox-shadow);">
<ul class="fa-ul ml-1 py-1 m-0" style="font-size:1.05em;">
<li><i class="fas fa-dash mr-1"></i> Trait</li>
<li><i class="fas fa-dash mr-1"></i> Trait</li>
<li><i class="fas fa-dash mr-1"></i> Trait</li>
<li><i class="fas fa-dash mr-1"></i> Trait</li>
<li><i class="fas fa-dash mr-1"></i> Trait</li>
<li><i class="fas fa-dash mr-1"></i> Trait</li>
</ul>
</div>
</div>
<!-- Traits Box (end) -->
<!-- Personality Content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et vestibulum tortor, sit amet luctus sapien. Nunc dapibus eros pharetra velit tincidunt, non tristique nunc eleifend. Quisque odio neque, rutrum eget augue sit amet, finibus dignissim nunc. Praesent dapibus blandit volutpat. Mauris nec sem ultrices nulla bibendum vulputate eu nec purus. Nullam vel rhoncus ligula, ac pulvinar mauris. Ut id lacus imperdiet, tincidunt urna at, lobortis est. Suspendisse sit amet nisi consequat, pretium turpis sed, fermentum libero. Fusce tempor, dui id fringilla faucibus, nisl orci malesuada quam, at faucibus nunc mauris id risus.</p>
<p>Aenean ex purus, interdum ac ornare sit amet, pellentesque id ipsum. Nulla consequat varius lacus, feugiat facilisis magna. Aliquam rutrum sem nibh, vel tincidunt nulla sodales laoreet. Praesent semper sollicitudin urna ac consectetur. Sed bibendum, nisi vel feugiat imperdiet, magna nunc ullamcorper massa, ut porttitor risus massa feugiat dolor. Proin cursus aliquam ornare. Sed sed cursus ante. Nunc dui massa, pharetra pharetra eros vel, viverra condimentum lacus. Phasellus elementum enim ac turpis aliquam, semper tincidunt sapien gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eget felis diam. Aliquam a tincidunt neque. Praesent dapibus elit at ligula dictum mattis. </p>
<!-- Personality Content (end); add more <p> above here to continue adding more text -->
</div>
<!-- PERSONALITY (end) -->
<!-- RELATIONS -->
<div id="relations" class="pt-4">
<!-- Title -->
<div class="text-center font-weight-bold" style="font-family: var(--header-font-family); font-size:var(--header-font-size); letter-spacing:1px;">
Relations
</div>
<hr class="w-100 mt-2 mb-3" style="border-top-width:3px; border-style:dashed; border-color:var(--divider-color);">
<!-- Relation Block - copy and paste one of these blocks to add more -->
<div class="p-0 mt-5 d-flex flex-wrap justify-content-center">
<div class="col-auto p-2 ml-n2" style="height:150px; width:150px; background:var(--bg-img-sidebar);
background-repeat:no-repeat; background-position:center; filter:var(--textbox-shadow);">
<!-- Character Image URL -->
<div class="w-100 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706311_TJ1t0rQV6agATV2.png');
background-repeat:no-repeat; background-position:center; background-size:cover;"></div>
</div>
<div class="col-lg pl-lg-4 pr-lg-0 py-lg-0 py-3 mr-lg-n2">
<!-- Character Name -->
<p class="mb-2 card bg-transparent border-top-0 border-left-0 border-right-0 rounded-0 mr-lg-4 mr-2" style="font-size:var(--relation-name-font-size); border-style:var(--relation-border-style); border-width:var(--relation-border-width); border-color:var(--divider-color);">
Name
</p>
<!-- Relation Description -->
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eget felis diam. Aliquam a tincidunt neque.</p>
</div>
</div>
<!-- Relation Block (end) -->
<!-- Relation Block -->
<div class="p-0 mt-5 d-flex flex-wrap justify-content-center">
<div class="col-auto p-2 ml-n2" style="height:150px; width:150px; background:var(--bg-img-sidebar);
background-repeat:no-repeat; background-position:center; filter:var(--textbox-shadow);">
<!-- Character Image URL -->
<div class="w-100 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706311_TJ1t0rQV6agATV2.png');
background-repeat:no-repeat; background-position:center; background-size:cover;"></div>
</div>
<div class="col-lg pl-lg-4 pr-lg-0 py-lg-0 py-3 mr-lg-n2">
<!-- Character Name -->
<p class="mb-2 card bg-transparent border-top-0 border-left-0 border-right-0 rounded-0 mr-lg-4 mr-2" style="font-size:var(--relation-name-font-size); border-style:var(--relation-border-style); border-width:var(--relation-border-width); border-color:var(--divider-color);">
Name
</p>
<!-- Relation Description -->
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eget felis diam. Aliquam a tincidunt neque.</p>
</div>
</div>
<!-- Relation Block (end) -->
<!-- Relation Block -->
<div class="p-0 mt-5 d-flex flex-wrap justify-content-center">
<div class="col-auto p-2 ml-n2" style="height:150px; width:150px; background:var(--bg-img-sidebar);
background-repeat:no-repeat; background-position:center; filter:var(--textbox-shadow);">
<!-- Character Image URL -->
<div class="w-100 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706311_TJ1t0rQV6agATV2.png');
background-repeat:no-repeat; background-position:center; background-size:cover;"></div>
</div>
<div class="col-lg pl-lg-4 pr-lg-0 py-lg-0 py-3 mr-lg-n2">
<!-- Character Name -->
<p class="mb-2 card bg-transparent border-top-0 border-left-0 border-right-0 rounded-0 mr-lg-4 mr-2" style="font-size:var(--relation-name-font-size); border-style:var(--relation-border-style); border-width:var(--relation-border-width); border-color:var(--divider-color);">
Name
</p>
<!-- Relation Description -->
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eget felis diam. Aliquam a tincidunt neque.</p>
</div>
</div>
<!-- Relation Block (end) -->
</div>
<!-- RELATIONS (end) -->
</div>
<!-- INFORMATION CONTENT (end) -->
</div>
<!-------- MAIN INFORMATION SECTION (end) -------->
<!---------------- SIDEBAR IMAGES ---------------->
<div class="col-xl-auto p-lg-1 ml-lg-n1 mt-xl-0 mt-4">
<div class="p-0 sticky-top">
<div class="p-0 d-xl-block d-flex flex-wrap justify-content-center">
<!-- Sidebar Image #1 -->
<div class="col-lg-auto col-6 px-lg-3 pt-lg-3 pb-lg-4 p-3 mb-lg-2 mx-xl-0 mx-lg-3 ml-n3 order-0" style="
filter:var(--sidebar-img-shadow);
box-shadow: .25em .25em .5em var(--hard-shadow-color);
height:200px; width:200px;
background:var(--bg-img-sidebar);
background-size;cover;
background-position:center;
background-repeat:no-repeat;
transform:rotate(6deg);">
<!-- Image URL -->
<div class="w-100 h-100" style="background:var(--img-sidebar-first); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- Sidebar Image #1 (end) -->
<!-- Sidebar Image #2 -->
<div class="col-lg-auto col-8 px-lg-3 pt-lg-3 pb-lg-4 p-3 mb-lg-2 mt-lg-0 mt-n4 ml-xl-2 mr-xl-0 mx-lg-3 order-lg-1 order-2" style="
filter:var(--sidebar-img-shadow);
box-shadow: .25em -.25em .5em var(--hard-shadow-color);
height:200px; width:200px;
background:var(--bg-img-sidebar);
background-size;cover;
background-position:center;
background-repeat:no-repeat;
transform:rotate(0deg);">
<div class="w-100 h-100" style="background:var(--img-sidebar-second); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- Sidebar Image #2 (end) -->
<!-- Sidebar Image #3 -->
<div class="col-lg-auto col-6 px-lg-3 pt-lg-3 pb-lg-4 p-3 ml-xl-n1 mx-lg-3 ml-3 mr-n3 order-lg-2 order-1" style="
filter:var(--sidebar-img-shadow);
box-shadow: .25em -.25em .5em var(--hard-shadow-color);
height:200px; width:200px;
background:var(--bg-img-sidebar);
background-size;cover;
background-position:center;
background-repeat:no-repeat;
transform:rotate(-7deg);">
<div class="w-100 h-100" style="background:var(--img-sidebar-third); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- Sidebar Image #3 (end) -->
</div>
</div>
</div>
<!------------- SIDEBAR IMAGES (end) ------------->
</div>
<!-----------------------------------------------------------------------------------------
------------------------------ CREDITS; PLEASE DO NOT REMOVE ------------------------------
------------------------------------------------------------------------------------------->
<div class="mt-lg-0 mt-3 text-center">
<a href="https://toyhou.se/dragon-heist" class="text-light tooltipster" title="code by dragon-heist"><i class="far fa-code" style="opacity:0.75;"></i></a>
</div>
Copy
<!-----------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------
All paper textures were sourced from freepik.com!
-------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------->
<!---------------- IMAGE BACKGROUND ----------------->
<div class="w-100 h-100" style="position:absolute; z-index:-2; top:0; left:0; overflow:hidden;">
<div class="w-100" style="position:absolute; z-index:-1; top:0px; bottom:0; background-size:cover; background-position:center; background-attachment:fixed;
background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/111534579_izXBnK6o3nvHbaY.jpg')"></div>
</div>
<!-------------- IMAGE BACKGROUND (end) ------------->
<!---------------- GRADIENT BACKGROUND --------------->
<div class="w-100 h-100" style="position:absolute; z-index:-1; top:0px; left:0px; overflow:hidden">
<div class="w-100" style="position:absolute; z-index:-1; top:30%; bottom:0;
background: linear-gradient(180deg,rgba(255, 255, 255, 0) 20%,rgba(183, 199, 191, 0.5) 100%);"></div>
</div>
<!------------ GRADIENT BACKGROUND (end) ------------->
<!-----------------------------------------------------------------------------------------
----------------------------------- MAIN PROFILE CONTENT ----------------------------------
------------------------------------------------------------------------------------------->
<div class="d-flex flex-wrap justify-content-center p-0" style="
--img-character-portrait: url('https://64.media.tumblr.com/51c22088f60d73f64e411dabbea9d4ae/c4f07e833c92ce1a-a8/s540x810/8c4908c2a78b49a0d936e8a3fd13f3ac4ed78409.gif');
--img-sidebar-first: url('https://64.media.tumblr.com/7d262c281e1f659fbbd5c8a2ac4c7c64/tumblr_njbul3JZi21t8xya8o1_540.gifv');
--img-sidebar-second: url('https://s03.video.glbimg.com/x240/13021294.jpg');
--img-sidebar-third: url('https://cdn.bagogames.com/wp-content/uploads/2015/11/04111317/Pathologic_Classic_HD_BagoGames_4.jpg');
--bg-img-sidebar: url('https://f2.toyhou.se/file/f2-toyhou-se/images/111534591_8kqaaXycgfGFkeE.jpg');
--bg-img-tabs: url('https://f2.toyhou.se/file/f2-toyhou-se/images/111534602_hqnGqpaT4IS90yI.jpg');
--bg-img-body: url('https://f2.toyhou.se/file/f2-toyhou-se/images/111534791_Jqwe1qPA35s3ZAi.jpg');
--bg-img-textbox: url('https://f2.toyhou.se/file/f2-toyhou-se/images/111534872_Mz50LCqSiHRANwb.jpg');
--infobox-bg-position-odd: center 5%;
--infobox-bg-position-even: center 95%;
--header-font-family: Avenir, serif;
--header-font-size: 2em;
--nav-font-family: Baskerville Old Face, serif;
--nav-font-size: 1.3em;
--body-font-family: Baskerville Old Face, serif;
--relation-name-font-size: 1.5em;
--relation-border-style: double;
--relation-border-width: 4px;
--border-color: #23171a;
--dropshadow-color: #23171a;
--name-color: #23171a;
--text-color: #201919;
--hard-shadow-color: rgba(0,0,0,.5);
--divider-color: #54484b;
--sidebar-info-shadow: drop-shadow(-.2em .2em 0 var(--dropshadow-color));
--textbox-shadow: drop-shadow(-.2em .2em .25em var(--dropshadow-color));
--sidebar-img-shadow: drop-shadow(.5em .5em 0 var(--dropshadow-color));
">
<!----------- CHARACTER SIDEBAR + INFO ---------->
<div class="col-xl-auto col-lg-4 p-lg-1" style="min-width:300px; filter:var(--sidebar-info-shadow);">
<div class="sticky-top p-0">
<!-- CHARACTER SIDEBAR -->
<div class="col-auto px-3 pt-3" style="
background:var(--bg-img-sidebar);
background-size;cover;
background-position:center;
background-repeat:no-repeat;
position:relative;
overflow:none;
font-size:2.5em;">
<div class="" style="position:absolute; bottom:-.2em; left:.15em; opacity:.5; color:var(--name-color);"><i class="far fa-signature"></i></div>
<!-- CHARACTER IMAGE -->
<div class="w-100" style="height:320px;
background:var(--img-character-portrait);
background-position:center;
background-size:cover;
background-repeat:no-repeat;"></div>
<!-- CHARACTER NAME -->
<div class="text-center mt-1 pb-2" style="font-family: var(--header-font-family); font-weight:600; color:var(--name-color)">
Character
</div>
</div>
<!-- CHARACTER SIDEBAR (end) -->
<!-- SIDEBAR INFO -->
<div class="py-0 px-2 mr-n1" style="font-size:1.2em;">
<!-- 1. 1ST INFO LABEL; make sure this stays on top! -->
<div class="card border-right-0 rounded-0 mt-1 py-1 px-3 mr-2" style="border-color:var(--border-color); color:var(--text-color); font-family:var(--body-font-family); background:var(--bg-img-tabs); background-position:var(--infobox-bg-position-odd);">
<div class="row no-gutters justify-content-between">
<!-- Label -->
<span class="font-weight-bold"><i class="far fa-cake"></i> Age</span>
<!-- Info -->
<span>content</span>
</div>
</div>
<!-- 2. EVEN INFO LABEL; make sure you use this on even numbers -->
<div class="card border-top-0 border-right-0 rounded-0 py-1 px-3 ml-2" style="border-color:var(--border-color); color:var(--text-color); font-family:var(--body-font-family); background:var(--bg-img-tabs); background-position:var(--infobox-bg-position-even);">
<div class="row no-gutters justify-content-between">
<!-- Label -->
<span class="font-weight-bold"><i class="far fa-venus-mars"></i> Pronouns</span>
<!-- Info -->
<span>content</span>
</div>
</div>
<!-- 3. ODD INFO LABEL; make sure you use this on odd numbers -->
<div class="card border-top-0 border-right-0 rounded-0 py-1 px-3 mr-2" style="border-color:var(--border-color); color:var(--text-color); font-family:var(--body-font-family); background:var(--bg-img-tabs); background-position:var(--infobox-bg-position-odd);">
<div class="row no-gutters justify-content-between">
<!-- Label -->
<span class="font-weight-bold"><i class="far fa-map"></i> Location</span>
<!-- Info -->
<span>content</span>
</div>
</div>
<!-- 4. EVEN INFO LABEL-->
<div class="card border-top-0 border-right-0 rounded-0 py-1 px-3 ml-2" style="border-color:var(--border-color); color:var(--text-color); font-family:var(--body-font-family); background:var(--bg-img-tabs); background-position:var(--infobox-bg-position-even);">
<div class="row no-gutters justify-content-between">
<!-- Label -->
<span class="font-weight-bold"><i class="far fa-suitcase"></i> Occupation</span>
<!-- Info -->
<span>content</span>
</div>
</div>
<!-- 5. ODD INFO LABEL -->
<div class="card border-top-0 border-right-0 rounded-0 py-1 px-3 mr-2" style="border-color:var(--border-color); color:var(--text-color); font-family:var(--body-font-family); background:var(--bg-img-tabs); background-position:var(--infobox-bg-position-odd);">
<div class="row no-gutters justify-content-between">
<span class="font-weight-bold"><i class="far fa-star"></i> Label</span>
<span>content</span>
</div>
</div>
<!-- 6. EVEN INFO LABEL-->
<div class="card border-top-0 border-right-0 rounded-0 py-1 px-3 ml-2" style="border-color:var(--border-color); color:var(--text-color); font-family:var(--body-font-family); background:var(--bg-img-tabs); background-position:var(--infobox-bg-position-even);">
<div class="row no-gutters justify-content-between">
<!-- Label -->
<span class="font-weight-bold"><i class="far fa-star"></i> Label</span>
<!-- Info -->
<span>content</span>
</div>
</div>
</div>
<!-- SIDEBAR INFO (end) -->
</div>
</div>
<!-------- CHARACTER SIDEBAR + INFO (end) ------->
<!----------- MAIN INFORMATION SECTION ----------->
<div class="col-xl-4 col-lg-8 d-flex flex-wrap p-lg-1 mt-lg-0 mt-4" id="basic">
<!-- NAVIGATION; tabs at the top of the info section -->
<div class="sticky-top mx-auto">
<ul class="nav nav-tabs">
<!-- Basic Info Tab -->
<li class="nav-item">
<a class="nav-link btn btn-default rounded-0 py-1 px-2 active" data-toggle="tab" data-target="#basics" href="#" style="font-family:var(--nav-font-family); font-size:1.3em; border-color:#23171a; color:#201919; border-width:2px; background:url('https://img.freepik.com/free-photo/white-parchment-paper_53876-92954.jpg'); background-position:center 3%;">
<i class="fa-regular fa-folders mr-md-2"></i><span class="d-md-inline d-none">Basic Info</span>
</a>
</li>
<!-- Personality Tab -->
<li class="nav-item mx-1">
<a class="nav-link btn btn-default rounded-0 py-1 px-2" data-toggle="tab" data-target="#personality" href="#" style="font-family:var(--nav-font-family); font-size:1.3em; border-color:#23171a; color:#201919; border-width:2px; background:url('https://img.freepik.com/free-photo/white-parchment-paper_53876-92954.jpg'); background-position:center 3%;">
<i class="fa-regular fa-comments mr-md-2"></i><span class="d-md-inline d-none">Personality</span>
</a>
</li>
<!-- Relations Tab -->
<li class="nav-item">
<a class="nav-link btn btn-default rounded-0 py-1 px-2" data-toggle="tab" data-target="#relations" href="#" style="font-family:var(--nav-font-family); font-size:1.3em; border-color:#23171a; color:#201919; border-width:2px; background:url('https://img.freepik.com/free-photo/white-parchment-paper_53876-92954.jpg'); background-position:center 3%;">
<i class="fa-regular fa-users mr-md-2"></i><span class="d-md-inline d-none">Relations</span>
</a>
</li>
</ul>
</div>
<!-- NAVIGATION (end) -->
<!-- INFORMATION CONTENT -->
<div class="card rounded-0 p-lg-4 p-3 w-100 tab-content" style="
background-attachment:fixed;
background:var(--bg-img-body);
font-family: serif; font-size:1.07em; letter-spacing:.3px; color:var(--text-color);
border: 2px solid var(--border-color);
margin-top:-2px;">
<!-- BASIC INFORMATION -->
<div class="tab-pane fade show active" id="basics">
<!-- Title -->
<div class="text-center font-weight-bold" style="font-family: var(--header-font-family); font-size:var(--header-font-size); letter-spacing:1px;">
Basic Information
</div>
<hr class="w-100 mt-2 mb-3" style="border-top-width:3px; border-style:dashed; border-color:var(--divider-color);">
<!-- Basic Information Content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et vestibulum tortor, sit amet luctus sapien. Nunc dapibus eros pharetra velit tincidunt, non tristique nunc eleifend. Quisque odio neque, rutrum eget augue sit amet, finibus dignissim nunc. Praesent dapibus blandit volutpat. Mauris nec sem ultrices nulla bibendum vulputate eu nec purus. Nullam vel rhoncus ligula, ac pulvinar mauris. Ut id lacus imperdiet, tincidunt urna at, lobortis est. Suspendisse sit amet nisi consequat, pretium turpis sed, fermentum libero. Fusce tempor, dui id fringilla faucibus, nisl orci malesuada quam, at faucibus nunc mauris id risus.</p>
<p>Aenean ex purus, interdum ac ornare sit amet, pellentesque id ipsum. Nulla consequat varius lacus, feugiat facilisis magna. Aliquam rutrum sem nibh, vel tincidunt nulla sodales laoreet. Praesent semper sollicitudin urna ac consectetur. Sed bibendum, nisi vel feugiat imperdiet, magna nunc ullamcorper massa, ut porttitor risus massa feugiat dolor. Proin cursus aliquam ornare. Sed sed cursus ante. Nunc dui massa, pharetra pharetra eros vel, viverra condimentum lacus. Phasellus elementum enim ac turpis aliquam, semper tincidunt sapien gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eget felis diam. Aliquam a tincidunt neque. Praesent dapibus elit at ligula dictum mattis. </p>
<!-- Basic Information Content (end); add more <p> above here to continue adding more text -->
</div>
<!-- BASIC INFORMATION (end) -->
<!-- PERSONALITY -->
<div class="tab-pane fade" id="personality">
<div class="text-center font-weight-bold" style="font-family: var(--header-font-family); font-size:var(--header-font-size); letter-spacing:1px;">
Personality
</div>
<hr class="w-100 mt-2 mb-3" style="border-top-width:3px; border-style:dashed; border-color:var(--divider-color);">
<!-- Traits Box; optional, remove if you don't want to have this here! -->
<div class="p-0 mr-lg-4 my-lg-3 mt-2 mb-4 float-left">
<div class="p-2 ml-lg-n2 mr-lg-0 mx-5" style="width:175px; background:var(--bg-img-textbox);
background-repeat:no-repeat; background-position:top; filter:var(--textbox-shadow);">
<ul class="fa-ul ml-1 py-1 m-0" style="font-size:1.05em;">
<li><i class="fas fa-dash mr-1"></i> Trait</li>
<li><i class="fas fa-dash mr-1"></i> Trait</li>
<li><i class="fas fa-dash mr-1"></i> Trait</li>
<li><i class="fas fa-dash mr-1"></i> Trait</li>
<li><i class="fas fa-dash mr-1"></i> Trait</li>
<li><i class="fas fa-dash mr-1"></i> Trait</li>
</ul>
</div>
</div>
<!-- Traits Box (end) -->
<!-- Personality Content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et vestibulum tortor, sit amet luctus sapien. Nunc dapibus eros pharetra velit tincidunt, non tristique nunc eleifend. Quisque odio neque, rutrum eget augue sit amet, finibus dignissim nunc. Praesent dapibus blandit volutpat. Mauris nec sem ultrices nulla bibendum vulputate eu nec purus. Nullam vel rhoncus ligula, ac pulvinar mauris. Ut id lacus imperdiet, tincidunt urna at, lobortis est. Suspendisse sit amet nisi consequat, pretium turpis sed, fermentum libero. Fusce tempor, dui id fringilla faucibus, nisl orci malesuada quam, at faucibus nunc mauris id risus.</p>
<p>Aenean ex purus, interdum ac ornare sit amet, pellentesque id ipsum. Nulla consequat varius lacus, feugiat facilisis magna. Aliquam rutrum sem nibh, vel tincidunt nulla sodales laoreet. Praesent semper sollicitudin urna ac consectetur. Sed bibendum, nisi vel feugiat imperdiet, magna nunc ullamcorper massa, ut porttitor risus massa feugiat dolor. Proin cursus aliquam ornare. Sed sed cursus ante. Nunc dui massa, pharetra pharetra eros vel, viverra condimentum lacus. Phasellus elementum enim ac turpis aliquam, semper tincidunt sapien gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eget felis diam. Aliquam a tincidunt neque. Praesent dapibus elit at ligula dictum mattis. </p>
<!-- Personality Content (end); add more <p> above here to continue adding more text -->
</div>
<!-- PERSONALITY (end) -->
<!-- RELATIONS -->
<div class="tab-pane fade" id="relations">
<!-- Title -->
<div class="text-center font-weight-bold" style="font-family: var(--header-font-family); font-size:var(--header-font-size); letter-spacing:1px;">
Relations
</div>
<hr class="w-100 mt-2 mb-3" style="border-top-width:3px; border-style:dashed; border-color:var(--divider-color);">
<!-- Relation Block - copy and paste one of these blocks to add more -->
<div class="p-0 mt-5 d-flex flex-wrap justify-content-center">
<div class="col-auto p-2 ml-n2" style="height:150px; width:150px; background:var(--bg-img-sidebar);
background-repeat:no-repeat; background-position:center; filter:var(--textbox-shadow);">
<!-- Character Image URL -->
<div class="w-100 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706311_TJ1t0rQV6agATV2.png');
background-repeat:no-repeat; background-position:center; background-size:cover;"></div>
</div>
<div class="col-lg pl-lg-4 pr-lg-0 py-lg-0 py-3 mr-lg-n2">
<!-- Character Name -->
<p class="mb-2 card bg-transparent border-top-0 border-left-0 border-right-0 rounded-0 mr-lg-4 mr-2" style="font-size:var(--relation-name-font-size); border-style:var(--relation-border-style); border-width:var(--relation-border-width); border-color:var(--divider-color);">
Name
</p>
<!-- Relation Description -->
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eget felis diam. Aliquam a tincidunt neque.</p>
</div>
</div>
<!-- Relation Block (end) -->
<!-- Relation Block -->
<div class="p-0 mt-5 d-flex flex-wrap justify-content-center">
<div class="col-auto p-2 ml-n2" style="height:150px; width:150px; background:var(--bg-img-sidebar);
background-repeat:no-repeat; background-position:center; filter:var(--textbox-shadow);">
<!-- Character Image URL -->
<div class="w-100 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706311_TJ1t0rQV6agATV2.png');
background-repeat:no-repeat; background-position:center; background-size:cover;"></div>
</div>
<div class="col-lg pl-lg-4 pr-lg-0 py-lg-0 py-3 mr-lg-n2">
<!-- Character Name -->
<p class="mb-2 card bg-transparent border-top-0 border-left-0 border-right-0 rounded-0 mr-lg-4 mr-2" style="font-size:var(--relation-name-font-size); border-style:var(--relation-border-style); border-width:var(--relation-border-width); border-color:var(--divider-color);">
Name
</p>
<!-- Relation Description -->
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eget felis diam. Aliquam a tincidunt neque.</p>
</div>
</div>
<!-- Relation Block (end) -->
<!-- Relation Block -->
<div class="p-0 mt-5 d-flex flex-wrap justify-content-center">
<div class="col-auto p-2 ml-n2" style="height:150px; width:150px; background:var(--bg-img-sidebar);
background-repeat:no-repeat; background-position:center; filter:var(--textbox-shadow);">
<!-- Character Image URL -->
<div class="w-100 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706311_TJ1t0rQV6agATV2.png');
background-repeat:no-repeat; background-position:center; background-size:cover;"></div>
</div>
<div class="col-lg pl-lg-4 pr-lg-0 py-lg-0 py-3 mr-lg-n2">
<!-- Character Name -->
<p class="mb-2 card bg-transparent border-top-0 border-left-0 border-right-0 rounded-0 mr-lg-4 mr-2" style="font-size:var(--relation-name-font-size); border-style:var(--relation-border-style); border-width:var(--relation-border-width); border-color:var(--divider-color);">
Name
</p>
<!-- Relation Description -->
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eget felis diam. Aliquam a tincidunt neque.</p>
</div>
</div>
<!-- Relation Block (end) -->
</div>
<!-- RELATIONS (end) -->
</div>
<!-- INFORMATION CONTENT (end) -->
</div>
<!-------- MAIN INFORMATION SECTION (end) -------->
<!---------------- SIDEBAR IMAGES ---------------->
<div class="col-xl-auto p-lg-1 ml-lg-n1 mt-xl-0 mt-4">
<div class="p-0 sticky-top">
<div class="p-0 d-xl-block d-flex flex-wrap justify-content-center">
<!-- Sidebar Image #1 -->
<div class="col-lg-auto col-6 px-lg-3 pt-lg-3 pb-lg-4 p-3 mb-lg-2 mx-xl-0 mx-lg-3 ml-n3 order-0" style="
filter:var(--sidebar-img-shadow);
box-shadow: .25em .25em .5em var(--hard-shadow-color);
height:200px; width:200px;
background:var(--bg-img-sidebar);
background-size;cover;
background-position:center;
background-repeat:no-repeat;
transform:rotate(6deg);">
<!-- Image URL -->
<div class="w-100 h-100" style="background:var(--img-sidebar-first); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- Sidebar Image #1 (end) -->
<!-- Sidebar Image #2 -->
<div class="col-lg-auto col-8 px-lg-3 pt-lg-3 pb-lg-4 p-3 mb-lg-2 mt-lg-0 mt-n4 ml-xl-2 mr-xl-0 mx-lg-3 order-lg-1 order-2" style="
filter:var(--sidebar-img-shadow);
box-shadow: .25em -.25em .5em var(--hard-shadow-color);
height:200px; width:200px;
background:var(--bg-img-sidebar);
background-size;cover;
background-position:center;
background-repeat:no-repeat;
transform:rotate(0deg);">
<div class="w-100 h-100" style="background:var(--img-sidebar-second); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- Sidebar Image #2 (end) -->
<!-- Sidebar Image #3 -->
<div class="col-lg-auto col-6 px-lg-3 pt-lg-3 pb-lg-4 p-3 ml-xl-n1 mx-lg-3 ml-3 mr-n3 order-lg-2 order-1" style="
filter:var(--sidebar-img-shadow);
box-shadow: .25em -.25em .5em var(--hard-shadow-color);
height:200px; width:200px;
background:var(--bg-img-sidebar);
background-size;cover;
background-position:center;
background-repeat:no-repeat;
transform:rotate(-7deg);">
<div class="w-100 h-100" style="background:var(--img-sidebar-third); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- Sidebar Image #3 (end) -->
</div>
</div>
</div>
<!------------- SIDEBAR IMAGES (end) ------------->
</div>
<!-----------------------------------------------------------------------------------------
------------------------------ CREDITS; PLEASE DO NOT REMOVE ------------------------------
------------------------------------------------------------------------------------------->
<div class="mt-lg-0 mt-3 text-center">
<a href="https://toyhou.se/dragon-heist" class="text-light tooltipster" title="code by dragon-heist"><i class="far fa-code" style="opacity:0.75;"></i></a>
</div>