<!--------------------
OLD TIMES by Bretzel_Bin_
https://toyhou.se/14587457.char-code-old-times
--
keep all image urls in paranthesis
--------------------->
<div class="container" style="max-width: 800px; font-size: 12px">
<!--------------------
HEADER
--------------------->
<!--------------------
IMAGE
--------------------->
<div class="card col bg-faded p-1 mb-3 p-3" style="background-image: url(IMAGE ADDRESS HERE); background-attachment: fixed">
<div class="card p-3 mx-auto m-3 text-center">
<!--------------------
NAME
--
delete the fancy divider things if they aren't working sorry
--------------------->
<h1 class="text-primary display-4">
═══─────── NAME ──────═══
</h1>
</div>
</div>
<!--body-->
<div class="card bg-faded p-3">
<!--------------------
FIRST ROW
--------------------->
<div class="row no-gutters">
<!--------------------
IMAGE
--------------------->
<div class="card col-lg-4 mr-lg-3 mb-3 mb-lg-0" style="height: 240px">
<div class="card my-auto mx-auto border-0" style="background: url(IMAGE ADDRESS HERE)) center; background-size: cover; height: 200px; width: 200px"></div>
</div>
<div class="col-lg">
<div class="card mb-3 p-3" style="min-height: 60px; overflow: hidden">
<!--------------------
QUOTE
--------------------->
<p class="text-center text-primary my-auto">"Quote"</p>
</div>
<!--the other boxidk-->
<div class="card p-3" style="height: 163px">
<!--------------------
ADJECTIVES
--------------------->
<p class="text-center text-muted">adjective . adjective</p>
<div><hr class=""></div>
<div class="" style="height: 163px; overflow: auto">
<!--------------------
SUMMARY THING
--------------------->
<p class="text-center">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>
</div>
</div>
</div>
</div>
<!--------------------
NAVBAR
--------------------->
<div class="card col p-3 mt-3 ">
<ul class="nav nav-pills nav-justified flex-lg-row flex-column" id="pills-tab" role="tablist">
<li class="nav-item mr-2">
<a class="nav-link active" data-toggle="pill" href="#basics" role="tab">basics</a>
</li>
<li class="nav-item mr-2">
<a class="nav-link" data-toggle="pill" href="#story" role="tab">story</a>
</li>
<li class="nav-item mr-2">
<a class="nav-link" data-toggle="pill" href="#relationships" role="tab">relationships</a>
</li>
</ul>
<p class="mx-auto hidden-sm-down mt-3">═══━━━──────── • ────────━━━═══</p>
</div>
<!--------------------
BASICS TAB
--------------------->
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active mt-3" id="basics" role="tabpanel">
<div class="row no-gutters">
<div class="col-lg-5">
<!--------------------
INFO BOX
--------------------->
<div class="card p-3 mr-lg-3 mb-lg-0 mb-3">
<p>
<span class="text-primary">AGE</span>
<span class="text-muted pull-right">content</span>
</p>
<div><hr class="mt-0"></div>
<p>
<span class="text-primary"> GENDER</span>
<span class="text-muted pull-right">content</span>
</p>
<div><hr class="mt-0"></div>
<p>
<span class="text-primary"> PRONOUNS</span>
<span class="text-muted pull-right">content</span>
</p>
<div><hr class="mt-0"></div>
<p>
<span class="text-primary"> ORIENTATION</span>
<span class="text-muted pull-right">content</span>
</p>
<div><hr class="mt-0"></div>
<p>
<span class="text-primary"> ALIGNMENT</span>
<span class="text-muted pull-right">content</span>
</p>
<div><hr class="mt-0"></div>
<p>
<span class="text-primary"> THEME</span>
<span class="text-muted pull-right">
<a href="#" class="text-muted">artist - song</a>
</span>
</p>
</div>
</div>
<div class="col">
<div class="card p-3 mb-3 text-center" style="height: 247px;">
<div class="text-primary p-2" style="font-size: 15px">
<p>PERSONALITY</p>
</div>
<div><hr class="my-1"></div>
<!--------------------
PERSONALITY
--------------------->
<div class="p-1" style="overflow:auto">
<p>
put some personality here idk,,
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate odio dignissim, egestas massa quis, scelerisque risus. Quisque ullamcorper dui a congue dapibus. Quisque nunc neque, blandit non magna nec, vehicula pharetra lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate odio dignissim, egestas massa quis, scelerisque risus.
</p>
<!--add more above this line-->
</div>
</div>
<div class="card mx-auto p-2 mr-2 text-center col-lg" style=" min-height: 43px">
═══━━━──────── • ────────━━━═══
</div>
</div>
</div>
</div>
<!--------------------
STORY TAB
--------------------->
<div class="tab-pane fade" id="story" role="tabpanel">
<!--start copying here-->
<div class="row no-gutters mt-3">
<div class="card col-lg-3 mr-lg-2 p-3 text-primary text-center mb-lg-0 mb-2" style="font-size: 15px">
<p class="my-auto">HEADER 1<br>═══─── • ───═══</p>
</div>
<div class="card col p-3" style="max-height: 125px; overflow: 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>
</div>
</div>
<!--stop copying here-->
<div class="row no-gutters mt-3">
<div class="card col-lg-3 mr-lg-2 p-3 text-primary text-center mb-lg-0 mb-2" style="font-size: 15px">
<p class="my-auto">HEADER 2<br>═══─── • ───═══</p>
</div>
<div class="card col p-3" style="max-height: 125px; overflow: 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>
<!---->
<!--add above this line-->
</div>
<!--------------------
RELATIONSHIPS TAB
--------------------->
<div class="tab-pane fade" id="relationships" role="tabpanel">
<!--start copying here-->
<div class="card col-lg p-3 mt-3">
<div class="row no-gutters">
<!--------------------
IMAGE
--------------------->
<div class="card mx-lg-0 mx-auto" style="height: 150px; width: 175px;
background: url(IMAGE ADDRESS HERE)) center; background-size: cover">
</div>
<div class="col-lg ml-lg-4 ml-0 mt-lg-0 mt-3">
<div class="mt-lg-3">
<!--------------------
NAME/HEARTS
--------------------->
<p>
<span class="text-primary" style="font-size: 15px">
<a href="#">NAME</a>
</span>
<span class="text-muted"> . relationship</span>
<span class="pull-right mt-1">
<!-- far: outline heart, fas: filled heart -->
<i class="fas fa-heart mx-1 fa-lg"/>
<i class="fas fa-heart mx-1 fa-lg"/>
<i class="fas fa-heart mx-1 fa-lg"/>
<i class="fas fa-heart mx-1 fa-lg"/>
<i class="far fa-heart mx-1 fa-lg"/>
</span>
</p>
<div><hr class="mx-3"></div>
<!--------------------
TEXT
--------------------->
<div style="overflow: auto; max-height: 77px">
<p class="text-center">So yeah I didn't have any other ideas for like smaller relationship boxes or anything so this is just meant for big lenthy story things,,, sorry</p>
<!--add more above this line-->
</div>
</div>
</div>
</div>
</div>
<!--stop copying here-->
<!--start copying here-->
<div class="card col-lg p-3 mt-3">
<div class="row no-gutters">
<!--------------------
IMAGE
--------------------->
<div class="card mx-lg-0 mx-auto" style="height: 150px; width: 175px;
background: url(IMAGE ADDRESS HERE)) center; background-size: cover">
</div>
<div class="col-lg ml-lg-4 ml-0 mt-lg-0 mt-3">
<div class="mt-lg-3">
<!--------------------
NAME/HEARTS
--------------------->
<p>
<span class="text-primary" style="font-size: 15px">
<a href="#">NAME</a>
</span>
<span class="text-muted"> . relationship</span>
<span class="pull-right mt-1">
<!-- far: outline heart, fas: filled heart -->
<i class="fas fa-heart mx-1 fa-lg"/>
<i class="fas fa-heart mx-1 fa-lg"/>
<i class="fas fa-heart mx-1 fa-lg"/>
<i class="fas fa-heart mx-1 fa-lg"/>
<i class="far fa-heart mx-1 fa-lg"/>
</span>
</p>
<div><hr class="mx-3"></div>
<!--------------------
TEXT
--------------------->
<div style="overflow: auto; max-height: 77px">
<p class="text-center">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>
<!--add more above this line-->
</div>
</div>
</div>
</div>
</div>
<!--stop copying here-->
<!--add above this line-->
</div>
</div>
</div>
<!--------------------
CREDIT
--------------------->
<p class="pull-right mt-2">
<a href="#"><i class="fas fa-image fa-lg tooltipster" title="image from ___"/></a> .
<a href="https://toyhou.se/14587457.char-code-old-times"><i class="fas fa-code fa-lg tooltipster" title="code by Bretzel_Bin_"/></a>
</p>
</div>