#9 - HOSPITAL'S ID SHORT

<!---- QUICK NOTE BEFORE STARTING; ------


Type ctrl+f to locate and replace the color of any of the item below.

  - background color: #110d0f
  - background card color: #000
  - main color: #f95e41
  - font color: #ece6df

  - dividers (scissors): #c9391f
  - darker main color: #5e180c


-------->

<!------------ CONTENT ------------>

<div class="container mt-5" style="max-width: 1090px; font-family: ms gothic; color: #ece6df; font-size: 14px">

<!------------ CARD START ------------>

<div class="card p-1 border-0 rounded-0" style="background: #110d0f; box-shadow: 4px 4px 0 #c9391f">

<!------------ FIRST COLUMN ------------>

<div class="row no-gutters">
<div class="col-lg-4 p-2">

<!------------ PATIENT NUMBER ------------>

<div class="card p-1 rounded-0 border-0" style="background: #000; box-shadow: 4px 4px 0 #f95e41; margin-bottom: -30px; z-index: 10; margin-left: 80px; width:260px;">
<p class="text-center" style="font-size: 21px; font-family: georgia;"><span style="color: #f95e41;">
<i class="far fa-barcode"></i><i class="far fa-barcode"></i><i class="far fa-barcode"></i></span>

PATIENT
<span style="font-family: tahoma">
#0000</span>

<!------------ END ------------>

</p></div>

<!------------ MAIN IMAGE ------------>

<div class="card border-0 rounded-0 mt-3" style="background: url(IMG_URL) center; background-size: cover;
height: 415px; width: 350px; box-shadow: 4px 4px 0 #f95e41">

<!------------ ICON ------------>

<i class="far fa-paperclip" style="font-size: 70px; color: #ddd; position: absolute; left: -10px; top: -20px; text-shadow: 3px 3px 0 rgba(0,0,0,0.30)"></i>

<!------------ BASICS START ------------>

<div class="mt-auto"/>
<div class="collapse px-3 p-3" id="open" style="background: #000; overflow: auto;">
<div class="tab-pane fade show active" id="one">

<!------------ ADJETIVES ------------>

<div class="justify-content-center mt-3">

    <div class="card border-0 rounded-0 px-1 m-1" style="background-color: #5e180c;">
    adjective
    </div>

    <div class="card border-0 rounded-0 px-1 m-1" style="background-color: #5e180c;">
    adjective
    </div>

    <div class="card border-0 rounded-0 px-1 m-1" style="background-color: #5e180c;">
    adjective
    </div>

<!------------ ADD MORE ABOVE THIS LINE ------------>

</div>

<!------------ BASICS ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">NAME</span>

        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right"> content
        </div>

<!------------ ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">GENDER</span>

        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right"> content
        </div>

<!------------ ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">SPECIES</span>

        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right">
        <a href="https://toyhou.se/~world/90844.jomyu-s-temple" style="color: #f95e41; font-weight: bold">Ware-jomyu</a>
        </div>

<!------------ ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">AGE</span>

        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right"> content
        </div>

<!------------ ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">ORIENT.</span>

        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right"> content
        </div>

<!------------ ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">ROLE</span>

        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right"> content
        </div>

<!------------ ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">VOICE/SONG</span>

        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right">
        <a href="LINK_URL" style="color: #f95e41;"><i class="fas fa-music"></i></a>
        </div>

<!------------ TRAITS ------------>

<div class="justify-content-between mt-1 mb-2" style="font-size: 20px; color: #c9391f">
<i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span>
</div>

<!------------ ------------>

        <div class="justify-content-between py-1 mt-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">EXTENSIONS</span>

        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right"> content
        </div>

<!------------ ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">INTERIOR</span>

        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right"> content
        </div>

<!------------ BASICS END ------------>

</div></div>

<!------------ BASICS LINK ------------>

<a class="p-1 text-center" style="color: #ece6df; background: #000; font-family: georgia; font-size: 25px;" data-toggle="collapse" href="#open" aria-expanded="false">
<span style="background: #f95e41;"><s>P</span>ATIENT'S</s> INFO</a>

</div></div>

<!------------ FIRST COLUMN END ------------>

