Gentle // F2U CODE (CODE)

<div class="mx-auto text-justify" style="max-width:700px; margin-top:40px">

<!-- BG image -->

<div style=" background: url(URLHERE);

border-radius:10px;

background-size:cover;

background-repeat: no-repeat;

background-position: center;">

<div class="pt-3">

<div class="hidden-md-up">

<div class="pt-3"></div>

</div>

<div class="hidden-sm-down">

<div class="display-4 text-white justify-content-between p-4 pt-3 order-lg-1" style="letter-spacing:3px">

<!-- Name and tabs -->

<span><i class="fas fa-leaf-maple"></i></span>

<span>NAME</span>

<span><i class="fas fa-leaf-maple"></i></span>

</div>

</div>

<div class="mx-auto" style="max-width:700px">

<div class="row no-gutters">

<div class="col-lg-12 p-2 order-lg-2">

<div class="card p-3 h-100 bg-faded">

<ul class="nav row no-gutters p-2">

<li class="nav-item col-lg-3 px-lg-1">

<a href="#trivia" class="w-100 btn btn-outline-primary text-uppercase active" data-toggle="tab">

misc

</a>

</li>

<li class="nav-item col-lg-3 px-lg-1">

<a href="#info" class="w-100 btn btn-outline-primary text-uppercase" data-toggle="tab">

lore

</a>

</li>

<li class="nav-item col-lg-3 px-lg-1">

<a href="#design" class="w-100 btn btn-outline-primary text-uppercase" data-toggle="tab">

design

</a>

</li>

<li class="nav-item col-lg-3 px-lg-1">

<a href="#other" class="w-100 btn btn-outline-primary text-uppercase" data-toggle="tab">

other

</a>

</li>

</ul>

<div class="mx-auto" style="max-width:700px">

<div class="row no-gutters">

<div class="col-lg-12 p-2 order-lg-2">

<div class="card p-3 tab-content table-responsive h-100 bg-faded">

<div class="tab-pane fade active show" id="trivia">

<!--general info-->

<div class="text-muted">

<p>Some general information about the character! Add as much as you want.</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<hr class="w-100">

<!--Aesthetic images/featured art/other (square images look best)-->

<div class="row no-gutters text-center mx-n2">

<div class="col-sm-4 p-2">

<img src="IMAGEURL" class="rounded" style="max-height:200px;">

</div>

<div class="col-sm-4 p-2">

<img src="IMAGEURL" class="rounded" style="max-height:200px;">

</div>

<div class="col-sm-4 p-2">

<img src="IMAGEURL" class="rounded" style="max-height:200px;">

</div>

</div>

</div>

<div class="tab-pane fade" id="info">

<div class="text-muted">

<!--Lore/history/other start-->

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<!--pagedoll url here-->

<img src="IMAGEURL"

class="my-1 mx-2 float-left"

style="max-width:50%; z-index:1000">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<!--you can add as much more writing or pagedolls as you desire!-->

<!--Lore/history/other end-->

</div>

</div>

<div class="tab-pane fade" id="design">

<span>

<div class="justify-content-between text-primary">

<h1 style="font-size:20px; letter-spacing:2px">

DESIGN NOTES

</h1>

</div><hr class="my-1 w-100">

<!--Focal image-->

<img src="IMAGEURL"

class="my-1 mx-2 float-right"

style="max-width:50%; z-index:1000">

<ul class="p-4 text-muted" style="font-size:16px">

<li>Design notes go here</li>

<li>add as many as you see fit!!</li>

<li>the longer they are, the better they look</li>

<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>

<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>

</ul>

</span>

</div>

<div class="tab-pane fade" id="other">

<div class="text-muted">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</div>

</div>

</div>

</div>

<div class="mx-auto" style="max-width:700px">

<div class="row no-gutters">

<div class="col-lg-12 p-2 order-lg-2">

<div class="card p-3 h-100 bg-faded">

<a href="https://toyhou.se/ZestyCheetah" class="d-block mx-1" target="_BLANK">

<span data-toggle="tooltip" title="Code by ZestyCheetah" data-placement="center"><i class="fas fa-code fa-fw"/></a></span>

</div>

</div>

</div>

</div>