turfmastaz!

<!--
ahhhh i have like 5 days to get this in aaahhhhhhhhhh fucuuuuuuck i dont wannnaaaaaa
poloroid links and gradient bg: #1a1110
poloroid bg and link / about me color: #faf5f2
accent color (username and header nd shi): #7a5c32
other accent color: #4a3922
-->

<div class="col-md-9 col-sm-12 mx-auto">
    <div class="row no-gutters">

    <!-- poloroids 1 and 2; use for friends or something idk -->

    <div class="col-md-auto col-sm-auto hidden-sm-down">

        <!-- poloroid 1 -->
        <div class="p-2 text-center mr-n3 mt-2" style="background-color: #faf5f2; border: 1px solid #1a1110; z-index: 2; position: relative; transform: rotate(2deg)">

            <!-- put pfp img thing here -->
            <div style="background-image: url(IMGURLHERE); height: 100px; background-size: cover; background-position: center; width: 100px"></div>

            <!-- put profile link here -->
            <a href="urlhere" class="stretched-link" style="color: #1a1110">name</a>

        </div>

        <!-- poloroid 2 -->
        <div class="p-2 text-center mr-n3 my-5" style="background-color: #faf5f2; border: 1px solid #1a1110; z-index: 2; position: relative; transform: rotate(-2deg);">

            <!-- pfp here -->
            <div style="background-image: url(IMGURLHERE); height: 100px; background-size: cover; background-position: center; width: 100px"></div>

            <!-- link here -->
            <a href="#" class="stretched-link" style="color: #1a1110">name</a>
        </div>
    </div>

    <!-- middle column aka most of the actual stuff -->

    <!-- put background image here -->
    <div class="col-md col-sm-12" style="background-image: url(IMGURLHERE); background-size:cover">

        <!-- poloroid 1 -->
        <div class="flex-fill p-2" style="background-image: linear-gradient(#1a1110 70%, rgba(0,0,0,0)); font-family: avenir">

            <div class="text-center mb-2">

                <!-- ur name -->
                <div class="display-4 font-weight-bold" style="color: #7a5c32">HARA</div>

                <!-- username, keep the slash ahead of the @ so it doesnt turn into a regular ping -->
                <div class="small font-italic faded mt-n2" style="color: #7a5c32">@/username</div>

                <!-- social medias -->
                <p>
                <a href="/twitter" style="color: #faf5f2"><i class="fab fa-twitter"></i></a>
                <a href="/tumblr" style="color: #faf5f2"><i class="fab fa-tumblr"></i></a>
                <a href="/instagram" style="color: #faf5f2"><i class="fab fa-instagram"></i></a>
                <a href="/artfight" style="color: #faf5f2"><i class="fas fa-paintbrush"></i></a>
                </p>

            </div>

            <!-- long winded about me -->
            <div class="text-justify p-3 mb-2" style="border: 1px solid #4a3922; color: #faf5f2">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. 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.</div>

            <!-- art statuses -->
            <p class="text-center m-0" style="color: #faf5f2">
                <span class="font-weight-bold font-italic" style="color: #7a5c32">requests:</span> closed

                <span class="font-weight-bold font-italic" style="color: #7a5c32">trades:</span> closed

                <span class="font-weight-bold font-italic" style="color: #7a5c32">commissions:</span> closed
            </p>

            <hr class="my-1" style="border-color: #4a3922; border-style: dashed">

            <!-- characters -->
            <p class="text-center font-weight-bold" style="color: #7a5c32">FEATURED CHARACTERS</p>

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

                <!-- oc one -->
                <a href="/character" data-toggle="tooltip" title="charactername" class="mx-auto mb-2">
                    <img src="imgurlhere" style="height: 100px; border-radius: 5px; border: 3px solid #7a5c32">
                </a>

                <!-- oc two -->
                <a href="/character" data-toggle="tooltip" title="charactername" class="mx-auto mb-2">
                    <img src="imgurlhere" style="height: 100px; width: 100px; border-radius: 5px; border: 3px solid #7a5c32">
                </a>

                <!-- oc three -->
                <a href="/character" data-toggle="tooltip" title="charactername" class="mx-auto mb-2">
                    <img src="imgurlhere" style="height: 100px; width: 100px; border-radius: 5px; border: 3px solid #7a5c32">
                </a>

                <!-- oc four -->
                <a href="/character" data-toggle="tooltip" title="charactername" class="mx-auto mb-2">
                    <img src="imgurlhere" style="height: 100px; width: 100px; border-radius: 5px; border: 3px solid #7a5c32">
                </a>

                <!-- oc five -->
                <a href="/character" data-toggle="tooltip" title="charactername" class="mx-auto">
                    <img src="imgurlhere" style="height: 100px; width: 100px; border-radius: 5px; border: 3px solid #7a5c32">
                </a>
            </div>

            <hr class="mt-0 mb-1" style="border-color: #1a1110; border-style: dashed">

            <!-- song thing -->
            <div class="justify-content-between font-italic align-items-center" style="color: #1a1110">


                    <div class="row no-gutters col p-0">

                        <!-- place the last part of the youtube url in the spot where it says YTURLHERE. like uhhh https://www.youtube.com/watch?v=[VU15BWOMX6k] place the part i put in brackets there -->
                        <iframe class="flex-fill" style="height:1em;width:1em;opacity:.00001;position:absolute;margin-top:4px;z-index:1; margin-left: -1px" src="https://www.youtube.com/embed/YTURLHERE" frameborder="0"></iframe>
                        <p>
                        <span class="text-left"><i class="fa-regular fa-play"></i></span>
                        <span>random song goes here - random artist</span>
                        </p>
                    </div>

                    <!-- you can change this icon by going to fontawesome dot com lol-->
                <i class="fas fa-wind faded"></i>
            </div>


        </div>
    </div>

    <!-- final poloroid -->
    <div class="col-md-auto col-sm-12 hidden-sm-down">
        <div class="p-2 text-center ml-n3 mt-5" style="background-color: #faf5f2; border: 1px solid #1a1110; z-index: 2; position: relative; transform: rotate(-2deg);">

            <!-- img here -->
             <div style="background-image: url(IMGURLHERE); height: 100px; background-size: cover; background-position: center; width: 100px"></div>

             <!-- link -->
            <a href="#" class="stretched-link" style="color: #1a1110">name</a>
        </div>
    </div>

    <!-- end of code dont remove anything under this line lol -->

    </div>

    <div class="col-md-9 col-sm-12 mx-auto"><a href="/micro-wave"><i class="fas fa-microwave"></i></a></div>
</div>