Small Decorative Code - Night Sky Theme - IMG BG - Short

<!----------------------------
Free to Use Small Decorative Code
    Night Sky Theme - Short Version
        IMG/Pattern Background
        by LeafJelly

Short Version: Mood board ONLY

    Hex Codes
Background 1: #00001C
Background 2: #242E75
Symbol: #E7EDFF
Symbol 2: #B1C2F3
Font: #9EBEE7

    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----------->
<div class="card col-12 border-0 mt-4 p-2" style="height:280px; min-width:380px; background:#00001C; border-radius:.6em;
    background:url(
    https://gifcity.carrd.co/assets/images/gallery128/1fc3f893.png?v=d32b0bb8
    ) center;">

    <div class="text-center" >
    <!----------Decorations Left Side------------>
    <i class="fas fa-moon" style="position:absolute; margin:-45px -140px; font-size:60px; transform:rotate(-10deg); color:#B1C2F3;"></i>
    <i class="fas fa-star" style="position:absolute; margin:-25px -45px; font-size:30px; transform:rotate(-10deg); color:#B1C2F3"></i>
    <i class="fas fa-star" style="position:absolute; margin:20px -80px; font-size:15px; transform:rotate(30deg);  color:#E7EDFF"></i>
    <i class="fas fa-star" style="position:absolute; margin:50px -20px; font-size:10px; transform:rotate(20deg);  color:#E7EDFF"></i>

    <!-----------Character Image Must be a Square Image------------->
        <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/16492558?1654705611"
        class="rounded-circle p-2 mb-1" style="height:120px; width:120px; margin-top:-50px; background:#00001C;background-attachment:fixed;

        background:url(
        https://gifcity.carrd.co/assets/images/gallery128/1fc3f893.png?v=d32b0bb8
        ) center; background-attachment:fixed        ">
    <!----------Decorations Right Side------------>
    <i class="fas fa-star" style="position:absolute; margin:-25px 5px; font-size:30px; transform:rotate(10deg); color:#B1C2F3"></i>
    <i class="fas fa-star" style="position:absolute; margin:20px 50px; font-size:15px; ; transform:rotate(-30deg); color:#E7EDFF"></i>
    <i class="fas fa-star" style="position:absolute; margin:50px 0px; font-size:10px; ; transform:rotate(-20deg); color:#E7EDFF"></i>
    <i class="fas fa-sun" style="position:absolute; margin:-30px 105px; font-size:50px; transform:rotate(-15deg); color:#B1C2F3"></i>


    </div>

<!-----------Content Box------------->
    <div class="card col-0 px-1 m-0 text-center" style="height:210px; overflow:hidden; font-size:12px; background:#242E75; color:#D8DEF0;">
         <p class="my-auto" style="color:#9EBEE7; font-size:13px">
         Name · Age · Pro/nouns
         <br>Gender · Race/Species · Occupation
         </p>
         <div class="col-auto m-1 mb-2 mx-auto p-0" style="border-bottom:1px solid #9EBEE7;width:100%;"></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://media.tenor.com/rDWAbi_iMRwAAAAC/moon-anime.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://media.tenor.com/R7pAjG0dShUAAAAC/80s-anime.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://i.pinimg.com/originals/de/2e/2b/de2e2b6717d388a9a82737d23c1bf1e2.gif

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

</div>
</div>
<!---------Decorations at the bottom left--------------->
<i class="fas fa-star" style="position:absolute; margin:-20px -20px; font-size:30px;transform:rotate(-10deg); color:#B1C2F3"></i>

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

<!---------Decorations at the bottom right--------------->
<i class="fas fa-star" style="position:absolute; margin:-20px 170px; font-size:30px;transform:rotate(10deg); color:#B1C2F3"></i>
</div>
</div>