Elven
created by:raccodes
HTMLCustom ColorsCharacter
Copy
<!-------------------------------------------------------------------------------------------
ELVEN BY RACCODES
DO NOT
› Use WYSIWYG with my codes.
› Completely remove the credit.
› Claim my work in it's entirety as your own.
› Use or upload my content anywhere other than ToyHouse.
› Re-upload or redistribute or otherwise profit directly from my work.
FEEL FREE TO
› Move the credit elsewhere.
› Use my work anywhere on your TH.
› Frankenstein my codes with others, as long as they allow it.
NOTE
› If you wish to see what you're editing, please use https://th.circlejourney.net/
› If you use WYSIWYG with my code, and it breaks, I won't be fixing it.
-------------------------------------------------------------------------------------------
COLOURS
background
› #fff
› #eee
accent
› #c3c980
borders
› #ddd
text
› #999
------------------------------------------------------------------------------------------->
<div class="container mx-auto" style="max-width:950px;">
<div class="card rounded-0 my-lg-5 p-2" style="background:#fff;color:#999;border-radius:20px;">
<div class="row no-gutters">
<div class="col-md-4 p-1 push-sm-4">
<!---------- image ---------->
<div class="card rounded-0 w-100 border-0" style="min-height:400px;background-size:cover;background-position:top;background-repeat:no-repeat;
background-image:url('https://cdn.discordapp.com/attachments/784238700715573289/789102009999425546/rsz_1screenshot_1.jpg');
"></div>
<!--- divider --->
<div class="card rounded-0 my-2 border-0" style="height:1px;background:#ddd;"></div>
<!---------- name ----------->
<h1 class="card p-0 display-4 rounded-0 mb-0 font-weight-light" style="background:transparent;font-size:31px;color:#999;">
NAME
<b class="font-weight-bold" style="color:#c3c980;">
LASTNAME
</b>
</h1>
</div>
<div class="col-md-4 p-1 pull-sm-4">
<div class="row no-gutters">
<!-------- link 1 ------------>
<ul class="nav nav-tabs card-header-tabs w-100 p-0 m-0">
<li class="col-3 p-0 text-center">
<a data-toggle="tab" href="#home" style="color:#c3c980;" class="btn px-0 w-100 border-0 rounded-0 active"><i class="fas fa-crown fa-fw fa-2x"></i><br>
<span class="text-uppercase ml-1" style="color:#999;font-size:9px;letter-spacing:2px;">home</span></a></li>
<!-------- link 2 ------------>
<li class="col-3 p-0 text-center">
<a data-toggle="tab" href="#story" style="color:#c3c980;" class="btn px-0 w-100 border-0 rounded-0"><i class="fas fa-book fa-fw fa-2x"></i><br>
<span class="text-uppercase ml-1" style="color:#999;font-size:9px;letter-spacing:2px;">story</span></a>
<!--- divider --->
<div class="card rounded-0 border-0" style="width:1px;height:40px;background:#ddd;margin-top:-50px;"></div>
</li>
<!-------- link 3 ------------>
<li class="col-3 p-0 text-center">
<a data-toggle="tab" href="#design" style="color:#c3c980;" class="btn px-0 w-100 border-0 rounded-0"><i class="fas fa-leaf fa-fw fa-2x"></i><br>
<span class="text-uppercase ml-1" style="color:#999;font-size:9px;letter-spacing:2px;">design</span></a>
<!--- divider --->
<div class="card rounded-0 border-0" style="width:1px;height:40px;background:#ddd;margin-top:-50px;"></div>
</li>
<!------- link 4 -------->
<li class="col-3 p-0 text-center">
<a data-toggle="tab" href="#links" style="color:#c3c980;" class="btn px-0 w-100 border-0 rounded-0"><i class="fas fa-heart fa-fw fa-2x"></i><br>
<span class="text-uppercase ml-1" style="color:#999;font-size:9px;letter-spacing:2px;">links</span></a>
<!--- divider --->
<div class="card rounded-0 border-0" style="width:1px;height:40px;height:40px;background:#ddd;margin-top:-50px;"></div>
</li>
</ul>
</div>
<!--- content box --->
<div class="card rounded-0 my-1 p-2" style="height:250px;background:transparent;border-width:1px 0 1px 0;border-color:#ddd;overflow:auto;">
<!---- tab content ---->
<div class="tab-content">
<div class="tab-pane fade active show" id="home">
<h1 class="d-flex justify-content-between display-4 py-0" style="z-index:2;">
<span>H</span>
<span>O</span>
<span>M</span>
<span>E</span>
</h1>
<!--- line through --->
<div class="w-100 pb-3" style="border-top:6px solid #c3c980;z-index:0;opacity:0.5;margin-top:-26px;"></div>
<div class="text-center mt-4" style="color:#ccc;">
<i class="fal fa-circle"></i> <i class="fas fa-circle" style="font-size:16pt;"></i> <i class="fal fa-circle"></i>
</div>
<p class="text-center my-3 mx-2" style="font-style:italic;">An elven prince, who's heart yearns for it's lover... but what of the crown...?</p>
<div class="text-center">
<i class="fas fa-crown text-center fa-fw fa-2x" style="color:#c3c980;"></i>
</div>
</div>
<!-------- story --------->
<div class="tab-pane fade" id="story">
<h1 class="d-flex justify-content-between display-4 py-0" style="z-index:2;">
<span>S</span>
<span>T</span>
<span>O</span>
<span>R</span>
<span>Y</span>
</h1>
<!--- line through --->
<div class="w-100 pb-3" style="border-top:6px solid #c3c980;z-index:0;opacity:0.5;margin-top:-26px;"></div>
<!------ story ------->
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus neque magna, in scelerisque nunc mattis sed. Sed libero velit, ultrices a ex non, luctus sodales erat. Aliquam commodo convallis dui congue venenatis. Morbi tempus orci at diam tempor, non scelerisque turpis vehicula. Aliquam laoreet id ligula ac luctus. In hac habitasse platea dictumst. Sed eget aliquam felis. Donec quis nunc nec lectus pulvinar molestie eu et lectus. In libero eros, scelerisque in porttitor a, ullamcorper nec massa. Integer quis ante risus.</p>
</div>
<!----------- design ----------->
<div class="tab-pane fade" id="design">
<!---- title ----->
<h1 class="d-flex justify-content-between display-4 py-0" style="z-index:2;">
<span>D</span>
<span>E</span>
<span>S</span>
<span>I</span>
<span>G</span>
<span>N</span>
</h1>
<!--- line through --->
<div class="w-100 pb-3" style="border-top:6px solid #c3c980;z-index:0;opacity:0.5;margin-top:-26px;"></div>
<div class="row no-gutters">
<div class="col-md-8 p-1">
<b style="color:#c3c980;">Optional:</b>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<b style="color:#c3c980;">Not-Optional:</b>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<!--- right --->
<div class="col-md-4 p-1">
<!------- palette --------->
<div class="card rounded-0 border-0 p-2 mt-lg-4" style="background:#eee;">
<!--- color 1 --->
<div class="card p-0 mb-2 card-block rounded-0 border-0" style="height:20px;background:#FCD199;"></div>
<!--- color 2 --->
<div class="card p-0 mb-2 card-block rounded-0 border-0" style="height:20px;background:#c3c980;"></div>
<!--- color 3 --->
<div class="card p-0 mb-2 card-block rounded-0 border-0" style="height:20px;background:#9ca16c;"></div>
<!--- color 4 --->
<div class="card p-0 card-block rounded-0 border-0" style="height:20px;background:#ded4d1;"></div>
</div>
</div>
</div>
</div>
<!---------- links ------------->
<div class="tab-pane fade" id="links">
<!---- title ----->
<h1 class="d-flex justify-content-between display-4 py-0" style="z-index:2;">
<span>L</span>
<span>I</span>
<span>N</span>
<span>K</span>
<span>S</span>
</h1>
<!--- line through --->
<div class="w-100 pb-3" style="border-top:6px solid #c3c980;z-index:0;opacity:0.5;margin-top:-26px;"></div>
<!----- relationship ------->
<div class="row no-gutters">
<!---- image ---->
<div class="col-4 p-1">
<img src="https://images.unsplash.com/photo-1541422348463-9bc715520974?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80" class="img-thumbnail border-0 rounded-0" style="background:#c3c980;height:84px;"></div>
<!---- info ---->
<div class="col-8 p-1">
<div class="card rounded-0 text-uppercase" style="border-bottom:3px solid #c3c980;background:transparent;letter-spacing:1px;font-size:11px;">Name</div>
<div class="card rounded-0 border-0 mt-1 p-1 text-justify" style="font-size:11px;background:#eee;height:60px;overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget cursus nibh. Morbi volutpat viverra nulla, nec convallis velit. Sed ullamcorper eleifend nisi non fringilla.</div>
</div>
</div>
<!--- divider --->
<div class="card rounded-0 border-0 my-1" style="height:1px;background:#ddd;"></div>
<!----- relationship ------->
<div class="row no-gutters">
<!---- image ---->
<div class="col-4 p-1">
<img src="https://images.unsplash.com/photo-1541422348463-9bc715520974?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80" class="img-thumbnail border-0 rounded-0" style="height:84px;background:#c3c980;"></div>
<!---- info ---->
<div class="col-8 p-1">
<div class="card rounded-0 text-uppercase" style="border-bottom:3px solid #c3c980;background:transparent;letter-spacing:1px;font-size:11px;">Name</div>
<div class="card rounded-0 border-0 mt-1 p-1 text-justify" style="font-size:11px;background:#eee;height:60px;overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget cursus nibh. Morbi volutpat viverra nulla, nec convallis velit. Sed ullamcorper eleifend nisi non fringilla.</div>
</div>
<!--- end links // paste any move above this line --->
</div>
</div> </div> </div>
<!---- end tabs ---->
<div class="row no-gutters">
<!---- image 1 ----->
<div class="col-lg-6 p-1">
<div class="card rounded-0 border-0" style="min-height:80px;background-size:cover;background-position:center;
background-image:url('https://images.unsplash.com/photo-1549895058-36748fa6c6a7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80')
;"></div>
<!---- image 2 ----->
<div class="card rounded-0 border-0 mt-2" style="min-height:80px;background-size:cover;background-position:center;
background-image:url('https://images.unsplash.com/photo-1549895058-36748fa6c6a7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80')
;"></div>
</div>
<!---- image 2 ----->
<div class="col-lg-6 p-1">
<div class="card rounded-0 border-0" style="min-height:80px;background-size:cover;background-position:center;
background-image:url('https://images.unsplash.com/photo-1549895058-36748fa6c6a7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80')
;">
</div>
<div class="card rounded-0 border-0 mt-2" style="min-height:80px;background-size:cover;background-position:center;
background-image:url('https://images.unsplash.com/photo-1549895058-36748fa6c6a7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80')
;">
</div>
</div>
</div>
<!--- end left --->
</div>
<div class="col-md-4 p-1">
<!---------- basic info ------------->
<div class="card rounded-0 border-0 p-2 pb-3" style="background:transparent;overflow:auto;">
<div class="row no-gutters">
<div class="col-4">
<!----- name ----->
<div class="card rounded-0 border-0 pb-4" style="background:transparent;">
<i class="fas fa-id-card fa-3x fa-fw" style="z-index:0;color:#c3c980;opacity:0.4;transform: rotate(340deg);"></i>
<div class="card-0 rounded-0 ml-4" style="line-height:14px;margin-top:-35px;background:transparent;z-index:2;">
mikhaile
<br><b class="text-uppercase text-truncate">name</b>
</div></div>
<!--- race --->
<div class="card rounded-0 border-0 pb-4" style="background:transparent;">
<i class="fas fa-leaf fa-3x fa-fw" style="z-index:0;color:#c3c980;opacity:0.4;transform: rotate(340deg);"></i>
<div class="card-0 rounded-0 ml-4" style="line-height:14px;margin-top:-35px;background:transparent;z-index:2;">
high-elf
<br><b class="text-uppercase text-truncate">race</b></div>
</div>
<!----- height ----->
<div class="card rounded-0 border-0" style="background:transparent;">
<i class="fas fa-ruler fa-3x fa-fw" style="z-index:0;color:#c3c980;opacity:0.4;transform: rotate(340deg);"></i>
<div class="card-0 rounded-0 ml-4" style="line-height:14px;margin-top:-35px;background:transparent;z-index:2;">
5'11
<br><b class="text-uppercase text-truncate">height</b>
</div></div>
</div>
<div class="col-4">
<!----- age ----->
<div class="card rounded-0 border-0 pb-4" style="background:transparent;">
<i class="fas fa-birthday-cake fa-3x fa-fw" style="z-index:0;color:#c3c980;opacity:0.4;transform: rotate(340deg);"></i>
<div class="card-0 rounded-0 ml-4" style="line-height:14px;margin-top:-35px;background:transparent;z-index:2;">
23
<br><b class="text-uppercase text-truncate">age</b>
</div></div>
<!--- class --->
<div class="card rounded-0 border-0 pb-4" style="background:transparent;">
<i class="fas fa-swords fa-3x fa-fw" style="z-index:0;color:#c3c980;opacity:0.4;transform: rotate(340deg);"></i>
<div class="card-0 rounded-0 ml-4" style="line-height:14px;margin-top:-35px;background:transparent;z-index:2;">
cleric
<br><b class="text-uppercase text-truncate">class</b></div>
</div>
<!----- weight ----->
<div class="card rounded-0 border-0" style="background:transparent;">
<i class="fas fa-weight fa-3x fa-fw" style="z-index:0;color:#c3c980;opacity:0.4;transform: rotate(340deg);"></i>
<div class="card-0 rounded-0 ml-4" style="line-height:14px;margin-top:-35px;background:transparent;z-index:2;">
124lbs
<br><b class="text-uppercase text-truncate">weight</b>
</div></div>
</div>
<div class="col-4">
<!----- gender ----->
<div class="card rounded-0 border-0 pb-4" style="background:transparent;">
<i class="fas fa-venus-mars fa-3x fa-fw" style="z-index:0;color:#c3c980;opacity:0.4;transform: rotate(340deg);"></i>
<div class="card-0 rounded-0 ml-4" style="line-height:14px;margin-top:-35px;background:transparent;z-index:2;">
male
<br><b class="text-uppercase text-truncate">gender</b>
</div></div>
<!----- sexuality ----->
<div class="card rounded-0 border-0 pb-4" style="background:transparent;">
<i class="fas fa-heart fa-3x fa-fw" style="z-index:0;color:#c3c980;opacity:0.4;transform: rotate(340deg);"></i>
<div class="card-0 rounded-0 ml-4" style="line-height:14px;margin-top:-35px;background:transparent;z-index:2;">
gay
<br><b class="text-uppercase text-truncate">sexuality</b>
</div></div>
<!----- theme ----->
<div class="card rounded-0 border-0" style="background:transparent;">
<i class="fas fa-heart fa-3x fa-fw" style="z-index:0;color:#c3c980;opacity:0.4;transform: rotate(340deg);"></i>
<div class="card-0 rounded-0 ml-4" style="line-height:14px;margin-top:-35px;background:transparent;z-index:2;">
<a style="color:#777;" class="m-0 p-0" href="https://www.youtube.com/watch?v=62j1xAdYKAQ&t=123s">Rivendell</a>
<b class="text-uppercase text-truncate">theme</b>
</div></div>
</div>
</div>
</div>
<!----------- attack -------------->
<div class="row no-gutters">
<div class="col-1 p-1">
<!--- icon --->
<i class="fas fa-sword fa-fw text-center my-auto" style="color:#777;"></i>
</div>
<div class="col-11 p-1">
<div class="progress my-2 rounded-0" style="background:#eee;">
<div class="progress-bar" style="width:
20%;
height:10px;background:#c3c980;"></div>
</div>
</div>
</div>
<!----------- defense -------------->
<div class="row no-gutters">
<div class="col-1 p-1">
<!--- icon --->
<i class="fas fa-shield fa-fw text-center my-auto" style="color:#777;"></i>
</div>
<div class="col-11 p-1">
<div class="progress my-2 rounded-0" style="background:#eee;">
<div class="progress-bar" style="width:
40%;
height:10px;background:#c3c980;"></div>
</div>
</div>
</div>
<!----------- magic -------------->
<div class="row no-gutters">
<div class="col-1 p-1">
<!--- icon --->
<i class="fas fa-wand-magic fa-fw text-center my-auto" style="color:#777;"></i>
</div>
<div class="col-11 p-1">
<div class="progress my-2 rounded-0" style="background:#eee;">
<div class="progress-bar" style="width:
60%;
height:10px;background:#c3c980;"></div>
</div>
</div>
</div>
<!----------- healing -------------->
<div class="row no-gutters">
<div class="col-1 p-1">
<!--- icon --->
<i class="fas fa-hand-holding-magic fa-fw text-center my-auto" style="color:#777;"></i>
</div>
<div class="col-11 p-1">
<div class="progress my-2 rounded-0" style="background:#eee;">
<div class="progress-bar" style="width:
90%;
height:10px;background:#c3c980;"></div>
</div>
</div>
</div>
<!----------- music -------------->
<div class="row no-gutters">
<div class="col-1 p-1">
<!--- icon --->
<i class="fas fa-mandolin fa-fw text-center my-auto" style="color:#777;"></i>
</div>
<div class="col-11 p-1">
<div class="progress my-2 rounded-0" style="background:#eee;">
<div class="progress-bar" style="width:
30%;
height:10px;background:#c3c980;"></div>
</div>
</div>
</div>
<!----------- magic knowledge -------------->
<div class="row no-gutters">
<div class="col-1 p-1">
<!--- icon --->
<i class="fas fa-book-spells fa-fw text-center my-auto" style="color:#777;"></i>
</div>
<div class="col-11 p-1">
<div class="progress my-2 rounded-0" style="background:#eee;">
<div class="progress-bar" style="width:
70%;
height:10px;background:#c3c980;"></div>
</div>
</div>
</div>
<!----------- communication -------------->
<div class="row no-gutters">
<div class="col-1 p-1">
<!--- icon --->
<i class="fas fa-comments fa-fw text-center my-auto" style="color:#777;"></i>
</div>
<div class="col-11 px-1">
<div class="progress my-2 rounded-0" style="background:#eee;">
<div class="progress-bar" style="width:
80%;
height:10px;background:#c3c980;"></div>
</div>
</div>
</div>
<!----------- friendliness -------------->
<div class="row no-gutters">
<div class="col-1 p-1">
<!--- icon --->
<i class="fas fa-heart fa-fw text-center my-auto" style="color:#777;"></i>
</div>
<div class="col-11 px-1">
<div class="progress my-2 rounded-0" style="background:#eee;">
<div class="progress-bar" style="width:
90%;
height:10px;background:#c3c980;"></div>
</div>
</div>
</div>
<!----------- brewing -------------->
<div class="row no-gutters">
<div class="col-1 p-1">
<!--- icon --->
<i class="fas fa-cauldron fa-fw text-center my-auto" style="color:#777;"></i>
</div>
<div class="col-11 px-1">
<div class="progress my-2 rounded-0" style="background:#eee;">
<div class="progress-bar" style="width:
40%;
height:10px;background:#c3c980;"></div>
</div>
</div>
</div>
<a href="https://toyhou.se/9258449.f2u-elven" class="pull-right mr-2" ><i class="fal fa-code fa-fw text-center my-auto" style="color:#777;"></i></a>
</div>
</div>
<!--- end card --->
</div>
</div>