Knight
created by:SparklyCodes
Mixed ColorsHTMLCharacter
Copy
<!--
F2U - CHARACTER CODE: KNIGHT
by SparklyCodes @ Toyhou.se
Make sure to read all the rules and instructions!
-- TOS --
1. Turn WYSIWYG off when coding. Even after you're done.
1.5 I'm serious on this one. IF THE CODE BREAKS/ICONS DISAPPEAR THIS IS LIKELY THE CULPRIT!
3. Use on TH only.
4. Do not redistribute.
5. Do not remove credit.
6. Frankensteining is okay, as long as the other creator allows it. Credit both creators.
7. Free to use as reference, credit in this case isn't required but appreciated!
-- RESOURCES --
#504a5e >> box outlines
#aaa3b9 >> accent text
-->
<div class="m-3 row no-gutters mx-auto" style="max-width: 1000px;">
<!-- ........................................ PROFILE WARNING -->
<div class="col-12"> <div class="card border-0 rounded-0 bg-danger m-1">
<!-- LINK -->
<a data-toggle="collapse" href="#collapse" class="text-white m-1 mx-2"><i class="fa-solid fa-exclamation-triangle"></i> WARNINGS: click here before reading further!</a>
<!-- COLLAPSE -->
<div id="collapse" class="collapse"> <div class="card rounded-0 border-0 m-1 p-1">
<ul class="m-0 row no-gutters">
<li class="col-sm-4">Warning</li>
<li class="col-sm-4">Warning</li>
<li class="col-sm-4">Warning</li>
<li class="col-sm-4">Warning</li>
<li class="col-sm-4">Warning</li>
<li class="col-sm-4">Warning</li>
<!-- add more above here -->
</ul>
</div> </div><!-- end collapse -->
</div> </div>
<!-- ........................................ BANNER - credits for it are at the end -->
<div class="col-lg-12 order-2">
<div class="m-1 card rounded-0" style="border: 6px solid #504a5e; height: 250px;">
<div style="background: url('IMG_LINK');
background-size: cover; background-position: center; width: 100%; height: 100%;"></div>
</div>
</div>
<!-- ........................................ BASICS -->
<div class="col-lg-4 order-3">
<!-- IMAGE -->
<div class="mx-1 mt-1 mb-2 p-2 justify-content-center" style="background-color: #504a5e;">
<img src="IMG_LINK"
style="height: 154px; width: 154px;">
</div>
<!-- BASICS -->
<div class="m-1 card rounded-0" style="border: 6px solid #504a5e;">
<!-- NAV BUTTONS -->
<ul class="m-1 nav nav-pills d-flex text-center">
<li class="nav-item flex-fill"><a data-toggle="tab" href="#one" class="p-1 btn btn-outline-primary active rounded-0 w-100"> <i class="fa-solid fa-user"></i> Basics</a></li>
<li class="nav-item flex-fill"><a data-toggle="tab" href="#two" class="p-1 btn btn-outline-primary rounded-0 w-100"> <i class="fa-solid fa-plus"></i> Details</a></li>
</ul>
<!-- NAV CONTENT -->
<div class="tab-content" style="height: 370px; overflow: auto;">
<!-- ONE -->
<div class="tab-pane fade show active" id="one">
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">NAME</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">ALIAS</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">GENDER</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">RACE</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">AGE</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">BIRTHDAY</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">ORIENTATION</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">STATUS</b>
Alive/active</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">OCCUPATION</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">RELATIONSHIP</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">THEME</b>
<a href="SONG_LINK">Song_name</a></p>
</div>
<!-- TWO -->
<div class="tab-pane fade" id="two">
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">HEIGHT</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">WEIGHT</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">MBTI</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">ZODIAC</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">RESIDENCE</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">ORIGIN</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">CLASS</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">WEAPON</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">DESIGNER</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">OWNER</b>
Information</p>
<p class="mx-1 mb-1 p-1 bg-faded"> <b class="pull-right text-secondary">WORTH</b>
Information</p>
</div>
</div> <!-- end nav content -->
</div>
</div>
<!-- ........................................ BIOGRAPHY -->
<div class="col-lg-8 order-4">
<!-- INTRODUCTION -->
<div class="m-1 card rounded-0" style="border: 6px solid #504a5e; height: 371px; overflow: auto;">
<h3 class="m-0 p-1 pb-2 text-center" style="background-color: #504a5e; color: #aaa3b9;">
<i class="fa-solid fa-eye fa-fw"></i> INTRODUCTION</h3>
<div class="p-1" style="text-indent: 20px;">
<p class="m-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec arcu quis justo molestie aliquam non non lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel rutrum odio. Sed ac ligula luctus tortor euismod suscipit et quis ligula. Proin dictum purus sed sapien tempor, ac cursus urna vehicula.</p>
</div>
<h3 class="m-0 p-1 text-center" style="background-color: #504a5e; color: #aaa3b9;">
<i class="fa-solid fa-brain fa-fw"></i> PERSONALITY</h3>
<div class="p-1" style="text-indent: 20px;">
<p class="m-0 text-center text-secondary" style="font-size: 16px; text-indent: 0px;">
Adjective • Adjective • Adjective</p>
<p class="m-1">Vivamus pretium velit eget justo fringilla dictum. Morbi at pharetra justo. Aenean vitae lorem id lacus interdum sollicitudin. Nam suscipit vitae lorem vel pretium. Nullam fringilla tristique sapien, at malesuada augue faucibus a. Fusce ullamcorper turpis a est molestie, at venenatis lectus laoreet. Aliquam rhoncus metus lorem, id gravida nibh placerat eget. In hac habitasse platea dictumst. Donec accumsan dui eget augue ultrices consequat.</p>
<p class="m-1">Curabitur convallis laoreet laoreet. Nam volutpat erat ac risus scelerisque volutpat. Sed a semper libero. Proin nec dictum diam. Aenean sed vehicula magna, non tincidunt massa. Suspendisse ut velit pellentesque, tempus mi lacinia, venenatis neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis lectus lorem, semper at sapien sed, consectetur fermentum leo. Quisque nulla purus, volutpat non eros congue, iaculis vestibulum magna.</p>
</div>
</div>
<!-- TASTES -->
<div class="row no-gutters">
<!-- LIKES -->
<div class="col-sm-6"> <div class="m-1 card rounded-0" style="border: 6px solid #504a5e;">
<h3 class="m-0 p-1 pb-2 text-center" style="background-color: #504a5e; color: #aaa3b9;">
<i class="fa-solid fa-plus fa-fw"></i> <span>LIKES</span></h3>
<div class="p-1">
<p class="mb-1 p-1 bg-faded">Information</p>
<p class="mb-1 p-1 bg-faded">Information</p>
<p class="mb-1 p-1 bg-faded">Information</p>
<p class="mb-1 p-1 bg-faded">Information</p>
<p class="p-1 bg-faded">Information</p>
</div>
</div> </div> <!-- end likes -->
<!-- DISLIKES -->
<div class="col-sm-6"> <div class="m-1 card rounded-0" style="border: 6px solid #504a5e;">
<h3 class="m-0 p-1 pb-2 text-center" style="background-color: #504a5e; color: #aaa3b9;">
<i class="fa-solid fa-minus fa-fw"></i> <span>DISLIKES</span></h3>
<div class="p-1">
<p class="mb-1 p-1 bg-faded">Information</p>
<p class="mb-1 p-1 bg-faded">Information</p>
<p class="mb-1 p-1 bg-faded">Information</p>
<p class="mb-1 p-1 bg-faded">Information</p>
<p class="p-1 bg-faded">Information</p>
</div>
</div> </div> <!-- end dislikes -->
</div>
</div>
<!-- ........................................ TRIVIA -->
<div class="col-lg-5 order-lg-5 order-6"> <div class="row no-gutters">
<!-- TRIVIA -->
<div class="col-lg-12 col-sm-6"> <div class="m-1 card rounded-0" style="border: 6px solid #504a5e; height: 220px; overflow: auto;">
<h3 class="m-0 p-1 pb-2 text-center" style="background-color: #504a5e; color: #aaa3b9;">
<i class="fa-solid fa-star fa-fw"></i> TRIVIA</h3>
<div class="p-2"> <ul class="mb-0 ml-4 list-unstyled fa-ul">
<li><i class="fa-solid fa-star fa-li"></i> Suspendisse nec efficitur libero. Sed vel venenatis nunc.</li>
<li><i class="fa-solid fa-star fa-li"></i> Nam urna nunc, sollicitudin non faucibus vel, malesuada et libero.</li>
<li><i class="fa-solid fa-star fa-li"></i> Sed commodo eget nisi at rhoncus.</li>
<li><i class="fa-solid fa-star fa-li"></i> Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
<li><i class="fa-solid fa-star fa-li"></i> Aliquam erat volutpat. Suspendisse potenti. Vivamus a libero laoreet, iaculis ante ac, luctus enim.</li>
</ul> </div>
</div> </div> <!-- end trivia -->
<!-- DESIGN NOTES -->
<div class="col-lg-12 col-sm-6"> <div class="m-1 card rounded-0" style="border: 6px solid #504a5e; height: 220px; overflow: auto;">
<h3 class="m-0 p-1 pb-2 text-center" style="background-color: #504a5e; color: #aaa3b9;">
<i class="fa-solid fa-paint-brush fa-fw"></i> DESIGN NOTES</h3>
<div class="p-2"> <ul class="mb-0 ml-4 list-unstyled fa-ul">
<li><i class="fa-solid fa-paint-brush fa-li"></i> Vivamus tincidunt lorem ut accumsan finibus.</li>
<li><i class="fa-solid fa-paint-brush fa-li"></i> Maecenas venenatis, augue ut pellentesque aliquet, orci sapien condimentum lacus, id sagittis arcu metus nec velit.</li>
<li><i class="fa-solid fa-paint-brush fa-li"></i> Fusce a mauris enim. Maecenas nibh sapien, pretium efficitur arcu mollis, fringilla gravida eros.</li>
<li><i class="fa-solid fa-paint-brush fa-li"></i> Duis sit amet ante finibus, imperdiet mi nec, ultricies eros. Aenean nec suscipit ante.</li>
</ul> </div>
</div> </div> <!-- end design notes -->
</div> </div>
<!-- ........................................ STORY -->
<div class="col-lg-7 order-lg-6 order-5"> <div class="m-1 card rounded-0" style="border: 6px solid #504a5e; height: 447px; overflow: auto;">
<h3 class="m-0 p-1 pb-2 text-center" style="background-color: #504a5e; color: #aaa3b9;">
<i class="fa-solid fa-books fa-fw"></i> STORY</h3>
<div class="p-1" style="text-indent: 20px;">
<p class="m-1">Quisque varius odio non sollicitudin tristique. Nullam consequat malesuada lectus. Vivamus id mi in leo laoreet tincidunt nec volutpat enim. Curabitur euismod ut magna in convallis. Donec imperdiet sollicitudin aliquet.</p>
<h4 class="m-0 p-1 text-muted text-uppercase" style="border-bottom: 1px solid; text-indent: 0px;">childhood</h4>
<p class="m-1">Mauris sed sollicitudin risus, eget efficitur lorem. Nam sed metus vel tortor sodales porttitor. Etiam efficitur ultrices sem ut dictum. Donec convallis eget nunc dictum cursus. Praesent id est nisi. Donec tortor nibh, suscipit et purus eget, dictum fringilla purus. Maecenas rhoncus faucibus sodales. Mauris vitae libero ac magna blandit maximus.</p>
<h4 class="m-0 p-1 text-muted text-uppercase" style="border-bottom: 1px solid; text-indent: 0px;">teenagehood</h4>
<p class="m-1">Nam tincidunt, metus vitae consequat pellentesque, neque lorem suscipit sem, ac volutpat ipsum ante eget arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sodales sed lacus nec viverra.</p>
<h4 class="m-0 p-1 text-muted text-uppercase" style="border-bottom: 1px solid; text-indent: 0px;">adulthood</h4>
<p class="m-1">Aenean sit amet gravida erat. Phasellus luctus sollicitudin ante, at varius turpis rutrum at. Fusce pretium aliquet est. Nam libero metus, venenatis eget dolor sed, finibus luctus metus. Fusce hendrerit tincidunt scelerisque. In nec leo mi. Mauris tincidunt lobortis nibh sed condimentum.</p>
<h4 class="m-0 p-1 text-muted text-uppercase" style="border-bottom: 1px solid; text-indent: 0px;">today</h4>
<p class="m-1">Aenean sit amet gravida erat. Phasellus luctus sollicitudin ante, at varius turpis rutrum at. Fusce pretium aliquet est. Nam libero metus, venenatis eget dolor sed, finibus luctus metus. Fusce hendrerit tincidunt scelerisque. In nec leo mi. Mauris tincidunt lobortis nibh sed condimentum.</p>
</div>
</div> </div>
<!-- ........................................ RELATIONSHIPS -->
<div class="col-12 order-7"> <div class="m-1 card rounded-0" style="border: 6px solid #504a5e; height: 400px; overflow: auto;">
<h3 class="m-0 p-1 pb-2 text-center" style="background-color: #504a5e; color: #aaa3b9;">
<i class="fa-solid fa-users fa-fw"></i> RELATIONSHIPS</h3>
<div class="p-1 row no-gutters text-justify">
<!-- PERSON - star icon -->
<div class="p-1 col-lg-6"> <div class="p-2 bg-faded h-100" style="min-height: 155px;">
<a class="m-1 ml-2 p-1 float-sm-right">
<img src="IMG_LINK" style="height: 120px; width: 120px;"></a>
<h3 class="justify-content-between font-weight-normal" style="color: #aaa3b9;">
<a style="color: inherit" href="CHAR_LINK">Name</a>
<small class="mt-1">
<i class="fa-regular fa-star"></i> Relationship
</small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius odio eget risus blandit semper. Donec fermentum viverra ullamcorper. Vivamus iaculis non ex non eleifend. Quisque varius odio non sollicitudin tristique.</p>
</div> </div>
<!-- PERSON - heart icon -->
<div class="p-1 col-lg-6"> <div class="p-2 bg-faded h-100" style="min-height: 155px;">
<a class="m-1 ml-2 p-1 float-sm-right">
<img src="IMG_LINK" style="height: 120px; width: 120px;"></a>
<h3 class="justify-content-between font-weight-normal" style="color: #aaa3b9;">
<a style="color: inherit" href="CHAR_LINK">Name</a>
<small class="mt-1">
<i class="fa-regular fa-heart"></i> Relationship
</small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius odio eget risus blandit semper. Donec fermentum viverra ullamcorper. Vivamus iaculis non ex non eleifend. Quisque varius odio non sollicitudin tristique.</p>
</div> </div>
<!-- PERSON - plus icon -->
<div class="p-1 col-lg-6"> <div class="p-2 bg-faded h-100" style="min-height: 155px;">
<a class="m-1 ml-2 p-1 float-sm-right">
<img src="IMG_LINK" style="height: 120px; width: 120px;"></a>
<h3 class="justify-content-between font-weight-normal" style="color: #aaa3b9;">
<a style="color: inherit" href="CHAR_LINK">Name</a>
<small class="mt-1">
<i class="fa-regular fa-plus"></i> Relationship
</small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius odio eget risus blandit semper. Donec fermentum viverra ullamcorper. Vivamus iaculis non ex non eleifend. Quisque varius odio non sollicitudin tristique.</p>
</div> </div>
<!-- PERSON - minus icon -->
<div class="p-1 col-lg-6"> <div class="p-2 bg-faded h-100" style="min-height: 155px;">
<a class="m-1 ml-2 p-1 float-sm-right">
<img src="IMG_LINK" style="height: 120px; width: 120px;"></a>
<h3 class="justify-content-between font-weight-normal" style="color: #aaa3b9;">
<a style="color: inherit" href="CHAR_LINK">Name</a>
<small class="mt-1">
<i class="fa-regular fa-minus"></i> Relationship
</small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius odio eget risus blandit semper. Donec fermentum viverra ullamcorper. Vivamus iaculis non ex non eleifend. Quisque varius odio non sollicitudin tristique.</p>
</div> </div>
<!-- add more above here - just copy and paste previous links -->
</div>
</div> </div>
<!-- ........................................ COLORS -->
<div class="col-12 order-8"> <div class="m-1 card rounded-0" style="border: 6px solid #504a5e;">
<div class="p-1 row no-gutters font-weight-bold text-uppercase text-center">
<div class="p-1 col"> <div style="background: #111111; color: #FFFFFF;">Skin</div> </div>
<div class="p-1 col"> <div style="background: #222222; color: #FFFFFF;">Hair</div> </div>
<div class="p-1 col"> <div style="background: #333333; color: #FFFFFF;">Eyes</div> </div>
<div class="p-1 col"> <div style="background: #444444; color: #FFFFFF;">Extra</div> </div>
<div class="p-1 col"> <div style="background: #555555; color: #FFFFFF;">Extra</div> </div>
<div class="p-1 col"> <div style="background: #666666; color: #FFFFFF;">Extra</div> </div>
<!-- you can add/remove swatches -->
</div>
</div> </div>
<!-- CREDIT - do not remove -->
<div class="col-12 order-9 text-center">
<a class="text-light" data-toggle="tooltip" title="Banner Image" href="https://unsplash.com/pt-br/fotografias/foto-da-paisagem-das-montanhas-com-nevoeiro-gz1L_t9Hues"> <i class="fa-solid fa-image"></i> </a>
<a class="text-light" data-toggle="tooltip" title="SparklyCodes" href="/SparklyCodes"> <i class="fa-solid fa-code"></i> </a>
</div>
</div>