TH - Witch's Familiar

<!----------------------------------------------
About;;
--
Circle Journey; https://th.circlejourney.net/#
I HIGHLY recommend you use this site to tinker with the code
--

Quick switch hot key

Highlight what you want to change, press the Crtl + F, select all, then paste!

   Flavor color; #f1aad1
   Link Color; #f21e93

   Music player embed code; https://www.youtube.com/embed/4h0a1NCeC14
        (Note, you only need to change the "4h0a1NCeC14" part to the youtube links embed code!)

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

<!----------------------------------------------
    Right side - Background image and music player
---------------------------------------------->
<div class="mx-auto my-1 row no-gutters" style="max-width: 1000px;">
    <div class="col-lg-4 pl-lg-2 order-lg-2">
        <div class="card border-0 rounded-0" style="height: 420px; background-position: top center; background-size: cover; background-image: url(

-

        );"><div style="position: absolute; bottom: 0; right: 0; left: 0;">
    </div>
</div>

<div class="carousel-item active text-center bg-faded p-0">
    <div class="col-md-13 mb-2"><div class="display-4 text-uppercase text-white d-flex justify-content-between mb-1" style="font-size:1.25rem;letter-spacing:1px;"></div>
        <div class="card rounded-0 p-0"><div class="row no-gutters mt-0 mb-0"><div class="col-1 p-1"><a class="p-0 mt-2 btn btn-outline-dark melody-embed" style="border:0;position:relative;height:1.5rem;width:1.5rem;z-index:2;color:#999;"><iframe style="opacity:.01;position:absolute;left:0;right:0;top:0;bottom:0;" class="h-100 w-100"

                src="https://www.youtube.com/embed/4h0a1NCeC14" frameborder="0"></iframe>

                    <i class="fas fa-play fa-fw fa-2x" style="z-index:-1;position:absolute;left:0;top:0;font-size:1rem;text-align:center;height:100%;width:100%;"></i></a></div>
                        <div class="col-6 p-1"><hr class="mt-3 p-1"></div><div class="col-5 p-1 text-center mt-1"> Espresso
        </div></div>
    </div></div>
</div></div>
<!----------------------------------------------
    Right side - Background image and music player
---------------------------------------------->

<!----------------------------------------------
    Left side - Info
---------------------------------------------->
<div class="col-lg-8"><div class="h-700"><div class="mb-2 card rounded-0 p-0">
    <div class="w-100 d-flex align-items-center justify-content-between text-uppercase bg-faded" style="font-size: 30px;">
        <div class="px-2" style="letter-spacing: 5px;">

            <span style="color:#f1aad1;">Name</span>

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

<div class="p-0 card rounded-0"><div class="p-2 bg-faded" style="height: auto; overflow-y;">
    <div class="row no-gutters"><div class="col-lg-12 row no-gutters pr-lg-1" style="font-size: 12px;"><div class="col-lg-6 pr-lg-2">

                        <div class="justify-content-between mb-1 w-100"><span style="color:#f1aad1;">Species; </span><span class="text-right"> - </span></div>
                        <div class="justify-content-between mb-1 w-100"><span style="color:#f1aad1;">Pronouns; </span><span class="text-right"> - </span></div>
                        <div class="justify-content-between mb-1 w-100"><span style="color:#f1aad1;">Orientation; </span><span class="text-right"> - </span></div>
    </div><div class="col-lg-6 pl-lg-2">
                        <div class="justify-content-between mb-1 w-100"><span style="color:#f1aad1;">Masterlist; </span><span class="text-right"> <a class="tooltipster" href="/" style="color:#f21e93;">[ Link ]</a></span></div>
                        <div class="justify-content-between mb-1 w-100"><span style="color:#f1aad1;">Worth; </span><span class="text-right"> - </span></div>
                        <div class="justify-content-between mb-1 w-100"><span style="color:#f1aad1;">Designer; </span><span class="text-right"> - </span></div>
