<div class="card border-0 container-fluid p-0 rounded-0" style="z-index:100;margin-top:-30px;margin-bottom:-110px;">
<!--ROW 1-->
<div class="row m-1">
<!--ROW 1 CHARACTER 1-->
<div class="col-lg-3 mb-1">
<div class="card bg-faded pb-2">
<!--DECORATIONAL IMAGE-->
<div class="container-fluid rounded-top" style="height:150px;background-image:url(IMG URL);"></div>
<!--CHARACTER ICON-->
<a href="CHARACTER URL">
<img src="IMG URL" class="rounded-circle d-block bg-faded" style="max-height:270px;padding:10px;margin:-90px auto 10px auto;" alt="Broken.png" />
</a>
<!--CHARACTER NAME-->
<div class="row justify-content-center">
<a href="CHARACTER URL">
<h1 class="mb-2">NAME</h1>
</a>
</div>
<!--CHARACTER DESCRIPTION-->
<p class="mx-auto">Description of character here</p>
</div>
</div>
<!--ROW 1 CHARACTER 1 END-->
<!--ROW 1 CHARACTER 2-->
<div class="col-lg-3 mb-1">
<div class="card bg-faded pb-2">
<!--DECORATIONAL IMAGE-->
<div class="container-fluid rounded-top" style="height:150px;background-image:url(IMG URL);"></div>
<!--CHARACTER ICON-->
<a href="CHARACTER URL">
<img src="IMG URL" class="rounded-circle d-block bg-faded" style="max-height:270px;padding:10px;margin:-90px auto 10px auto;" alt="Broken.png" />
</a>
<!--CHARACTER NAME-->
<div class="row justify-content-center">
<a href="CHARACTER URL">
<h1 class="mb-2">NAME</h1>
</a>
</div>
<!--CHARACTER DESCRIPTION-->
<p class="mx-auto">Description of character here</p>
</div>
</div>
<!--ROW 1 CHARACTER 2 END-->
<!--ROW 1 CHARACTER 3-->
<div class="col-lg-3 mb-1">
<div class="card bg-faded pb-2">
<!--DECORATIONAL IMAGE-->
<div class="container-fluid rounded-top" style="height:150px;background-image:url(IMG URL);"></div>
<!--CHARACTER ICON-->
<a href="CHARACTER URL">
<img src="IMG URL" class="rounded-circle d-block bg-faded" style="max-height:270px;padding:10px;margin:-90px auto 10px auto;" alt="Broken.png" />
</a>
<!--CHARACTER NAME-->
<div class="row justify-content-center">
<a href="CHARACTER URL">
<h1 class="mb-2">NAME</h1>
</a>
</div>
<!--CHARACTER DESCRIPTION-->
<p class="mx-auto">Description of character here</p>
</div>
</div>
<!--ROW 1 CHARACTER 3 END-->
<!--ROW 1 CHARACTER 4-->
<div class="col-lg-3 mb-1">
<div class="card bg-faded pb-2">
<!--DECORATIONAL IMAGE-->
<div class="container-fluid rounded-top" style="height:150px;background-image:url(IMG URL);"></div>
<!--CHARACTER ICON-->
<a href="CHARACTER URL">
<img src="IMG URL" class="rounded-circle d-block bg-faded" style="max-height:270px;padding:10px;margin:-90px auto 10px auto;" alt="Broken.png" />
</a>
<!--CHARACTER NAME-->
<div class="row justify-content-center">
<a href="CHARACTER URL">
<h1 class="mb-2">NAME</h1>
</a>
</div>
<!--CHARACTER DESCRIPTION-->
<p class="mx-auto">Description of character here</p>
</div>
</div>
<!--ROW 1 CHARACTER 4 END-->
</div>
<!--ROW 1 END-->
<!--IF THERE ISN'T ENOUGH ROWS, OR ARE TOO MANY ROWS, FEEL FREE TO COPY AND PASTE/DELETE ANY ROW.-->
<!--ROW 2-->
<div class="row m-1">
<!--ROW 2 CHARACTER 1-->
<div class="col-lg-3 mb-1">
<div class="card bg-faded pb-2">
<!--DECORATIONAL IMAGE-->
<div class="container-fluid rounded-top" style="height:150px;background-image:url(IMG URL);"></div>
<!--CHARACTER ICON-->
<a href="CHARACTER URL">
<img src="IMG URL" class="rounded-circle d-block bg-faded" style="max-height:270px;padding:10px;margin:-90px auto 10px auto;" alt="Broken.png" />
</a>
<!--CHARACTER NAME-->
<div class="row justify-content-center">
<a href="CHARACTER URL">
<h1 class="mb-2">NAME</h1>
</a>
</div>
<!--CHARACTER DESCRIPTION-->
<p class="mx-auto">Description of character here</p>
</div>
</div>
<!--ROW 2 CHARACTER 1 END-->
<!--ROW 2 CHARACTER 2-->
<div class="col-lg-3 mb-1">
<div class="card bg-faded pb-2">
<!--DECORATIONAL IMAGE-->
<div class="container-fluid rounded-top" style="height:150px;background-image:url(IMG URL);"></div>
<!--CHARACTER ICON-->
<a href="CHARACTER URL">
<img src="IMG URL" class="rounded-circle d-block bg-faded" style="max-height:270px;padding:10px;margin:-90px auto 10px auto;" alt="Broken.png" />
</a>
<!--CHARACTER NAME-->
<div class="row justify-content-center">
<a href="CHARACTER URL">
<h1 class="mb-2">NAME</h1>
</a>
</div>
<!--CHARACTER DESCRIPTION-->
<p class="mx-auto">Description of character here</p>
</div>
</div>
<!--ROW 2 CHARACTER 2 END-->
<!--ROW 2 CHARACTER 3-->
<div class="col-lg-3 mb-1">
<div class="card bg-faded pb-2">
<!--DECORATIONAL IMAGE-->
<div class="container-fluid rounded-top" style="height:150px;background-image:url(IMG URL);"></div>
<!--CHARACTER ICON-->
<a href="CHARACTER URL">
<img src="IMG URL" class="rounded-circle d-block bg-faded" style="max-height:270px;padding:10px;margin:-90px auto 10px auto;" alt="Broken.png" />
</a>
<!--CHARACTER NAME-->
<div class="row justify-content-center">
<a href="CHARACTER URL">
<h1 class="mb-2">NAME</h1>
</a>
</div>
<!--CHARACTER DESCRIPTION-->
<p class="mx-auto">Description of character here</p>
</div>
</div>
<!--ROW 2 CHARACTER 3 END-->
<!--ROW 2 CHARACTER 4-->
<div class="col-lg-3 mb-1">
<div class="card bg-faded pb-2">
<!--DECORATIONAL IMAGE-->
<div class="container-fluid rounded-top" style="height:150px;background-image:url(IMG URL);"></div>
<!--CHARACTER ICON-->
<a href="CHARACTER URL">
<img src="IMG URL" class="rounded-circle d-block bg-faded" style="max-height:270px;padding:10px;margin:-90px auto 10px auto;" alt="Broken.png" />
</a>
<!--CHARACTER NAME-->
<div class="row justify-content-center">
<a href="CHARACTER URL">
<h1 class="mb-2">NAME</h1>
</a>
</div>
<!--CHARACTER DESCRIPTION-->
<p class="mx-auto">Description of character here</p>
</div>
</div>
<!--ROW 2 CHARACTER 4 END-->
</div>
<!--ROW 2 END-->
<!--CREDIT-->
<a href="https://toyhou.se/9979660." target="_blank">
<p>
<span class="pull-right">
<i class="fas fa-rabbit fa-fw tooltipster" title="HTML by Faliouca"></i>
</span>
</p>
</a>
</div>