Pistachio
created by:Persimoen
HTMLCustom ColorsCharacter
Copy
<!--
background: #e6e0d0
primary accent: #9db190
secondary accent: #819672
text: #191d17
text faded (50%): #7C8C72
music link / slider colour: #E9F499
boxes expand, they do not scroll
-->
<div class="container pb-3 px-0 pt-0" style="max-width:1000px; background: #e6e0d0; color: #191d17; font-size: 1.15em">
<div class="p-3">
<div class="row no-gutters">
<!-- header with name or quote -->
<div class="d-flex flex-lg-row flex-column-reverse no-gutters w-100">
<div class="col-lg-4 p-2 pb-4 pb-lg-2" style="background-color: #819672"></div>
<div class="col p-2 text-center" style="background-color: #819672">
<span class="float-lg-right" style="font-size: 1.35em">Lorem ipsum dolor sit amet.</span>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-lg-4 pl-3 pr-3 pr-lg-0">
<!-- pfp image -->
<div style="background-color: #9db190; border: #e6e0d0 25px solid; margin-top:-30px;">
<img src="PFP-IMAGE-HERE">
</div>
<!-- bio -->
<div class="px-4 py-3" style="background-color: #9db190; line-height:25px">
<div class="row no-gutters align-items-center">
<div style="font-size:1.2em; font-variant: small-caps">Name</div>
<div class="col mx-2" style="border:1px solid #7C8C72"></div>
</div>
<div>content</div>
<div class="row no-gutters align-items-center">
<div style="font-size:1.2em; font-variant: small-caps">Species</div>
<div class="col mx-2" style="border:1px solid #7C8C72"></div>
</div>
<div>content</div>
<div class="row no-gutters align-items-center">
<div style="font-size:1.2em; font-variant: small-caps">Gender . Pronouns</div>
<div class="col mx-2" style="border:1px solid #7C8C72;"></div>
</div>
<div>content . con/tent</div>
<div class="row no-gutters align-items-center">
<div style="font-size:1.2em; font-variant: small-caps">Age</div>
<div class="col mx-2" style="border:1px solid #7C8C72;"></div>
<span style="font-size:1.2em;font-variant:small-caps;"><i class="fa-solid fa-cake-candles"></i> xx/xx</span>
</div>
<div>content</div>
<div class="row no-gutters align-items-center">
<div style="font-size:1.2em; font-variant: small-caps">Sexuality</div>
<div class="col mx-2" style="border:1px solid #7C8C72"></div>
</div>
<div>sexual orentation . romantic orentiation</div>
<div class="row no-gutters align-items-center">
<div style="font-size:1.2em; font-variant: small-caps">Status</div>
<div class="col mx-2" style="border:1px solid #7C8C72"></div>
</div>
<div>content</div>
<div class="row no-gutters align-items-center">
<div style="font-size:1.2em; font-variant: small-caps">Theme</div>
<div class="col mx-2" style="border:1px solid #7C8C72"></div>
</div>
<a href="SONG-LINK-HERE" style="color:#e9f499"><i class="fas fa-music"></i></a>
</div>
<!-- small perms -->
<div class="mt-2 p-2" style="background-color: #819672">You could put some permissions here, or maybe credits (like for moodboards). Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</div>
</div>
<div class="col-lg ml-lg-4 mt-4">
<!-- detailed info -->
<!-- buttons -->
<div class="row no-gutters mb-1">
<ul class="nav nav-btn nav-fill w-100 align-items-center" style="height:50px">
<li class="nav-item" style="background-color: #9db190">
<a class="nav-link btn show active" style="color: #191d17; font-size:1.35em" data-toggle="tab" href="#user_Personality"><i class="fal fa-user"></i></a>
</li>
<li class="nav-item mx-1" style="background-color: #819672">
<a class="nav-link btn show" style="color: #191d17; font-size:1.35em" data-toggle="tab" href="#user_History"><i class="fal fa-book"></i></a>
</li>
<li class="nav-item" style="background-color: #9db190">
<a class="nav-link btn show" style="color: #191d17; font-size:1.35em" data-toggle="tab" href="#user_Design"><i class="fal fa-palette"></i></a>
</li>
</ul>
</div>
<!-- tabs -->
<div class="tab-content w-100" style="min-height:500px">
<!-- personality tab -->
<div id="user_Personality" class="tab-pane fade active show">
<!-- first text box -->
<div class="p-3" style="background-color: #9db190">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.</div>
<!-- quote -->
<div class="p-3 m-3 text-center" style="font-size:1.15em; background-color: #819672">
<i class="fas fa-quote-left float-left mr-2 mt-n1" style="color:#191d17"></i>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<i class="fas fa-quote-right float-right ml-2 mt-n1" style="color:#191d17"></i>
</div>
<!-- second text box -->
<div class="p-3 mb-2" style="background-color: #9db190">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.</div>
<!-- traits and slider boxes -->
<div class="row no-gutters p-0 m-0">
<!-- traits -->
<div class="col-lg p-2 mb-2 mb-lg-0 mr-lg-1" style="background-color: #819672">
<ul class="fa-ul ml-4 mb-0">
<li><span class="fa-li"><i class="fas fa-plus fa-xs"></i></span>
Lorem ipsum.
</li>
<li><span class="fa-li"><i class="fas fa-plus fa-xs"></i></span>
Dolor sit amet.
</li>
<li><span class="fa-li"><i class="fas fa-equals fa-xs"></i></span>
Consectetur adipiscing elit.
</li>
<li><span class="fa-li"><i class="fas fa-equals fa-xs"></i></span>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<li><span class="fa-li"><i class="fas fa-x fa-xs"></i></span>
Donec accumsan tempor lacus.
</li>
<li><span class="fa-li"><i class="fas fa-x fa-xs"></i></span>
Et venenatis elit feugiat non.
</li>
</ul>
</div>
<!-- personality slider -->
<div class="col-lg p-2 ml-lg-1" style="background-color: #9db190; font-size:1.05em; font-variant: small-caps">
<div class="p-1 mt-1">
<div class="d-flex justify-content-between">
<span>Lone Wolf</span>
<span>Wolf Pack</span>
</div>
<div class="progress mx-auto mb-2" style="width:95%; height:4px; background:#7C8C72">
<!-- change width below -->
<div class="progress-bar" style="width:0%; background:#E9F499"></div></div>
<div class="d-flex justify-content-between">
<span>Daring</span>
<span>Cautious</span>
</div>
<div class="progress mx-auto mb-2" style="width:95%; height:4px; background:#7C8C72">
<!-- change width below -->
<div class="progress-bar" style="width:50%; background:#E9F499"></div>
</div>
<div class="d-flex justify-content-between">
<span>Poker Face</span>
<span>Heart on Sleeve</span>
</div>
<div class="progress mx-auto mb-2" style="width:95%; height:4px; background:#7C8C72">
<!-- change width below -->
<div class="progress-bar" style="width:100%; background:#E9F499"></div>
</div>
<div class="d-flex justify-content-between">
<span>Letter of the Law</span>
<span>Spirit of the Law</span>
</div>
<div class="progress mx-auto mb-2" style="width:95%; height:4px; background:#7C8C72">
<!-- change width below -->
<div class="progress-bar" style="width:39%; background:#E9F499"></div>
</div>
</div>
</div>
</div>
</div>
<!-- history tab -->
<div id="user_History" class="tab-pane fade">
<!-- top half (two text boxes & moodboard) -->
<div class="row no-gutters mb-2">
<!-- first two text boxes -->
<div class="col">
<div class="px-3 py-2 mb-2" style="background-color: #9db190; min-height:146.5px">
<span style="font-size:1.25em; font-variant:small-caps"><i class="far fa-bookmark fa-2 pr-2"></i>Early Life</span>
<p>History yippeee<br>
</div>
<div class="p-3" style="background-color: #819672; min-height:146.5px">
<span class="w-100 align-items-center text-right float-right" style="font-size:1.25em; font-variant:small-caps">Main Life<i class="far fa-book-open-cover fa-2 pl-2"></i></span>
<p>Yippee more history !!</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.<br>
Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. </p>
</div>
</div>
<!-- vertical moodboard -->
<div class="col-2 ml-2">
<div class="d-flex flex-column no-gutters h-100">
<a class="h-100 mb-2 w-100" title="Image by XXX" style="background: url('VERTICAL-MOODBOARD-1-LINK-HERE'); background-size: cover; background-position: center; background-repeat: no-repeat"></a>
<a class="h-100 mb-2 w-100" title="Image by XXX" style="background: url('VERTICAL-MOODBOARD-2-LINK-HERE'); background-size: cover; background-position: center; background-repeat: no-repeat"></a>
<a class="h-100 w-100" title="Image by XXX" style="background: url('VERTICAL-MOODBOARD-3-LINK-HERE'); background-size: cover; background-position: center; background-repeat: no-repeat"></a>
</div>
</div>
</div>
<!-- last text box -->
<div class="p-3" style="background-color: #9db190">
<span style="font-size:1.25em; font-variant:small-caps"><i class="far fa-book fa-2 pr-2"></i>Later Life</span>
<p>Historyyyyyy</p>
We got so much history up in this house
</div>
</div>
<!-- design tab -->
<div id="user_Design" class="tab-pane fade">
<div class="row no-gutters">
<!-- palette -->
<div class="col-1 mr-1">
<div class="d-flex flex-column no-gutters h-100">
<!-- you can add or remove colours as needed. -->
<a class="h-100 w-100" title="Colour 1" style="background:#4a4a4a"></a>
<a class="h-100 w-100" title="Colour 2" style="background:#6e6e6e"></a>
<a class="h-100 w-100" title="Colour 3" style="background:##808080"></a>
<a class="h-100 w-100" title="Colour 4" style="background:#878787"></a>
<a class="h-100 w-100" title="Colour 5" style="background:#e0e0e0"></a>
</div>
</div>
<!-- design notes & image -->
<div class="col">
<!-- design notes -->
<div class="py-2" style="background-color:#9db190">
<span class="pl-3" style="font-size: 1.15em; font-weight:550">Design Notes</span>
<ul style="list-style-type: circle; line-height:1.1">
<li>Mention some important stuff your attacker should keep in mind!</li>
<li>Or some things that aren't important</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Consectetur adipiscing elit.</li>
</ul>
</div>
<!-- image -->
<div class="w-100 p-2" style="height:400px">
<div class="h-100 w-100" style="background: url('FULLBODY-DESIGN-IMAGE-HERE'); background-position: center; background-repeat: no-repeat; background-size: contain"></div>
</div>
</div>
</div>
</div>
</div>
<!-- moodboard -->
<div class="row no-gutters w-100 mt-2" style="height:60px">
<a class="col h-100 mr-2 w-100" title="Image by xxx" style="background: url('MOODBOARD-1-LINK-HERE'); background-size: cover; background-position: center; background-repeat: no-repeat"></a>
<a class="col h-100 mr-2 w-100" title="Image by xxx" style="background: url('MOODBOARD-2-LINK-HERE'); background-size: cover; background-position: center; background-repeat: no-repeat"></a>
<a class="col h-100 mr-2 w-100" title="Image by xxx" style="background: url('MOODBOARD-3-LINK-HERE'); background-size: cover; background-position: center; background-repeat: no-repeat"></a>
<a class="col h-100 w-100" title="Image by xxx" style="background: url('MOODBOARD-4-LINK-HERE'); background-size: cover; background-position: center; background-repeat: no-repeat"></a>
</div>
<!-- trivia & attack suggestions-->
<div class="row no-gutters mt-2">
<!-- character trivia -->
<div class="col-lg mb-2 mb-lg-0 mr-lg-2" style="background-color: #9db190">
<ul class="p-2 pl-4" style="list-style-type: circle; line-height:1.1">
<li>Some maybe fun stuff you wanna mention about your character!</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Consectetur adipiscing elit.<br>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
</ul>
</div>
<!-- character attack suggestions -->
<div class="col-lg text-right float-right" style="background-color: #819672">
<ul class="p-2 pl-4" style="list-style-type: circle; line-height:1.1">
<li>Some attack ideas you might like to receive</li>
<li>People struggle with ideas specific to the character sometimes</li>
<li>Might be fun to give them some prompts!</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- code credit, do not delete -->
<div class="float-right mt-n3 mr-3" style="font-size:1.25em">
<a href="https://toyhou.se/Persimoen" title="Code by Persimoen" style="color: #819672"><i class="fal fa-tomato"></i></a>
</div>
</div>