</div>
<div class="col-lg-12">
<div class="mt-2"><div class="row no-gutters align-items-center" style="font-size: 15px;">
    <div class="col"><hr class="m-0"></div>
        <div class="col-auto px-2"><span style="color:#f1aad1;"><i class="fal fa-sparkle"></i></div>
            <div class="col"><hr class="m-0">
        </div>
    </div>

    <div class="card border-0 p-2"><div class="p-2" style="overflow-y:auto; height:75px;"><a style="font-size: 12px;">

                <p class="text-center"> -- </p>
                <p>--</p>

        </a>
    </div></div>
</div></div></div>
<!----------------------------------------------
    Left side - Info
---------------------------------------------->

<!----------------------------------------------
    palette
---------------------------------------------->
<div class="row no-gutters col-lg-12 pl-lg-0" style="font-size: 12px;"><div class="w-100 mt-1 row no-gutters modal-open" style="height: 10px; border-radius: 0px;">

                                <!-- 4 --> <div class="col tooltipster" title="Thing" data-placement="right" style="background-color: #ffd5ec"></div>
                                <!-- 4 --> <div class="col tooltipster" title="Thing" data-placement="right" style="background-color: #f9abd6"></div>
                                <!-- 4 --> <div class="col tooltipster" title="Thing" data-placement="right" style="background-color: #fb7bc1"></div>
                                <!-- 4 --> <div class="col tooltipster" title="Thing" data-placement="right" style="background-color: #f051a8"></div>
</div></div></div>
<!----------------------------------------------
    palette
---------------------------------------------->

<!----------------------------------------------
    Familiar owner section
---------------------------------------------->

<div class="mt-2"><div class="row no-gutters align-items-center" style="font-size: 12px;">
    <div class="col"><hr class="m-2"></div>
        <div class="col-auto px-2"><span style="color:#f1aad1;"><i class="fal fa-book-spells"></i></div>
            <div class="col"><hr class="m-0"></div></div>

     <div class="p-0 bg-faded" style="height: auto;"><div class="row no-gutters">
         <div class="col-lg-3 pr-lg-2 hidden-md-down"><img src="

                         /
        ">
    </div>

<div class="col-lg-9 mt-lg-1 mt-0 pl-lg-1">
    <div class="row no-gutters d-flex align-items-center mb-2" style="letter-spacing: 2px;">
        <div class="col-auto pr-2 text-uppercase">

                        <a href="/" style="color: inherit; font-size: 18px;" class="text-primary"><span style="color:#f21e93;"> Witch </a></div>
                                <div class="col"><hr class="m-2"></div><div class="col-13 pl-1 text-muted faded mb-0" style="font-size: 13px;">[ Bonded ]
    </div>
 </div>
    <div class="card border-0 p-2"><div class="p-2" style="overflow-y:auto; height:100px;"><a style="font-size: 12px;">

                    <p class="text-center"> -- </p>
                    <p>--</p>

        </a></span>
    </div>
</div>
<div class="text-white text-center" style="padding-top: 2px; padding-bottom: 2px; font-size: 9.5px;"><span style="color:#f1aad1;">
                                                        <!-- fas full // far empty -->
                                                        <i class="fas fa-heart pr-1"></i>
                                                        <i class="far fa-heart pr-1"></i>
                                                        <i class="far fa-heart pr-1"></i>
                                                        <i class="far fa-heart pr-1"></i>
                                                        <i class="far fa-heart pr-1"></i>

                                                   </p><div class="px-2">
        </div></div>
    </div></div>
</div></div>
</div>
<!----------------------------------------------
    Familiar owner section
---------------------------------------------->


<!----------------------------------------------
    little pagedoll
---------------------------------------------->
 <div class="card" style="border:0px; border-radius:0px; background:url(

        /

    ); background-size:cover; background-position:top; background-repeat:no-repeat; height:200px; width:275px; position:absolute; bottom:60px; right:-325px; z-index:3;">
        </div>
    </div>
</div>
<!----------------------------------------------
    little pagedoll
---------------------------------------------->

<!----------------------------------------------
    credits
---------------------------------------------->
<div class="text-right mx-0" style="font-size:10px;">
  <a href="https://toyhou.se/BBelial"><i class="far fa-code text-muted tooltipster" title="Code by BBelial"></i></a>
</div>