crossing 166

<!--
bg color: #827974
polaroid/user color: #fffbf5
text color: #827974
icon color 1: #e18d6e
icon color 2: #e1c274
icon color 3: #659972

bg is also a progress bar bg.. to remove it remove "progress-bar-striped progress-bar-animated"
-->

<div class="col-12">

    <div class="col-lg-6 col-md-7 col-sm-12 mx-auto p-0 m-0">

        <!-- username -->
        <div class="col-lg-11 col-sm-12 p-2 ml-3" style="margin-bottom: -2em; z-index: 1;">
            <h1 style="color: #fffbf5; text-align: center; text-shadow: #659972 1px 1px, #e1c274 -1px -1px; font-size: 40px; font-weight: 300; font-family: times new roman">USERNAME
            <i class="fas fa-compact-disc "></i>
            </h1>
        </div>

        <!-- row LOOOOOl -->

        <div class="row no-gutters">

            <!-- icons -->

        <div class="col-lg-1 p-0 mt-lg-1 mt-sm-0 mb-md-0 mb-sm-3" style="margin-right: -1.5em; z-index: 1; margin-bottom: -1em; text-align:center">



            <i class="fas fa-flower fa-2x mb-lg-3 mb-sm-0 mt-lg-3 mt-sm-0" style="color: rgba(225, 141, 110, .7); "></i>

            <i class="fas fa-flower fa-2x mb-lg-3 mb-sm-0" style="color: rgba(225, 194, 116, .7); "></i>

            <i class="fas fa-flower fa-2x mb-lg-3 mb-sm-0" style="color: rgba(101, 153, 114, .7); "></i>



        </div>

        <!-- not icons -->

        <div class="col-10 progress-bar-striped progress-bar-animated p-2 ml-sm-4 ml-lg-0" style="background-color: #fff1de; text-align: center; color: #827974">


          <!-- name age pronouns -->
          <p class="mt-1" style="font-size: small; text-transform: capitalize;">
              <em>
                  name • age • pronouns
              </em>
          </p>

            <hr class="mt-t mb-1" style="border-color: #827974; border-style: dashed; max-width: 20em">

            <!-- aboiut me -->
            <p class="p-2" style="font-size: smaller; text-transform: lowercase;">
              <em>
                  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.

              </em>
          </p>

          <hr class="mt-1 mb-1" style="border-color: #827974; border-style: dashed; max-width: 20em; margin-top: -1em">


              <!-- links -->
              <p class="mb-1" style="text-align: center;font-size: 20px">
                  <a href="/carrd" style="color: #e18d6e; "><i class="fas fa-id-card"></i></a>
                   <a href="/twitter" style="color: #e1c274; "><i class="fab fa-twitter"></i></a>
                  <a href="/da" style="color: #659972; "><i class="fab fa-deviantart"></i></a>
                  <a href="/yt" style="color: #e18d6e; "><i class="fab fa-youtube"></i></a>
                  <a href="/scrtach" style="color: #e1c274; "><i class="fas fa-cat"></i></a>
              </p>


        </div>

        <!-- icons -->


    <div class="col-lg-1 col-sm-12 mt-lg-1 mt-sm-0" style="margin-left: -1.5em; text-align: center; margin-top: -1em">



            <i class="fas fa-flower fa-2x mb-lg-3 mb-sm-0 mt-lg-3 mt-sm-0" style="color: rgba(225, 141, 110, .7); vertical-align: middle"></i>

            <i class="fas fa-flower fa-2x mb-lg-3 mb-sm-0" style="color: rgba(225, 194, 116, .7); vertical-align: middle"></i>

            <i class="fas fa-flower fa-2x mb-lg-3 mb-sm-0" style="color: rgba(101, 153, 114, .7); vertical-align: middle"></i>



        </div>

        <!-- end -->

    </div>

    <!-- end of this goofy row -->

    <!-- featured picture -->

    <div class="col-lg-10 col-sm-12 ml-lg-4 ml-sm-0">
        <div class="row no-gutters">

            <!-- first -->

        <div class="col-3 p-2 text-wrap" style="background-color: #fffbf5; border: #827974 solid 1px; text-align: center; transform: rotate(6deg); margin-top: -.5em">

            <!-- put the link here -->
        <a href="LINK" class="btn w-100 h-100 btn-outline-success mx-auto rounded-0 " style="position:absolute;top:0;left:0;mix-blend-mode:screen;"></a>

        <!-- character img -->
            <div style="background:url(https://images.unsplash.com/photo-1643361020438-22a8daa844fe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80);background-size:cover;padding-top:100%;"></div>

            <!-- character title -->
            <a href="LINK" target=_blank><em>
                Character
            </em></a>

        </div>

        <!-- second -->

        <div class="col-3 p-2 text-wrap" style="background-color: #fffbf5; border: #827974 solid 1px; text-align: center; transform: rotate(-2deg); margin-top: -.5em">

            <!-- link -->
        <a href="LINK" class="btn w-100 h-100 btn-outline-warning mx-auto rounded-0 " style="position:absolute;top:0;left:0;mix-blend-mode:screen;"></a>

        <!-- img -->
            <div style="background:url(https://images.unsplash.com/photo-1526269982786-96fcd6b53d45?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);background-size:cover;padding-top:100%;"></div>

            <!-- name -->
            <a href="LINK" target=_blank><em>
                Character
            </em></a>

        </div>

        <!-- third -->

        <div class="col-3 p-2 text-wrap" style="background-color: #fffbf5; border: #827974 solid 1px; text-align: center; transform: rotate(2deg); margin-top: -.5em">

            <!-- link -->
        <a href="LINK" class="btn w-100 h-100 btn-outline-success mx-auto rounded-0 " style="position:absolute;top:0;left:0;mix-blend-mode:screen;"></a>

        <!-- img -->
            <div style="background:url(https://images.unsplash.com/photo-1644403744367-96dcebc70b39?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80);background-size:cover;padding-top:100%;"></div>

            <!-- name -->
            <a href="LINK" target=_blank><em>
                Character
            </em></a>

        </div>

        <!-- fourth -->

        <div class="col-3 p-2 text-wrap" style="background-color: #fffbf5; border: #827974 solid 1px; text-align: center; transform: rotate(-4deg); margin-top: -.5em">

            <!-- link -->
        <a href="LINK" class="btn w-100 h-100 btn-outline-warning mx-auto rounded-0 " style="position:absolute;top:0;left:0;mix-blend-mode:screen;"></a>

        <!-- img -->
            <div style="background:url(https://images.unsplash.com/photo-1530288782965-fbad40327074?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);background-size:cover;padding-top:100%;"></div>

            <!-- name -->
            <a href="LINK" target=_blank><em>
                Character
            </em></a>

        </div>

        <!-- end -->

        </div>
    </div>

    <!-- end -->


    <p class="col-11" style="text-align:center">
    <a href="/micro-wave" target=_blank data-toggle="tooltip" title="code by micro-wave">
      <i class="fas fa-microwave fa-small"></i>
      </a>
    </p>

    </div>



</div>