and stuff html

<!--- and stuff by onethird
thank you for using! rules are here: https://toyhou.se/~forums/16.htmlcss-graphics/241166.-onethird-s-f2u-codes-

--->
<div class="container p-1" style="max-width:600px; font-size:13px;">
    <div class="card rounded-0 border-left-0 border-right-0 border-top-0 py-1" style="max-height:30px; background:transparent;">
        <h3 class="text-warning" style="letter-spacing:2px;">NAME</h3>
    </div>
    <div class="row no-gutters">
        <div class="col-lg-8">
            <div class="card  border-left-0 border-right-0 border-top-0 rounded-0 px-2 mb-1" style="height:150px; background:transparent;">

            <!--- basic info --->
                <div class="justify-content-between">
                <p class="font-italic" style="letter-spacing:2px;">age</p>
                <p>content</p>
                </div>
                 <div class="justify-content-between">
                <p class="font-italic" style="letter-spacing:2px;">gender</p>
                <p>content</p>
                </div>
                 <div class="justify-content-between">
                <p class="font-italic" style="letter-spacing:2px;">orient.</p>
                <p>content</p>
                </div>
                 <div class="justify-content-between">
                <p class="font-italic" style="letter-spacing:2px;">race</p>
                <p>content</p>
                </div>
            </div>
        </div>

        <!--- image --->
        <div class="col-lg-4">
            <div class="card rounded-0 border-0 mx-auto" style="height:150px; background:url(IMGLINK); background-size:cover; background-position:center;"></div>
        </div>
    </div>

    <!--- personality --->
    <div class="card rounded-0 border-left-0 border-right-0 border-top-0 py-1 mt-1" style="max-height:30px; background:transparent;">
        <h3 class="text-warning" style="letter-spacing:2px;">PERSONALITY</h3>
    </div>
    <div class="card mt-1 rounded-0 border-left-0 border-right-0 border-top-0 px-1" style="background:transparent;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
    </div>

    <!--- history --->
    <div class="card rounded-0 border-left-0 border-right-0 border-top-0 py-1 mt-1" style="max-height:30px; background:transparent;">
        <h3 class="text-warning" style="letter-spacing:2px;">HISTORY</h3>
    </div>
    <div class="card mt-1 rounded-0 border-left-0 border-right-0 border-top-0 px-1" style="background:transparent;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
    </div>

    <!--- misc. --->
     <div class="card rounded-0 border-left-0 border-right-0 border-top-0 py-1 mt-1" style="max-height:30px; background:transparent;">
        <h3 class="text-warning" style="letter-spacing:2px;">MISCELLANEOUS</h3>
    </div>
    <div class="card mt-1 rounded-0 border-left-0 border-right-0 border-top-0 px-1 " style="background:transparent;">
        <div class="row no-gutters">
            <div class="col-lg-12 px-1">

                <!--- trivia --->
                <h4 style="letter-spacing:2px;">TRIVIA</h4>
                <ul class="list-unstyled">
                           <li><i class="fas fa-chevron-right text-muted pr-1"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eleifend.</li>
                           <li><i class="fas fa-chevron-right text-muted pr-1"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eleifend.</li>
                            <li><i class="fas fa-chevron-right text-muted pr-1"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eleifend.</li>
                </ul>
            </div>

            <!--- likes & dislikes --->
            <div class="col-md-6 px-1">
                <h4 style="letter-spacing:2px;">LIKES</h4>
                <p>content, content, content, content</p>
            </div>
            <div class="col-md-6 px-1">
                <h4 style="letter-spacing:2px;">DILIKES</h4>
                <p>content, content, content, content</p>
            </div>
        </div>
    </div>

    <!--- relationships (best if names are kept 1 line)  --->
    <div class="card rounded-0 border-left-0 border-right-0 border-top-0 py-1 mt-1" style="max-height:30px; background:transparent;">
        <h3 class="text-warning" style="letter-spacing:2px;">RELATIONSHIPS</h3>
    </div>
    <div class="card mt-1 rounded-0 border-left-0 border-right-0 border-top-0 px-1" style="background:transparent;">
        <div class="row no-gutters">

            <!--- relationship 1 --->
            <div class="col-lg-4">
                <div class="card rounded-0 border-left-0 border-right-0 border-top-0" style="background:transparent;">
                    <a href="URLLINK" class="text-body"><h4 class="text-center pt-1 px-1" style="letter-spacing:2px;">NAME</h4></a>
                </div>
                <p class="text-center px-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
            </div>

            <!--- relationship 2 --->
            <div class="col-lg-4">
                <div class="card rounded-0 border-left-0 border-right-0 border-top-0" style="background:transparent;">
                    <a href="URLLINK" class="text-body"><h4 class="text-center pt-1 px-1" style="letter-spacing:2px;">NAME</h4></a>
                </div>
                <p class="text-center px-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
            </div>

            <!--- relationship 3 --->
            <div class="col-lg-4">
                <div class="card rounded-0 border-left-0 border-right-0 border-top-0" style="background:transparent;">
                    <a href="URLLINK" class="text-body"><h4 class="text-center pt-1 px-1" style="letter-spacing:2px;">NAME</h4></a>
                </div>
                <p class="text-center px-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
            </div>
        </div>
    </div>
     <!--- credit, do not remove --->
    <div class="col-12 pt-1 text-right">
            <a class="text-warning" href="https://toyhou.se/onethird" data-toggle="tooltip" title="code by onethird"><i class="fas fa-code"></i></a>
        </div>
</div>