<!------------ SECOND COLUMN START ------------>

<div class="col-lg-7 p-2">
<div class="col-md-7 col-lg-12">
<div class="card p-3 border-0 rounded-0" style="background:#000; box-shadow: 4px 4px 0 #f95e41; height: 332px; overflow: auto;">

<!------------ MAIN HOSPITAL ICON ------------>

<div style="position: absolute; bottom: 10px; right: 50px">
<i class="far fa-hospital" style="color: #ffa7a7; font-size: 100px; opacity: 0.1"></i>
</div>

<!------------ ABOUT TITLE ------------>

<div class="row no-gutters" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
<span style="background-color: #f95e41;"><s>A</s></span>BOUT</div>
<div class="col-lg-1"><i class="far fa-folder-user" style="color: #c9391f"></i>
</div></div>

<div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
<i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>

<!------------ END ------------>

<div style="height: 224px; overflow: auto">

<!------------ TITLE OR PHRASE ------------>

    <blockquote class="justify-content-between mb-3 mt-1" style="border-left: 6px solid #f95e41; font-family: georgia;">
    <i class="fad fa-quote-left" style="color: #f95e41;"></i>

        Some epic phrase or title in general... yas

    <i class="fad fa-quote-right" style="color: #f95e41;"></i>
    </blockquote>

<!------------ CONTENT ------------>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.

<!------------ LIKES & DISLIKES TITLE ------------>

<div class="row no-gutters mt-2" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
<span style="background-color: #f95e41;"><s>P</s></span>REFERENCES</div>
<div class="col-lg-1"><i class="far fa-clipboard" style="color: #c9391f"></i>
</div></div>

<div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
<i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>

<!------------ CONTENT - add more using <li> ------------>

<div class="row no-gutters">
<div class="col-lg-6 p-1 px-2">

<!------------ LIKES ------------>

<div class="mb-1" style="color: #f95e41; font-size: 17px; letter-spacing: 2px; font-weight: bold">LIKES.</div>

<ul>

    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>

</ul></div>

<!------------ DISLIKES ------------>

<div class="col-lg-6 p-1 px-2">
<div class="mb-1" style="color: #f95e41; font-size: 17px; letter-spacing: 2px; font-weight: bold">DISLIKES.</div>

<ul>

    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>

</ul>

<!------------ END ------------>

</div></div>


<!------------ TRIVIA TITLE ------------>

<div class="row no-gutters mt-2" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
<span style="background-color: #f95e41;"><s>T</s></span>RIVIA</div>
<div class="col-lg-1"><i class="far fa-list" style="color: #c9391f"></i>
</div></div>

<div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
<i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>

<!------------ CONTENT - add more using <li> ------------>

<ul>

    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>

</ul>

<!------------ END ------------>

</div></div>

<!------------ GALLERY START (you can use GIFs aswell) ------------>

<div class="row no-gutters mt-3">

<!------------ ------------>

<div class="col-4">
<div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 50%;
box-shadow: 4px 4px 0 #f95e41">
</div></div>

<!------------ ------------>

<div class="col-4">
<div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 50%;
box-shadow: 4px 4px 0 #f95e41">
</div></div>

<!------------ ------------>

<div class="col-4">
<div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 50%;
box-shadow: 4px 4px 0 #f95e41">
</div></div>

<!------------ END ------------>

</div></div></div>

<!------------ THIRD COLUMN - PALETTE ------------>

<div class="col-md-1 mt-4 p-2">

        <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #752110;">
        </div>

        <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #9b341e;">
        </div>

        <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #cc5438;">
        </div>

        <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background:#ec6c4d;">
        </div>

        <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #dcd1ca;">
        </div>

        <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #ece6df;">
        </div>

<!------------ END ------------>

</div></diV></div>

<!------------ CREDIT - DO NOT REMOVE PLS! FEEL FREE TO MOVE IT AS LONG AS IT'S STILL VISIBLE ^^ ------------>

<a href="https://toyhou.se/burakkujakku" style="color: #f95e41; opacity: 0.5">
<i class="far fa-fish-bones tooltipster mt-2" title="code by burakkujakku"></i></a>
</div>