<!DOCTYPE html>
<!--CODING INFORMATION AND TERMS
Cloudy Mountain
Free to use
Feel free to edit or frankenstien with other codes (According to ToS of other users)
Every place for an image but the background have been replaced with a stand-in to indicate where they would go, look for URL in all caps
Turn off WYSIWYG and use code editor-->
<!--COLOR CODES
Background: rgba(42, 79, 62, 0.9)
Title Text: #223f40
Main Text: #cdd0ce
Accent color: #ffd549
Lines color: rgba(238, 232, 170, 0.5)
Link color: rgba(238, 232, 170, 0.8)
-->
<!--background-->
<div class="container mx-auto row m-5 p-3 rounded" style="width:auto; background-size:cover; background-image:url('https://images.unsplash.com/photo-1452621946466-c0f2ff2ff100'); font-family: Times;">
<!--contains left panels-->
<div class="col-sm-3 p-0">
<!--character image url-->
<div class="col mb-3 rounded" style="height:350px; background-color:rgba(42, 79, 62, 0.9); background-size:cover; background-image:url('URL')">
</div>
<!--Basic summary of the character-->
<div class="col p-2 rounded" style="height:350px; background-color:rgba(42, 79, 62, 0.9);">
<!--Title-->
<div class="p-1 rounded text-center" style="color:#223f40; background-color:#ffd549;">
<b>Basic Information </b>
</div>
<!--list of traits-->
<div class="col mt-2" style="color:#cdd0ce; height:350px;">
<!---->
<div class="mx-2 my-auto">Name <span class="pull-right my-auto">--- </span> </div>
<hr class="my-auto" style="background:rgba(238, 232, 170, 0.5);">
<!---->
<div class="mx-2 my-auto">Alias <span class="pull-right my-auto">--- </span> </div>
<hr class="my-auto" style="background:rgba(238, 232, 170, 0.5);">
<!---->
<div class="mx-2 my-auto">Age <span class="pull-right my-auto">--- </span> </div>
<hr class="my-auto" style="background:rgba(238, 232, 170, 0.5);">
<!---->
<div class="mx-2 my-auto">Gender <span class="pull-right my-auto">--- </span> </div>
<hr class="my-auto" style="background:rgba(238, 232, 170, 0.5);">
<!---->
<div class="mx-2 my-auto">Pronouns <span class="pull-right my-auto">--- </span> </div>
<hr class="my-auto" style="background:rgba(238, 232, 170, 0.5);">
<!---->
<div class="mx-2 my-auto">Species <span class="pull-right my-auto">--- </span> </div>
<hr class="my-auto" style="background:rgba(238, 232, 170, 0.5);">
<!---->
<div class="mx-2 my-auto">Height <span class="pull-right my-auto">--- </span> </div>
<hr class="my-auto" style="background:rgba(238, 232, 170, 0.5);">
<!---->
<div class="mx-2 my-auto">Build <span class="pull-right my-auto">--- </span> </div>
<hr class="my-auto" style="background:rgba(238, 232, 170, 0.5);">
<!---->
<div class="mx-2 my-auto">D.O.B. <span class="pull-right my-auto">--- </span> </div>
<hr class="my-auto" style="background:rgba(238, 232, 170, 0.5)0;">
<!---->
<div class="mx-2 my-auto">Occupation <span class="pull-right my-auto">--- </span> </div>
<hr class="my-auto" style="background:rgba(238, 232, 170, 0.5);">
<!---->
<div class="mx-2 my-auto">Orientation <span class="pull-right my-auto">--- </span> </div>
<hr class="my-auto" style="background:rgba(238, 232, 170, 0.5);">
<!---->
<div class="mx-2 my-auto">MBTI <span class="pull-right my-auto">--- </span> </div>
<hr class="my-auto" style="background:rgba(238, 232, 170, 0.5);">
<!---->
<div class="mx-2 my-auto">Role <span class="pull-right my-auto">--- </span> </div>
</div>
</div>
</div>
<!--contains right panels-->
<div class="col-sm-9" style="color:#cdd0ce">
<!--Character about/backstory-->
<div class="p-2 mx-1 rounded" style="height: 500px; background-color:rgba(42, 79, 62, 0.9);">
<!--Name and symbol-->
<div class="p-3 rounded text-right" style="color:#223f40; background-color:#ffd549; font-size:1.7em;">
<i class="fa-duotone fa-mountain-sun pull-left" style="font-size:1.5em; color:#223f40;"> </i>
<b>CHARACTER NAME </b>
</div>
<!--Title formatting-->
<div class="pull-right pr-4" style="font-size:1.7em">ABOUT </div>
<hr class="mt-2" style="background:rgba(238, 232, 170, 0.5); height:1px; width:95%;">
<!--Paragraphs-->
<div class="p-0 m-2" style="overflow:auto; height:350px;">
<!--Copy and paste [ <p style="text-indent:10px"> </p>] for more paragraphs-->
<p style="text-indent:10px">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 style="text-indent:10px">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 style="text-indent:10px">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 style="text-indent:10px">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 style="text-indent:10px">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>
</div>
</div>
<!--contains bottom row-->
<div class="row mx-1 mt-3">
<!--tab pages-->
<div class="col-sm-8 rounded tab-content" style="height:200px; background-color:rgba(42, 79, 62, 0.9);" id="nav-tabContent">
<!--Personality-->
<div class="tab-pane fade show active" id="PERSONALITY" style="height:200px; overflow:auto;">
<p class="mt-1" style="text-align:center;"> <i>trait • trait • trait </i> </p>
<hr class="my-0" style="background:rgba(238, 232, 170, 0.5); width:60%;">
<!---->
<p class="m-0 mt-1" style="font-size:0.9em;">Extraversion <span class="pull-right">Introversion </span> </p>
<div class="progress" style="background-color:#223f40; height:10px; border:solid 1px;">
<div class="progress-bar" style="background-color:#cdd0ce; width:50%;"> </div>
</div>
<!---->
<p class="m-0" style="font-size:0.9em;">Agreeableness <span class="pull-right">Antagonism </span> </p>
<div class="progress" style="background-color:#223f40; height:10px; border:solid 1px;">
<div class="progress-bar" style="background-color:#cdd0ce; width:50%;"> </div>
</div>
<!---->
<p class="m-0" style="font-size:0.9em;">Conscientiousness <span class="pull-right">Lack of Direction </span> </p>
<div class="progress" style="background-color:#223f40; height:10px; border:solid 1px;">
<div class="progress-bar" style="background-color:#cdd0ce; width:50%;"> </div>
</div>
<!---->
<p class="m-0" style="font-size:0.9em;">Neuroticism <span class="pull-right">Emotional Stability </span> </p>
<div class="progress" style="background-color:#223f40; height:10px; border:solid 1px;">
<div class="progress-bar" style="background-color:#cdd0ce; width:50%;"> </div>
</div>
<!---->
<p class="m-0" style="font-size:0.9em;">Open-minded <span class="pull-right">Closed Off </span> </p>
<div class="progress" style="background-color:#223f40; height:10px; border:solid 1px;">
<div class="progress-bar" style="background-color:#cdd0ce; width:50%;"> </div>
</div>
</div>
<!--Likes and dislikes-->
<div class="tab-pane fade" style="height:200px; overflow:auto;" id="LIKES">
<!--List titles-->
<div class="pull-left" style="width:50%">
<p class="pl-2" style="font-size:1.2em;"> <b>Likes </b> </p>
</div>
<div>
<p class="px-3" style="font-size:1.2em;"> <b>Dislikes </b> </p>
</div>
<hr class="my-0 pull-center" style="background:rgba(238, 232, 170, 0.5);">
<!--Likes list-->
<div class="pull-left" style="width:50%">
<ul>
<li>Points will wrap lines if enough text is added to a singular one. </li>
<li>Like </li>
<li>Like </li>
</ul>
</div>
<!--Dislikes list-->
<div class="pull-left" style="width:50%">
<ul>
<li>This box will scroll with added text. </li>
<li>Dislike </li>
<li>Dislike </li>
</ul>
</div>
</div>
<!--Design notes-->
<div class="tab-pane fade p-1" style="height:200px; overflow:auto" id="DESIGN">
<!--Overall notes-->
<div>
<!--Overall images-->
<div class="row mx-auto my-2" style="height:130px;">
<div class="mx-auto" style="width:30%; height:100%; background-image:url('URL'); background-size:cover"> </div>
<div class="mx-auto" style="width:33%; height:100%; background-image:url('URL'); background-size:cover"> </div>
<div class="mx-auto" style="width:33%; height:100%; background-image:url('URL'); background-size:cover"> </div>
</div>
<!--Overall description-->
<div>
<p style="font-size:1.2em; m-0"> <i>General Description </i> </p>
<hr class="m-0" style="background-color:rgba(238, 232, 170, 0.5);">
<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>
</div>
</div>
<!--Clothing section-->
<div>
<!--Clothing images-->
<div class="row mx-auto my-2" style="height:130px;">
<div class="mx-auto" style="width:30%; height:100%; background-image:url('URL'); background-size:cover"> </div>
<div class="mx-auto" style="width:33%; height:100%; background-image:url('URL'); background-size:cover"> </div>
<div class="mx-auto" style="width:33%; height:100%; background-image:url('URL'); background-size:cover"> </div>
</div>
<!--Clothing description-->
<div>
<p style="font-size:1.2em;"> <i>Clothing </i> </p>
<hr class="m-0" style="background-color:rgba(238, 232, 170, 0.5);">
<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>
</div>
</div>
<!--Personal space section-->
<div>
<!--Personal space images-->
<div class="row mx-auto my-2" style="height:130px;">
<div class="mx-auto" style="width:33%; height:100%; background-image:url('URL'); background-size:cover"> </div>
<div class="mx-auto" style="width:33%; height:100%; background-image:url('URL'); background-size:cover"> </div>
<div class="mx-auto" style="width:33%; height:100%; background-image:url('URL'); background-size:cover"> </div>
</div>
<!--Personal space description-->
<div>
<p style="font-size:1.2em;"> <i>Personal Space </i> </p>
<hr class="m-0" style="background-color:rgba(238, 232, 170, 0.5);">
<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>
</div>
</div>
</div>
<!--Relationships-->
<div class="p-0 tab-pane fade" style="height:200px; overflow:auto;" id="RELATIONSHIPS">
<!--Relation one, copy from here to mark for more.-->
<div class=" col-sm-4 rounded pull-right mt-3 mr-2 p-0" style="height:140px; width:140px; background-image:url('URL'); background-size:cover">
<div style="height:150px"> </div>
<div style="text-align:center">
<i class="fa-solid fa-heart" style="font-size:1.5em"> </i>
<i class="fa-solid fa-heart" style="font-size:1.5em"> </i>
<i class="fa-regular fa-heart-half-stroke" style="font-size:1.5em"> </i>
<i class="fa-regular fa-heart" style="font-size:1.5em"> </i>
<i class="fa-regular fa-heart" style="font-size:1.5em"> </i>
</div>
</div>
<div class="col-sm-8 mt-3 mx-0 p-0 pull-left" stye="width:70%; text-align:left;">
<a href="CHARACTER" style="color:rgba(238, 232, 170, 0.8); font-size:2em;">Character name </a>
<p class="m-0">(relation) </p>
<hr class="mt-2" style="; height:1px;">
<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. </p>
</div>
<hr class="mt-2" style="background-color:rgba(238, 232, 170, 0.5); height:1px;">
<!--End copy here-->
</div>
</div>
<!--button list-->
<div class="mt-2 pl-2 pr-2 row">
<div class="nav flex-column nav-pills" role="tablist">
<a class="nav-link bg-transparent mb-1" data-toggle="pill" href="#PERSONALITY" style="height:3em;"> <button class="rounded bg-transparent" style="font-size:1.5em; border:0px" title="PERSONALITY"> <i class="fa-duotone fa-user" style="color:#ffd549; text-align:center; width:30px;"> </i> </button> </a>
<a class="nav-link bg-transparent mb-1" data-toggle="pill" href="#LIKES" style="height:3em"> <button class="rounded bg-transparent" style="font-size:1.5em; border:0px" title="LIKES"> <i class="fa-duotone fa-icons" style="color:#ffd549; text-align:center; width:30px;"> </i> </button> </a>
<a class="nav-link bg-transparent mb-1" data-toggle="pill" href="#DESIGN" style="height:3em"> <button class="rounded bg-transparent" style="font-size:1.5em; border:0px" title="DESIGN"> <i class="fa-duotone fa-pen-swirl" style="color:#ffd549; text-align:center; width:30px;"> </i> </button> </a>
<a class="nav-link bg-transparent mb-1" data-toggle="pill" href="#RELATIONSHIPS" style="height:3em"> <button class="rounded bg-transparent" style="font-size:1.5em; border:0px" title="RELATIONSHIPS"> <i class="fa-duotone fa-box-heart" style="color:#ffd549; text-align:center; width:30px;"> </i> </button> </a>
</div>
</div>
<!--playlist group-->
<div class="col rounded text-center p-2 tab-content" style="height:200px; background-color:rgba(42, 79, 62, 0.9);">
<!--Front page of playlist-->
<div>
<!--Playlist image-->
<img src="URL" class="rounded" style="height:125px;">
<!--playlist icons and control-->
<div style="font-size:1.5em">
<i class="fa-solid fa-backward"> </i>
<i class="fa-solid fa-play mx-2"> </i>
<i class="fa-solid fa-forward"> </i>
<iframe style="position:absolute; width:125%; left:0px; bottom:30px; height:100px; filter:opacity(0);" src="https://www.youtube.com/embed/videoseries?list=[VIDEO]&controls=0&loop=1"> </iframe>
<!--For a playlist, simply remove the [VIDEO] and replace it with the characters after "list=" in the PLAYLIST url. If you want only one video, take the characters after the "watch?v=" in the VIDEO url and replace everything after "/embed/" in this code-->
</div>
<!--Playlist title and toggle-->
<div class="m-0">
<hr class="m-0" style="background-color:rgba(238, 232, 170, 0.5);">
<i>Playlist title </i>
</div>
</div>
</div>
</div>
</div>
<!--credits, please do not edit the coding credit-->
<div class="col mt-2 mb-0 mr-4 ml-1 py-1 px-3" style="background-color:rgba(68, 68, 68, 0.7); height:25px;">
<a href="https://toyhou.se/20400813.cloudy-mountain" style="color:rgba(206, 206, 206, .6);" title="code credit"> <i class="fa-duotone fa-code px-2 pull-right"> </i> </a>
<a href="URL" style="color:rgba(206, 206, 206, .6);" title="image credit"> <i class="fa-duotone fa-images px-2 pull-right"> </i> </a>
<a href="URL" style="color:rgba(206, 206, 206, .6);" title="playlist link"> <i class="fa-duotone fa-waveform-lines px-2 pull-right"> </i> </a>
</div>
</div>