Freebie LIl Bit

<div class="container card p-2 bg-faded" style="max-width: 700px;">
    <div class="card p-3" style="border-style:dashed;">

      <!----------- TOP TITLE BLOCk ------------------------------->
        <h1 class="bg-faded p-2 rounded text-center text-uppercase" style="letter-spacing: 2px;">
          Title Here</h1>

        <div class="row justify-content-center">
            <div class="col-md-5 mb-2">
              <!--------------- AVATAR IMAGE -- USE A 200 x 200 IMAGE ---------------------->
                <img src="IMG_URL"
		class="d-block mx-auto mt-1 rounded-circle" style="max-height: 200px;">
            </div>

            <div class="col-md-7 col-sm-10 mb-3">
              <!--------------- BASICS ---------------------------------------------------->
                <div class="row">
                    <div class="col-12">
                        <span class="text-uppercase text-muted" style="letter-spacing:1px;">Name</span>
                        <span class="pull-right">Content</span></p>
                        <hr class="my-2">
                    </div>

                    <div class="col-12">
                        <span class="text-uppercase text-muted" style="letter-spacing:1px;">Age</span>
                        <span class="pull-right">Content</span></p>
                        <hr class="my-2">
                    </div>

                    <div class="col-12">
                        <span class="text-uppercase text-muted" style="letter-spacing:1px;">Gender</span>
                        <span class="pull-right">Content</span></p>
                        <hr class="my-2">
                    </div>

                    <div class="col-12">
                        <span class="text-uppercase text-muted" style="letter-spacing:1px;">Race</span>
                        <span class="pull-right">(or species)</span></p>
                        <hr class="my-2">
                    </div>

                    <div class="col-12">
                        <span class="text-uppercase text-muted" style="letter-spacing:1px;">Role</span>
                        <span class="pull-right">Content</span></p>
                        <hr class="my-2">
                    </div>

                    <div class="col-12">
                        <span class="text-uppercase text-muted" style="letter-spacing:1px;">Value</span>
                        <span class="pull-right">$$$</span></p>
                    </div>
                </div>
            </div>
        </div>

        <!----------- ABOUT TITLE BLOCk ------------------------------->
        <h1 class="bg-faded p-2 rounded text-center text-uppercase" style="letter-spacing: 2px;">
          About</h1>

        <!----------- MAIN CONTENT ------------------------------->
        <div class="row">
            <div class="col-12 mb-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id tristique metus, at malesuada elit. Sed fermentum purus et odio tempor congue. Cras vestibulum porta efficitur. Morbi vel turpis at magna lobortis dapibus at vitae ante. Mauris faucibus velit et elementum rutrum. Morbi ac bibendum nibh. Integer interdum pharetra ligula, non dignissim dui fermentum varius. Aliquam sed eros sed nisl bibendum facilisis at et augue. Maecenas luctus risus ante, ac egestas lacus suscipit ut. Etiam eu urna velit. Ut vitae augue quam. Vivamus ex nisi, suscipit non nisl id, rutrum condimentum velit. Aenean vel ante pulvinar, bibendum lacus eu, euismod ex.</p>
            </div>
        </div>

        <!----------- QUOTE SECTION ------------------------------->
        <div class="bg-faded p-2 rounded mb-1"></div>

        <h1 class="text-center text-muted mt-2" style="letter-spacing:1px; font-weight: 400;">
           "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        </h1>

    </div>
</div>
<!-------- CREDIT ----------------------------------->
<div class="container" style="max-width: 700px;">
    <p class="text-right small text-muted pt-1">HTML by @Pinky</p>
</div>