<!-------
CODE BY CLOWNIICAT ON TOYHOUSE
DO NOT STEAL/REMOVE CREDIT
IMPORTANT: have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it
This code uses Bootstrap colours so replace 'text-danger' to 'text-warning' or 'text-success' to recolor
-------->
<p class="d-block d-md-none faded text-secondary" style="text-align: center">
hey! this code is a little wonky on mobile! I suggest viewing it on a tablet or desktop!
</p>
<img class="d-none d-sm-block" style="position:absolute;z-index:10; left:430px;bottom:280px; width:125px" src="https://f2.toyhou.se/file/f2-toyhou-se/images/69488039_jo6mmbtpHZvKnBh.png">
<div class="mx-auto mr-5 my-4 p-3 bg-faded" style=";
border-top-right-radius: 25px;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
max-width: 600px">
<div class="row no-gutters">
<div class="col-sm-7 m-2">
<div class="row no-gutters">
<!---------------------------
BUTTONS
---------------------------->
<div class="nav nav-tabs card-header-tabs mb-1">
<a class="btn btn-danger p-2 px-sm-5 px-3 ml-sm-3 ml-3 mr-2 col-4 active" data-toggle="tab" href="#reg1" style="border-radius:25px">
<i class="fas fa-sparkles mr-sm-4"></i>
</a>
<a class="btn btn-danger p-2 px-4 mr-2 col-4" data-toggle="tab" href="#reg2" style="border-radius:25px">
<i class="fas fa-planet-ringed"></i>
</a>
<a class="btn btn-danger p-2 px-4 mr-1 col-4" data-toggle="tab" href="#reg3" style="border-radius:25px">
<i class="fas fa-cat-space"></i>
</a>
</div>
</div>
<div class="bg-light mt-3 p-4" style="border-radius:25px">
<div class="tab-content">
<!---------------------------
BASIC INFO
---------------------------->
<div class="tab-pane fade in active show" id="reg1">
<div class="row no-gutters" style="height:297px; overflow:auto">
<div class="col-sm-5 mr-4 bg-danger p-1" style="border-radius:5px;font-family: Lucida Console, monospace; font-weight: bold;">NAME</div>
<div class="col-sm-5 text-danger mt-2">content</div>
<div class="col-sm-5 mr-4 bg-danger p-1 mt-2" style="border-radius:5px;font-family: Lucida Console, monospace; font-weight: bold;">AGE</div>
<div class="col-sm-5 text-danger mt-3">content</div>
<div class="col-sm-5 mr-4 bg-danger p-1 mt-2" style="border-radius:5px;font-family: Lucida Console, monospace; font-weight: bold;">BIRTHDAY</div>
<div class="col-sm-5 text-danger mt-3">content</div>
<div class="col-sm-5 mr-4 bg-danger p-1 mt-2" style="border-radius:5px;font-family: Lucida Console, monospace; font-weight: bold;">SPECIES</div>
<div class="col-5 text-danger mt-3">content</div>
<div class="col-sm-5 mr-4 bg-danger p-1 mt-2" style="border-radius:5px;font-family: Lucida Console, monospace; font-weight: bold;">GENDER</div>
<div class="col-sm-5 text-danger mt-3">content</div>
<div class="col-sm-5 mr-4 bg-danger p-1 mt-2" style="border-radius:5px;font-family: Lucida Console, monospace; font-weight: bold;">SEXUALITY</div>
<div class="col-sm-5 text-danger mt-3">content</div>
<div class="col-sm-5 mr-4 bg-danger p-1 mt-2" style="border-radius:5px;font-family: Lucida Console, monospace; font-weight: bold;">PRONOUNS</div>
<div class="col-sm-5 text-danger mt-3">content</div>
</div>
</div>
<!---------------------------
STORY
you could edit to make it design
if you dont have a story for them
---------------------------->
<div class="tab-pane fade" id="reg2">
<div class="text-dark">
<i class="far fa-bookmark fa-xl mt-1 mr-1"></i>
STORY—————— — – -
</div>
<p class="text-dark mt-3" style="height:260px;overflow:auto">
THIS BOX SCROLLS! (like all others) 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>
<!---------------------------
RELATIONSHIPS
---------------------------->
<div class="tab-pane fade" id="reg3">
<div style="height:297px;overflow:auto">
<div class="mt-2">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" class="img-thumbnail bg-danger mr-2" style="border-radius:200px; width:125px; float:left; border-width: 0px">
<a class="btn btn-danger mt-2 ml-3"
href="INSERT_OC_LINK"
>RELATION</a>
<p class="text-dark mt-2 ml-3">DESCRIBE THEIR RELATION Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
</div>
<div class="mt-2">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" class="img-thumbnail bg-danger mr-2" style="border-radius:200px; width:125px; float:left; border-width: 0px">
<a class="btn btn-danger mt-2 ml-3"
href="INSERT_OC_LINK">
RELATION</a>
<p class="text-dark mt-2 ml-3">DESCRIBE THEIR RELATION Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!---------------------------
ICON
---------------------------->
<div class="col-3 m-2">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" style="max-width:160px;width:250px;border-top-right-radius:25px;border-top-left-radius:25px;" class="ml-2 ml-sm-4">
<div class="bg-danger ml-2 ml-sm-4 p-2" style="text-align: center; width:160px;border-bottom-right-radius:15px;border-bottom-left-radius:15px">quote or something</div>
<!---------------------------
LIKES & DISLIKES BOX
---------------------------->
<div class="mt-2 bg-dark p-3 ml-sm-4 ml-2" style="border-radius:25px; width: 160px; height:205px; overflow:auto">
<div class="row no-gutters">
<div class="col-8">
<div style=";font-family: Lucida Console, monospace; font-weight: bold;">LIKES</div>
<p>✦ content
<br>
✦ content
<br>
✦ content
</p>
</div>
<div style=";font-family: Lucida Console, monospace; font-weight: bold;" class="mt-1">DISLIKES</div>
<p>✦ content
<br>
✦ content
<br>
✦ content
</p>
<!---------------------------
you can add more stuff here!!! every box should scroll
---------------------------->
</div>
</div>
</div>
</div>
</div>
<a href="https://toyhou.se/clowniicat" class="text-secondary">
<i class="fas fa-code mt-2 ml-2 faded pull-right"></i>
</a>
