<!--
THIS CODE USES CUSTOM COLORS!!! If you want to change them here they are:
TEXT + ICONS + BORDERS = #fff
MAIN BORDER + FILMSTRIP = #000
BACKGROUND HEAD = #111111
MAIN BACKGROUND = #222222
CAMERA CARD BACKGROUND = #333333
CAMERA BACK BACKGROUND = #202020
I am also BEGGING YOU to turn off WYSIWYG, or this code will not work for you.
-->
<!--CONTAINER-->
<div class="container" style="max-width:950px; color:#fff;">
<!--NAME-->
<div class="border p-2 no-gutters" style="background-color: #111111; border-top:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; border-radius:10px 10px 0 0;">
<div class="col-auto p-1" style="font-family: Courier, monospace; font-size: 3em;">
<div class="col-12 col-lg-auto justify-content-center">
NAME/WORD
<hr class="flex-fill my-auto mx-2" style="background: #fff;">
<i class="fal fa-camera my-auto text-left" style="color: #fff;"></i>
</div>
</div>
<div class="border p-2 no-gutters" style="background-color: #222222; border-left:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000;">
<!--IMAGE-->
<div class="row">
<div class="col-md-6 col-sm-6 text-center mb-4">
<div class="card p-1" style="background:url(
IMG URL
); height:250px; background-size:cover; background-position:center; background-color:#000; width:100%; border: 10px solid #fff; border-radius:0;">
</div>
<!--IMAGE CREDIT - Do NOT remove this. Replace the link with the credit for the header image.-->
<a href="
IMG CREDIT URL
"
class="d-block text-white" target="_BLANK" style="position:absolute; bottom:7px; right:23px;">
<!--ADJUST THE COLOR OF THE ICON BELOW IF IT DOES NOT SHOW UP ON YOUR IMAGE - White: #fff; Black: #000-->
<i class="fal fa-camera m-1 tooltipster" style="font-size:15px; color:#fff;" title="Image Credit"></i>
</a>
</div>
<!--SUMMARY-->
<div class="col-sm-6">
<div class="card p-2" style="border:2px solid #fff; background:#222222; color:#fff; overflow: auto; height: 250px;">
<p class="text-center">
A nice little summary of information, like personality or an RP snippet, would look good here. This box scrolls, but I'd recommend keeping it to a paragraph or two; nobody likes scrolling through loads of info in such a small box.
</p>
<p class="text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis in eu mi bibendum neque egestas congue. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Etiam tempor orci eu lobortis. Odio tempor orci dapibus ultrices in iaculis nunc. Ultrices eros in cursus turpis massa tincidunt dui. At elementum eu facilisis sed. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut.
</p>
</div>
</div>
</div>
<br>
<!--CAMERA - DO NOT ALTER ANYTHING HERE UNLESS YOU KNOW WHAT YOU'RE DOING-->
<div class="justify-content-center">
<div class="border p-2 no-gutters" style="border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #fff; border-radius:10px 10px 0 0; width:150px; height:40px; background:#333333;">
</div>
</div>
<div class="justify-content-center">
<div class="border p-2 no-gutters rounded-circle" style="border:1px solid #fff; width:50px; height:50px; margin-top:-20px; background:#111111; z-index:2;">
</div>
</div>
<div class="justify-content-center">
<div class="border p-2 no-gutters" style="border-top:1px solid #fff; border-right:1px solid #fff; border-left:1px solid #fff; width:650px; margin-top:-30px; border-radius:5px 5px 0 0; height:45px; background:#333333;">
</div>
</div>
<div class="justify-content-center">
<div class="card p-2 no-gutters justify-content-center" style="border:1px solid #fff; width:650px; height:250px; background:#202020; border-radius:0;">
<div class="border p-0 no-gutters float-left" style="border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #fff; width:100%; height:20px; background:#000; overflow: hidden;">
<p class="text-center">
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
</p>
</div>
<!--FILMSTRIP CONTENT - Change whatever you like. On mobile, this box scrolls.-->
<div class="border p-3 no-gutters float-left" style="border-left:1px solid #fff; border-right:1px solid #fff; width:100%; height:150px; background:#000; overflow: auto;">
<div class="row">
<div class="col-sm-6">
<div class="d-flex justify-content-between mb-2">
<p style="font-weight:bold;">NAME</p>
<hr class="flex-fill my-auto mx-2">
<span class="text-right">
text
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="font-weight:bold;">AGE</p>
<hr class="flex-fill my-auto mx-2">
<span class="text-right">
text
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="font-weight:bold;">PRONOUNS</p>
<hr class="flex-fill my-auto mx-2">
<span class="text-right">
text
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="font-weight:bold;">SPECIES</p>
<hr class="flex-fill my-auto mx-2">
<span class="text-right">
text
</span>
</div>
</div>
<div class="col-sm-6">
<div class="d-flex justify-content-between mb-2">
<p style="font-weight:bold;">OCCUPATION</p>
<hr class="flex-fill my-auto mx-2">
<span class="text-right">
text
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="font-weight:bold;">BIRTHDAY</p>
<hr class="flex-fill my-auto mx-2">
<span class="text-right">
text
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="font-weight:bold;">S.O.</p>
<hr class="flex-fill my-auto mx-2">
<span class="text-right">
text
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="font-weight:bold;">THEME</p>
<hr class="flex-fill my-auto mx-2">
<span class="text-right">
<a href="
THEME SONG URL
" targte="_BLANK" style="color:#fff;">
text
</a>
</span>
</div>
</div>
</div>
</div>
<!--CAMERA END - DO NOT ALTER ANYTHING HERE UNLESS YOU KNOW WHAT YOU'RE DOING-->
<div class="border p-0 no-gutters float-left" style="border-bottom:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #fff; width:100%; height:20px; background:#000; overflow: hidden;">
<p class="text-center">
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
<i class="fal fa-square p-1 my-auto" style="color: #fff; font-size:15px;"></i>
</p>
</div>
</div>
</div>
<div class="justify-content-center">
<div class="border p-2 no-gutters" style="border-bottom:1px solid #fff; border-right:1px solid #fff; border-left:1px solid #fff; width:650px; border-radius:0 0 5px 5px; height:20px; background:#333333;">
</div>
</div>
<br>
<br>
<!--HANGING IMAGES - These images are all 200x200 and crop to the center. This works nice as a moodboard or a little spot to show off pics of your character.-->
<!--IMAGE 1-->
<div class="row no-gutters">
<div class="col-sm-4 p-1">
<hr class="flex-fill my-auto mx-2" style="background: #fff;">
<p class="text-center" style="margin-top:-10px;"><i class="fal fa-paperclip-vertical p-1 my-auto" style="color: #555555; font-size:40px;"></i></p>
<div class="justify-content-center">
<div class="card p-1" style="background:url(
IMG URL
); width:200px; height:200px; background-size:cover; background-position:center; background-color:#000; border: 10px solid #fff; border-radius:0; margin-top:-10px;">
<!--IMAGE CREDIT - Do NOT remove this. Replace the link with the credit for the header image.-->
<a href="
IMG CREDIT URL
"
class="d-block text-white" target="_BLANK" style="position:absolute; bottom:1px; right:1px;">
<!--ADJUST THE COLOR OF THE ICON BELOW IF IT DOES NOT SHOW UP ON YOUR IMAGE - White: #fff; Black: #000-->
<i class="fal fa-camera m-1 tooltipster" style="font-size:15px; color:#fff;" title="Image Credit"></i>
</a>
</div>
</div>
</div>
<!--IMAGE 2-->
<div class="col-sm-4 p-1">
<hr class="flex-fill my-auto mx-2" style="background: #fff;">
<p class="text-center" style="margin-top:-10px;"><i class="fal fa-paperclip-vertical p-1 my-auto" style="color: #555555; font-size:40px;"></i></p>
<div class="justify-content-center">
<div class="card p-1" style="background:url(
IMG URL
); width:200px; height:200px; background-size:cover; background-position:center; background-color:#000; border: 10px solid #fff; border-radius:0; margin-top:-10px;">
<!--IMAGE CREDIT - Do NOT remove this. Replace the link with the credit for the header image.-->
<a href="
IMG CREDIT URL
"
class="d-block text-white" target="_BLANK" style="position:absolute; bottom:1px; right:1px;">
<!--ADJUST THE COLOR OF THE ICON BELOW IF IT DOES NOT SHOW UP ON YOUR IMAGE - White: #fff; Black: #000-->
<i class="fal fa-camera m-1 tooltipster" style="font-size:15px; color:#fff;" title="Image Credit"></i>
</a>
</div>
</div>
</div>
<!--IMAGE 3-->
<div class="col-sm-4 p-1">
<hr class="flex-fill my-auto mx-2" style="background: #fff;">
<p class="text-center" style="margin-top:-10px;"><i class="fal fa-paperclip-vertical p-1 my-auto" style="color: #555555; font-size:40px;"></i></p>
<div class="justify-content-center">
<div class="card p-1" style="background:url(
IMG URL
); width:200px; height:200px; background-size:cover; background-position:center; background-color:#000; border: 10px solid #fff; border-radius:0; margin-top:-10px;">
<!--IMAGE CREDIT - Do NOT remove this. Replace the link with the credit for the header image.-->
<a href="
IMG CREDIT URL
"
class="d-block text-white" target="_BLANK" style="position:absolute; bottom:1px; right:1px;">
<!--ADJUST THE COLOR OF THE ICON BELOW IF IT DOES NOT SHOW UP ON YOUR IMAGE - White: #fff; Black: #000-->
<i class="fal fa-camera m-1 tooltipster" style="font-size:15px; color:#fff;" title="Image Credit"></i>
</a>
</div>
</div>
</div>
</div>
<!--CREDIT - DO NOT REMOVE-->
</div>
<p class="text-center">
<a href="/Kork" style="color: #fff" class="tooltipster" title="Code by Kork"><i class="fal fa-syringe"></i></a>
</p>
</div>