Squirreled Away

        <!-----

        SQUIRRELED AWAY
        By ROCKETFUEL

        Please remember to read my rules before using, and turn WYSIWYG off!
          Enjoy!


          ----->

<div class="container">

<div class="card bg-faded border-0 m-2 p-5 mx-auto text-center" style="height: auto; max-width: 900px; border-radius: 45px 0px 45px 0px; box-shadow: 0px 0px 12px rgba(0,0,0,.3);">

    <h1 class="text-uppercase" style="font-size: 40px; letter-spacing: 6px;">
        <i class="far fa-leaf text-success"></i>

        Username
        </h1>

    <br>

                        <!----

                                        Focal Image (250x250)

                                        I'd recommend keeping this a square, so it doesn't get too stretched/squashed

                        ---->
    <div class="card rounded-circle mx-auto" style=

    "background-image:url(https://images.unsplash.com/photo-1509919160358-7a6dc4c4f855?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80);

    background-positon:center; width: 250px; height:250px; background-size:cover"

    />

    <br>
    <br>

    <a class="text-success" data-toggle="collapse" href="#collapsesection">
        <span class="fa-stack fa-3x">


            <!---- if you want to change the icon for the collapse button, you can do it here! --->
        <i class="fad fa-squirrel fa-stack-3x"/>
        <i class="far fa-circle fa-stack-2x "/>
        </span>

        </a>

    <div class="collapse multi-collapse" id="collapsesection">
        <div class="card border-0">
            <!---- Header in collapsed area --->
            <h3 class="m-3">This box will grow as you type!</h3>

             <div class="card bg-faded mt-1 mb-2 border-top-0" style="height:1px;"> </div>

            <!--- Main text ---->

        <p class="m-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


         <div class="card bg-faded mt-1 mb-2 border-top-0" style="height:1px;"></div>
         <div class="row mx-auto">

             <!---- Socials ----->


        <!----- Deviantart ---->
         <a href="#" data-toggle="tooltip" title="username"><i class="fab fa-deviantart m-2"/>
        <!----- Twitter ----->
         <a href="#" data-toggle="tooltip" title="username"><i class="fab fa-twitter m-2"/>
        <!----- Tumblr ---->
         <a href="#" data-toggle="tooltip" title="username"><i class="fab fa-tumblr m-2"/>
        <!--- Discord ---->
         <a href="#" data-toggle="tooltip" title="username#0000"><i class="fab fa-discord m-2"/>

         <!---- Credit, please don't remove! ---->
         <a href="https://toyhou.se/ROCKETFUEL" data-toggle="tooltip" title="Code by Rocket"><i class="fas fa-rocket m-2" /></a>
         </div>
        </div>
    </div>

</div>
</div>

<!---- end ---->