F2U Floral

<!----------------------------------------------------------------
      FLORAL - Character Profile
      Profile by HTMLobster (noll)


      TOS:
      Do not remove my credit. You may edit it, however.
      You may edit code/frankenstein with others as long as their TOS allows!
      Turn off WYSIWYG and turn on Code Editor.
      Ask me if you want to redistribute edits. Must be F2U.
------------------------------------------------------------------>
<div class="container" style="max-width:500px; top:50px; margin-bottom:50px;">
  <div class="card card-outline-primary" style="transform:rotate(1deg);">
    <div class="card card-outline-primary h-100" style="transform:rotate(-2deg);">
      <!-- side flowers -->
      <div style="position:absolute; margin-left:-35px; margin-top:-65px; height:145px; width:150px; background:url(https://i.imgur.com/VzCwcoi.png) center; background-size:cover; z-index:2;">
      </div>
      <div style="position:absolute; right:0; bottom:0; margin-right:-30px; margin-bottom:-50px; height:168px; width:150px; background:url(https://i.imgur.com/l1mFwJ2.png) center; background-size:cover; z-index:2;">
      </div>
      <div style="transform:rotate(1deg);">
        <div class="p-3 px-4 px-sm-3">
          <!-- name heading -->
          <h1 class="card card-outline-secondary rounded-0 text-center text-uppercase font-weight-light display-4 text-secondary px-5" style="border-left:0; border-right:0;">Character Name</h1>
        </div>
        <div class="px-4 pb-3">
          <div class="overflow-auto py-1 px-4" style="height:397px;">
            <div class="float-sm-right justify-content-center mb-2 mb-sm-0 ml-2">
              <div class="card card-outline-primary" style="transform:rotate(2deg);">
                <div class="card card-outline-primary h-100 p-1" style="transform:rotate(-4deg);">
                  <!-- side image - 130px width, square image looks best! -->
                  <img class="rounded" style="transform:rotate(2deg); max-width:130px;" alt="A combination of dark blue and light blue hydrangea flowers blooming." src="https://i.imgur.com/mpiuX9v.png?1">
                </div>
              </div>
            </div>
            <!-- description - will scroll! - copy and paste <i class="fal fa-flower-tulip mr-2 text-secondary"></i> before text for the flower icon -->
            <p><i class="fal fa-flower-tulip mr-2 text-secondary"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis consequat nunc, in blandit risus laoreet at. Suspendisse euismod pretium dignissim. Proin posuere, ligula sit amet bibendum sagittis, nulla tellus accumsan risus, at facilisis ex tortor sit amet ante.</p>
            <p><i class="fal fa-flower-tulip mr-2 text-secondary"></i> Aliquam fringilla aliquet nunc, in pharetra neque condimentum eget. Nunc tristique tincidunt diam, nec consequat justo vestibulum pharetra. Morbi quis vehicula risus, lobortis venenatis lacus.</p>
            <p><i class="fal fa-flower-tulip mr-2 text-secondary"></i> Vivamus enim risus, ornare a dui eget, congue ullamcorper neque. Maecenas in commodo ipsum, non hendrerit enim. Sed id gravida odio, non hendrerit nisi. Cras mauris sem, placerat et eleifend nec, hendrerit id tellus. Sed et auctor ipsum, ut pharetra massa.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center mt-1">
    <a href="https://www.freepik.com/rawpixel-com" data-toggle="tooltip" title="roses by rawpixel.com"><i class="fal fa-image"></i></a>&nbsp; <a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="profile by noll"><i class="fal fa-code"></i></a>
  </div>
</div>