36.Namecard [F2U] (Code)

<!--
          
    【F2U】 36.Namecard
    
      // Code by Leporidebug
      // Layout by Genshin Impact

      ////////////////// Rules ///////////////////
      
      Do not redistribute this template
      Please keep the credit somewhere visible
      Feel free to change everything else to your liking
      // Thank you for using this template. //
      
      //// Color Notes ////
      avatar background : d18669
      progress bar : b8e851
      
-->
<!----- CARD WRAPPER ----->
<div class="card border-0 p-1 mx-auto" style="background:rgba(0,0,0,.1);max-width:505px;box-shadow:0 0 5px rgba(0,0,0,.4)">
<div class="card border-0 p-3 mx-auto bg-dark" style="max-width:500px;background-size:cover;background-position:center;
  
  /*----- namecard background wallpaper -----*/;
  background-image:url(IMG_URL);

">
  <div class="row no-gutters">
    
    <!----- LEFT COLUMN ----->
    <div class="col-lg-4 col-12 p-1 my-auto">
      <!----- MAIN AVATAR ----->
      <div class="card rounded-circle mx-auto border-0" style="height:110px;width:110px;background:rgba(0,0,0,.05)">
      <div class="card p-1 rounded-circle mx-auto my-auto bg-white border-0" style="height:100px;width:100px;">
        
        <!----- avatar image ----->
        <img class="rounded-circle"
          
          style="background-color:#d18669;"
        
          src="IMG_URL">
      
      </div>
      </div>
      <!----- MAIN AVATAR END ----->
      
      <!----- USER HANDLE ----->
      <div class="card my-2" style="border-radius:100px;border-width:1.5px;border-color:#fff;background-color:rgba(0,0,0,.3)">
        <p class="text-center text-white small px-2" style="font-weight:500;text-shadow:0 0 2px rgba(0,0,0,.5)">
          
          @ userhandle
        
        </p>
      </div>
      <!----- USER HANDLE END ----->
    </div>
    <!----- LEFT COLUMN END ----->
    
    
    <!----- RIGHT COLUMN ----->
    <div class="col-lg-8 col-12 p-1">
      <!----- NAME ----->
      <div class="card border-0 rounded-0 p-1" style="background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.3), rgba(0,0,0,0))">
      <div class="row no-gutters">
        <div class="col-6">
          <h3 class="text-white my-auto font-weight-bold" style="font-family:'Georgia';text-shadow:0 0 3px rgba(0,0,0,.5)">
        
            Name
        
          </h3>
        </div>
        
        <!----- right icon decor ----->
        <div class="col-6 text-right">
          <span class="bg-white rounded text-dark p-1">
            <i class="fas fa-pen fa-fw"></i>
          </span>
        </div>
        <!----- right icon decor end ----->
      </div>
      </div>
      <!----- NAME END ----->
      
      <!----- SIGNATURE ----->
      <p class="text-white pr-2 py-1" style="font-weight:500;">
        
        Write a signature here. It doesn't scroll, so maybe keep it short! Lorem ipsum dolor sit amet.
      
      </p>
      <!----- SIGNATURE END ----->
      
      <!----- FLAVOR TEXT / LEVEL ----->
      <div class="card border-0 rounded-0 p-1" style="background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.3), rgba(0,0,0,0))">
      <div class="row no-gutters">
        <div class="col-6">
          <p class="text-white my-auto font-weight-bold" style="font-family:'Georgia';text-shadow:0 0 3px rgba(0,0,0,.5)">
        
            Lvl.
        
          </p>
        </div>
        
        <div class="col-6 text-right">
          <p class="text-white my-auto font-weight-bold">
        
            0
        
          </p>
        </div>
        
      </div>
      </div>
      <!----- FLAVOR TEXT / LEVEL END ----->
      
      
      <!----- EXP BAR ----->
      <!----- change the width % to alter ----->
      <div class="progress m-1 modal-open" style="background:rgba(0,0,0,.4);">
        <div class="progress-bar" style="height:5px;
        
          width:50%;
          background-color:#b8e851;
        
        "></div>
      </div>
      <!----- EXP BAR END ----->
      
      <!----- LINKS ----->
      <div class="card border-0 rounded-0 p-1" style="background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.3), rgba(0,0,0,0))">
        <p style="text-shadow:0 0 3px rgba(0,0,0,.5)">
          <!----- CARRD ----->
          <a href="LINK" class="text-white"><i class="fas fa-id-card fa-fw"></i></a>
          
          <!----- DEVIANTART ----->
          <a href="LINK" class="text-white"><i class="fab fa-deviantart fa-fw"></i></a>
          
          <!----- INSTAGRAM ----->
          <a href="LINK" class="text-white"><i class="fab fa-instagram fa-fw"></i></a>
          
          <!----- TWITTER ----->
          <a href="LINK" class="text-white"><i class="fab fa-twitter fa-fw"></i></a>
          
          <!----- add more from here ----->
          
        </p>
      </div>
      <!----- LINKS END ----->
      
    </div>
    <!----- RIGHT COLUMN END ----->
  </div>
</div>
</div>
<!----- CARD END ----->

<!----- CREDITS --- please keep somewhere visible! ----->
<p class="small text-center mt-1 faded">
  <!----- coding credit ----->
  <a class="text-muted" href="https://toyhou.se/17327897" style="text-decoration:none;">code by Leporidebug</a>
   |
  <!----- image credit ----->
  <a class="tooltipster text-muted" href="LINK" title="image credit"><i class="fas fa-image fa-fw"></i></a>
</p>
<!----- CODE END ----->