F2U ✦ bumble | CC / BG

<!---

GUIDE:
- You can frankenstein my code/edit it as much as you want.
- Just please don't remove my credit!!

TIPS:
- Keep the doll/image at 353x305.
- If you want the trait boxes to stretch with the text, use "col-l" instead of "col".

BACKGROUND:
- For background color only, just change the #fff to the color code.
- For background image, replace with background-color:#fff; with background-image:url();

--->

<div class="container p-4" style="width:1010px; background-color:#fff; border-radius:5px;">

<!---The main row/column body. --->
<div class="row no-gutters">

     <!--- your image, and description box! --->
    <div class="col">
        <a href="https://toyhou.se/rikatoola"><img src="URL" style="height:305px; width:353px;"></a>

        <div class="card p-1 m-2" style="background-color: #e0a375; height:56px;">
            <p style="text-align:center;">
                <span style="color: #ad4e31;">
                   a very short paragraph (warriros wiki style) of your character. tip: make the image 353x305.
                   </span>
            </p>
            </div>
    </div>

     <!--- the main information box. --->
    <div class="col">
        <div class="card p-2 m-2" style="background-color: #e0a375; height:300px; width:600px;">
            <p>
                <span class="p-1 pull-left" style="color: #ad4e31; font-size:20px;">
                    CATNAME.
                    </span>

                <span class="p-1 pull-right" style="color: #c26144; font-size:20px;">
                    cat rank of blankclan. prn/prn. orientation.
                    </span>
            </p>

            <div class="row no-gutters">


         <!---traits! --->
          <div class="col">
            <div class="card p-2 m-1" style="background-color: #fad3b6;">
            <p><i class="fad fa-plus" style="color: #ad4e31;"></i>
               <span style="color: #c26144;">
                   trait
                   </span>
            </p>
            </div>
          </div>

          <div class="col">
            <div class="card p-2 m-1" style="background-color: #fad3b6;">
            <p><i class="fad fa-plus" style="color: #ad4e31;"></i>
               <span style="color: #c26144;">
                   trait
                   </span>
            </p>
            </div>
          </div>

          <div class="col">
            <div class="card p-2 m-1" style="background-color: #fad3b6;">
            <p><i class="fad fa-slash" style="color: #ad4e31;"></i>
               <span style="color: #c26144;">
                   trait
                   </span>
            </p>
            </div>
          </div>

          <div class="col">
            <div class="card p-2 m-1" style="background-color: #fad3b6;">
            <p><i class="fad fa-minus" style="color: #ad4e31;"></i>
               <span style="color: #c26144;">
                   trait
                   </span>
            </p>
            </div>
          </div>

          <div class="col">
            <div class="card p-2 m-1" style="background-color: #fad3b6;">
            <p><i class="fad fa-minus" style="color: #ad4e31;"></i>
               <span style="color: #c26144;">
                   trait
                   </span>
            </p>
            </div>
          </div>

        </div>

             <!--- character quote/song or lyrics --->
            <div class="card p-2 m-1" style="background-color: #fad3b6;">
                <p style="text-align:center;"><i class="fad fa-quote-left" style="color: #c26144; font-size:12px;"></i>

               <span style="color: #c26144;">
                   a short character or lyric/song quote. looks best like this!
                   </span>

               <i class="fad fa-quote-right" style="color: #c26144; font-size:12px;"></i>
            </p>
            </div>

             <!--- character biography/etc --->
            <div class="card p-2 m-1" style="background-color: #fad3b6; height:150px;overflow-y:scroll;">
                <p style="color: #c26144; text-align:center;">
                    A biography of your character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lobortis nibh pretium sem maximus pretium. Quisque ut mauris eget arcu viverra semper sed eget justo. Mauris odio purus, molestie non metus non, consectetur porttitor libero. Aliquam pulvinar, justo in lacinia mattis, diam metus dictum libero, eget efficitur neque nisl eget dui. Maecenas ac orci eu dui pretium porttitor a eu nisl. Integer finibus cursus purus. Duis eros odio, lacinia quis felis in, vehicula eleifend purus. Maecenas tincidunt arcu volutpat, pulvinar elit in, euismod eros. Morbi eu leo tincidunt, malesuada lectus id, congue nunc. Morbi gravida tortor quis ante auctor ullamcorper. Sed odio magna, rhoncus sed ultrices at, condimentum et neque. Vestibulum sed lectus ornare, euismod velit eget, bibendum eros. Praesent hendrerit ligula eu velit volutpat suscipit euismod eget risus.
                </p>
            </div>
        </div>

         <!--- the info panel. --->
        <div class="row no-gutters">

          <div class="col">
            <div class="card p-2 m-2" style="background-color: #e0a375; height45px;">
            <p>
               <i class="fad fa-heart pull-left" style="color: #c26144; font-size:26px;"></i>
               <span class="pull-right" style="color: #c26144;">
                   closed to romance.
                   </span>
            </p>
            </div>
          </div>

          <div class="col">
            <div class="card p-2 m-2" style="background-color: #e0a375; height:45px;">
            <p>
                <i class="fad fa-dice-d20 pull-left" style="color: #c26144; font-size:26px;"></i>
                <span class="pull-right" style="color: #c26144;">
                    closed to roleplay.
                    </span>
            </p>
            </div>
          </div>

          <div class="col">
            <div class="card p-2 m-2" style="background-color: #e0a375; height:45px;">
            <p>
                <i class="fad fa-comments pull-left" style="color: #c26144; font-size:26px;"></i>
                <span class="pull-right" style="color: #c26144;">
                    site preference.
                    </span>
            </p>
            </div>
          </div>

           <!--- my coding credits. DO NOT REMOVE. --->
          <div class="col-l">
            <div class="card p-2 m-2" style="background-color: #e0a375; height:45px;">
            <p>
                <a href="https://toyhou.se/bumblebree/characters"><i class="fad fa-code" style="color: #c26144; font-size:26px;"></i></a>
            </p>
            </div>
          </div>

        </div>
    </div>

</div>
</div>