Monochrome (F2U) (Code)

<!-- Monochrome by Exo-Comet -->

<!-- Main profile -->
<div class="mx-auto" style="border:2px solid #008385;max-width:600px;background:#daf2f2;color:black">
  
  <!-- First row -->
  <div class="row m-0">
    
    <!-- First image -->
    <div class="col-md-4 pl-2 pt-2 pb-2 pr-md-0 pr-2">
      <div class="d-block m-0 p-2 h-100" style="background:white;
            border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8">
        
        <!-- Element with the background image -->
        <div class="h-100" style="
          background: url('URLHERE')
          no-repeat center;background-size:cover;min-height:150px"></div>
      </div>
      
    </div>
    
    <!-- Info column -->
    <div class="col px-2 pb-2 pt-md-2 pt-0 flex-column">
      
      
      <div class="p-1" style="position:relative;background:white;border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8">
        
        <!-- Character name -->
        <h1 class="font-italic display-4 m-0 text-monospace">Character</h1>
        
        <!-- Icon - replace the bolt with whatever you want -->
        <i class="fa-solid fa-bolt display-4" style="position:absolute;right:.25em;top:.15em;transform:rotate(2deg);color:#00b5b8;"></i>
      </div>
      
      
      <!-- Divider -->
      <div class="p-1 my-2" aria-hidden="true" style="background:white;border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8"></div>
      
      <!-- Gender -->
      <div class="row m-n1 pb-2">
        
        <div class="col-auto p-1">
          <div class="p-1 h-100 align-items-center" style="background:white;border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8">
            
            <!-- Change the icon if you want -->
            <i class="fa-solid fa-venus-mars fa-fw"></i>
            
          </div>
        </div>
        
        <div class="col-auto p-1">
          <div class="p-1" style="background:white;border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8">Gender</div>
        </div>
        
        <div class="col p-1">
          
          <div class="p-1 text-monospace" style="background:white;border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8">
            <!-- Gender content -->
            content
          </div>
          
        </div>
      </div>
      
      
      <div class="row m-n1 pb-2">
        
        <div class="col-auto p-1">
          <div class="p-1 h-100 align-items-center" style="background:white;border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8">
            
            <i class="fa-solid fa-fw fa-cake"></i>
            
          </div>
        </div>
        
        <div class="col-auto p-1">
          <div class="p-1" style="background:white;border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8">Age</div>
        </div>
        
        <div class="col p-1">
          <div class="p-1 text-monospace" style="background:white;border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8">
            <!-- Age content -->
            content
          </div>
        </div>
        
      </div>
      
      <div class="row m-n1">
        
        <div class="col-auto p-1">
          <div class="p-1 h-100 align-items-center" style="background:white;border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8">
            
            <i class="fa-solid fa-fw fa-dna"></i>
            
          </div>
        </div>
        
        <div class="col-auto p-1">
          <div class="p-1" style="background:white;border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8">Species</div>
        </div>
        
        <div class="col p-1">
          <div class="p-1 text-monospace" style="background:white;border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8">
            <!-- Species content -->
            content
          </div>
        </div>
        
      </div>
      
      <!-- Description box -->
      <div class="p-1 pl-3 mt-2" style="position:relative;background:white;border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8">
        
        <!-- Inner border -->
        <span aria-hidden="true" style="position:absolute;left:.35em;top:.25em;bottom:.25em;border-left:2px solid #00b5b8"></span>
        
        <!-- Description -->
        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.
        
      </div>
    </div>
  </div>
  
  <!-- Second row -->
  <div class="row m-n1 px-2 pb-2">
    
    <!-- Quote -->
    <div class="col p-1">
      <div class="p-2 mb-2 text-center text-monospace font-italic h-100 align-items-center justify-content-center" style="background:white;border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8;font-size:1.3em">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      </div>
    </div>
    
    <!-- Second image -->
    <div class="col-3 p-1">
      <div class="p-1" style="background:white;border-right:2px solid #00b5b8;border-bottom:2px solid #00b5b8">
        
        <div style="
          background:url('URLHERE')
          no-repeat center;background-size:cover;min-height:125px"></div>
        
      </div>
    </div>
    
  </div>
  
</div>

<!-- Credit - please do not remove or make this difficult to find -->
<p class="text-center">
  <a href="https://toyhou.se/Exo-Comet" title="Profile by Exo-Comet" data-toggle="tooltip"><i class="fa-solid fa-meteor"></i></a>
</p>