Stor8

<!---
==== LoveHime character
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#dde6f1 - main box colors
#3a3e42 - main text
#ffffff - accent text
#d5f3f1 - top banner text shadow
#ffc1cc - top banner bottom border
#feecc5 - image borders
--->
<div class="mx-auto" style="max-width: 800px;">
  <!--- main background --->
  <div style="background: #ffe3e8; border-radius: 15px; color: #3a3e42; box-shadow: 0 0 3px rgba(0,0,0,0.3);" class="p-2">
    <div class="row no-gutters">
      <div class="col-12 p-2">
        <div class="row no-gutters" style="border-radius: 15px; overflow: hidden;">
          <div class="col-12">
            <!--- top banner image --->
            <div style="background-image: url('IMGURL'); background-size: cover; background-position: center; background-attachment: fixed; min-height: 200px; border-bottom: .5rem solid #ffc1cc;" class="bg-faded p-3 flex-column justify-content-end align-items-end">
              <!--- name --->
              <h1 class="display-3 font-weight-bold text-uppercase font-italic" style="color: #ffffff; text-shadow: 2px 2px #d5f3f1; letter-spacing: 2px;">Name Here</h1>
              <h5 class="font-italic">
                <i class="fas fa-quote-left mr-1" style="color: #d5f3f1; font-size: .5rem;"></i><i class="fas fa-quote-right mr-2" style="color: #ffffff; font-size: .5rem;"></i>
                <!--- quote --->
                <span>quote goes here</span>
              </h5>
              <div class="d-block d-md-none" style="height: 100px;"></div>
            </div>
          </div>
          <div class="col-md flex-column">
            <div class="rounded-circle p-2" style="background: #feecc5; margin: -100px auto; height: 200px; width: 200px; position: relative; z-index: 9;">
              <!--- profile picture --->
              <div style="background-image: url('IMGURL'); background-size: cover; background-position: center;" class="rounded-circle bg-faded h-100 w-100"></div>
            </div>
            <div class="flex-fill flex-column justify-content-between px-3 py-2" style="background: #dde6f1;">
              <div style="height: 100px;"></div>
              <!--- basic info --->
              <div class="justify-content-between align-items-end my-2">
                <h4 class="font-weight-bold text-uppercase font-italic mb-0">Name</h4>
                <span>content</span>
              </div>
              <!--- basic info --->
              <div class="justify-content-between align-items-end my-2">
                <h4 class="font-weight-bold text-uppercase font-italic mb-0">Name</h4>
                <span>content</span>
              </div>
              <!--- basic info --->
              <div class="justify-content-between align-items-end my-2">
                <h4 class="font-weight-bold text-uppercase font-italic mb-0">Name</h4>
                <span>content</span>
              </div>
              <!--- basic info --->
              <div class="justify-content-between align-items-end my-2">
                <h4 class="font-weight-bold text-uppercase font-italic mb-0">Name</h4>
                <span>content</span>
              </div>
              <!--- basic info --->
              <div class="justify-content-between align-items-end my-2">
                <h4 class="font-weight-bold text-uppercase font-italic mb-0">Name</h4>
                <span>content</span>
              </div>
              <!--- basic info --->
              <div class="justify-content-between align-items-end my-2">
                <h4 class="font-weight-bold text-uppercase font-italic mb-0">Name</h4>
                <span>content</span>
              </div>
              <!--- end of basic info --->
            </div>
          </div>
          <div class="col col-md-auto" style="min-width: 1px;"><div class="h-100" style="border-top: 1px solid #3a3e42; border-left: 1px solid #3a3e42;"></div></div>
          <div class="col-md-8 flex-column">
            <div class="px-3 py-2 flex-fill" style="background: #dde6f1;">
              <div class="justify-content-md-between align-items-md-end flex-md-row flex-column">
                <h1 class="display-4 font-weight-bold text-uppercase font-italic mb-0" style="letter-spacing: 2px;">About</h1>
                <span class="font-italic">
                  <!--- adjectives --->
                  <span class="mx-2">adjective</span><i class="fal fa-heart" style="font-size: .5rem;"></i>
                  <span class="mx-2">adjective</span><i class="fal fa-heart" style="font-size: .5rem;"></i>
                  <span class="mx-2">adjective</span>
                </span>
              </div>
              <hr class="mt-0 mb-2" style="border-top: 1px solid #3a3e42;" />
              <div class="overflow-auto" style="max-height: 300px;">
                <!--- about box --->
                <p>Cras sagittis neque id est laoreet, id tempor dui blandit. Nunc tempus accumsan velit, sit amet eleifend libero fermentum eu. Sed eu fringilla ante. Suspendisse nec sapien id mauris pellentesque auctor. Maecenas a enim et enim dictum consequat. Maecenas eleifend odio sed nisl maximus facilisis. Quisque eleifend, ex sed malesuada luctus, risus mauris bibendum neque, quis rhoncus leo nulla fermentum nisi. Nulla erat diam, suscipit nec risus ultrices, mollis viverra nisl.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--- likes box --->
      <div class="col-md-6 p-2">
        <div class="overflow-hidden">
          <div class="row no-gutters">
            <div class="col-4 justify-content-center align-items-center">
              <div class="p-2 rounded-circle w-100" style="background: #feecc5; position: relative; z-index: 9;">
                <!--- likes image --->
                <div style="background-image: url('IMGURL'); background-size: cover; background-position: center; position: relative; padding: 50% 0;" class="justify-content-center align-items-center rounded-circle w-100"><i class="fas fa-heart fa-3x" style="color: #ffffff; text-shadow: 2px 2px #d5f3f1; position: absolute;"></i></div>
              </div>
            </div>
            <div class="col-8">
              <div class="ml-md-n3 px-3 py-2"  style="border-radius: 15px; background: #dde6f1;">
                <h1 class="font-weight-bold text-uppercase font-italic mb-0" style="letter-spacing: 1px;">Likes</h1>
                <hr class="mt-0 mb-2" style="border-top: 1px solid #3a3e42;" />
                <ul class="list-unstyled mb-0">
                  <!--- list of likes --->
                  <li><i class="fas fa-heart mr-1" style="font-size: .5rem;"></i> Cras sagittis neque id est laoreet</li>
                  <li><i class="fas fa-heart mr-1" style="font-size: .5rem;"></i> Cras sagittis neque id est laoreet</li>
                  <li><i class="fas fa-heart mr-1" style="font-size: .5rem;"></i> Cras sagittis neque id est laoreet</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--- dislikes box --->
      <div class="col-md-6 p-2">
        <div class="overflow-hidden">
          <div class="row no-gutters">
            <div class="col-8">
              <div class="mr-md-n3 px-3 py-2"  style="border-radius: 15px; background: #dde6f1;">
                <h1 class="font-weight-bold text-uppercase font-italic mb-0" style="letter-spacing: 1px;">Dislikes</h1>
                <hr class="mt-0 mb-2" style="border-top: 1px solid #3a3e42;" />
                <ul class="list-unstyled mb-0">
                  <!--- list of dislikes --->
                  <li><i class="fas fa-heart-crack mr-1" style="font-size: .5rem;"></i> Cras sagittis neque id est laoreet</li>
                  <li><i class="fas fa-heart-crack mr-1" style="font-size: .5rem;"></i> Cras sagittis neque id est laoreet</li>
                  <li><i class="fas fa-heart-crack mr-1" style="font-size: .5rem;"></i> Cras sagittis neque id est laoreet</li>
                </ul>
              </div>
            </div>
            <div class="col-4 justify-content-center align-items-center">
              <div class="p-2 rounded-circle w-100" style="background: #feecc5;">
                <!--- dislikes image --->
                <div style="background-image: url('IMGURL'); background-size: cover; background-position: center; position: relative; padding: 50% 0;" class="justify-content-center align-items-center rounded-circle w-100"><i class="fas fa-heart-crack fa-3x" style="color: #ffffff; text-shadow: 2px 2px #d5f3f1; position: absolute;"></i></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--- images --->
      <div class="col-md-3 col-6 p-2">
        <div class="p-2" style="background: #feecc5; border-radius: 15px;">
          <!--- image --->
          <div style="background-image: url('IMGURL'); background-size: cover; background-position: center; padding-top: 100%; border-radius: 10px;" class="bg-faded"></div>
        </div>
      </div>
      <div class="col-md-3 col-6 p-2">
        <div class="p-2" style="background: #feecc5; border-radius: 15px;">
          <!--- image --->
          <div style="background-image: url('IMGURL'); background-size: cover; background-position: center; padding-top: 100%; border-radius: 10px;" class="bg-faded"></div>
        </div>
      </div>
      <div class="col-md-3 col-6 p-2">
        <div class="p-2" style="background: #feecc5; border-radius: 15px;">
          <!--- image --->
          <div style="background-image: url('IMGURL'); background-size: cover; background-position: center; padding-top: 100%; border-radius: 10px;" class="bg-faded"></div>
        </div>
      </div>
      <div class="col-md-3 col-6 p-2">
        <div class="p-2" style="background: #feecc5; border-radius: 15px;">
          <!--- image --->
          <div style="background-image: url('IMGURL'); background-size: cover; background-position: center; padding-top: 100%; border-radius: 10px;" class="bg-faded"></div>
        </div>
      </div>
      <!--- end of images --->
    </div>
  </div>
  <div class="text-center"><small>code by @8byte</small></div>
</div>