Freebie - Soft HTML

<div class="card card-block mb-5">
  <h1>Title Here</h1>

  <div class="row no-gutters">
  <div class="col-md-5 order-md-2 mb-md-0 mb-4">
    <!-- focal image --- i left the css inline so you can customize it ---------------------
    --- to make a chibi fit in this space, change the background-size to 'contain' --------->
    <div style="background-image: url('IMG_URL');
    background-size: cover; background-position:center; background-repeat: no-repeat; min-height: 380px;" class="h-100 rounded"></div>
  </div>
  <div class="col-md-7 pr-md-3 order-md-1">
  <div class="p-md-3 h-100">
    <!-- intro stats ----------------------------------------------------------------->
    <div class="row no-gutters">
      <div class="col-6 pr-1 mb-3">
        <div class="stat-title">name</div>
        <div class="pl-3">content content</div>
      </div>

      <div class="col-6 pl-1 mb-3">
        <div class="stat-title">gender</div>
        <div class="pl-3">content content</div>
      </div>

      <div class="col-6 pr-1 mb-3">
        <div class="stat-title">age</div>
        <div class="pl-3">content content</div>
      </div>

      <div class="col-6 pl-1 mb-3">
        <div class="stat-title">height</div>
        <div class="pl-3">content content</div>
      </div>

      <div class="col-6 pr-1 mb-3">
        <div class="stat-title">race</div>
        <div class="pl-3">content content</div>
      </div>

      <div class="col-6 pl-1 mb-3">
        <div class="stat-title">sexuality</div>
        <div class="pl-3">content content</div>
      </div>

      <div class="col-6 pr-1 mb-3">
        <div class="stat-title">role</div>
        <div class="pl-3">what they do</div>
      </div>

      <div class="col-6 pl-1 mb-3">
        <div class="stat-title">demeanor</div>
        <div class="pl-3">content content</div>
      </div>

      <div class="col-6 pr-1 mb-3">
        <div class="stat-title">gemstone</div>
        <div class="pl-3">content content</div>
      </div>

      <div class="col-6 pl-1 mb-3">
        <div class="stat-title">flower</div>
        <div class="pl-3">content content</div>
      </div>

      <div class="col-6 pr-1 mb-3">
        <div class="stat-title">theme</div>
        <div class="pl-3">
          <a href="YOUTUBE_URL" class="text-default">
            <i class="fab fa-youtube fa-fw" /> song name
          </a>
        </div>
      </div>

      <div class="col-6 pl-1 mb-3">
        <div class="stat-title">owner</div>
        <div class="pl-3">
          <a href="/YOUR_USERNAME" class="text-default">your name</a>
        </div>
      </div>

      <div class="col-6 pr-1 mb-md-0 mb-3">
        <div class="stat-title">designer</div>
        <div class="pl-3">
          <a href="DESIGNER_URL" class="text-default">designer name</a>
        </div>
      </div>

      <div class="col-6 pl-1">
        <div class="stat-title">css</div>
        <div class="pl-3">
          <a href="/Pinky" class="text-default">Pinky</a>
        </div>
      </div>


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

<div class="row">
  <div class="col-md-6 mb-5">
   <div class="card card-block h-100">
     <!-- traits list ----------------------------------------------------------------->
    <h1>Traits</h1>
    <ul class="mb-0 pl-4">
      <li class="mb-1">like key personality traits</li>
      <li class="mb-1">two</li>
      <li class="mb-1">three</li>
      <li class="mb-1">four</li>
      <li class="mb-1">five</li>
    </ul>
    <!-- likes list ----------------------------------------------------------------->

    </div>
  </div>
  <div class="col-md-6 mb-5">
    <div class="card card-block h-100">
    <h1>Likes</h1>
    <ul class="mb-0 pl-4">
      <li class="mb-1">list things they like</li>
      <li class="mb-1">two</li>
      <li class="mb-1">three</li>
      <li class="mb-1">four</li>
      <li class="mb-1">five</li>
    </ul>
    </div>
  </div>
</div>

<div class="card card-block mb-5"><div>
  <!-- optional focal image -- you can adjust the height -- just delete if you dont wanna use ---->
  <img src="IMG_URL" class="float-left mr-2 rounded hidden-sm-down"
  style="max-height: 300px;">

  <h1>Trivia</h1>
  <ul class="mb-0 pl-4 modal-open">
      <li class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li class="mb-1">Suspendisse a felis molestie, porttitor est eget, euismod mauris.</li>
      <li class="mb-1">Integer fermentum est vitae dui pretium fermentum.</li>
      <li class="mb-1">Fusce quis velit vel sem pellentesque iaculis congue non lorem.</li>
      <li class="mb-1">Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus.</li>
    </ul>
</div></div>

<div class="card card-block mb-5"><div>
  <h1>About</h1>
  <!-- optional focal image -- you can adjust the height -- just delete if you dont wanna use ---->
  <img src="IMG_URL" class="float-right ml-2 rounded hidden-sm-down"
  style="max-height: 400px;">

  <p>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. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. Fusce sit amet lectus nec massa auctor aliquam et molestie metus. Sed at est in ante egestas iaculis. Nullam varius gravida ligula nec malesuada.</p>

  <p class="stat-title mb-1"><i class="fas fa-bookmark fa-fw" />Subheader</i></p>

  <p>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. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. Fusce sit amet lectus nec massa auctor aliquam et molestie metus. Sed at est in ante egestas iaculis. Nullam varius gravida ligula nec malesuada.</p>
</div></div>

<div class="card card-block pb-0">
  <h1>Links</h1>
  <div class="row">
    <div class="col-md-4 mb-4 text-center">

      <img src="IMG_URL"
      class="d-block mx-auto mb-3 rounded" style="max-height: 200px;">

      <p><a href="CHARACTER_LINK" class="btn btn-primary mb-1">
        Name
      </a>
      <br><i class="text-muted">relationship</i></p>
      <p>Write some content here if you like</p>
    </div>

    <div class="col-md-4 mb-4 text-center">

      <img src="IMG_URL"
      class="d-block mx-auto mb-3 rounded" style="max-height: 200px;">

      <p><a href="CHARACTER_LINK" class="btn btn-primary mb-1">
        Name
      </a>
      <br><i class="text-muted">relationship</i></p>
      <p>Write some content here if you like</p>
    </div>

    <div class="col-md-4 mb-4 text-center">

      <img src="IMG_URL"
      class="d-block mx-auto mb-3 rounded" style="max-height: 200px;">

      <p><a href="CHARACTER_LINK" class="btn btn-primary mb-1">
        Name
      </a>
      <br><i class="text-muted">relationship</i></p>
      <p>Write some content here if you like</p>
    </div>
  </div>
</div>