Freebie - Hewwo

<div class="container-fluid p-0 mb-5" style="max-width: 850px;">
    <div class="row no-gutters">
        <div class="col-12 mb-2">
          <!--- top bar pattern --- use a seamless pattern -->
            <div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/27099578_KQKdphMpKvYig8q.png);
            background-repeat: repeat; background-attachment: fixed; min-height: 100px;"></div>
        </div>

        <div class="col-md-4 pr-md-1 mb-2">
            <div class="card-block bg-faded h-100 text-center">
              <!-- main icon -- use a 200 x 200 square image so it can become a square -->
                <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17787301_jsP3mNTAOubMBpC.png"
                class="d-block mx-auto rounded-circle p-2 bg-faded mb-1" style="margin-top: -80px; max-height: 200px;" />

                <p class="text-primary mb-1" style="font-size: 14pt;">
                  <!-- you name & adjectives -->
                  Your Name</p><p class="small text-muted">
                  age . gender . adjective</p>

                <hr />
                <p class="small">
                  <!-- small blurb for left column -->
                  Write like one to two sentences here. Keep it short this is a little box.
                </p>

                <hr />
                <p class="mb-0">
                  <!-- social icons -- use font awesome icons -- dont forget to fill in links -->
                    <a href="DA_LINK" target="_BLANK"><i class="fab fa-deviantart fa-fw" /></a>

                    <a href="FA_LINK" target="_BLANK"><i class="fas fa-paw fa-fw" /></a>

                    <a href="TWITTER_LINK" target="_BLANK"><i class="fab fa-twitter fa-fw" /></a>

                    <a href="TUMBLR_LINK" target="_BLANK"><i class="fab fa-tumblr fa-fw" /></a>
                    <!-- credit link -- leave this -->
                    <a href="/Pinky" target="_BLANK"><i class="fas fa-code fa-fw" /></a>
                </p>
            </div>
        </div>
        <div class="col-md-8 pl-md-1 mb-2">
          <!-- main content block -- will scroll when filled ----------------->
            <div class="card-block pb-1 bg-faded mb-2" style="height: 200px; overflow: auto; font-size: 10.5pt;">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget
                    lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna.
                </p>
            </div>
            <!--- art & trades ----------------->
            <div class="card-block bg-faded" style="font-size: 10.5pt;">
                <div class="row no-gutters mx-md-0 mx-3">
                    <!-------- art section ------------->
                    <div class="col-md-6 pr-md-2 mb-md-0 mb-2">
                        <p class="text-muted" style="letter-spacing: 1px;"><i class="fal fa-pencil-paintbrush fa-fw" /> Art</p>
                        <div class="justify-content-between">
                            <span class="text-muted"> commissions</span>
                            <i>closed</i>
                        </div>
                        <hr class="my-1" />
                        <div class="justify-content-between">
                            <span class="text-muted"> trades</span>
                            <i>closed</i>
                        </div>
                        <hr class="my-1" />
                        <div class="justify-content-between">
                            <span class="text-muted"> requests</span>
                            <i>closed</i>
                        </div>
                        <hr class="my-1" />
                        <div class="justify-content-around">
                          <a href="LINK_HERE" target="_BLANK">Prices</a>
                          <a href="LINK_HERE" target="_BLANK">T.o.S.</a>
                          <a href="LINK_HERE" target="_BLANK">Examples</a>
                        </div>
                    </div>

                    <div class="col-md-6 pl-md-2">
                        <!------------ trades section ---------------------------------------------------->
                        <p class="text-muted" style="letter-spacing: 1px;"><i class="fal fa-exchange fa-fw" /> Trades</p>
                        <a href="TRADES_LINK" class="btn btn-secondary btn-block btn-sm my-2">Trades</a>
                        <a href="SALES_LINK" class="btn btn-secondary btn-block btn-sm my-2">Sales</a>
                        <a href="WISHLIST_LINK" class="btn btn-secondary btn-block btn-sm my-2">Wishlist</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card-block bg-faded">
                <div class="row text-center">
                  <!--------- featured characters -------------------->
                    <div class="col-md-3 col-6 mb-md-0 mb-4">
                      <a href="CHARACTER_LINK" target="_BLANK">
                        <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17787301_jsP3mNTAOubMBpC.png"
                        class="d-block mx-auto" style="max-height: 200px;" />
                      </a>
                    </div>

                    <div class="col-md-3 col-6 mb-md-0 mb-4">
                        <a href="CHARACTER_LINK" target="_BLANK">
                        <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17787301_jsP3mNTAOubMBpC.png"
                        class="d-block mx-auto" style="max-height: 200px;" />
                      </a>
                    </div>

                    <div class="col-md-3 col-6">
                        <a href="CHARACTER_LINK" target="_BLANK">
                        <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17787301_jsP3mNTAOubMBpC.png"
                        class="d-block mx-auto" style="max-height: 200px;" />
                      </a>
                    </div>

                    <div class="col-md-3 col-6">
                        <a href="CHARACTER_LINK" target="_BLANK">
                        <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17787301_jsP3mNTAOubMBpC.png"
                        class="d-block mx-auto" style="max-height: 200px;" />
                      </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>