Charlotte Moore

I am an ambitious adventurer, but apart from that, pretty simple person.

  • Image Description
  • Image Description
  • Image Description
  • Image Description
5k followers
Image Description

HTML:

          
            <!-- Author Section -->
            <div class="position-relative text-center u-space-3-top u-gradient-overlay-half-info-v1 u-bg-img-hero" style="background-image: url(../assets/img/1920x800/img10.jpg);">
              <div class="row justify-content-md-center">
                <div class="col-md-8 col-lg-7 col-xl-5">
                  <!-- Info -->
                  <div class="mb-4">
                    <h1 class="display-4 text-white font-weight-normal mb-3">Charlotte Moore</h1>

                    <ul class="list-inline">
                      <li class="list-inline-item">
                        <a class="u-text-light" href="#">
                          <span class="fa fa-map-marker-alt"></span>
                          California
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a class="u-text-light" href="#">
                          <span class="fa fa-globe"></span>
                          mooreismine.com
                        </a>
                      </li>
                    </ul>

                    <p class="text-white">I am an ambitious adventurer, but apart from that, pretty simple person.</p>
                  </div>
                  <!-- End Info -->

                  <!-- Followers -->
                  <div class="d-flex justify-content-center align-items-center mb-7">
                    <!-- Followers List -->
                    <ul class="list-inline mr-2 mb-0">
                      <li class="list-inline-item mr-0">
                        <img class="img-fluid u-sm-avatar u-avatar-v2 rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
                      </li>
                      <li class="list-inline-item u-avatar-v2__left-offset mr-0">
                        <img class="img-fluid u-sm-avatar u-avatar-v2 rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
                      </li>
                      <li class="list-inline-item u-avatar-v2__left-offset mr-0">
                        <img class="img-fluid u-sm-avatar u-avatar-v2 rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
                      </li>
                      <li class="list-inline-item u-avatar-v2__left-offset mr-0">
                        <img class="img-fluid u-sm-avatar u-avatar-v2 rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
                      </li>
                    </ul>
                    <!-- End Followers List -->

                    <div class="mr-3">
                      <small class="u-text-light">5k followers</small>
                    </div>

                    <button type="button" class="btn btn-xs text-primary font-weight-bold u-btn-white transition-3d-hover">
                      <span class="fa fa-user-plus mr-2"></span>
                      Follow
                    </button>
                  </div>
                  <!-- End Followers -->

                  <!-- Avatar -->
                  <img class="img-fluid u-xl-avatar u-avatar-v1 rounded-circle mx-auto" src="../../assets/img/160x160/img1.jpg" alt="Image Description">
                  <!-- End Avatar -->
                </div>

                <!-- SVG Background -->
                <figure class="position-absolute-bottom-0 z-index-minus-1">
                  <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="100%" height="200px" viewBox="20 -20 300 100" style="margin-bottom: -8px;" xml:space="preserve">
                    <path class="u-fill-white" opacity="0.4" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
                      c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />
                    <path class="u-fill-white" opacity="0.4" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
                      c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />
                    <path class="u-fill-white" opacity="0" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
                      H42.401L43.415,98.342z" />
                    <path class="u-fill-white" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
                      c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />
                  </svg>
                </figure>
                <!-- End SVG Background Section -->
              </div>
            </div>
            <!-- End Author Section -->