<!-----------------------------------------------------------------
LINED - Character Profile
Profile by HTMLobster (noll)
TOS:
Do not remove my credit. You may edit it, however.
You may edit code/frankenstein with others as long as their TOS allows!
Turn off WYSIWYG and turn on Code Editor.
Ask me if you want to redistribute edits. Must be F2U.
------------------------------------------------------------------>
<div class="container" style="max-width:600px;">
<div class="card card-outline-primary rounded-0">
<div class="row no-gutters">
<div class="col-sm-4 p-2">
<div class="card card-outline-secondary rounded-0 p-1">
<!-- Character image -->
<div style="height:200px; background:url(IMG_URL) center; background-size:cover;"></div>
</div>
<div class="card card-outline-secondary rounded-0 mt-2 p-2" style="font-size:.85em; border-left:none; border-right:none; border-bottom:none;">
<!-- Sidebar description -->
<div class="overflow-auto" style="height:79px;">
Short description text. Can scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div style="font-family:Monospace;">
<!-- navigation tabs -->
<ul class="nav justify-content-between">
<li class="nav-item" data-toggle="tooltip" title="About">
<a class="nav-link btn btn-outline-secondary rounded-0 py-1 px-2 active" data-toggle="tab" href="#about">I</a>
</li>
<li class="nav-item" data-toggle="tooltip" title="Personality">
<a class="nav-link btn btn-outline-secondary rounded-0 py-1 px-2" data-toggle="tab" href="#personality">II</a>
</li>
<li class="nav-item" data-toggle="tooltip" title="Relations">
<a class="nav-link btn btn-outline-secondary rounded-0 py-1 px-2" data-toggle="tab" href="#relations">III</a>
</li>
<li class="nav-item" data-toggle="tooltip" title="Aesthetic">
<a class="nav-link btn btn-outline-secondary rounded-0 py-1 px-2" data-toggle="tab" href="#moodboard">IV</a>
</li>
<li class="nav-item" data-toggle="tooltip" title="Trivia">
<a class="nav-link btn btn-outline-secondary rounded-0 py-1 px-2" data-toggle="tab" href="#trivia">V</a>
</li>
</ul>
</div>
</div>
<div class="col-auto hidden-xs-down py-2">
<div class="card card-outline-secondary h-100" style="border-left:none;"></div>
</div>
<div class="col-12 px-2 hidden-sm-up">
<div class="card card-outline-secondary" style="border-bottom:none; height:1px;"></div>
</div>
<!-- right column content -->
<div class="col-sm py-2 h-100">
<div class="py-2" style="border-top:none; border-right:none; border-bottom:none;">
<!-- character name -->
<h1 class="card card-outline-secondary text-right p-1 pr-3 ml-3 rounded-0" style="font-family:Monospace; border-right:none;">
Character Name
</h1>
<!-- tabs container -->
<div class="tab-content">
<!-- about -->
<div class="tab-pane fade active show" id="about">
<div class="px-2 mx-3 my-1 overflow-auto" style="border-left:none; border-right:none; border-bottom:none; height:244px;">
<p>Body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue dignissim nisi, tempus malesuada tellus porttitor nec. Phasellus dignissim blandit nisl in vehicula. In hac habitasse platea dictumst. Donec dolor enim, lobortis sit amet vehicula ut, finibus et ante. Nullam ullamcorper dolor a pulvinar suscipit. Curabitur laoreet et lacus sed pretium. Sed ut risus tempus, iaculis metus ac, auctor turpis. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla enim diam, quis dignissim ipsum suscipit nec. Vestibulum vel tortor elementum sem malesuada porttitor ac nec nibh. </p>
</div>
<h2 class="card card-outline-secondary p-1 pl-3 mr-3 mb-0 mt-2 rounded-0" style="font-family:Monospace; border-left:none;">
About
</h2>
</div>
<!-- personality -->
<div class="tab-pane fade" id="personality">
<div class="px-2 mx-3 my-1 overflow-auto" style="border-left:none; border-right:none; border-bottom:none; height:244px;">
<p>Body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue dignissim nisi, tempus malesuada tellus porttitor nec. Phasellus dignissim blandit nisl in vehicula. In hac habitasse platea dictumst. Donec dolor enim, lobortis sit amet vehicula ut, finibus et ante. Nullam ullamcorper dolor a pulvinar suscipit. Curabitur laoreet et lacus sed pretium. Sed ut risus tempus, iaculis metus ac, auctor turpis. </p>
<p>Nunc fringilla enim diam, quis dignissim ipsum suscipit nec. Vestibulum vel tortor elementum sem malesuada porttitor ac nec nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<h2 class="card card-outline-secondary p-1 pl-3 mr-3 mb-0 mt-2 rounded-0" style="font-family:Monospace; border-left:none;">
Personality
</h2>
</div>
<!-- relationships -->
<div class="tab-pane fade" id="relations">
<div class="px-2 mx-3 my-1 overflow-auto" style="border-left:none; border-right:none; border-bottom:none; height:244px;">
<p>
<span class="font-weight-bold" style="font-family:Monospace;">Name</span> Relationship text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue dignissim nisi, tempus malesuada tellus porttitor nec.
</p>
<p>
<span class="font-weight-bold" style="font-family:Monospace;">Name</span> Relationship text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue dignissim nisi, tempus malesuada tellus porttitor nec.
</p>
<p>
<span class="font-weight-bold" style="font-family:Monospace;">Name</span> Relationship text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue dignissim nisi, tempus malesuada tellus porttitor nec.
</p>
</div>
<h2 class="card card-outline-secondary p-1 pl-3 mr-3 mb-0 mt-2 rounded-0" style="font-family:Monospace; border-left:none;">
Relations
</h2>
</div>
<!-- moodboard/aesthetic -->
<div class="tab-pane fade" id="moodboard">
<div class="px-2 mx-3 my-1 overflow-auto" style="border-left:none; border-right:none; border-bottom:none; height:244px;">
<!-- row one - copy and paste THIS ROW SECTION to add more -->
<div class="row no-gutters">
<div class="col-sm mb-2" style="background:url(IMG_URL) center; background-size:cover; height:115px;">
</div>
<div class="col-sm mb-2 ml-sm-2" style="background:url(IMG_URL) center; background-size:cover; height:115px;">
</div>
<div class="col-sm mb-2 ml-sm-2" style="background:url(IMG_URL) center; background-size:cover; height:115px;">
</div>
</div>
<!-- paste new row below this line -->
<!-- row two -->
<div class="row no-gutters">
<div class="col-sm mb-2 mb-sm-0" style="background:url(IMG_URL) center; background-size:cover; height:115px;">
</div>
<div class="col-sm mb-2 mb-sm-0 ml-sm-2" style="background:url(IMG_URL) center; background-size:cover; height:115px;">
</div>
<div class="col-sm mb-2 mb-sm-0 ml-sm-2" style="background:url(IMG_URL) center; background-size:cover; height:115px;">
</div>
</div>
</div>
<h2 class="card card-outline-secondary p-1 pl-3 mr-3 mb-0 mt-2 rounded-0" style="font-family:Monospace; border-left:none;">
Aesthetic
</h2>
</div>
<!-- trivia -->
<div class="tab-pane fade" id="trivia">
<div class="px-2 mx-3 my-1 overflow-auto" style="border-left:none; border-right:none; border-bottom:none; height:244px;">
Fun facts
<ul>
<li>Fact one.</li>
<li>Fact two.</li>
<li>Fact three.</li>
</ul>
Other notes
<ul>
<li>Note one.</li>
<li>Note two.</li>
<li>Note three.</li>
</ul>
</div>
<h2 class="card card-outline-secondary p-1 pl-3 mr-3 mb-0 mt-2 rounded-0" style="font-family:Monospace; border-left:none;">
Trivia
</h2>
</div>
<!-- end tabs -->
</div>
<!-- end tab container -->
</div>
</div>
</div>
</div>
<div class="float-right mt-1">
<a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="html by noll"><i class="fal fa-code"></i></a>
</div>
</div>