[ user ] detailed

<div class="container" style="max-width: 700px;">
  <div class="card card-block rounded-0 border-0 p-1" style="background:url()">

  <div class="row no-gutters">

    <div class="col-lg-12 p-1">
      <div class="card card-block rounded-0 h-100 p-2">

        <h1 class="text-primary m-0" style="letter-spacing: 2px; font-weight:600">

          NAME

          <small class="pull-right">gender - age - etc</small>
        </h1>

      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-xs-12 p-1">
      <div class="card card-block bg-faded rounded-0 p-1" style="height: 200px;">
        <div class="card card-block rounded-0 border-0 h-100" style="
        background: url(https://artworks-images.marcelforart.com/profiles/c3a90d72-8921-4071-aabb-1c994e3e4bd2_003c8839-aeca-47b1-85de-943c122dac5e_mid.jpg);
        background-size: cover;
        background-position: center;

        "></div>
      </div>
    </div>

    <div class="col-lg-8 col-md-8 col-xs-12 p-1">
      <div class="card card-block bg-faded rounded-0 p-2" style="height:200px; overflow:scroll;">
        <p class="m-auto">

          write about yourself here! if you write enough itll scroll.
          <br>


        </p>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-xs-12 p-1">
      <div class="card card-block bg-faded rounded-0 h-100 p-2">
        <h4 class="text-primary text-center">

          ART STATUS

        </h4>

        <p class="mx-auto">
            <b>commissions:</b> status
          <br>
            <b>art trades:</b> status
          <br>
            <b>requests:</b> status
          <br>
            <b>collabs:</b> status

        </p>

      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-xs-12 p-1">
      <div class="card card-block bg-faded rounded-0 h-100 p-2">
        <h4 class="text-primary text-center">

          INTERESTS

        </h4>

        <span class="text-left px-3">

        <i class="fas fa-heart mr-2 text-muted"></i>one
        <br>
        <i class="fas fa-heart mr-2 text-muted"></i>two
        <br>
        <i class="fas fa-heart mr-2 text-muted"></i>three
        <br>
        <i class="fas fa-heart mr-2 text-muted"></i>four
        <br>
        </span>

      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-xs-12 p-1">
      <div class="card card-block bg-faded rounded-0 h-100 p-2">
        <h4 class="text-primary text-center">

          FRIENDS

        </h4>

        <span class="text-left px-3">

        <i class="fas fa-heart mr-2 text-muted"></i>@ronnie
        <br>
        <i class="fas fa-heart mr-2 text-muted"></i>@ronnie
        <br>
        <i class="fas fa-heart mr-2 text-muted"></i>@ronnie
        <br>
        <i class="fas fa-heart mr-2 text-muted"></i>@ronnie
        <br>
        </span>

      </div>
    </div>

    <div class="col-lg-12 p-1">
      <div class="card card-block bg-faded rounded-0 h-100 p-2">

        <h4 class="text-primary text-center">

          FEATURED CHARACTERS

        </h4>

        <div class="row no-gutters">
          <div class="col p-1">
            <div class="card card-block rounded-0 p-1" style="
            background: url(https://cdn.shortpixel.ai/spai/w_788+q_lossy+ret_img+to_webp/https://www.focusonthefamily.com/wp-content/uploads/2019/06/blank-avatar-300x300.png);
            background-size: cover;
            background-position: center;
            height: 130px;
            ">
            </div>
            <h4><a class="card rounded-0 text-muted text-center m-0 pb-1" href="link here">name</a></h4>
          </div>

          <div class="col p-1">
            <div class="card card-block rounded-0 p-1" style="
            background: url(https://cdn.shortpixel.ai/spai/w_788+q_lossy+ret_img+to_webp/https://www.focusonthefamily.com/wp-content/uploads/2019/06/blank-avatar-300x300.png);
            background-size: cover;
            background-position: center;
            height: 130px;
            ">
            </div>
            <h4><a class="card rounded-0 text-muted text-center m-0 pb-1" href="link here">name</a></h4>
          </div>

          <div class="col p-1">
            <div class="card card-block rounded-0 p-1" style="
            background: url(https://cdn.shortpixel.ai/spai/w_788+q_lossy+ret_img+to_webp/https://www.focusonthefamily.com/wp-content/uploads/2019/06/blank-avatar-300x300.png);
            background-size: cover;
            background-position: center;
            height: 130px;
            ">
            </div>
            <h4><a class="card rounded-0 text-muted text-center m-0 pb-1" href="link here">name</a></h4>
          </div>

          <div class="col p-1">
            <div class="card card-block rounded-0 p-1" style="
            background: url(https://cdn.shortpixel.ai/spai/w_788+q_lossy+ret_img+to_webp/https://www.focusonthefamily.com/wp-content/uploads/2019/06/blank-avatar-300x300.png);
            background-size: cover;
            background-position: center;
            height: 130px;
            ">
            </div>
            <h4><a class="card rounded-0 text-muted text-center m-0 pb-1" href="link here">name</a></h4>
          </div>
        </div>
      </div>
    </div>


    <div class="col-12 p-1">
      <div class="card card-block rounded-0 h-100 p-2">

        <h4 class="m-0">

          <span class="pull-left text-primary">

            <a class="fab fa-deviantart mx-1 tooltipster" title="deviantart" href="LINK HERE"></a>
            /
            <a class="fab fa-instagram tooltipster" title="instagram" href="LINK HERE"></a>
            /
            <a class="fab fa-twitter tooltipster" title="twitter" href="LINK HERE"></a>
            /
            <a class="fab fa-tumblr tooltipster" title="tumblr" href="LINK HERE"></a>
            /
            <a class="fab fa-youtube tooltipster" title="youtube" href="LINK HERE"></a>

          </span>

            <span class="text-muted pull-right small"><a class="fal fa-code tooltipster" title="code by ronnie" href="https://toyhou.se/5341609.-user-detailed"></i> </span>

            </h4>

      </div>
    </div>

  </div>
  </div>
</div>