Notepad

<!--
    fal fa-heart >> Font Awesome heart icon
-->
<div class="row no-gutters">
    <!-- ABOUT -->
    <div class="pr-sm-3 col-sm">
        <!-- NAME -->
        <div class="bg-secondary w-75 mt-1">
            <h1 class="m-0 display-3"> Firstname Lastname </h1>
        </div>
        <!-- ABOUT -->
        <div class="m-1 mx-n2 p-2 card overflow-auto bio" style="height: 200px">
            <h2 class="title"><span><i class="fal fa-heart"></i>A</span>bout</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam vestibulum ipsum vel lacinia. Phasellus ac velit finibus, congue justo et, pellentesque sapien. Morbi nunc leo, cursus eu pulvinar tristique, posuere a justo. Duis egestas tincidunt neque ac cursus. Donec fermentum ipsum ut magna imperdiet, sed fringilla velit bibendum. Mauris ac orci ut justo iaculis feugiat id sed eros. Maecenas ut vestibulum augue. Maecenas sed tincidunt lectus, sit amet rhoncus arcu. </p>
            <p>Proin hendrerit ligula ut justo ultricies pretium elementum at ante. Morbi auctor in lorem ut semper. Morbi luctus pellentesque ipsum, non finibus libero porta ac. Sed consectetur purus sapien, sit amet egestas arcu porttitor in. Nulla et neque ligula. Aliquam posuere cursus est. Donec mollis lobortis ultrices. Quisque vestibulum placerat erat, a ornare lacus auctor a. Mauris sapien arcu, auctor id finibus et, faucibus eget purus. Sed molestie dapibus tortor nec tincidunt. Curabitur posuere nisi justo, eu feugiat sem volutpat in.</p>
        </div>
    </div>
    <!-- IMAGE -->
    <div class="col-sm-auto flex-column justify-content-center">
        <div class="m-n2 img-thumbnail color" style="background-color: #8FC7DB;">
            <i class="fal fa-heart fa-3x"></i>
        </div>

        <img src="//via.placeholder.com/500" class="m-n2 img-thumbnail mx-auto" style="max-height: 250px; max-width: 250px;">
    </div>

    <!-- DIVIDER -->
    <div class="mr-n2 ml-n1 p-2 col-12 bg-secondary" style="transform: rotate(-.3deg)"></div>

    <!-- BASICS -->
    <div class="col-12"> <div class="m-1 mx-n2 p-2 card">
        <h2 class="title"><span><i class="fal fa-heart"></i>B</span>asics</h2>
        <div id="basics" class="row no-gutters">
            <p class="col-sm-4"><strong>Name</strong> Information</p>
            <p class="col-sm-4"><strong>Age</strong> Information</p>
            <p class="col-sm-4"><strong>Gender</strong> Information</p>
            <p class="col-sm-4"><strong>Orientation</strong> Information</p>
            <p class="col-sm-4"><strong>Occupation</strong> Information</p>
            <p class="col-sm-4"><strong>Relationship</strong> Information</p>
        </div>
    </div> </div>

    <!-- STORY -->
    <div class="pb-2 col-md-8 col-sm-7"> <div class="m-1 mx-n1 p-2 card bio">
        <h2 class="title"><span><i class="fal fa-heart"></i>S</span>tory</h2>

        <div class="px-1 bg-secondary text-right w-25">
            <h1 class="mb-n1">Header</h1>
        </div>
        <p>This box will grow accordingly. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum malesuada mauris, pretium lacinia turpis rhoncus vel. Etiam eleifend nunc quam, non porttitor metus suscipit non. Suspendisse potenti. Nunc eget lectus nisi. Nullam porttitor posuere erat, non ullamcorper felis faucibus et. Vivamus id rhoncus tortor, eu euismod dui. Proin eu nibh in mauris consectetur tincidunt. Quisque ac lorem condimentum augue egestas vestibulum quis eu sapien.</p>
        <p>Duis porttitor ex ut ipsum pellentesque, sed faucibus ex tincidunt. Nullam sagittis lacinia maximus. Sed porttitor justo nisl, ac malesuada urna euismod a. Aliquam faucibus maximus felis ut faucibus.</p>

        <div class="px-1 bg-secondary text-right w-25">
            <h1 class="mb-n1">Header</h1>
        </div>
        <p>Integer ullamcorper nunc libero, vitae fermentum justo scelerisque id. Nunc imperdiet tellus non elit pharetra, sed dictum odio iaculis. Praesent vestibulum imperdiet purus et pretium. Praesent sed dolor vel enim consequat tempus non eget mauris. Phasellus et risus eget ipsum sodales pellentesque. Etiam eget enim diam. Fusce sed velit id elit accumsan accumsan et sed justo. Sed volutpat augue sed orci viverra, sed commodo eros mattis. Donec sed ultrices turpis. Duis mauris mauris, convallis vitae mi sit amet, aliquet consequat diam. </p>
    </div> </div>
    <!-- TRIVIA -->
    <div class="col-md-4 col-sm-5"> <div class="m-1 my-n1 p-2 card bio h-100">
        <h2 class="title"><span><i class="fal fa-heart"></i>T</span>rivia</h2>

        <ul class="m-0 pl-4">
            <li>This box will expand with the story box. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>Quisque scelerisque, ex ut bibendum dapibus, dui quam blandit enim, cursus facilisis tellus elit vitae turpis.</li>
            <li>Etiam egestas malesuada est, sed aliquet risus gravida et.</li>
            <li>Duis dignissim, dolor sit amet posuere tempor, mi tellus blandit nisl, non laoreet ante diam nec eros.</li>
            <li>Aliquam tincidunt nisi a ante eleifend elementum. Duis placerat quam sit amet velit mollis pharetra.</li>
        </ul>
    </div> </div>

    <!-- TRIVIA -->
    <div class="col-sm-4"> <div class="m-1 my-2 card bio overflow-auto" style="height: 450px">
        <div style="background-image: url('//via.placeholder.com/500'); background-position: center; background-size: cover;" class="h-100 w-100"></div>
    </div> </div>
    <!-- RELATONSHIPS -->
    <div id="links" class="pb-2 col-sm-8"> <div class="m-1 mx-n1 p-2 card bio overflow-auto" style="height: 460px">
        <h2 class="title"><span><i class="fal fa-heart"></i>R</span>elationships</h2>

        <!-- LINK -->
        <div>
            <h1 class="m-1 px-1 bg-secondary text-left w-50"><a href="">Name</a> . relationship </h1>
            <img src="//via.placeholder.com/200" class="m-2 float-left img-thumbnail char-img">

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis dui eget lectus rutrum euismod. Nam congue ex non placerat ornare. Praesent vel aliquet elit. Quisque cursus mauris ac risus pretium efficitur. Suspendisse quis gravida velit, ac vehicula urna. Sed porta tellus lacus, at luctus leo commodo eu.</p>
            <p>Vivamus et tortor feugiat arcu mattis egestas. In hac habitasse platea dictumst. Donec justo diam, sagittis ut metus ut, accumsan mollis dolor. Donec facilisis nec mi sit amet porttitor.</p>
        </div>
        <!-- LINK -->
        <div>
            <h1 class="m-1 px-1 bg-secondary text-right w-50"><a href="">Name</a> . relationship </h1>
            <img src="//via.placeholder.com/200" class="m-2 float-right img-thumbnail char-img">

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis dui eget lectus rutrum euismod. Nam congue ex non placerat ornare. Praesent vel aliquet elit. Quisque cursus mauris ac risus pretium efficitur. Suspendisse quis gravida velit, ac vehicula urna. Sed porta tellus lacus, at luctus leo commodo eu.</p>
            <p>Vivamus et tortor feugiat arcu mattis egestas. In hac habitasse platea dictumst. Donec justo diam, sagittis ut metus ut, accumsan mollis dolor. Donec facilisis nec mi sit amet porttitor.</p>
        </div>
        <!-- LINK -->
        <div>
            <h1 class="m-1 px-1 bg-secondary text-left w-50"><a href="">Name</a> . relationship </h1>
            <img src="//via.placeholder.com/200" class="m-2 float-left img-thumbnail char-img">

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis dui eget lectus rutrum euismod. Nam congue ex non placerat ornare. Praesent vel aliquet elit. Quisque cursus mauris ac risus pretium efficitur. Suspendisse quis gravida velit, ac vehicula urna. Sed porta tellus lacus, at luctus leo commodo eu.</p>
            <p>Vivamus et tortor feugiat arcu mattis egestas. In hac habitasse platea dictumst. Donec justo diam, sagittis ut metus ut, accumsan mollis dolor. Donec facilisis nec mi sit amet porttitor.</p>
        </div>

        <!-- ADD MORE ABOVE HERE - COPY LAST TWO LINKS FOR BEST EFFECT -->
    </div> </div>

    <!-- DIVIDER -->
    <div class="mr-n2 ml-n1 col-12 bg-secondary text-center" style="transform: rotate(.3deg)">
        <a href="/SparklyCodes" data-toggle="tooltip" title="HTML by SparklyCodes" style="color: inherit"><i class="fas fa-code"></i></a>
    </div>
</div>