<!--
accent color: #89c65a
cmd + f to change real quick
-->
<div class="col-md-8 col-sm-12 mx-auto">
<div class="col-12 bg-faded p-2 mb-1" style="font-size: 25px; font-family: times new roman">
<div class="justify-content-between">
<!-- put the ocs name here -->
<p class="m-0">
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">N</span>AME
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">S</span>URNAME
</p>
<p class="mx-0 my-auto">
<a href="#abt" style="font-size: 25px; color: #89c65a"><i class="fal fa-signature my-auto fa-fw"></i></a>
.
<a href="#story" style="font-size: 25px; color: #89c65a"><i class="fal fa-book my-auto fa-fw"></i></a>
.
<a href="#design" style="font-size: 25px; color: #89c65a"><i class="fal fa-shirt my-auto fa-fw"></i></a>
.
<a href="#rships" style="font-size: 25px; color: #89c65a"><i class="fal fa-handshake my-auto fa-fw"></i></a>
.
<a href="#story" style="font-size: 25px; color: #89c65a"><i class="fal fa-comment-exclamation my-auto fa-fw"></i></a>
</p>
</div>
</div>
<!-- bottom half. or i guess 3/4ths lmao -->
<div class="row no-gutters">
<!-- left side -->
<div class="col-md-4 col-sm-12 px-0">
<!-- profile picture -->
<div class="col-12 py-5 mb-1" style="background-image: url(IMGURLHERE); min-height: 200px; max-height: 200px; background-size: cover;"></div>
<div class="col-12 bg-faded p-2">
<!-- nickname -->
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">NICKNAME:</p>
<p class="my-0">Nana</p>
</div>
<!-- age -->
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">AGE:</p>
<p class="my-0">#</p>
</div>
<!-- gender -->
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">GENDER:</p>
<p class="my-0">A gender</p>
</div>
<!-- pronouns -->
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">PRNS:</p>
<p class="my-0">Prn/Prns</p>
</div>
<!-- sexuality -->
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">SEXUALITY:</p>
<p class="my-0">Aroace</p>
</div>
<!-- species -->
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">SPECIES:</p>
<p class="my-0">thing</p>
</div>
<!-- birthday -->
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">BIRTHDAY:</p>
<p class="my-0">mm/dd/yy</p>
</div>
<!-- worth -->
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">WORTH:</p>
<p class="my-0">$0</p>
</div>
</div>
</div>
<!-- right side -->
<div class="col-md-8 col-sm-12 pl-md-1 px-sm-0 d-block d-md-flex flex-column">
<div class="d-block bg-faded p-2" style="flex: 1 1 200px; min-height: 200px; overflow-y: auto; scroll-behavior: smooth">
<!-- about -->
<div class="col-12 px-0 mb-2" style="font-size: 25px; font-family: times new roman" id="abt">
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">A</span>BOUT
<hr class="my-0" style="border-style: dashed">
</div>
<!-- write an intro to your oc -->
<div class="col-12 px-0 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>
<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>
<hr>
<!-- story -->
<div class="col-12 px-0 mb-3" style="font-size: 25px; font-family: times new roman" id="story">
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">S</span>TORY
<hr class="my-0" style="border-style: dashed">
</div>
<div class="col-12 px-0 text-justify">
<!-- paragraph 1: childhood -->
<h2 style="font-family: times new roman"><span style="color: #89c65a; font-weight: 800 ">i.</span> Childhood</h2>
<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>
<!-- paragraph 2: teenage years -->
<h2 style="font-family: times new roman"><span style="color: #89c65a; font-weight: 800">ii.</span> Adolescence</h2>
<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>
<!-- paragraph 3: adulthood/present?? idk -->
<h2 style="font-family: times new roman"><span style="color: #89c65a; font-weight: 800">iii.</span> Adulthood</h2>
<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>
<hr>
<!-- design notes -->
<div class="col-12 px-0 mb-2" style="font-size: 25px; font-family: times new roman" id="design">
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">D</span>ESIGN
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">N</span>OTES
<hr class="my-0" style="border-style: dashed">
</div>
<div class="col-12 px-0 text-justify">
<div class="row no-gutters">
<div class="col-md-6 col-sm-12 px-2">
<!-- design notes, write em here -->
<ul class="fa-ul mx-2">
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> words words words</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> more words more words more words</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> words words words</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> idk i dont feel like writing</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> so like</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> hows ur day been i guess</li>
</ul>
</div>
<!-- right side -->
<div class="col-md-6 col-sm-12 pr-md-1 pr-sm-0">
<!-- put your ocs ref sheet image here-->
<img src="IMGURLHERE">
<!-- palette row one -->
<div class="row no-gutters">
<div class="col p-2 tooltipster" style="background-color: #dfffaf" title="#dfffaf"></div>
<div class="col p-2 tooltipster" style="background-color: #c0ff61" title="#c0ff61"></div>
<div class="col p-2 tooltipster" style="background-color: #091022" title="#091022"></div>
<div class="col p-2 tooltipster" style="background-color: #00e1ff" title="#00e1ff"></div>
</div>
<!-- palette row two -->
<div class="row no-gutters">
<div class="col p-2 tooltipster" style="background-color: #ff6185" title="#ff6185"></div>
<div class="col p-2 tooltipster" style="background-color: #ff6361" title="#ff6361"></div>
<div class="col p-2 tooltipster" style="background-color: #ff8861" title="#ff8861"></div>
<div class="col p-2 tooltipster" style="background-color: #ffb961" title="#ffb961"></div>
<div class="col p-2 tooltipster" style="background-color: #ffe761" title="#ffe761"></div>
<div class="col p-2 tooltipster" style="background-color: #f4ff61" title="#f4ff61"></div>
<div class="col p-2 tooltipster" style="background-color: #c0ff61" title="#c0ff61"></div>
<div class="col p-2 tooltipster" style="background-color: #61ff65" title="#61ff65"></div>
<div class="col p-2 tooltipster" style="background-color: #61ffc4" title="#61ffc4"></div>
<div class="col p-2 tooltipster" style="background-color: #61f2ff" title="#61f2ff"></div>
<div class="col p-2 tooltipster" style="background-color: #61afff" title="#61afff"></div>
<div class="col p-2 tooltipster" style="background-color: #6461ff" title="#6461ff"></div>
</div>
</div>
</div>
</div>
<hr>
<!-- relationships -->
<div class="col-12 px-0 mb-3" style="font-size: 25px; font-family: times new roman" id="rships">
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">R</span>ELATIONSHIPS
<hr class="my-0" style="border-style: dashed">
</div>
<div class="col-12 px-0 text-justify">
<!-- person 1 -->
<div class="col-12 px-0">
<div class="row no-gutters">
<div class="col-md-4 col-sm-12 text-center text-truncate">
<!-- oc profile picture -->
<div style="background-image: url(IMGURLHERE); min-height: 140px; background-size: cover; backgrounf-repeat: no-repeat; background-position: center"></div>
<!-- link to oc profile -->
<a href="#" style="color: #89c65a; font-family: times new roman; font-size: 16px; font-weight: 800">OC NAME</a>
</div>
<div class="col-md-8 col-sm-12 pl-md-2 pl-sm-0">
<div class="justify-content-between" style="font-family: times new roman; font-size: 18px; color: #89c65a">
<!-- fas = full / fal = empty -->
<p class="m-0">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
</p>
<!-- write a word about their relationship -->
<p class="font-italic faded m-0">[relationship]</p>
</div>
<hr class="my-1 faded" style="border-color: #89c65a; border-style: dashed">
<p>write about relationship here. keep it short because i hate double scrollboxes since they look like shit on mobile. like yeah bro im trying to read stop making me accidentally scroll back to the beginning This is a scroll-in-a-scroll hatepost now</p>
</div>
</div>
</div>
<hr class="my-2" style="border-style: dashed">
<!-- person 2 -->
<div class="col-12 px-0">
<div class="row no-gutters">
<div class="col-md-4 col-sm-12 text-center text-truncate">
<!-- profile picture -->
<div style="background-image: url(IMGURLHERE); min-height: 140px; background-size: cover; backgrounf-repeat: no-repeat; background-position: center"></div>
<!-- link to oc + name -->
<a href="#" style="color: #89c65a; font-family: times new roman; font-size: 16px; font-weight: 800">OC NAME</a>
</div>
<div class="col-md-8 col-sm-12 pl-md-2 pl-sm-0">
<div class="justify-content-between" style="font-family: times new roman; font-size: 18px; color: #89c65a">
<!-- fas = full / fal = empty -->
<p class="m-0">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
</p>
<!-- relation word -->
<p class="font-italic faded m-0">[relationship]</p>
</div>
<hr class="my-1 faded" style="border-color: #89c65a; border-style: dashed">
<!-- write -->
<p>write about relationship here. 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>
</div>
<hr>
<!-- trivia -->
<div class="col-12 px-0 mb-2" style="font-size: 25px; font-family: times new roman" id="trivia">
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">T</span>RIVIA
<hr class="my-0" style="border-style: dashed">
</div>
<div class="col-12 px-0">
<!-- write some things about your ocs here, hooray -->
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> words words words</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> more words more words more words</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> words words words</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> i stole this from the design notes section</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded" style="color: #89c65a"></i></span> maybe if y have something important in this section put the style="color: #89c65a"</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> idk just an idea</li>
</ul>
</div>
<!-- end of scrollbox -->
</div>
</div>
</div>
<!-- dont remove or ur a loser -->
<div class="col-12 justify-content-end px-0">
<a href="/micro-wave" style="color: #89c65a" data-toggle="tooltip" title="code by micro-wave"><i class="fas fa-microwave"></i></a>
</div>
</div>