dreamy
created by:sunxrice
HTMLMixed ColorsCharacter
Copy
<!--
dreamy
by sunxrice
accents -
color : #935ff5 (primary), #bcbabf (outline), #000000 (image background)
styles -
heading : color:#935ff5; font-size:1.2em; font-weight:500
box border : border:2px #bcbabf solid
links -
characters : charlink
image : imglink
use find and replace [ ctrl + h ]!
-->
<!-- background - replace url (or remove if you don't want it) -->
<div class="container p-0" style="
background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/93278260_DditJeq0LTIK3yc.png);
background-size:25%; background-attachment:fixed; position:absolute; min-width:100%; min-height:100%; top:-20px; left:-20px; right:-20px; bottom:10px; z-index:-99"></div>
<!-- /background -->
<div class="container" style="max-width:960px; scrollbar-color:#935ff5 rgba(0,0,0,0)">
<!-- navigation -->
<div class="bg-faded p-1 mb-2 text-uppercase" style="border:2px #bcbabf solid">
<ul class="nav flex-column flex-md-row justify-content-around">
<!-- tab -->
<li class="nav-item">
<a class="nav-link active" style="color:#935ff5; font-size:1.2em; font-weight:500"
data-toggle="tab" href="#bio">bio</a>
</li>
<!-- /tab -->
<!-- tab -->
<li class="nav-item">
<a class="nav-link" style="color:#935ff5; font-size:1.2em; font-weight:500"
data-toggle="tab" href="#story">story</a>
</li>
<!-- /tab -->
<!-- tab -->
<li class="nav-item">
<a class="nav-link" style="color:#935ff5; font-size:1.2em; font-weight:500"
data-toggle="tab" href="#relationships">relationships</a>
</li>
<!-- /tab -->
<!-- tab -->
<li class="nav-item">
<a class="nav-link" style="color:#935ff5; font-size:1.2em; font-weight:500"
data-toggle="tab" href="#design">design</a>
</li>
<!-- /tab -->
<!-- tab -->
<li class="nav-item">
<a class="nav-link" style="color:#935ff5; font-size:1.2em; font-weight:500"
data-toggle="tab" href="#misc">misc</a>
</li>
<!-- /tab -->
</ul>
</div>
<!-- /navigation -->
<div class="row mb-2">
<!-- sidebar -->
<div class="col-md-4 d-flex flex-column">
<!-- icon -->
<div class="bg-faded p-2 mb-2" style="border:2px #bcbabf solid">
<img style="width:100%; background-color:#000000" src="imglink" alt="">
</div>
<!-- /icon -->
<div class="bg-faded p-3 mb-2" style="color:#935ff5; font-size:1.2em; font-weight:500; border:2px #bcbabf solid">
FULL NAME
</div>
<!-- side info -->
<div class="bg-faded p-3" style="flex:1 1 auto; border:2px #bcbabf solid">
<ul class="fa-ul ml-4">
<!-- info -->
<li>
<span class="fa-li fas fa-comments tooltipster" style="color:#935ff5"
title="nicknames"></span>
nicknames
</li>
<!-- /info -->
<!-- info -->
<li>
<span class="fa-li fas fa-venus-mars tooltipster" style="color:#935ff5"
title="gender and pronouns"></span>
gender pronouns
</li>
<!-- /info -->
<!-- info -->
<li>
<span class="fa-li fas fa-cake tooltipster" style="color:#935ff5"
title="age and birthday"></span>
X years old (birthday)
</li>
<!-- /info -->
<!-- info -->
<li>
<span class="fa-li fas fa-heart tooltipster" style="color:#935ff5"
title="orientation"></span>
orientation
</li>
<!-- /info -->
<!-- info -->
<li>
<span class="fa-li fas fa-briefcase tooltipster" style="color:#935ff5"
title="occupation"></span>
occupation
</li>
<!-- /info -->
</ul>
</div>
<!-- /side info -->
</div>
<!-- /sidebar -->
<!-- divider for mobile -->
<div class="d-block d-md-none p-1"></div>
<!-- main -->
<div class="col-md-8 d-flex flex-column">
<!-- content -->
<div class="bg-faded py-3" style="height:560px; border:2px #bcbabf solid">
<div class="tab-content h-100 text-justify">
<!-- tab - bio -->
<div class="tab-pane fade show active px-3 h-100" id="bio" style="overflow-y:auto; scrollbar-width:thin">
<blockquote class="font-italic">❝
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
❞</blockquote>
<!-- bio -->
<div class="mb-4">
<!-- adjectives -->
<p class="text-center" style="color:#935ff5">
adjective
<i class="fas fa-sparkle mx-2"></i>
adjective
<i class="fas fa-sparkle mx-2"></i>
adjective
</p>
<!-- /adjectives -->
<p>your oc's bio here. the big box scrolls. 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>
<p>second paragraph. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- /bio -->
<hr>
<!-- lists -->
<div class="row">
<!-- list - likes -->
<div class="col-sm-6 mb-2">
<!-- heading -->
<h3 style="color:#935ff5; font-size:1.2em; font-weight:500">
LIKES
</h3>
<ul>
<li>content</li>
<li>content</li>
</ul>
</div>
<!-- /list -->
<!-- list - dislikes -->
<div class="col-sm-6 mb-2">
<!-- heading -->
<h3 style="color:#935ff5; font-size:1.2em; font-weight:500">
DISLIKES
</h3>
<ul>
<li>content</li>
<li>content</li>
</ul>
</div>
<!-- /list -->
<!-- list - abilities -->
<div class="col-sm-6 mb-2">
<!-- heading -->
<h3 style="color:#935ff5; font-size:1.2em; font-weight:500">
ABILITIES
</h3>
<ul>
<li>content</li>
<li>content</li>
</ul>
</div>
<!-- /list -->
<!-- list - weaknesses -->
<div class="col-sm-6 mb-2">
<!-- heading -->
<h3 style="color:#935ff5; font-size:1.2em; font-weight:500">
WEAKNESSES
</h3>
<ul>
<li>content</li>
<li>content</li>
</ul>
</div>
<!-- /list -->
<!-- list - hobbies -->
<div class="col-sm-6 mb-2">
<!-- heading -->
<h3 style="color:#935ff5; font-size:1.2em; font-weight:500">
HOBBIES
</h3>
<ul>
<li>content</li>
<li>content</li>
</ul>
</div>
<!-- /list -->
<!-- list - fearss -->
<div class="col-sm-6 mb-2">
<!-- heading -->
<h3 style="color:#935ff5; font-size:1.2em; font-weight:500">
FEARS
</h3>
<ul>
<li>content</li>
<li>content</li>
</ul>
</div>
<!-- /list -->
</div>
<!-- /lists -->
</div>
<!-- /tab -->
<!-- tab - story -->
<div class="tab-pane fade px-3 h-100" id="story" style="overflow-y:auto; scrollbar-width:thin">
<!-- chapter -->
<div class="mb-4">
<p>put your oc's story here or something. this section doesn't have a subheading but you can add one. 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>
<!-- /chapter -->
<!-- chapter -->
<div class="mb-4">
<!-- heading -->
<h3 style="color:#935ff5; font-size:1.2em; font-weight:500">
CHAPTER TITLE
</h3>
<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>
</div>
<!-- /chapter -->
<!-- chapter -->
<div class="mb-4">
<!-- heading -->
<h3 style="color:#935ff5; font-size:1.2em; font-weight:500">
CHAPTER TITLE
</h3>
<p>this is a longer chapter. 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. 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>
<!-- /chapter -->
<!-- add more above this line -->
</div>
<!-- /tab -->
<!-- tab - relationships -->
<div class="tab-pane fade px-3 h-100" id="relationships" style="overflow-y:auto; scrollbar-width:thin">
<div class="mb-4">
<p>description in the beginning, i usually describe the character's reputation here but you can remove this if you don't do that.</p>
<p>paragraph 2</p>
</div>
<hr>
<!-- characters -->
<!-- character -->
<div class="row mb-4">
<!-- icon -->
<div class="col-3">
<img style="width:100%; background-color:#000000; border:2px #bcbabf solid" src="imglink" alt="">
</div>
<!-- icon -->
<!-- /info -->
<div class="col-9">
<!-- heading -->
<h3 style="color:#935ff5; font-size:1.2em; font-weight:500">
<a style="color:#935ff5" href="charlink">CHARACTER</a>
<i style="font-weight:normal">
— relationship
</i>
</h3>
<p>describe here</p>
</div>
<!-- /info -->
</div>
<!-- /character -->
<!-- character -->
<div class="row mb-4">
<!-- icon -->
<div class="col-3">
<img style="width:100%; background-color:#000000; border:2px #bcbabf solid" src="imglink" alt="">
</div>
<!-- icon -->
<!-- /info -->
<div class="col-9">
<!-- heading -->
<h3 style="color:#935ff5; font-size:1.2em; font-weight:500">
<a style="color:#935ff5" href="charlink">CHARACTER</a>
<i style="font-weight:normal">
— relationship
</i>
</h3>
<p>this is what happens when the description is long. 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>
<!-- /info -->
</div>
<!-- /character -->
<!-- /characters - add more above this line -->
</div>
<!-- /tab -->
<!-- tab - design -->
<div class="tab-pane fade px-3 h-100" id="design" style="overflow-y:auto; scrollbar-width:thin">
<div class="row">
<!-- image-->
<div class="col-md-8 justify-content-center align-items-center">
<img src="imglink" alt="">
</div>
<!-- /image -->
<!-- divider for mobile -->
<div class="d-block d-md-none p-1"></div>
<!-- notes -->
<div class="col-md-4">
<!-- design info -->
<ul class="fa-ul ml-4">
<!-- info -->
<li>
<span class="fa-li fas fa-ruler tooltipster" style="color:#935ff5"
title="height"></span>
height
</li>
<!-- /info -->
<!-- info -->
<li>
<span class="fa-li fas fa-user tooltipster" style="color:#935ff5"
title="species"></span>
species (or race. idk)
</li>
<!-- /info -->
<!-- info -->
<li>
<span class="fa-li fas fa-palette tooltipster" style="color:#935ff5"
title="designer"></span>
designer
</li>
<!-- /info -->
</ul>
<!-- /design -->
<hr>
<!-- notes list -->
<ul class="ml-n3">
<li>design notes</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!-- /notes list -->
</div>
<!-- /notes -->
</div>
<!-- palette - change text-dark and text-light accordingly -->
<div class="row no-gutters text-center my-2" style="font-size:0.8em">
<div class="col py-1 text-dark" style="background:#e5e4e0">#e5e4e0</div>
<div class="col py-1 text-dark" style="background:#c1bfba">#c1bfba</div>
<div class="col py-1 text-light" style="background:#7c7b74">#7c7b74</div>
<div class="col py-1 text-light" style="background:#403e3a">#403e3a</div>
<!-- put more colors above this line -->
</div>
<!-- /palette -->
</div>
<!-- /tab -->
<!-- tab - misc -->
<div class="tab-pane fade px-3 h-100" id="misc" style="overflow-y:auto; scrollbar-width:thin">
<!-- lists -->
<div class="row">
<!-- list - links -->
<div class="col-sm-6 mb-2">
<!-- heading -->
<h3 style="color:#935ff5; font-size:1.2em; font-weight:500">
LINKS
</h3>
<!-- links -->
<!-- link -->
<a class="d-block mb-2 btn btn-secondary rounded-0" style="color:#935ff5; border:2px #bcbabf solid"
href="btnlink">link
</a>
<!-- link -->
<a class="d-block mb-2 btn btn-secondary rounded-0" style="color:#935ff5; border:2px #bcbabf solid"
href="btnlink">link
</a>
<!-- /add more above this line -->
</div>
<!-- /list -->
<!-- list - trivia -->
<div class="col-sm-6 mb-2">
<!-- heading -->
<h3 style="color:#935ff5; font-size:1.2em; font-weight:500">
TRIVIA
</h3>
<ul>
<li>content</li>
<li>content</li>
</ul>
</div>
<!-- /list -->
</div>
<!-- /lists -->
</div>
<!-- /tab -->
</div>
</div>
<!-- /content -->
</div>
<!-- /main -->
</div>
<!-- credits -->
<p class="justify-content-end">
<a class="fas fa-image fa-width-auto btn btn-secondary p-2 ml-2 tooltipster" style="color:#935ff5; border:2px #bcbabf solid"
title="bg image by Doxiie" href="https://toyhou.se/11019105.f2u-star-patterns"></a>
<a class="fas fa-sun-haze fa-width-auto btn btn-secondary p-2 ml-2 tooltipster" style="color:#935ff5; border:2px #bcbabf solid"
title="code by sunxrice" href="https://toyhou.se/37989195.dreamy"></a>
</p>
</div>
<!-- end -->