Small Decorative Code - Meat Theme - IMG BG -Full

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

Short Version: Mood board ONLY

    Hex Codes
Background 1: #430000
Background 2: #0F0000
Symbol: #A91D1D
Symbol 2: #B2B2B2
Font: #DECCCC
Font Accent: #C62C2C

    Customization
fas - 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;border-radius:.6em;
    background:url(
    https://images.unsplash.com/photo-1485337067832-85c243e4d4ac?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
    ) center;">

    <div class="text-center" >
    <!----------Decorations Left Side------------>
    <i class="fas fa-knife" style="position:absolute; margin:-40px -155px; font-size:80px; transform:rotate(-15deg); color:#B2B2B2;"></i>
    <i class="fas fa-steak" style="position:absolute; margin:-40px -45px; font-size:45px; transform:rotate(-190deg); color:#A91D1D"></i>
    <i class="fas fa-steak" style="position:absolute; margin:20px -30px; font-size:30px; transform:rotate(90deg); color:#A91D1D"></i>

    <!-----------Background Image & Character Image (Must be a Square Image)------------->
        <img src="https://cdn.discordapp.com/attachments/395263691085316096/1035721886732140594/unknown.png"
        class="rounded-circle p-2 mb-1" style="height:120px; width:120px; margin-top:-50px;

        background:url(
        https://images.unsplash.com/photo-1485337067832-85c243e4d4ac?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
        ) center; background-attachment:fixed">
    <!----------Decorations Right Side------------>
    <i class="fas fa-steak" style="position:absolute; margin:-40px -5px; font-size:45px; transform:rotate(-96deg); color:#A91D1D"></i>
    <i class="fas fa-steak" style="position:absolute; margin:20px 0px; font-size:30px; transform:rotate(-190deg); color:#A91D1D"></i>
    <i class="fas fa-fork" style="position:absolute; margin:-40px 70px; font-size:80px; transform:rotate(-80deg); color:#B2B2B2"></i>


    </div>

<!-----------Content Box------------->
    <div class="card col-0 px-1 m-0 text-center" style="height:210px; overflow:auto; font-size:12px; background:#0F0000; color:#DECCCC;">
         <p class="my-auto" style="color:#C62C2C; 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 #430000; 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://i.pinimg.com/564x/e7/31/c5/e731c5351ed346c26ff4dc5424e8ae40.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://64.media.tumblr.com/0555772ef03939aadc8e0c464a255651/tumblr_pwmvh3he5c1ysao0po1_500.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://images.unsplash.com/photo-1524634768608-bc1821d60420?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80

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

<div class="col-auto my-2 mx-auto p-0" style="border-bottom:1px solid #430000;width:50%;"></div>

<!-------- Trivia or Personality section------------>
<ul class="my-0 text-left" style="list-style-type: none; margin-left:-25px">
    <li class="mb-1"><i class="far fa-star fa-xs mr-1"></i>
    Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.</li>

    <li class="mb-1"><i class="far fa-star fa-xs mr-1"></i>
    Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</li>

    <li class="mb-1"><i class="far fa-star fa-xs mr-1"></i>
    Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
</ul>

<div class="col-auto my-2 mx-auto p-0" style="border-bottom:1px solid #430000;width:50%;"></div>
<div class="row no-gutters">
<!--------Likes------------>
<div class="col-6 p-0 m-0 text-left">
    <ul class="my-0" style="list-style-type: none; margin-left:-25px">
        <li><i class="fal fa-check fa-sm mr-1"></i>
        Lorem ipsum dolor</li>

        <li><i class="fal fa-check fa-sm mr-1"></i>
        Aliquam tincidunt mauris</li>

        <li><i class="fal fa-check fa-sm mr-1"></i>
        Vestibulum auctor dapibus neque.</li>

        <li><i class="fal fa-check fa-sm mr-1"></i>
        Nunc dignissim risus id metus.</li>
    </ul>
</div>

<!--------Dislikes------------>
<div class="col-6 p-0 m-0 text-left">
    <ul class="my-0" style=" list-style-type: none; margin-left:-25px">
        <li><i class="fal fa-xmark fa-sm mr-1"></i>
        Lorem ipsum dolor</li>

        <li><i class="fal fa-xmark fa-sm mr-1"></i>
        Aliquam tincidunt mauris</li>

        <li><i class="fal fa-xmark fa-sm mr-1"></i>
        Vestibulum auctor dapibus neque.</li>

        <li><i class="fal fa-xmark fa-sm mr-1"></i>
        Nunc dignissim risus id metus.</li>
    </ul>
</div>

<!-------- Relationships------------>
<div class="col-auto my-2 mx-auto p-0" style="border-bottom:1px solid #430000;width:100%;"></div>
    <!--------Relationship 1-------->
    <div class="col-4 p-0 mb-1">
        <div class="rounded-circle m-auto" style="height:60px; width:60px; background:#00001C; background-position: center; background-size:cover; background-repeat: no-repeat;
         background-image: url(

         https://f2.toyhou.se/file/f2-toyhou-se/images/34089537_0DOOErtBbKNrYX0.png

         );"></div>
        <a href="URL_HERE" style="color:#C62C2C">
            Character Name</a>
        <p>Relationship Type</p>
    </div>

   <!--------Relationship 2-------->
    <div class="col-4 p-0">
        <div class="rounded-circle m-auto" style="height:60px; width:60px; background:#00001C; background-position: center; background-size:cover; background-repeat: no-repeat;
         background-image: url(

         https://f2.toyhou.se/file/f2-toyhou-se/images/34089537_0DOOErtBbKNrYX0.png

         );"></div>
        <a href="URL_HERE" style="color:#C62C2C">
            Character Name</a>
        <p>Relationship Type</p>
    </div>

    <!--------Relationship 3-------->
    <div class="col-4 p-0">
        <div class="rounded-circle m-auto" style="height:60px; width:60px; background:#00001C; background-position: center; background-size:cover; background-repeat: no-repeat;
         background-image: url(

         https://f2.toyhou.se/file/f2-toyhou-se/images/34089537_0DOOErtBbKNrYX0.png

         );"></div>
        <a href="URL_HERE" style="color:#C62C2C">
            Character Name</a>
        <p>Relationship Type</p>
    </div>


</div>

    </div>
</div>
<!---------Decorations at the bottom left--------------->
<i class="fas fa-raindrops" style="position:absolute; margin:-30px -20px; font-size:50px; color:#A91D1D"></i>


<div class="text-center" >
<!---------Credit do not remove--------------->
    <a href="/LeafJelly" title="HTML by LeafJelly" style="color:#A91D1D"></i> <i class="fas fa-plate-utensils"></i></a>

<!---------Decorations at the bottom right--------------->
<i class="fas fa-steak" style="position:absolute; margin:-25px 160px; font-size:40px; transform:rotate(-10deg); color:#A91D1D"></i>
</div>
</div>