SUPER MARIO RPG SONG

<!--

#eee - background color
#222 - text color
black - border color

cmd/ctrl + f to change easily.

-->

<div class="container-fluid mx-auto" style="max-width: 600px;">
    <div class="row no-gutters">

        <!-- pfp and the username and the social medias-->
        <div class="col-md-4 col-sm-12">
            <div class="col-12 p-2 mb-md-n4 ml-md-n4 m-sm-0" style="color: #222; background-color: #eee; border: solid 1px black; font-family: courier new; font-size: 20px; z-index: 1;">
                <p><span class="font-weight-bold">U</span>SERNAME</p>
            </div>

            <!-- pfp -->
            <div class="col-12" style="background-color: #eee; border: solid 1px black;
            background-image: url(IMGURLHERE);
            min-height: 190px; background-size: cover"></div>


            <!-- social medias, if y dont use these go to fontawesome.com to get icons for the ones you do use. fab is just for brands btw -->
            <div class="col-12 p-2 mt-md-n4 ml-md-5 m-sm-0" style="color: #222; background-color: #eee; border: solid 1px black; font-family: courier new; z-index: 1; font-size: 20px">
                <p class="justify-content-between p-0 mt-1">

                    <!-- twitter -->
                    <a href="#twitter" style="color: #222"><i class="fab fa-twitter fa-fw"></i></a>

                    <!-- tumblr -->
                    <a href="#tumblr" style="color: #222;"><i class="fab fa-tumblr fa-fw"></i></a>

                    <!-- deviantart -->
                    <a href="#deviantart" style="color: #222;"><i class="fab fa-deviantart fa-fw"></i></a>

                    <!-- carrd -->
                    <a href="#carrd" style="color: #222;"><i class="fas fa-id-card fa-fw"></i></a>

                    <!-- trello -->
                    <a href="#trello" style="color: #222;"><i class="fab fa-trello fa-fw"></i></a>
                </p>
            </div>
        </div>

        <!-- end of section one. now comes the paragraph -->

        <div class="col-md-8 col-sm-12">
            <div class="col-12 ml-md-2 ml-sm-0 p-0" style="color: #222; background-color: #eee; border: solid 1px black; font-family: courier new; font-size: 20px;">

                <div class="p-2" style="border-bottom: solid 1px black">
                    <div class="justify-content-between">
                    <p class="my-0 ml-2"><span class="font-weight-bold">A</span>BOUT</p>

                    <!-- technically you can change this icon idk im not stopping you -->
                    <p><i class="far fa-buildings mr-2"></i></p>
                    </div>
                </div>

                <!-- write abnout yourself. this scrolls -->
                <div class="overflow-auto p-2" style="font-size: 15px; max-height: 150px">
                    <p>Everyone knows Mario is cool as fuck. But who knows what he's thinking? Who knows why he crushes turtles? And why do we think about him as fondly as we think of the mystical (nonexistent?) Dr Pepper? Perchance.</p>

                    <p>I believe it was Kant who said "Experience without theory is blind, but theory without experience is mere intellectual play." Mario exhibits experience by crushing turts all day, but he exhibits theory by stating "Lets-a go!" Keep it up, baby!</p>

                    <p>When Mario leaves his place of safety to stomp a turty, he knows that he may Die. And yet, for a man who can purchase lives with money, a life becomes a mere store of value. A tax that can be paid for, much as a rich man feels any law with a fine is a price. We think of Mario as a hero,but he is simply a one percenter of a more privileged variety. The lifekind. Perchance.</p>
                </div>
            </div>
        </div>

        <!-- friendbox (HOLY SHIT FRIENDLOCKE REFERENCE??) -->
        <div class="col-md-6 col-sm-12 mt-2">
            <div class="row no-gutters">

                <div class="col-md-10 col-sm-12 p-2 overflow-auto" style="color: #222; background-color: #eee; border: solid 1px black; font-family: courier new; font-size: 15px; z-index: 1; height: 200px">
                    <div class="row no-gutters">

                        <!-- friend 1 -->
                        <div class="col-6 text-center" style="border-right: 2px solid transparent">

                            <!-- put link to their profile here -->
                            <a href="#" style="color: #222">

                                <!-- put profile picture here. i recommend square large images -->
                                <img src="IMGURLHERE" style="border: 1px solid black">
                                <br>
                                friend
                            </a>
                        </div>

                        <!-- friend 2 -->
                        <div class="col-6 text-center" style="border-left: 2px solid transparent">

                            <!-- put link to profile here -->
                            <a href="#" style="color: #222">

                                <!-- put profile picture here -->
                                <img src="IMGURLHERE" style="border: 1px solid black">
                                <br>
                                friend
                            </a>
                        </div>

                        <!-- friend 3 -->
                        <div class="col-6 text-center" style="border-right: 2px solid transparent">

                            <!-- put link to profile here -->
                            <a href="#" style="color: #222">

                                <!-- put profile picture here -->
                                <img src="IMGURLHERE" style="border: 1px solid black">
                                <br>
                                friend
                            </a>
                        </div>

                        <!-- friend 4 -->
                        <div class="col-6 text-center" style="border-left: 2px solid transparent">

                            <!-- put link to profile here -->
                            <a href="#" style="color: #222">
                                <!-- put profile picture here -->
                                <img src="IMGURLHERE" style="border: 1px solid black">
                                <br>
                                friend
                            </a>
                        </div>

                        <!-- add more above this line -->

                    </div>
                </div>

                <!-- random ass side image idk -->
                <div class="col-md-2 col-sm-12 pl-md-2 pl-sm-0 pt-md-1 pt-sm-0 mt-md-n5 mt-sm-0">
                    <div class="h-100 bg-faded" style="background-image: url(IMGURLHERE); background-size: cover; background-position: center"></div>
                </div>

            </div>
        </div>

        <!-- featured ocs block -->
        <div class="col-md-6 col-sm-12 pl-md-2 mt-md-n5">
            <div class="col-12 p-2 overflow-auto justify-content-center align-items-center" style="color: #222; background-color: #eee; border: solid 1px black; font-family: courier new; font-size: 20px; z-index: 1; max-height: 257px; min-height: 257px">

                <div id="featured" class="carousel slide w-100" data-ride="carousel">
                    <div class="carousel-inner">

                        <!-- oc 1 -->
                        <div class="carousel-item active h-100">
                            <div class="col-12 text-center">

                                <!-- put link to oc here -->
                                <a href="#" style="color: #222">

                                    <!-- put oc profile picture here. i recommend square images yet again -->
                                    <img src="IMGURLHERE" style="border: 1px black solid">
                                    <br>
                                    OC NAME
                                </a>
                            </div>
                        </div>

                        <!-- oc 2 -->
                        <div class="carousel-item h-100">
                            <div class="col-12 text-center">

                                <!-- link to oc -->
                                <a href="#" style="color: #222">

                                    <!-- oc pfp -->
                                    <img src="IMGURLHERE" style="border: 1px black solid">
                                    <br>
                                    OC NAME

                                </a>

                            </div>
                        </div>

                        <!-- oc 3 -->
                        <div class="carousel-item h-100">
                            <div class="col-12 text-center">

                                <!-- link to oc -->
                                <a href="#" style="color: #222">

                                    <!-- oc pfp -->
                                    <img src="IMGURLHERE" style="border: 1px black solid">
                                    <br>
                                    OC NAME

                                </a>

                            </div>
                        </div>

                    </div>


                    <!-- carousel controls lol -->
                    <a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">prev.</span>
                    </a>


                    <a class="carousel-control-next" href="#featured" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">next</span>
                    </a>
                </div>

            </div>
        </div>

    </div>

    <!-- ok end dont remove the credit lol -->

    <div class="justify-content-end">
        <a href="/micro-wave"><i class="fas fa-microwave"></i></a>
    </div>
</div>