[F2U] Beastars ID (Code)

<!-------------------------- 
Hello and thank you for using Beastars ID!

Some quick info you should know: 
- PLEASE DO NOT REMOVE CREDIT
- This is as close as I could make it to the actual thing but if you want to play around with the colours feel free! The hexs I used are #fff and #B6C6D3
- Please PM if you have any questions or concerns ----------------->

<div class="row no-gutters justify-content-between mx-auto p-3" style="max-width:500px;">
  <div class="row no-gutters col-12 p-1" style="background:linear-gradient(#fff, #B6C6D3) top no-repeat;background-size:contain;border-radius: 10px;box-shadow: 0px 0px 12px rgba(0,0,0,.25)">
<!------------------------left------------------------------->
    <div class="col-7 p-1" style="background: url(https://i.imgur.com/Tgc1YEg.png)  top no-repeat;background-size:contain ;border-top-left-radius: 10px;border-bottom-left-radius:10px;">
  <!------------------------Info------------------------------->
     <div class="col-12 text-right text-uppercase p-0" style="font-size:25px;color:#000">
      <div>Cherryton school</div>
     </div>

    
    <div class="col-12 p-0">
     <div class="p-1 justify-content-between">
        <span class="px-1" style="letter-spacing: 1px;color:#000">
        ID Number</span>
        <span class style="letter-spacing: 1px;color:#000">
        info</span>
      </div>
    
      <div class="p-1 justify-content-between">
        <span class=" px-1" style="letter-spacing: 1px;color:#000">
        Birthday</span>
        <span class style="letter-spacing: 1px;color:#000">
        info</span>
      </div>
  
      <div class="p-1 justify-content-between">
        <span class="px-1" style="letter-spacing: 1px;color:#000">
        Order</span>
        <span class style="letter-spacing: 1px;color:#000">
        info</span>
      </div>
      
      <div class="p-1 justify-content-between">
        <span class="px-1" style="letter-spacing: 1px;color:rgba(255,255,255,0.1);font-size:1px">
        .</span>
        <span class style="letter-spacing: 1px;color:#000">
        info</span>
      </div>

<br>

      <div class="p-1 justify-content-between">
        <span class="px-1" style="letter-spacing: 1px;color:#000">
        Name</span>
        <span class style="letter-spacing: 1px;color:#000">
        info</span>
      </div>

      
        <div class="text-left pl-2 mt-2" style="color:#000;font-size:8px">
          <div>This is the proof that this animal is a student of this school</div>
        </div>
      </div>
    </div>
 <!------------------------right------------------------------->
        <div class="col-5 p-3">
          <div class="col-12 text-right text-uppercase p-0" style="color:#000">
            <div>
              student ID</div>
          </div>

        <div class="col-6 p-1 mt-1 justify-content-centre">
<!------------------------image------------------------------->
          <div class=" flex-grow-1 card border-0" style="background: #B6C6D3 url(LINK HERE) top no-repeat;background-size:cover;height:150px;width:150px;"> </div>
            <div class=" text-left mt-3" style="color:#000;font-size:8px">
              <div>Principal Gon <i class="fab fa-acquisitions-incorporated"style="color:#b50f04"></i></div>
            </div>

          </div>
        </div>

  </div>
<!------------------------CREDITS DO NOT REMOVE------------------------------->

  <div class="col-12 container p-0 text-right " style="font-size:10px;">
    <a href="/canadianlyynx">
    <i class="far fa-paw" style="color:#B6C6D3"></i>
    </a>
  </div>

</div>