Fair & Square
created by:SparklyCodes
HTMLBootstrapCharacter
Copy
<!--
F2U - CHARACTER CODE: FAIR & SQUARE
by SparklyCodes @ Toyhou.se
Make sure to read all the rules and instructions!
-- TOS --
1. Turn WYSIWYG off when coding. Even after you're done.
1.5 I'm serious on this one. IF THE CODE BREAKS/ICONS DISAPPEAR THIS IS LIKELY THE CULPRIT!
3. Use on TH only.
4. Do not redistribute.
5. Do not remove credit.
6. Frankensteining is okay, as long as the other creator allows it. Credit both creators.
7. Free to use as reference, credit in this case isn't required but appreciated!
-->
<div class="p-0 row no-gutters col-md-9 mx-auto">
<!-- LEFT -->
<div class="col-lg-5">
<div class="m-1 card border-0 rounded-0" style="height: 320px;">
<div class="h-100 w-100" style="background: url('//via.placeholder.com/700') top center; background-size: cover;"></div>
</div>
</div>
<!-- RIGHT -->
<div class="col-lg-7">
<!-- NAME/TITLE -->
<div class="m-1 card rounded-0" style="border-width: 2px;">
<div class="p-1 card-header border-0">
<!-- GO TO fontawesome.com TO CHANGE THE ICONS (star) -->
<h1 class="m-0 font-weight-light text-center"><i class="fal fa-star"></i> NAME <i class="fal fa-star"></i></h1>
</div>
</div>
<!-- CONTENT -->
<div class="m-1 p-2 card rounded-0" style="height: 279px; overflow: auto; border-width: 2px;">
<div class="row no-gutters text-right">
<p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">NAME</span> Information</p>
<p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">AGE</span> Information (bday)</p>
<hr class="m-0 p-0 col-12">
<p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">GENDER</span> Information</p>
<p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">RACE</span> Information</p>
<hr class="m-0 p-0 col-12">
<p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">ORIENTATION</span> Information</p>
<p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">STATUS</span> Information</p>
<hr class="m-0 p-0 col-12">
<p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">MBTI</span> Information</p>
<p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">HEIGHT</span> Information</p>
<hr class="m-0 p-0 col-12">
<p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">OCCUPATION</span> Information</p>
<p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">RELATIONSHIP</span> Information</p>
<hr class="m-0 p-0 col-12">
<p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">WEAPON</span> Information</p>
<p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">ELEMENT</span> Information</p>
<h1 class="col-12 m-0 mt-2 p-1 text-center font-italic">"Quote..."</h1>
<h3 class="col-12 m-0 p-1 text-center font-weight-light">
<a href="SONGLINK">
<i class="fal fa-music-alt"></i> Songname <i class="fal fa-music-alt"></i>
</a>
</h3>
</div>
</div>
</div>
<!-- COLORS - could be their palette or colors that match their theme / KEEP IT AT 6! -->
<div class="col-2"><div class="m-1 card rounded-0 border-0" style="height: 20px; background: #848484;"></div></div>
<div class="col-2"><div class="m-1 card rounded-0 border-0" style="height: 20px; background: #848484;"></div></div>
<div class="col-2"><div class="m-1 card rounded-0 border-0" style="height: 20px; background: #848484;"></div></div>
<div class="col-2"><div class="m-1 card rounded-0 border-0" style="height: 20px; background: #B1B1B1;"></div></div>
<div class="col-2"><div class="m-1 card rounded-0 border-0" style="height: 20px; background: #B1B1B1;"></div></div>
<div class="col-2"><div class="m-1 card rounded-0 border-0" style="height: 20px; background: #B1B1B1;"></div></div>
<!-- BOTTOM -->
<div class="col-lg-12">
<div class="m-1 card rounded-0" style="border-width: 2px;">
<!-- NAV -->
<div class="px-2 pb-0 pt-2 card-header border-0">
<ul class="nav nav-tabs text-center row no-gutters">
<li class="nav-item col-4"><a class="p-1 px-3 nav-link active" style="border-radius: 0px;" data-toggle="tab" href="#ONE"><i class="fas fa-book fa-lg"></i></a></li>
<li class="nav-item col-4"><a class="p-1 px-3 nav-link" style="border-radius: 0px;" data-toggle="tab" href="#TWO"><i class="fas fa-hand-paper fa-lg"></i></a></li>
<li class="nav-item col-4"><a class="p-1 px-3 nav-link" style="border-radius: 0px;" data-toggle="tab" href="#THREE"><i class="fas fa-link fa-lg"></i></a></li>
</ul>
</div>
<!-- CONTENT -->
<div class="p-1 tab-content" style="height: 450px; overflow: auto">
<!-- STORY -->
<div class="p-1 tab-pane text-justify show active" style="text-indent: 15px;" id="ONE">
<!-- SUMMARY -->
<div>
<h1 class="m-0 display-4 text-primary" style="border-bottom: 2px solid;text-indent: 0px;">Summary</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat rhoncus quam, at tincidunt purus pretium ut. Vestibulum sapien leo, lacinia ultrices ante nec, ultricies vulputate ligula. Donec molestie nisi vitae semper rutrum. In lacinia id turpis quis dapibus. Nam euismod lobortis tellus, at rutrum dui porttitor sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales risus orci, sit amet aliquet sapien accumsan ac. In sem diam, tristique eu velit sed, luctus interdum turpis. Aliquam convallis iaculis augue, a dapibus ipsum porta vitae. Morbi sit amet massa eget purus aliquet pellentesque ut eget ligula. </p>
</div>
<hr class="m-0 border-0">
<!-- STORY -->
<div>
<h1 class="m-0 display-4 text-primary" style="border-bottom: 2px solid;text-indent: 0px;">Story</h1>
<!-- IMAGE -->
<div class="m-2 float-sm-right justify-content-center">
<img src="//via.placeholder.com/700" style="max-height: 350px; max-width: 350px;"></div>
<h1 class="m-0 text-secondary" style="text-indent: 0px;">Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat rhoncus quam, at tincidunt purus pretium ut. Vestibulum sapien leo, lacinia ultrices ante nec, ultricies vulputate ligula. Donec molestie nisi vitae semper rutrum. In lacinia id turpis quis dapibus. Nam euismod lobortis tellus, at rutrum dui porttitor sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales risus orci, sit amet aliquet sapien accumsan ac. In sem diam, tristique eu velit sed, luctus interdum turpis. </p>
<h1 class="m-0 text-secondary" style="text-indent: 0px;">Header</h1>
<p> Aliquam convallis iaculis augue, a dapibus ipsum porta vitae. Morbi sit amet massa eget purus aliquet pellentesque ut eget ligula. Curabitur quis elit fermentum, facilisis erat eu, mattis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae purus et odio efficitur finibus sed sit amet metus. Phasellus est dolor, sagittis eget elit a, rhoncus ornare arcu. Praesent sed arcu metus.</p>
<h1 class="m-0 text-secondary" style="text-indent: 0px;">Header</h1>
<p>Morbi elementum mauris leo, quis fringilla eros rhoncus id. Nullam eget massa aliquam, porttitor quam eget, rutrum felis. Donec nec neque blandit, volutpat ligula sed, tempus massa. Praesent libero purus, lacinia non tellus nec, tincidunt ornare urna. Sed tempor est quis lectus commodo pretium.</p>
</div>
</div>
<!-- ABOUT -->
<div class="p-1 tab-pane text-justify" id="TWO">
<!-- PERSONALITY -->
<div style="text-indent: 15px;">
<h1 class="m-0 display-4 text-primary" style="border-bottom: 2px solid;text-indent: 0px;">Personality</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat rhoncus quam, at tincidunt purus pretium ut. Vestibulum sapien leo, lacinia ultrices ante nec, ultricies vulputate ligula. Donec molestie nisi vitae semper rutrum. In lacinia id turpis quis dapibus. Nam euismod lobortis tellus, at rutrum dui porttitor sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales risus orci, sit amet aliquet sapien accumsan ac. In sem diam, tristique eu velit sed, luctus interdum turpis. Aliquam convallis iaculis augue, a dapibus ipsum porta vitae. Morbi sit amet massa eget purus aliquet pellentesque ut eget ligula.</p>
</div>
<!-- MOODBOARD -->
<div class="row no-gutters justify-content-center">
<div class="col-auto">
<div class="m-1" style="background: url('//via.placeholder.com/200') center; background-size: cover; height: 120px; width: 120px;"></div></div>
<div class="col-auto">
<div class="m-1" style="background: url('//via.placeholder.com/200') center; background-size: cover; height: 120px; width: 120px;"></div></div>
<div class="col-auto">
<div class="m-1" style="background: url('//via.placeholder.com/200') center; background-size: cover; height: 120px; width: 120px;"></div></div>
<div class="col-auto">
<div class="m-1" style="background: url('//via.placeholder.com/200') center; background-size: cover; height: 120px; width: 120px;"></div></div>
</div>
<!-- TRIVIA -->
<div>
<h1 class="m-0 display-4 text-primary" style="border-bottom: 2px solid;text-indent: 0px;">Trivia</h1>
<ul class="m-1 pl-4">
<li>In lobortis ipsum et eros volutpat ornare.</li>
<li>Quisque molestie ipsum nec odio ornare feugiat.</li>
<li>Sed elementum orci id sem dapibus posuere.</li>
<li>Nam fermentum urna nec diam laoreet maximus.</li>
</ul>
</div>
</div>
<!-- LINKS -->
<div class="p-1 tab-pane text-justify" style="text-indent: 15px;" id="THREE">
<div class="row no-gutters justify-content-center">
<!-- PERSON -->
<div class="p-1 col-4">
<div class="m-1" style="background: url('//via.placeholder.com/400') center; background-size: cover; height: 200px; width: 100%;"></div>
<h1 class="m-0 font-weight-light text-center"><a href="LINK">NAME</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit ex a vehicula dictum. Curabitur efficitur vehicula massa, sed placerat nisl rhoncus nec. Praesent ultricies iaculis dolor vitae convallis. Nullam ornare sapien eget est vestibulum convallis et pulvinar arcu.</p>
</div>
<!-- PERSON -->
<div class="p-1 col-4">
<div class="m-1" style="background: url('//via.placeholder.com/400') center; background-size: cover; height: 200px; width: 100%;"></div>
<h1 class="m-0 font-weight-light text-center"><a href="LINK">NAME</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit ex a vehicula dictum. Curabitur efficitur vehicula massa, sed placerat nisl rhoncus nec. Praesent ultricies iaculis dolor vitae convallis. Nullam ornare sapien eget est vestibulum convallis et pulvinar arcu.</p>
</div>
<!-- PERSON -->
<div class="p-1 col-4">
<div class="m-1" style="background: url('//via.placeholder.com/400') center; background-size: cover; height: 200px; width: 100%;"></div>
<h1 class="m-0 font-weight-light text-center"><a href="LINK">NAME</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit ex a vehicula dictum. Curabitur efficitur vehicula massa, sed placerat nisl rhoncus nec. Praesent ultricies iaculis dolor vitae convallis. Nullam ornare sapien eget est vestibulum convallis et pulvinar arcu.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ----------------------- CREDIT -->
<div class="p-0 col-12">
<div class="text-center">
<a data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes"><i class="far fa-code"></i></a>
</div>
</div>
</div>