knight
created by:peachiibon
Custom ColorsHTMLCharacter
Copy
<!--
[ 04 | KNIGHT ]
turn OFF WYSIWYG
turn ON code editor
use chevrons on the side to stay organized
<- over here
DO NOT REMOVE CREDIT
~ RESOURCES ~
♡ free live code editor : https://th.circlejourney.net/
♡ coding help forum : https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
♡ how to edit icons : https://toyhou.se/3536712.
♡ coding resources : https://toyhou.se/Elithian/characters/folder:881832
~ COLORS ~
♡ accent : #637eea
♡ darkest : #0d142a
♡ second darkest : #374269
♡ content background : #6a749a
use ctrl+f to quickly change colors
-->
<!-- background pattern -->
<div
class="mx-auto my-0 p-lg-5"
style="
max-width: 900px;
background-image: url(https://www.transparenttextures.com/patterns/worn-dots.png);
background-position: center;
background-blend-mode: color-dodge;
background-attachment: fixed;
background-color: #0d142a;
color: #0d142a;
"
>
<div class="row no-gutters">
<!-- image + quote -->
<div class="col-lg-4 p-2 my-auto text-center">
<!-- icon -->
<h1 class="p-2 text-uppercase font-weight-bold" style="color: #637eea;">
<i class="fa-light fa-crown fa-lg"></i>
</h1>
<div class="card rounded-circle" style="border: 7px double #0d142a; background: #6a749a; height: 250px;">
<!-- image // replace URL with your own -->
<div class="card rounded-circle h-100 w-100" style="background: url(IMG_URL_HERE) center; background-size: cover;"></div>
</div>
<h3 class="m-2 text-uppercase font-weight-bold" style="color: #637eea; font-family: times new roman;">Name Surname</h3>
<span class="font-italic" style="color: #637eea;">
<!-- icon -->
<i class="far fa-quote-left fa-sm"></i>
<!-- quote -->
Quote here. Can be as long or as short as you want.
<!-- icon -->
<i class="far fa-quote-right fa-sm"></i>
</span>
</div>
<div class="col-lg-8 p-2">
<div class="h-100 flex-column">
<!-- header -->
<h3 class="mb-n3 text-uppercase font-weight-bold text-center" style="color: #637eea; font-family: times new roman; font-size: 25px; z-index: 1;">
Introduction
</h3>
<div class="h-100 p-2" style="background: #374269; border: 6px double #0d142a;">
<div class="h-100 flex-column p-2" style="background-color: #6a749a;">
<!-- basic info -->
<div class="h-100 row no-gutters">
<div class="col-6 pr-1 flex-column h-100">
<div class="justify-content-between">
<span class="text-uppercase font-weight-bold">Age</span>
<span>Content</span>
</div>
<!-- divider -->
<div class="my-auto"><hr class="my-0" style="border-top: 2px solid #374269;" /></div>
<div class="justify-content-between">
<span class="text-uppercase font-weight-bold">Gender</span>
<span>Content</span>
</div>
<!-- divider -->
<div class="my-auto"><hr class="my-0" style="border-top: 2px solid #374269;" /></div>
<div class="justify-content-between">
<span class="text-uppercase font-weight-bold">Sexuality</span>
<span>Content</span>
</div>
<!-- divider -->
<div class="my-auto"><hr class="my-0" style="border-top: 2px solid #374269;" /></div>
<div class="justify-content-between">
<span class="text-uppercase font-weight-bold">Occupation</span>
<span>Content</span>
</div>
</div>
<div class="col-6 pl-1 flex-column h-100">
<div class="justify-content-between">
<span class="text-uppercase font-weight-bold">Birthday</span>
<span>Content</span>
</div>
<!-- divider -->
<div class="my-auto"><hr class="my-0" style="border-top: 2px solid #374269;" /></div>
<div class="justify-content-between">
<span class="text-uppercase font-weight-bold">Pronouns</span>
<span>Content</span>
</div>
<!-- divider -->
<div class="my-auto"><hr class="my-0" style="border-top: 2px solid #374269;" /></div>
<div class="justify-content-between">
<span class="text-uppercase font-weight-bold">Status</span>
<span>Content</span>
</div>
<!-- divider -->
<div class="my-auto"><hr class="my-0" style="border-top: 2px solid #374269;" /></div>
<div class="justify-content-between">
<span class="text-uppercase font-weight-bold">Residence</span>
<span>Content</span>
</div>
</div>
</div>
<!-- divider -->
<div><hr class="my-2" style="border-top: 6px double #374269;" /></div>
<!-- introduction -->
<div class="text-justify" style="height: 160px; overflow: auto; scrollbar-width: none;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit
blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- add more above here -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 p-2">
<div class="p-2" style="background: #374269; border: 6px double #0d142a;">
<div class="p-2" style="background-color: #6a749a;">
<div class="row no-gutters">
<div class="col-auto">
Song Name
<small class="faded">Artist</small>
</div>
<div class="col mx-2 my-auto">
<hr class="m-0" style="border-top: 2px solid #374269;">
</div>
<div class="col-auto">
<audio controls="" style="height: 15px; max-width: 110px; opacity: 0; position: absolute; left: -17px; z-index: 1;">
<!--
music button
- this uses an embed instead of a youtube link. its more reliable.
- for more info check here -> https://toyhou.se/6560537.music-player-tutorial-f2u
-->
<source src="MP3_LINK" />
<br />
</audio>
<!-- play icon -->
<i class="fa-duotone fa-play-circle fa-lg"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 p-2">
<!-- header -->
<h3 class="mb-n3 text-uppercase font-weight-bold text-center" style="color: #637eea; font-family: times new roman; font-size: 25px; z-index: 1;">
Personality
</h3>
<div class="p-2" style="background: #374269; border: 6px double #0d142a;">
<div class="p-2" style="height: 250px; overflow: auto; background-color: #6a749a; scrollbar-width: none;">
<div class="row no-gutters">
<div class="col-6 pr-lg-1 mb-lg-0 mb-2">
<!-- likes -->
<p class="text-uppercase font-weight-bold">
Likes
</p>
<!-- divider -->
<div><hr class="my-0" style="border-top: 2px solid #374269;" /></div>
<ul class="pl-3" style="list-style-type: square;">
<!-- list -->
<li>One</li>
<li>Two</li>
<li>Three</li>
<!-- add more above here -->
</ul>
</div>
<div class="col-6 pl-lg-1">
<!-- dislikes -->
<p class="text-uppercase font-weight-bold">
Dislikes
</p>
<!-- divider -->
<div><hr class="my-0" style="border-top: 2px solid #374269;" /></div>
<ul class="pl-3" style="list-style-type: square;">
<!-- list -->
<li>One</li>
<li>Two</li>
<li>Three</li>
<!-- add more above here -->
</ul>
</div>
</div>
<!-- divider -->
<div><hr class="mt-0 mb-2" style="border-top: 6px double #374269;" /></div>
<!-- personality stats -->
<!-- introvert / extrovert -->
<div class="row no-gutters my-2">
<div class="col-3 small text-center text-uppercase">
Introvert
</div>
<div class="col-3 order-1 small text-center text-uppercase">
Extrovert
</div>
<div class="col-6 my-auto">
<div class="progress bg-transparent rounded-0" style="border: 2px solid #374269;">
<!-- edit percentage to move slider -->
<div class="progress-bar bg-transparent rounded-0" style="width: 50%; height: 10px; border-right: 8px solid #374269;"></div>
</div>
</div>
</div>
<!-- intuitive / observant -->
<div class="row no-gutters my-2">
<div class="col-3 small text-center text-uppercase">
Intuitive
</div>
<div class="col-3 order-1 small text-center text-uppercase">
Observant
</div>
<div class="col-6 my-auto">
<div class="progress bg-transparent rounded-0" style="border: 2px solid #374269;">
<!-- edit percentage to move slider -->
<div class="progress-bar bg-transparent rounded-0" style="width: 50%; height: 10px; border-right: 8px solid #374269;"></div>
</div>
</div>
</div>
<!-- thinking / feeling -->
<div class="row no-gutters my-2">
<div class="col-3 small text-center text-uppercase">
Thinking
</div>
<div class="col-3 order-1 small text-center text-uppercase">
Feeling
</div>
<div class="col-6 my-auto">
<div class="progress bg-transparent rounded-0" style="border: 2px solid #374269;">
<!-- edit percentage to move slider -->
<div class="progress-bar bg-transparent rounded-0" style="width: 50%; height: 10px; border-right: 8px solid #374269;"></div>
</div>
</div>
</div>
<!-- judging / prospecting -->
<div class="row no-gutters my-2">
<div class="col-3 small text-center text-uppercase">
Judging
</div>
<div class="col-3 order-1 small text-center text-uppercase">
Prospecting
</div>
<div class="col-6 my-auto">
<div class="progress bg-transparent rounded-0" style="border: 2px solid #374269;">
<!-- edit percentage to move slider -->
<div class="progress-bar bg-transparent rounded-0" style="width: 50%; height: 10px; border-right: 8px solid #374269;"></div>
</div>
</div>
</div>
<!-- assertive / turbulent -->
<div class="row no-gutters my-2">
<div class="col-3 small text-center text-uppercase">
Assertive
</div>
<div class="col-3 order-1 small text-center text-uppercase">
Turbulent
</div>
<div class="col-6 my-auto">
<div class="progress bg-transparent rounded-0" style="border: 2px solid #374269;">
<!-- edit percentage to move slider -->
<div class="progress-bar bg-transparent rounded-0" style="width: 50%; height: 10px; border-right: 8px solid #374269;"></div>
</div>
</div>
</div>
<!-- divider -->
<div><hr class="my-2" style="border-top: 6px double #374269;" /></div>
<!-- written personality -->
<div class="text-justify">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit
blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- add more above here -->
</div>
</div>
</div>
</div>
<div class="col-lg-6 p-2">
<!-- header -->
<h3 class="mb-n3 text-uppercase font-weight-bold text-center" style="color: #637eea; font-family: times new roman; font-size: 25px; z-index: 1;">
Notes
</h3>
<div class="p-2" style="background: #374269; border: 6px double #0d142a;">
<div class="p-2" style="height: 250px; overflow: auto; background-color: #6a749a; scrollbar-width: none;">
<div class="row no-gutters">
<div class="col-7 pr-lg-1 mb-lg-0 mb-2">
<!-- design notes -->
<p class="text-uppercase font-weight-bold">
Design Notes
</p>
<!-- divider -->
<div><hr class="my-0" style="border-top: 2px solid #374269;" /></div>
<ul class="pl-3" style="list-style-type: square;">
<!-- list -->
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li>Duis porta eros et velit blandit dapibus.</li>
<!-- add more above here -->
</ul>
</div>
<div class="col-5 pl-lg-1">
<div style="position: sticky; top: 0">
<!-- reference image // replace url with your own -->
<div style="background: url(IMG_URL_HERE) top no-repeat; background-size: cover; height: 200px;"></div>
<!-- view full button -->
<a href="URL_HERE" class="btn w-100 p-1 text-center text-uppercase rounded-0 mt-2" style="background: #374269; color: #0d142a; box-shadow: none;">
View Full
</a>
</div>
</div>
</div>
<!-- personality stats -->
<!-- divider -->
<div><hr class="my-2" style="border-top: 6px double #374269;" /></div>
<!-- trivia -->
<p class="text-uppercase font-weight-bold">
Trivia
</p>
<!-- divider -->
<div><hr class="my-0" style="border-top: 2px solid #374269;" /></div>
<ul class="pl-3" style="list-style-type: square;">
<!-- list -->
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li>Duis porta eros et velit blandit dapibus.</li>
<!-- add more above here -->
</ul>
</div>
</div>
</div>
<div class="col-lg-9 p-2">
<!-- header -->
<h3 class="mb-n3 text-uppercase font-weight-bold text-center" style="color: #637eea; font-family: times new roman; font-size: 25px; z-index: 1;">
Background
</h3>
<div class="p-2" style="background: #374269; border: 6px double #0d142a;">
<div class="p-2 text-justify" style="height: 250px; overflow: auto; background-color: #6a749a; scrollbar-width: none;">
<!-- written background -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- add more above here -->
</div>
</div>
</div>
<div class="col-lg-3 p-2">
<div class="p-2" style="background: #374269; border: 6px double #0d142a; margin-top: 12px;">
<!-- side image // replace url with your own -->
<div style="background: url(IMG_URL_HERE) center no-repeat; background-size: cover; height: 250px;"></div>
</div>
</div>
<!-- image 1 -->
<div class="col-lg-3 p-2">
<div class="p-2" style="background: #374269; border: 6px double #0d142a;">
<!-- side image // replace url with your own -->
<div style="background: url(IMG_URL_HERE) center no-repeat; background-size: cover; height: 150px;"></div>
</div>
</div>
<!-- image 2 -->
<div class="col-lg-3 p-2">
<div class="p-2" style="background: #374269; border: 6px double #0d142a;">
<!-- side image // replace url with your own -->
<div style="background: url(IMG_URL_HERE) center no-repeat; background-size: cover; height: 150px;"></div>
</div>
</div>
<!-- image 3 -->
<div class="col-lg-3 p-2">
<div class="p-2" style="background: #374269; border: 6px double #0d142a;">
<!-- side image // replace url with your own -->
<div style="background: url(IMG_URL_HERE) center no-repeat; background-size: cover; height: 150px;"></div>
</div>
</div>
<!-- image 4 -->
<div class="col-lg-3 p-2">
<div class="p-2" style="background: #374269; border: 6px double #0d142a;">
<!-- side image // replace url with your own -->
<div style="background: url(IMG_URL_HERE) center no-repeat; background-size: cover; height: 150px;"></div>
</div>
</div>
<div class="col-lg-12 p-2">
<!-- header -->
<h3 class="mb-n3 text-uppercase font-weight-bold text-center" style="color: #637eea; font-family: times new roman; font-size: 25px; z-index: 1;">
Relationships
</h3>
<div class="p-2" style="background: #374269; border: 6px double #0d142a;">
<div class="p-2 text-justify" style="height: 200px; overflow: auto; background-color: #6a749a; scrollbar-width: none;">
<div class="row no-gutters">
<!-- character 1 -->
<div class="col-lg-6 p-1 row no-gutters my-lg-0 my-2">
<div class="col-4 mr-2">
<!-- image -->
<div class="h-100" style="background: url(IMG_URL_HERE) center no-repeat; background-size: cover;"></div>
</div>
<div class="col" style="height: 175px; overflow: auto; scrollbar-width: none;">
<!-- character link -->
<div class="p-1 text-center text-uppercase font-weight-bold" style="background: #374269; position: sticky; top: 0;">
<a href="URL_HERE" style="color: #6a749a;">
Character Name
</a>
</div>
<!-- relationship -->
<div class="text-center font-italic">
relationship
</div>
<!-- divider -->
<div><hr class="my-0" style="border-top: 2px solid #374269;" /></div>
<!-- written relationship -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- add more above here -->
</div>
</div>
<!-- end character 1 -->
<!-- character 2 -->
<div class="col-lg-6 p-1 row no-gutters my-lg-0 my-2">
<div class="col-4 mr-2">
<!-- image -->
<div class="h-100" style="background: url(IMG_URL_HERE) center no-repeat; background-size: cover;"></div>
</div>
<div class="col" style="height: 175px; overflow: auto; scrollbar-width: none;">
<!-- character link -->
<div class="p-1 text-center text-uppercase font-weight-bold" style="background: #374269; position: sticky; top: 0;">
<a href="URL_HERE" style="color: #6a749a;">
Character Name
</a>
</div>
<!-- relationship -->
<div class="text-center font-italic">
relationship
</div>
<!-- divider -->
<div><hr class="my-0" style="border-top: 2px solid #374269;" /></div>
<!-- written relationship -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- add more above here -->
</div>
</div>
<!-- end character 2 -->
<!-- divider // put between every two items -->
<div class="col-12 p-1 hidden-sm-down">
<hr class="my-2" style="border-top: 6px double #374269;" />
</div>
<!-- character 3 -->
<div class="col-lg-6 p-1 row no-gutters my-lg-0 my-2">
<div class="col-4 mr-2">
<!-- image -->
<div class="h-100" style="background: url(IMG_URL_HERE) center no-repeat; background-size: cover;"></div>
</div>
<div class="col" style="height: 175px; overflow: auto; scrollbar-width: none;">
<!-- character link -->
<div class="p-1 text-center text-uppercase font-weight-bold" style="background: #374269; position: sticky; top: 0;">
<a href="URL_HERE" style="color: #6a749a;">
Character Name
</a>
</div>
<!-- relationship -->
<div class="text-center font-italic">
relationship
</div>
<!-- divider -->
<div><hr class="my-0" style="border-top: 2px solid #374269;" /></div>
<!-- written relationship -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- add more above here -->
</div>
</div>
<!-- end character 3 -->
<!-- character 4 -->
<div class="col-lg-6 p-1 row no-gutters my-lg-0 my-2">
<div class="col-4 mr-2">
<!-- image -->
<div class="h-100" style="background: url(IMG_URL_HERE) center no-repeat; background-size: cover;"></div>
</div>
<div class="col" style="height: 175px; overflow: auto; scrollbar-width: none;">
<!-- character link -->
<div class="p-1 text-center text-uppercase font-weight-bold" style="background: #374269; position: sticky; top: 0;">
<a href="URL_HERE" style="color: #6a749a;">
Character Name
</a>
</div>
<!-- relationship -->
<div class="text-center font-italic">
relationship
</div>
<!-- divider -->
<div><hr class="my-0" style="border-top: 2px solid #374269;" /></div>
<!-- written relationship -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- add more above here -->
</div>
</div>
<!-- end character 4 -->
<!-- add more above here -->
</div>
</div>
</div>
</div>
<!-- credits // DO NOT REMOVE -->
<div class="col-12 px-2 text-center">
<p class="text-uppercase mt-1" style="color: #637eea; font-size: 10px; letter-spacing: 3px;">
<a href="URL_HERE" style="color: #637eea; text-decoration: none;" class="tooltipster" title="icon credit">
<i class="fa-solid fa-user fa-sm"></i>
</a>
|
<a href="URL_HERE" style="color: #637eea; text-decoration: none;" class="tooltipster" title="image credit">
<i class="fa-solid fa-image fa-sm"></i>
</a>
|
<a href="https://toyhou.se/11554905.04-knight" style="color: #637eea; text-decoration: none;" class="tooltipster" title="code by peachybonnie">
<i class="fa-solid fa-bookmark fa-sm"></i>
</a>
</p>
</div>
</div>
</div>