To all staff:
This message is a friendly reminder that it is your responsibility to keep your company-issued ID card safe! Due to recent budget reallocations, "mission-related damage" and "lost in oneirosea" will no longer be considered acceptable reasons on the standard ID reissue form starting on the 1st. To prevent losing access to security-locked areas and/or your shell, please take extra care to protect your ID card in the future.
-- Alcyon Corporation
Alcyon Corporation
<!--the accent color used in this preview is #FECB49. you should ctrl+f replace this with an appropriate color for your character's department-->
<!--profile container-->
<div style="max-width: 700px; margin: auto;">
<div class="row no-gutters">
<!--left side-->
<div class="col-sm-6">
<!--card front-->
<div class="m-sm-1 h-100 card flex-column justify-content-between" style="border-radius: 20px; overflow: hidden;">
<!--top-->
<div>
<!--colored stripe-->
<div style="height: 50px; background-color: #FECB49;"></div>
<!--light stripe-->
<div class="bg-light text-dark" style="height: 25px;">
<h1 style="font-size: 20px; font-variant: small-caps; margin: 0; position: relative; top: -35px;">
<!--logo-->
<img src="https://i.imgur.com/LtQN2qL.png" alt="kingfisher logo" style="height: 100px; border-radius: 50%;" class="bg-light ml-2">
<!--text-->
Alcyon Corporation
</h1>
</div>
<!--end light stripe-->
</div>
<!--end top-->
<!--middle-->
<div class="p-1 pt-4 text-center">
<!--character img; use a square pic. change url in src="" to change-->
<img src="IMGURL" style="border-radius: 20px; height: 150px;">
<!--character name-->
<h2 class="mb-0 mt-1">Character Name</h2>
<!--job title-->
<p class="text-muted mb-2">job title</p>
<!--info table-->
<table class="border-0 text-left m-auto" style="max-width: 300px;"><tbody>
<!--row 1-->
<tr>
<!--left-->
<td style="padding: 3px">
ID No.
<span class="pull-right ml-2">:</span>
</td>
<!--right-->
<td style="padding: 3px">000 000 000</td>
</tr>
<!--row 2-->
<tr>
<!--left-->
<td style="padding: 3px">
Designation
<span class="pull-right ml-2">:</span>
</td>
<!--right-->
<td style="padding: 3px">Diver (natural)</td>
</tr>
<!--row 3-->
<tr>
<!--left-->
<td style="padding: 3px">
Division
<span class="pull-right ml-2">:</span>
</td>
<!--right-->
<td style="padding: 3px">Intelligence</td>
</tr>
<!--row 4-->
<tr>
<!--left-->
<td style="padding: 3px">
Rank
<span class="pull-right ml-2">:</span>
</td>
<!--right-->
<td style="padding: 3px">Abyssal</td>
</tr>
</tbody></table>
<!--end info table-->
</div>
<!--end middle-->
<!--bottom stripe-->
<div class="mb-0 justify-content-center align-items-center" style="height: 50px; background-color: #FECB49;">
<!--barcode-->
<img src="https://i.imgur.com/Xw09gCY.png" style="max-width: 70%;" alt="">
</div>
<!--end bottom stripe-->
</div>
<!--end card front-->
</div>
<!--end left side-->
<!--right side-->
<div class="col-sm-6">
<!--card back-->
<div class="m-sm-1 h-100 card flex-column" style="border-radius: 20px; overflow: hidden;">
<!--top stripes-->
<div style="height: 50px; background-color: #FECB49;"></div>
<div class="bg-light text-dark" style="height: 25px;"></div>
<!--middle-->
<div class="px-1 py-2 flex-grow-1">
<ul>
<li>Short bullet-point bio.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li>Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
</ul>
</div>
<!--end middle-->
<!--sig-->
<div class="p-3">
<!--sig box. replace url in src() to change img-->
<div class="bg-light card rounded-0" style="border-top: none; border-left: none; border-right: none; height: 50px;
background: url(IMGURL) center no-repeat; background-size: contain;"></div>
<p class="text-right text-muted" style="font-size: small;">Signature</p>
</div>
<!--bottom stripe-->
<div style="height: 50px; background-color: #FECB49;">
<div class="text-center py-3">
<a class="fal fa-code tooltipster text-dark" title="code by octopi" data-placement="bottom" href="https://toyhou.se/~world/143669.alcyon-corporation/page/88381.id-card"></a>
</div>
</div>
</div>
</div>
<!--end right side-->
</div>
</div>
<!--end container-->
