set course for anywhere

<!--
colors:

gradient: #0f3bc2 #4bc8ff
icon border + status bg: #001052
bg: rgba(0,16,82,1) rgba(0,16,82,0.7) (THIS HAS TO BE RGBA FOR TRANSPARENCY TO WORK)

-->

<div class="col-md-4 col-sm-12 card mx-auto p-1 border-0" style="background-image: linear-gradient(#0f3bc2, #4bc8ff)">

    <!-- header, replace IMGURLHERE with your image url -->
    <div class="card card-header border-0 p-5" style="background-image: url(IMGURLHERE); height: 120px; background-size: cover"></div>

    <div class="p-2" style="background-color: #001052">
        <div class="row no-gutters">

        <!-- profile picture, replace 'IMGURLHERE' with your image.. i recommend square but its not required -->
        <div class="rounded-circle p-2 col-auto" style="background-color: #001052; margin-top: -5em;">
            <div class="rounded-circle" style="background-image: url(IMGURLHERE); height: 92px; width: 92px; background-size: cover; background-position: center"></div>
        </div>

        <!-- status -->
        <div class="col-md-8 pl-1">
            <div class="card" style="border-radius: 1em">

                <div class="rounded-circle card" style="height: 10px; width:10px; position: absolute; margin-top: -1.5em"></div>

                <div class="rounded-circle card mt-n2 md-2" style="height: 20px; width: 20px; position: absolute"></div>

                <!-- put the status twice, once inbetween the >< and once in the title="THIS PART" -->
                <div class="card p-2 border-0 text-truncate d-block" style="border-radius: 1em; max-height: 55px">🦭
                <span class="tooltipster" title="this is to imitate a status. it truncates, but you can hover to see the full thing!">this is to imitate a status. it truncates, but you can hover to see the full thing!</span></div>
            </div>
        </div>

        </div>
    </div>

    <!-- basics -->
    <div class="px-3 pb-3 rounded-bottom" style="background-image: linear-gradient(rgba(0,16,82,1),rgba(0,16,82,0.7)); color: white">

    <div class="mb-2">

    <div style="font-family: Arial Black, sans-serif; font-size: 20px; font-weight: 800">nickname or name</div>

    <div class="mb-1">username • prns/prns</div>

    <!-- fontawesome.com to change these, these are just cosmetic -->
    <div class="card d-inline" style="background-color: rgba(0,16,82,0.5); font-size: 13px; padding: 5px 3px">
        <i class="fas fa-cat"></i>
        <i class="fas fa-flower"></i>
        <i class="fas fa-bird"></i>
    </div>

    </div>

    <!-- keep it short it doesnt go on forever -->
    <div class="my-3 overflow-hidden" style="max-height: 9em">
        <p>THIS CUTS OFF, KEEP IT SHORT..
        <br>
        just write some general stuff about yourself, maybe your timezone etc etc. age whatever idk</p>
        <p>i keep my shit PRIVATE god i should go to bed</p>
    </div>

    <!-- roles that double as links -->
    <div class="row no-gutters">

    <!-- put the link where the # is in href="#" -->
    <div class="card d-inline px-2 py-1 mr-1 mb-1" style="background-color: rgba(0,16,82,0.5);">

        <a href="#" style="color: white">

        <!-- feel free to change the hex code -->
        <i class="fas fa-circle mr-1" style="color: #ff0000"></i>
        link
        </a>

    </div>

    <!-- put the link where the # is in href="#" -->
    <div class="card d-inline px-2 py-1 mr-1 mb-1" style="background-color: rgba(0,16,82,0.5);">
        <a href="#" style="color: white">
        <i class="fas fa-circle mr-1" style="color: #ff9700"></i>
        these are links
        </a>
    </div>

    <!-- put the link where the # is in href="#" -->
    <div class="card d-inline px-2 py-1 mr-1 mb-1" style="background-color: rgba(0,16,82,0.5);">

        <a href="#" style="color: white">
        <i class="fas fa-circle mr-1" style="color: #f1ff00"></i>
        that double as roles
        </a>

    </div>

    <!-- put the link where the # is in href="#" -->
    <div class="card d-inline px-2 py-1 mr-1 mb-1" style="background-color: rgba(0,16,82,0.5);">
        <a href="#" style="color: white">
        <i class="fas fa-circle mr-1" style="color: #00ff1a"></i>
        aint that cool
        </a>
    </div>

    <!-- put the link where the # is in href="#" -->
    <div class="card d-inline px-2 py-1 mr-1 mb-1" style="background-color: rgba(0,16,82,0.5);">
        <a href="#" style="color: white">
        <i class="fas fa-circle mr-1" style="color: #00fffe"></i>
        i think so
        </a>
    </div>

    <!-- put the link where the # is in href="#" -->
    <div class="card d-inline px-2 py-1 mr-1 mb-1" style="background-color: rgba(0,16,82,0.5);">
        <a href="#" style="color: white">
        <i class="fas fa-circle mr-1" style="color: #1300ff"></i>
        TRAFFIC!
        </a>
    </div>

    <!-- put the link where the # is in href="#" -->
     <div class="card d-inline px-2 py-1 mr-1 mb-1" style="background-color: rgba(0,16,82,0.5);">
        <a href="#" style="color: white">
        <i class="fas fa-circle mr-1" style="color: #a300ff"></i>
        whatevs
        </a>
    </div>

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

    <!-- this is a subscribe button, replace "user" in the href with your username -->
    <div class="card d-inline px-2 py-1 mr-1 mb-1" style="background-color: rgba(0,16,82,0.5);">
        <a href="https://toyhou.se/user/subscribe" style="color: white">
        <i class="fas fa-plus"></i>
        </a>
    </div>

    </div>

    <!-- msg -->
    <a class="btn col border-0 text-left" style="background-color: rgba(0,16,82,0.5); color: rgba(255, 255, 255, .7); padding: .8em" href="https://toyhou.se/~messages/create/youruserhere">Message @Username</a>

    </div>

</div>

<div class="col-md-4 col-sm-12 mx-auto px-0">
<a href="https://toyhou.se/micro-wave" style="color: #4bc8ff">
 <i class="fas fa-microwave"></i>
</a>
</div>