touch tone telephone

<!--
happy leap day!
colors:
main bg: #cc0f08
main border: #850418
text: #fff
pfp border: #dbb17d
section borders: #660525
section backgrounds: #9c0c20

control + f (if on not mac) / command + f (if on mac) for easy changes!
-->

<div class="col-md-6 col-sm-12 mx-auto px-0">
    <div class="col-12">

        <div class="p-2" style="background: #cc0f08; border-radius: 10px; border: #850418 solid 4px; border-top: none">

            <div class="row no-gutters">

            <!-- profile picture -->

            <!-- you heard the code give it that image url -->
            <div class="p-1 mt-n5 mb-2 col-auto mx-auto" style="height: 150px; background-image: url(IMGURLHERE); width: 150px; background-size: cover; border: 1px solid #dbb17d">
                <div class="w-100 h-100 align-items-end" style="border: 2px solid #dbb17d">

                    <!-- little decor icon, fontawesome.com if you want sumn diff -->
                    <i class="fas fa-phone mb-n3 ml-n3" style="font-size: 50px; color: #fff"></i>

                </div>
            </div>

            <!-- buttons -->

            <div class="row no-gutters pl-2 col-md col-sm-12" style="color: white">

                <!-- button 1 -->

                <div class="col p-1 text-center mx-1 align-items-center justify-content-center" style="border: #660525 3px solid; border-radius: 5px; border-top: none; background: #9c0c20; line-height: 100%">

                <div>
                <span style="font-family: impact">NAME</span>

                <!-- if this is too long itll expand, i reccomend making the font smaller but you can keep it as is lol -->
                <p style="font-family: trebuchet ms">full name</p>
                </div>

                </div>

                <!-- button 2 -->

                <div class="col p-1 text-center mx-1 align-items-center justify-content-center" style="border: #660525 3px solid; border-radius: 5px; border-top: none; background: #9c0c20; line-height: 100%">

                <div>
                <span style="font-family: impact">AGE</span>

                <!-- gimme the numbahs doc -->
                <p style="font-family: trebuchet ms">number</p>
                </div>

                </div>

                <!-- button 3 -->

                <div class="col p-1 text-center mx-1 align-items-center justify-content-center" style="border: #660525 3px solid; border-radius: 5px; border-top: none; background: #9c0c20; line-height: 100%">

                <div>
                <span style="font-family: impact">SPECIES</span>

                <!-- if i were filling this out for myself, i would put human -->
                <p style="font-family: trebuchet ms">animal</p>
                </div>

                </div>

                <!-- divider -->
                <hr class="w-100 m-0" style="border: 0px">

                <!-- button 4 -->

                <div class="col p-1 text-center mx-1 align-items-center justify-content-center" style="border: #660525 3px solid; border-radius: 5px; border-top: none; background: #9c0c20; line-height: 100%">

                <div>
                <span style="font-family: impact">GENDER</span>

                <!-- can b whatever -->
                <p style="font-family: trebuchet ms">gender</p>
                </div>

                </div>

                <!-- button 5 -->

                <div class="col p-1 text-center mx-1 align-items-center justify-content-center" style="border: #660525 3px solid; border-radius: 5px; border-top: none; background: #9c0c20; line-height: 100%">

                <div>
                <span style="font-family: impact">PRONOUNS</span>

                <!-- i use any! -->
                <p style="font-family: trebuchet ms">prns/prns</p>
                </div>

                </div>

                <!-- button 6 -->

                <div class="col p-1 text-center mx-1 align-items-center justify-content-center" style="border: #660525 3px solid; border-radius: 5px; border-top: none; background: #9c0c20; line-height: 100%">

                <div>
                <span style="font-family: impact">SEXUALITY</span>

                <!-- who do you likeeee -->
                <p style="font-family: trebuchet ms">things</p>
                </div>

                </div>

            </div>

            </div>

            <!-- bottom part -->

            <div class="row no-gutters mt-2">


                <!-- part 1 -->
                <div class="col-md-7 col-sm-12 mb-2 d-block d-md-flex flex-column" style="background: #9c0c20; border: 3px solid #660525; border-radius: 5px; border-top: 0px; color: #fff; max-height: 150px; font-family: trebuchet ms; text-align: justify; overflow-x: hidden">

                    <div class="p-2 align-items-center" style="background: #660525; font-family: impact; position: sticky; top: 0"><i class="fas fa-info-square mr-2"></i> ABOUT</div>

                    <!-- can be as long as you want tbh i do not mind. add more <p> tags to make more text intends -->
                    <div class="overflow-auto p-1" style="max-height: ; text-indent: 2em;">
                        <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>
                </div>


                <!-- part 2 -->
                <div class="col ml-md-3 ml-md-0 mb-2 d-block d-md-flex flex-column" style="background: #9c0c20; border: 3px solid #660525; border-radius: 5px; border-top: 0px; color: #fff; max-height: 150px; font-family: trebuchet ms; text-align: justify; overflow-x: hidden">

                    <div class="p-2 align-items-center col" style="background: #660525; font-family: impact; position: sticky; top: 0"><i class="fas fa-info-square mr-2"></i> TRIVIA</div>

                    <!-- to add more you just add more <li>s above the </ul>, and what i put as placeholder is true i do hate writing these sections because i cant just lorem ipsum it up -->
                    <div class="overflow-auto p-1" style="flex: 1 1 100px; min-height: 100px; overflow-y: auto;">
                        <ul class="px-3">
                            <li>au</li>
                            <li>awoooo</li>
                            <li>man idk what im doing</li>
                            <li>i hate filling trivia sections i have to actually think of shit to say</li>
                            <li>its really annoying</li>
                        </ul>
                    </div>
                </div>

            </div>

            <!-- bottom part: quote -->
            <div class="align-items-center col px-0" style="color: #fff">

             <div class="col-auto text-left"><i class="fas fa-quote-left"></i></div>

             <!-- can be as long as you want idgaf -->
             <div class="col text-center text-uppercase" style="font-family: impact">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
             <div class="col-auto text-right mt-auto"><i class="fas fa-quote-right"></i></div>

            </div>

        </div>

        <!-- credit dont remove -->
        <a style="color: #cc0f08" href="/micro-wave"><i class="fas fa-microwave"></i></a>

    </div>
</div>