<!--
remake-ish of my first code, nothing else to say
accent color: #ad5570
-->
<div class="col-md-7 col-sm-12 mx-auto">
<div class="col-12 p-2 card rounded-0 mb-2" style="border-color: #ad5570">
<div class="tab-content">
<!-- first tab -->
<div class="tab-pane fade active show" id="one">
<div class="row no-gutters">
<!-- icon -->
<div class="col-md-4 card rounded-0 mb-2" style="background-image: url(IMGURLHERE); background-size: cover; background-repeat: no-repeat; border-color: #ad5570"></div>
<!-- basics -->
<div class="col d-block d-md-flex flex-column ml-md-2 mb-2">
<!-- full name -->
<div class="card rounded-0 p-2 text-center mb-2 font-weight-bold" style="font-size: 18px; color: #ad5570"> NAME SURNAMEEEE</div>
<!-- introduction, this scrolls so it can be as long as u want -->
<div class="card rounded-0 p-2 text-justify" style="flex: 1 1 140px; min-height: 100px; overflow-y: auto">
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>
</div>
</div>
<!-- basic stats -->
<div class="card rounded-0 p-2 text-justify col-12 text-center">
<p>
<!-- age -->
<span>
<b style="color: #ad5570">age:</b> #
</span>
<i class="fas fa-star fa-2xs faded"></i>
<!-- gender -->
<span>
<b style="color: #ad5570">gender:</b> gender
</span>
<i class="fas fa-star fa-2xs faded"></i>
<!-- pronouns -->
<span>
<b style="color: #ad5570">pronouns:</b> prns/prns
</span>
<i class="fas fa-star fa-2xs faded"></i>
<!-- species -->
<span>
<b style="color: #ad5570">species:</b> animal
</span>
</p>
</div>
</div>
<!-- second tab -->
<div class="tab-pane fade" id="two">
<!-- quote -->
<div class="card rounded-0 p-2 text-center mb-2" style="font-size: 18px; color: #ad5570">
<div class="row no-gutters">
<div class="col-auto align-items-center">
<i class="fas fa-quote-left"></i>
</div>
<!-- replace this part, can b as long as u want. quote icons center automatically -->
<div class="px-2 col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="col-auto align-items-center">
<i class="fas fa-quote-right"></i>
</div>
</div>
</div>
<!-- backstory and trivia -->
<div class="row no-gutters">
<!-- backstory -->
<div class="col-md col-sm-12 d-block d-md-flex flex-column mx-md-2 mb-2">
<!-- title -->
<div class="card rounded-0 p-2 text-center mb-2 font-weight-bold" style="font-size: 18px; color: #ad5570"> BACKSTORY</div>
<!-- can be as long as u want idc -->
<div class="card rounded-0 p-2 text-justify" style="flex: 1 1 140px; min-height: 100px; overflow-y: auto;">
<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>
</div>
<!-- trivia -->
<div class="col-md col-sm-12 d-block d-md-flex flex-column mx-md-2 mb-2">
<!-- check out my songs boy -->
<div class="card rounded-0 p-2 text-justify mb-2" style="flex: 1 1 140px; min-height: 100px; overflow-y: auto">
<ul class="px-3 m-0">
<li><b>list of songs i like atm:</b></li>
<li>forgotten moments by lenny dee</li>
<li>stop the music by cosmo sheldrake</li>
<li>miffy by sonic dragolgo</li>
<li>blasphemous rumours by depeche mode</li>
<li>frontier psychiatrist by the avalanches</li>
<li>miserlou by dick dale</li>
<li>911 / mr. lonely by tyler, the creator</li>
</ul>
</div>
<!-- title -->
<div class="card rounded-0 p-2 text-center font-weight-bold" style="font-size: 18px; color: #ad5570"> TRIVIA</div>
</div>
</div>
</div>
<!-- third tab -->
<div class="tab-pane fade" id="three">
<!-- find images, unsplash is a good place to go -->
<div class="row no-gutters">
<!-- copy image link + place where it says IMGURLHERE -->
<div class="col-md col-sm-12 card rounded-0 mx-1 mb-2" style="background-image: url(IMGURLHERE); background-size: cover; background-position: center; height: 130px; background-repeat: no-repeat"></div>
<!-- copy image link + place where it says IMGURLHERE -->
<div class="col-md col-sm-12 card rounded-0 mx-1 mb-2" style="background-image: url(IMGURLHERE); background-size: cover; background-position: center; height: 130px; background-repeat: no-repeat"></div>
<!-- copy image link + place where it says IMGURLHERE -->
<div class="col-md col-sm-12 card rounded-0 mx-1 mb-2" style="background-image: url(IMGURLHERE); background-size: cover; background-position: center; height: 130px; background-repeat: no-repeat"></div>
<!-- copy image link + place where it says IMGURLHERE -->
<div class="col-md col-sm-12 card rounded-0 mx-md-1 mx-sm-0 mb-2" style="background-image: url(IMGURLHERE); background-size: cover; background-position: center; height: 130px; background-repeat: no-repeat"></div>
</div>
<!-- in a youtube link theres a part after watch?v=. we need the part after that -->
<div class="card rounded-0 p-2 text-justify col-12 text-center mb-2">
<div class="row no-gutters">
<div class="col-auto pl-2">
<iframe class="flex-fill" style="height:1em;width:1em;opacity:.00001;position:absolute;margin-top:4px;z-index:1; margin-left: -1px" src="https://www.youtube.com/embed/YOUTUBEURLHERE" frameborder="0"></iframe>
<i class="fa-regular fa-play" style="color: #ad5570"></i>
</div>
<div class="col px-2 flex-column"><hr class="w-100 my-auto"></div>
<div class="col-auto flex-column pr-2">
<p><b style="color: #ad5570">song title</b>
by artist</p>
</div>
</div>
</div>
<!-- favorite things of the character -->
<div class="col-12 px-1">
<div class="card rounded-0 p-2 text-justify col-12 text-center">
<!-- food -->
<div class="row no-gutters">
<div class="col-auto pl-2 font-weight-bold" style="color: #ad5570">
favorite food
</div>
<div class="col px-2 flex-column"><hr class="w-100 my-auto"></div>
<div class="col-auto flex-column pr-2">
<p>food</p>
</div>
</div>
<!-- drink -->
<div class="row no-gutters">
<div class="col-auto pl-2 font-weight-bold" style="color: #ad5570">
favorite drink
</div>
<div class="col px-2 flex-column"><hr class="w-100 my-auto"></div>
<div class="col-auto flex-column pr-2">
<p>drink</p>
</div>
</div>
<!-- color -->
<div class="row no-gutters">
<div class="col-auto pl-2 font-weight-bold" style="color: #ad5570">
favorite color
</div>
<div class="col px-2 flex-column"><hr class="w-100 my-auto"></div>
<div class="col-auto flex-column pr-2">
<p>color</p>
</div>
</div>
<!-- number -->
<div class="row no-gutters">
<div class="col-auto pl-2 font-weight-bold" style="color: #ad5570">
favorite number
</div>
<div class="col px-2 flex-column"><hr class="w-100 my-auto"></div>
<div class="col-auto flex-column pr-2">
<p>#</p>
</div>
</div>
<!-- season -->
<div class="row no-gutters">
<div class="col-auto pl-2 font-weight-bold" style="color: #ad5570">
favorite season
</div>
<div class="col px-2 flex-column"><hr class="w-100 my-auto"></div>
<div class="col-auto flex-column pr-2">
<p>season</p>
</div>
</div>
<!-- place -->
<div class="row no-gutters">
<div class="col-auto pl-2 font-weight-bold" style="color: #ad5570">
favorite place
</div>
<div class="col px-2 flex-column"><hr class="w-100 my-auto"></div>
<div class="col-auto flex-column pr-2">
<p>place</p>
</div>
</div>
<!-- you can add more above this line -->
</div>
</div>
</div>
<!-- fourth tab -->
<div class="tab-pane fade" id="four">
<div class="row no-gutters">
<!-- icon of person -->
<div class="col-md-4 p-0 d-block d-md-flex flex-column">
<div class="card rounded-0 mb-2" style="background-image: url(IMGURLHERE); background-size: cover; background-repeat: no-repeat; flex: 1 1 140px; border-color: #ad5570"></div>
<!-- how much does your oc like the person / fas = full , fal = empty -->
<div class="mx-auto col-auto p-2 card rounded-0 mt-n4 mb-2 hidden-sm-down" style="border-color: #ad5570">
<p>
<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>
</div>
</div>
<!-- right -->
<div class="col ml-md-2 mb-2">
<div class="card rounded-0 p-2 mb-2 font-weight-bold" style="font-size: 18px; color: #ad5570">
<p>
<!-- put link to other ocs profile -->
<a href="#" style="color: #ad5570">NAME SURNAME</a>
<!-- explain relationship here -->
<span class="pull-right faded font-italic">friends</span>
</p>
</div>
<!-- write as much as u want about their relationship here -->
<div class="card rounded-0 p-2 text-justify mb-2" style="max-height: 170px; min-height: 100px; overflow-y: auto">
<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>
</div>
</div>
<!-- second relationship -->
<div class="row no-gutters flex-row-reverse">
<!-- profile picture -->
<div class="col-md-4 p-0 d-block d-md-flex flex-column">
<div class="card rounded-0 mb-2" style="background-image: url(IMGURLHERE); background-size: cover; background-repeat: no-repeat; flex: 1 1 140px; border-color: #ad5570"></div>
<!-- fas = full / fal = empty -->
<div class="mx-auto col-auto p-2 card rounded-0 mt-n4 mb-2 hidden-sm-down" style="border-color: #ad5570">
<p>
<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>
</div>
</div>
<!-- right -->
<div class="col mr-md-2 mb-2">
<div class="card rounded-0 p-2 mb-2 font-weight-bold" style="font-size: 18px; color: #ad5570">
<!-- link to ocs profile, replace the # -->
<p>
<a href="#" style="color: #ad5570">NAME SURNAME</a>
<!-- relationship status -->
<span class="pull-right faded font-italic">friends</span>
</p>
</div>
<!-- write about the relationship here -->
<div class="card rounded-0 p-2 text-justify" style="max-height: 170px; min-height: 100px; overflow-y: auto">
<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>
</div>
</div>
</div>
</div>
</div>
<!-- buttons -->
<div class="col-12 p-2 card rounded-0">
<ul class="nav nav-pills">
<li class="nav-item col">
<a href="#one" data-toggle="tab" class="active btn col" style="border-radius: 0px; border-color: #ad5570; color: #ad5570">1.</a>
</li>
<li class="nav-item col">
<a href="#two" data-toggle="tab" class="btn col" style="border-radius: 0px; border-color: #ad5570; color: #ad5570">2.</a>
</li>
<li class="nav-item col">
<a href="#three" data-toggle="tab" class="btn col" style="border-radius: 0px; border-color: #ad5570; color: #ad5570">3.</a>
</li>
<li class="nav-item col">
<a href="#four" data-toggle="tab" class="btn col" style="border-radius: 0px; border-color: #ad5570; color: #ad5570">4.</a>
</li>
</ul>
</div>
<a href="https://toyhou.se/micro-wave" style="color: #ad5570"><i class="fas fa-microwave"></i></a>
</div>