Code Output

<div class="container-fluid bg-faded p-3 my-5" style="border-radius: 1em; max-width: 1140px; box-shadow: 0 0 1em rgba(0,0,0,.2);">
  <!-- TEMPLATE AUTO-EDITED BY @SAFE HTTPS://TOYHOU.SE/SAFE || TEMPLATES GIVEN WITH EXPLICIT PERMISSION BY AUTHOR. -->
  <div class="row no-gutters">
    <div class="col-lg-3 push-lg-9 mb-3">
      <div class="card border-0 h-100 pt-3 px-md-2 px-3 pb-md-0 pb-2" style="border-radius: 1em; font-size: 10.5pt;">
            <!----------- avatar -- use a 200 x 200 image -------------------------->
            <img src="/img/placeholder.png"
            class="d-block bg-faded p-2 mx-auto mb-3 rounded-circle" style="max-height:210px;">
            
            <!-------- stats --------------------------------------->
            <div class="row no-gutters">
                <div class="col-6 text-right text-uppercase text-muted pr-1" style="letter-spacing: 1px;">
                  Name <i class="fal fa-angle-double-right fa-fw"></i></div>
                <div class="col-6 mb-2">
                  Name</div>
  
                <div class="col-6 text-right text-uppercase text-muted pr-1" style="letter-spacing: 1px;">
                  Age <i class="fal fa-angle-double-right fa-fw"></i></div>
                <div class="col-6 mb-2">
                  much too old</div>
  
                <div class="col-6 text-right text-uppercase text-muted pr-1" style="letter-spacing: 1px;">
                  Gender <i class="fal fa-angle-double-right fa-fw"></i></div>
                <div class="col-6 mb-2">
                  he/him</div>
                  
                <div class="col-6 text-right text-uppercase text-muted pr-1" style="letter-spacing: 1px;">
                  Height <i class="fal fa-angle-double-right fa-fw"></i></div>
                <div class="col-6 mb-2">
                tall</div>
  
                <div class="col-6 text-right text-uppercase text-muted pr-1" style="letter-spacing: 1px;">
                  Race <i class="fal fa-angle-double-right fa-fw"></i></div>
                <div class="col-6 mb-2">
                or species</div>
  
                <div class="col-6 text-right text-uppercase text-muted pr-1" style="letter-spacing: 1px;">
                  Role <i class="fal fa-angle-double-right fa-fw"></i></div>
                <div class="col-6 mb-2">
                Role</div>
                  
                <div class="col-6 text-right text-uppercase text-muted pr-1" style="letter-spacing: 1px;">
                  Demeanor <i class="fal fa-angle-double-right fa-fw"></i></div>
                <div class="col-6 mb-2">
                or something</div>
  
                <div class="col-6 text-right text-uppercase text-muted pr-1" style="letter-spacing: 1px;">
                  Theme <i class="fal fa-angle-double-right fa-fw"></i></div>
                <div class="col-6 mb-2">
                  <!-- link a song here -->
                  <a href="https://toyhou.se/" target="_BLANK"><i class="fas fa-music-alt fa-fw"></i><i class="fas fa-music fa-fw"></i><i class="fas fa-music-alt fa-fw"></i></a></div>
                  <!-- credit -- pls leave this -------->
                <div class="col-6 text-right text-uppercase text-muted pr-1" style="letter-spacing: 1px;">
                  HTML <i class="fal fa-angle-double-right fa-fw"></i></div>
                <div class="col-6 mb-2">
                  @eggy</div>
                  
            </div>
          </div>
    </div>
    <div class="col-lg-9 pull-lg-3 pr-md-3 mb-3">
      <div class="row no-gutters">
        <div class="col-12 mb-3">
          <div class="card border-0 p-3" style="border-radius: 1em;"><h1 class="display-4 text-primary mb-0">
            <!-- title block -- you can change the icon -- uses font awesome icons -->
            <i class="fal fa-crown fa-fw"></i> Title here</h1></div>
        </div>
        
        <div class="col-md-5 mb-md-0 mb-3">
          <div class="card border-0 h-100 modal-open" style="border-radius: 1em;">
        <!------ FOCAL IMAGE --- will scale & crop with screen -- focus in top & center of image ----------->
          <div style="background-image: url(/img/placeholder-solid.png); 
          background-size: cover; background-position: top center; min-height: 400px;" class="h-100"></div>
      </div>
        </div>
        <div class="col-md-7 pl-md-3">
          <!--- about block -- will scroll when filled --->
          <div class="card border-0 pt-3 px-3 pb-1" style="border-radius: 1em; font-size: 10pt; height: 450px; overflow:auto;">
              <h4 class="text-uppercase text-muted" style="letter-spacing:1px; font-weight: 300;"><i class="fal fa-bookmark mr-1"></i>About</h4>
              <p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Mauris varius id magna vitae ullamcorper. In gravida libero consectetur, lobortis nisl sit amet, pellentesque ligula. Suspendisse tincidunt feugiat posuere. Duis dui erat, accumsan a aliquam eu, efficitur a tortor. Nunc molestie, leo in commodo aliquam, tellus augue tempor velit, non placerat ex sem non nisi.</p>
              <h4 class="text-uppercase text-muted" style="letter-spacing:1px; font-weight: 300;"><i class="fal fa-bookmark mr-1"></i>Trivia</h4>
              <ul>
                <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li class="mb-2">Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit.</li>
              </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card border-0 p-3" style="border-radius: 1em;"><p class="text-primary text-center" style="letter-spacing: 1px;">
    <i class="fal fa-quote-left fa-fw mr-1 pull-left"></i><span>
    <!-- quote line here --------->
    Write a quote or tagline here 
    </span><i class="fal fa-quote-right fa-fw ml-1 pull-right"></i></p></div>
  <!-- TEMPLATE AUTO-EDITED BY @SAFE HTTPS://TOYHOU.SE/SAFE || TEMPLATES GIVEN WITH EXPLICIT PERMISSION BY AUTHOR. -->
  </div>