toyhouse character sheet template

<div class="container-fluid px-0" style="max-width: 1250px; letter-spacing: .45px;">
    <div class="row">

      <!---------- left column --------------------------->
        <div class="col-lg-3 pr-lg-0 mb-3">
            <div class="card bg-faded h-100">
                <div class="card-header">
                  <!----------- header -------------------------------->
                    <h1 class="mb-0 text-uppercase" style="font-weight: 400; letter-spacing:1px;"><i class="fas fa-info-circle pull-right"></i>
                    Basics</h1></div>
                <div class="card-block pb-1">

                  <!----------- avatar -- use a 200 x 200 image -------------------------->
                    <img src="ICONIMGLINK"
                    class="d-block mx-auto mb-4 rounded-circle" style="max-height:200px; max-width: 200px;">

                    <!-------- stats --------------------------------------->
                    <div class="row no-gutters">
                        <div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><b>
                          name</b> <i class="fal fa-angle-double-right fa-fw"></i></div>
                        <div class="col-6 mb-2">
                          text</div>

                        <div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><b>
                          age</b> <i class="fal fa-angle-double-right fa-fw"></i></div>
                        <div class="col-6 mb-2">
                          text</div>

                        <div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><b>
                          gender</b> <i class="fal fa-angle-double-right fa-fw"></i></div>
                        <div class="col-6 mb-2">
                         text</div>

                        <div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><b>
                          race</b> <i class="fal fa-angle-double-right fa-fw"></i></div>
                        <div class="col-6 mb-2">
                          text</div>

                        <div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><b>
                          species</b> <i class="fal fa-angle-double-right fa-fw"></i></div>
                        <div class="col-6 mb-2">
                          text</div>

                        <div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><b>
                          theme</b> <i class="fal fa-angle-double-right fa-fw"></i></div>
                        <div class="col-6 mb-2">
                          <a href="SONG LINK" target="_BLANK">link a song</a></div>

                        <div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><b>
                          text</b> <i class="fal fa-angle-double-right fa-fw"></i></div>
                        <div class="col-6 mb-2">
                          text</div>

                        <div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><b>
                          text</b> <i class="fal fa-angle-double-right fa-fw"></i></div>
                        <div class="col-6 mb-2">
                          text</div>

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

        <!---------- center column --------------------------->
        <div class="col-lg-6 col-md-8 mb-3">
            <div class="card bg-faded">
                <div class="card-header">
                  <!----------- header -------------------------------->
                    <h1 class="mb-0 text-uppercase" style="font-weight: 400; letter-spacing:1px;"><i class="fas fa-book pull-right"></i>
                    About</h1></div>
                <div class="card-block pb-1" style="font-size: 10.5pt; height: 540px; overflow:auto;">

                    <p><center>text</center></p>

                    <p></p>

                    <p><center>text</center></p>

                    <p></p>

                    <p><center>text</center></p>

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

        <!---------- right column --------------------------->
        <div class="col-lg-3 col-md-4 pl-md-0 mb-3">
            <div class="card bg-faded h-100">
              <!------ FOCAL IMAGE --- will scale & crop with screen -- focus in top & center of image ----------->
                <div style="background-image: url(BANNERIMGLINK);
                background-size: cover; background-position: bottom left; min-height: 400px;" class="h-100"></div>
            </div>
        </div>
    </div>
    <p class="text-right small">HTML by @lowkeywicked</p>
</div>