Toyhou.se: Passport ACNH

<!-- Passport Theme -->

<!-- Container -->
<div class="text-center p-4 bg-info" style="font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; width: 100%; color: #4a4728; height: auto; margin: 0 auto;">

  <div class="mt-4 mb-4 pt-4 pb-2 px-2" style="width: 80%; z-index: 1; position: relative; overflow: hidden; margin: 0 auto; background: #f8f9fa; border-radius: 2.5rem; box-shadow: 0 0.5rem 0 0 rgba(0, 0, 0, 0.1), 0 0 1rem 0.5rem rgba(0, 0, 0, 0.1); font-size: 1.25rem;">

    <!-- Heading -->
    <div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/seigaiha.png'); background-size: 25rem; z-index: -1; opacity: 0.5;"></div>

    <h2 style="font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;text-transform:uppercase;letter-spacing: 0.025em;">
      <div class="mr-4" style="border-radius: 1rem; vertical-align: top; display: inline-block; width: 12.5%; height: 0.15rem; background: rgba(0, 0, 0, 0.25); margin-top: 0.75rem;"></div>
      <span style="text-dark">Passport</span>
      <div class="ml-4" style="border-radius: 1rem; vertical-align: top; display: inline-block; width: 12.5%; height: 0.15rem; background: rgba(0, 0, 0, 0.25); margin-top: 0.75rem;"></div>
    </h2>

    <!-- Inner Container -->
    <div class="mt-4 px-4 pt-2 pb-4 bg-info" style="position: relative; z-index: 1;">

      <div style="z-index: -5; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/palm-leaf.png');background-size:50%; opacity: 0.75;"></div>

      <div class="row px-4 pt-4">

        <!-- Avatar -->
        <div class="col-lg-4 text-center" style="display:flex;justify-content:center;align-items: center;flex-flow: column;">
          <div class="bg-light mb-4" style="width: 15rem; height: 15rem; min-height: 50%; border-radius: 3rem; border: 0.75rem solid #f8f9fa !important; background-image: url('https://gamewith-en.akamaized.net/img/c56f7867662bda06027b380bb9e8ea30.jpg'); background-size: cover;"></div>
        </div>

        <div class="col-lg-8 text-left">

          <!-- Bio -->
          <div class="mb-2 px-4 py-2 text-secondary bg-light" style="font-weight: 500; border-radius: 2rem; display:inline-block; width: auto;">
            Ahah dork.
          </div>

          <div class="row mt-2 pl-4 text-left" style="font-weight: 500; letter-spacing: 0.025rem;">

            <div class="col-md-12">

              <!-- Town Name -->
              <div class="mr-4" style="display: inline-block;">
                <i class="fas fa-island-tropical text-success mr-1"></i> <span class="text-dark">Alyville</span>
              </div>

              <!-- Native Fruit -->
              <div style="display: inline-block;">
                <i class="fas fa-tree-alt mr-1 text-warning"></i> <span class="text-secondary">Lemons</span></span>
              </div>

            </div>

            <hr class="mt-3 mb-3 bg-light" style="outline: 0; border: 0; margin: 0; padding: 0; height: 0.1rem; width:75%;">

            <!-- Resident Title -->
            <div class="col-md-12">
              <span class="text-dark">Happy Flower</span>
            </div>

            <hr class="mt-3 mb-3 bg-light" style="outline: 0; border: 0; margin: 0; padding: 0; height: 0.1rem; width:75%;">

            <!-- Town Name -->
            <div class="col-md-12" style="font-size: 1.6rem;">
              <span class="text-dark">My Place</span>
            </div>

            <hr class="mt-3 mb-3 bg-light" style="outline: 0; border: 0; margin: 0; padding: 0; height: 0.1rem; width:75%;">

            <div class="col-md-12">

              <!-- Birthday -->
              <span class="text-secondary"><i class="fas fa-birthday-cake mr-1"></i> Born May 25th</span>
            </div>

          </div>

          <i class="fas fa-island-tropical" style="color: #f6f7f8 !important; z-index: -1; position: absolute; right: 0; bottom: -2.5rem; font-size: 17.25vw;"></i>

        </div>

      </div>

    </div>

    <div class="row mt-4 px-4 mb-1" style="opacity: 0.75; color: rgba(0, 0, 0, 0.4); font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 500;">
      <div class="col-md-6 text-left pl-4 mt-4" style="vertical-align: center; line-height: 1.5rem; font-size: 1rem;">
        <div class="pl-2">
          Reg. April 25th, 2020
        </div>
      </div>

      <div class="col-md-6 text-right pr-4 mt-4" style="font-weight: normal; vertical-align: center; line-height: 1.5rem; font-size: 1rem">

        <div class="pr-2">
          < < < < < < < < < < < < < < < < < < < <
        </div>

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

  <a style="color: rgba(0, 0, 0, 0.25);" href="http://toyhou.se/Aly"><i class="fas fa-code"></i></a>
</div>