Somni - User Profile Float Custom

<!-- CONTAINER DIV --- put your background pattern here
   ---- if you want to do one big image instead of a pattern, add this into the style tag-
   background-size:cover; background-position:center;

   -------------------------------------------------------------

   this layout has fully custom colors, you can modify the colors in the style tags to change the look
   the default focal/highlight color is #f58c9f
   the default font color is #212529

   --------------------------------------------------------------->
<div class="container-fluid shadow rounded border-0 p-lg-5 p-4 my-3"
style="background-image: url('BACKGROUND_PATTERN_URL_HERE');
background-repeat: repeat; background-attachment: fixed; background-color: transparent; border-radius: 16px; max-width: 1100px;">
   <div class="container-fluid p-xl-5 p-lg-4 p-md-3 p-0">
      <div class="row no-gutters justify-content-center align-items-center">
         <div class="col-lg-auto pl-lg-4 order-2">

            <!-- featured image ---- this will auto-size itself to fit in the space
               ---- you can adjust the max-height and max-width to control how big it can get --> <img class="d-block mx-auto" style="max-height: 650px; max-width: 350px; border-radius: 16px;"
			   src="IMAGE_URL_HERE" />

         </div>
         <div class="col-lg mb-lg-0 mb-4 order-1">

            <!--------- user content card -- this will auto-size itself to fit with the image ------------------------->
            <div class="rounded p-4" style="background: rgba(255,255,255,.85); color: #212529; border-radius: 16px;">

               <!---- your name or title here ----->
               <h1 class="text-center text-uppercase mb-1" style="color: #f58c9f; font-size: 2em; letter-spacing: 1px; font-weight: 500; font-family: verdana, arial, sans-serif;">
			   Your Name</h1>

               <!---- adjectives here -------------->
               <p class="text-center small mb-0" style="color: #212529; letter-spacing: 1.5px;">
                  gender . age . adj
               </p>

               <hr class="mt-2 mb-0 w-75 mx-auto" style="border-color: rgba(0, 0, 0, .125);" />
               <div class="py-3 text-justify">

                  <!-------- write content here -- this box grows with content -- i suggest keeping it concise -->
                  <p style="color: #212529; font-weight: 400;">This box will grow with content so 'tis up to you how big she gets. The image to the side can be any size- if the image is larger, the box will center itself. If the content box is taller, the image will center itself.</p>
                  <p style="color: #212529; font-weight: 400;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. </p>

               </div>
               <hr class="mt-0 w-75 mx-auto" style="border-color: rgba(0, 0, 0, .125);" />
               <p class="text-center mb-0" style="font-size: 1.5em;">

                  <!-- SOCIAL MEDIA LINKS-- i've included a bunch of common ones, you can erase links you do not need
                     ----- these use font awesome icons, you can edit the links to use other icons
                     --------------------------------------------------------------------------------->

                  <a style="color: #f58c9f;" href="BLUESKY_LINK_HERE">
                  <span class="fab fa-bluesky mx-1" title="Bluesky">&nbsp;</span></a>

                  <a style="color: #f58c9f;" href="TOYHOUSE_LINK_HERE">
                  <span class="fas fa-house mx-1" title="Toyhouse">&nbsp;</span></a>

                  <a style="color: #f58c9f;" href="TUMBLR_LINK_HERE">
                  <span class="fab fa-tumblr mx-1" title="Tumblr">&nbsp;</span></a>

                  <a style="color: #f58c9f;" href="DEVIANTART_LINK_HERE">
                  <span class="fab fa-deviantart mx-1" title="Deviantart">&nbsp;</span></a>

                  <a style="color: #f58c9f;" href="FURAFFINITY_LINK_HERE">
                  <span class="fas fa-paw mx-1" title="Furaffinity">&nbsp;</span></a>

                  <a style="color: #f58c9f;" href="CARRD_LINK_HERE">
                  <span class="fas fa-id-card mx-1" title="Carrd">&nbsp;</span></a>

                  <a style="color: #f58c9f;" href="COMMISSIONS_LINK_HERE">
                  <span class="fas fa-palette mx-1" title="Commissions">&nbsp;</span></a>

                  <!-- CREDIT FOR PROFILE ART -- if you drew the art yourself, you can erase this! -->
                  <a style="color: #f58c9f;" href="ART_CREDIT_HERE">
                  <span class="fas fa-image mx-1" title="Art Credit">&nbsp;</span></a>

                  <!-- CODING CREDIT -- please leave this here! -->
                  <a style="color: #f58c9f;" href="https://somnivores.com/user/Pinky"><span class="fas fa-code mx-1" title="HTML Credit">&nbsp;</span></a>

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