Small Decorative Code - Cells Theme - IMG BG - Short

<!----------------------------
Free to Use Small Decorative Code
    Cells Theme - Short Version
        Image/Pattern Background
        by LeafJelly

Short Version: Mood board ONLY

    Hex Codes
Background 1: #09645E
Background 2: #9BE4BD
Symbol: #70DBAA
Symbol 2: #8C72F0
Font: #901CF9

    Customization
far - is the symbol weight s=solid r=regular l-light t=thin d=duotone
fa-symbol changes what the symbol is using the names found here https://fontawesome.com/ search for the symbols you want here adn replace the name with it.
transform:rotate(#deg) - Rotates Symbols
margin: #px #px - changes the positon of the symbol in Y X order. -Y moves up -X moves left. +Y moves down +X moves right.
---------------------------->
<div class="container col-md-8 col-lg-3 my-4 p-1">

<!-------Background Image Replace the URl--------->
<div class="card col-12 border-0 mt-4 p-2" style="height:280px; min-width:380px; background:#09645E; border-radius:.6em;
    background:url(
    https://gifcity.carrd.co/assets/images/gallery67/74b0b988.png?v=d32b0bb8
    ) center;">

    <div class="text-center" >
    <!----------Decorations Left Side------------>
    <i class="far fa-bacterium" style="position:absolute; margin:-33px -155px; font-size:50px; color:#8C72F0;"></i>
    <i class="fad fa-bacterium " style="position:absolute; margin:4px -110px; font-size:20px; color:#70DBAA"></i>
    <i class="fad fa-bacterium " style="position:absolute; margin:35px -110px; font-size:25px;  transform:rotate(-150deg); color:#70DBAA"></i>
    <i class="fad fa-disease" style="position:absolute; margin:10px -70px; font-size:20px;  transform:rotate(-30deg); color:#70DBAA"></i>
    <i class="fa fa-bacteria" style="position:absolute; margin:-30px -50px; font-size:35px; transform:rotate(-70deg); color:#70DBAA"></i>
    <i class="fad fa-viruses" style="position:absolute; margin:20px -30px; font-size:25px; color:#70DBAA"></i>

    <!-----------Character Image Must be a Square Image & Bg Image------------->
        <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/17206638?1658773491"

        class="rounded-circle p-2 mb-1" style="height:120px; width:120px; margin-top:-50px; background:#09645E;
        background:url(
        https://gifcity.carrd.co/assets/images/gallery67/74b0b988.png?v=d32b0bb8
        ) fixed;">
    <!----------Decorations Right Side------------>
    <i class="fas fa-bacteria" style="position:absolute; margin:-30px -5px; font-size:35px; transform:rotate(30deg); color:#70DBAA"></i>
    <i class="fad fa-viruses fa-flip-horizontal" style="position:absolute; margin:20px 0px; font-size:25px; ; color:#70DBAA"></i>
    <i class="fad fa-disease" style="position:absolute; margin:10px 50px; font-size:20px; color:#70DBAA"></i>
    <i class="fad fa-bacterium fa-flip-horizontal" style="position:absolute; margin:4px 90px; font-size:20px; color:#70DBAA"></i>
    <i class="fad fa-bacterium" style="position:absolute; margin:35px 70px; font-size:30px; transform:rotate(30deg); color:#70DBAA"></i>
    <i class="far fa-bacterium fa-flip-horizontal" style="position:absolute; margin:-33px 100px; font-size:50px; color:#8C72F0"></i>


    </div>

<!-----------Content Box------------->
    <div class="card col-0 px-1 m-0 text-center" style="height:210px; overflow:auto; font-size:12px; background:#9BE4BD; color:#901CF9;">
         <p class="my-auto" style="color:#901CF9; font-size:13px">
         Name · Age · Pro/nouns
         <br>Gender · Race/Species · Occupation
         </p>
         <div class="col-auto m-1 p-0" style="border-bottom:1px solid #09645E; margin:auto"></div>


<!--------Mood Board Replace the URLS ------------>
    <div class="row no-gutters pb-1">
        <div class="col-4 pr-1 border-0" style="height:130px">
            <div class="h-100" style="background-position:center;background-size:cover;
            background-image:url(

            https://directorsblog.nih.gov/wp-content/uploads/2016/12/neurons.jpg

            )"></div>
        </div>

        <div class="col-4 pr-1 border-0" style="height:130px">
            <div class="h-100" style="background-position:center;background-size:cover;
            background-image:url(

            https://lbdv.imev-mer.fr/wp-content/uploads/FM-MAP7-16-32.gif

            )"></div>
        </div>

        <div class="col-4 pr-1 border-0" style="height:130px">
            <div class="h-100" style="background-position:center;background-size:cover;
            background-image:url(

            https://www.atcc.org/-/media/images/atcc/390x180/ra-0650_390x180.png?h=180&iar=0&w=390&rev=092cdf51323e4902a7ebcde40aa9d326&hash=420D16A78C9CE3BA58E62ED01206D078

            )"></div>
        </div>
    </div>
    </div>



</div>
<!---------Decorations at the bottom left--------------->
<i class="fal fa-viruses fa-flip-horizontal" style="position:absolute; margin:-30px -30px; font-size:50px; color:#8C72F0"></i>


<div class="text-center" >
<!---------Credit do not remove--------------->
    <a href="/LeafJelly" title="HTML by LeafJelly" style="color:#09645E"></i> <i class="far fa-virus"></i></a>

<!---------Decorations at the bottom right--------------->
<i class="far fa-microscope" style="position:absolute; margin:-30px 150px; font-size:50px; color:#8C72F0"></i>
</div>
</div>