<!--
minimum - f2u code by pastelsparkyl
- feel free to edit / frankenstein to your liking!
- do not remove my credit, redistribute, or claim as your own!
- turn of WYSIWYG
accent color is #aaa; use cmd F to change!
-->
<div class="container mx-auto p-0" style="max-width:650px; font-size: 14px; letter-spacing:0.5px;">
<div class="row no-gutters" style="border-radius:10px; overflow:hidden">
<!-- LEFT COLUMN -->
<div class="col-lg-5">
<!-- LEFT IMAGE -->
<div class="container card rounded-0 border-0 p-2" style="
background-image:url(https://via.placeholder.com/768);
background-size:cover; background-position:center;
height:400px">
<!-- art credit -->
<a href="artist link" style="color:#aaa" class="tooltipster" title="art by artist">
<i class="fas fa-image-user" style="font-size:1.25em"></i>
</a>
</div>
</div>
<!-- RIGHT COLUMN -->
<div class="col-lg-7">
<!-- NAME HEADER -->
<div class="container card-block p-2 text-white" style="background-color:#aaa; font-size:1.75em; letter-spacing:0.05em; height:50px">
<!-- name here -->
<span>name</span>
<span class="pull-right">
<!-- change the icon here -->
<i class="far fa-heart"></i>
</span>
</div>
<!-- MAIN CONTAINER -->
<div class="container bg-faded p-2" style="overflow:auto; height:350px;">
<!-- badge row -->
<div class="text-center my-2">
<!-- badges -->
<span class="badge badge-pill font-weight-normal mx-1" style="background-color:#aaa; line-height:inherit; font-size:0.8em">adjective</span>
<span class="badge badge-pill font-weight-normal mx-1" style="background-color:#aaa; line-height:inherit; font-size:0.8em">adjective</span>
<span class="badge badge-pill font-weight-normal mx-1" style="background-color:#aaa; line-height:inherit; font-size:0.8em">adjective</span>
</div>
<!-- info rows -->
<div class="row no-gutters my-2">
<div class="col-12">
<span class="text-muted">name</span>
<span class="pull-right">content</span>
</div>
<div class="col-12 ">
<span class="text-muted">age</span>
<span class="pull-right">content</span>
</div>
<div class="col-12 ">
<span class="text-muted">gender</span>
<span class="pull-right">content</span>
</div>
<div class="col-12 ">
<span class="text-muted">species</span>
<span class="pull-right">content</span>
</div>
<!-- add / delete more above this line -->
</div>
<!-- description -->
<div class="my-4 text-muted">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!-- moodboard -->
<div class="row no-gutters mt-3 mb-2" style="border-radius:10px; overflow:hidden; height:125px">
<div class="col-sm-3 col-6">
<div class="card border-0 rounded-0 h-100" style="
background-image:url(https://via.placeholder.com/768);
background-size:cover; background-position:center;"></div>
</div>
<div class="col-sm-3 col-6">
<div class="card border-0 rounded-0 h-100" style="
background-image:url(https://via.placeholder.com/768);
background-size:cover; background-position:center;"></div>
</div>
<div class="col-sm-3 col-6">
<div class="card border-0 rounded-0 h-100" style="
background-image:url(https://via.placeholder.com/768);
background-size:cover; background-position:center;"></div>
</div>
<div class="col-sm-3 col-6">
<div class="card border-0 rounded-0 h-100" style="
background-image:url(https://via.placeholder.com/768);
background-size:cover; background-position:center;"></div>
</div>
</div>
<!-- video
replace the part after /embed/ with the video ID
-->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" class="border-0 w-100 " style="border-radius:10px"></iframe>
</div>
</div>
</div>
<div class="text-right" style="font-size:12px">
<!-- my credit, don't touch -->
<a href="https://toyhou.se/11991592.-f2u-minimum">
<i class="far fa-code text-muted"></i>
</a>
</div>
</div>