Capsules (-> Code Custom Color)

<!--- Notes ---

- This profile uses custom colors, meaning you can change the colors to your liking.
- Use ctrl+f to find and replace each color
- Color 1: #0476A8

- Rules and more info: https://toyhou.se/~forums/16.htmlcss-graphics/39007.-free-html-templates

--------------->


<div class="container">
  <div class="row justify-content-between">
    
    
    <!------------------------ First Row ------------------------>
    <div class="col-md-5 mb-4">
      <div class="card card-block card-inverse text-white display-4" style="border-radius:15px;background-color:#0476A8;border-color:#0476A8;">
        
        <!-- Put Name Here -->
        Full Name
        
      </div>
    </div>
    <div class="col-md-3 mb-4">
      <div class="card card-block card-inverse text-white display-4" style="border-radius:15px;background-color:#0476A8;border-color:#0476A8;">
        
        <!-- Put Age Here -->
        Age
        
      </div>
    </div>
    <div class="col-md-4 mb-4">
      <div class="card card-block card-inverse text-white display-4" style="border-radius:15px;background-color:#0476A8;border-color:#0476A8;">
        
        <!-- Put Gender Here -->
        Gender
        
      </div>
    </div>
    
    
    <!------------------------ Second Row ------------------------>
    <div class="col-md-3 mb-4">
      <div class="card card-block card-inverse text-white display-4" style="border-radius:15px;background-color:#0476A8;border-color:#0476A8;">
        
        <!-- Put Pronouns Here -->
        Pronouns
        
      </div>
    </div>
    <div class="col-md-4 mb-4">
      <div class="card card-block card-inverse text-white display-4" style="border-radius:15px;background-color:#0476A8;border-color:#0476A8;">
        
        <!-- Put Occupation Here -->
        Occupation
        
      </div>
    </div>
    <div class="col-md-5 mb-4">
      <div class="card card-block card-inverse text-white display-4" style="border-radius:15px;background-color:#0476A8;border-color:#0476A8;">
        
        <!-- Put Sexuality Here -->
        Sexuality
        
      </div>
    </div>
    
    
    <!------------------------ Third Row ------------------------>
    <div class="col-12 mb-4">
      <div class="card card-block card-inverse text-white display-4" style="border-radius:15px;background-color:#0476A8;border-color:#0476A8;">
        
        <!-- Put Quote Here -->
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        
      </div>
    </div>
  </div>
  
  
  <!------------------------ Fourth Row ------------------------>
  <div class="row justify-content-between no-gutters mb-4">
    <div class="col-3">
      <div class="card card-block rounded-left text-white display-4 h-100" style="border-top-right-radius:0px;border-top-left-radius:15px;border-bottom-right-radius:0px;border-bottom-left-radius:15px;background-color:#0476A8;border-color:#0476A8;">
        Likes
      </div>
    </div>
    <div class="col-9">
      <div class="card card-block bg-faded display-4" style="border-width:5px;border-top-right-radius:15px;border-top-left-radius:0px;border-bottom-right-radius:15px;border-bottom-left-radius:0px;border-color:#0476A8;color:#0476A8;">
        
        <!-- Put Likes Here -->
        List of likes
        
      </div>
    </div>
  </div>
  
  
  <!------------------------ Fifth Row ------------------------>
  <div class="row justify-content-between no-gutters mb-4">
    <div class="col-3">
      <div class="card card-block rounded-left text-white display-4 h-100" style="border-top-right-radius:0px;border-top-left-radius:15px;border-bottom-right-radius:0px;border-bottom-left-radius:15px;background-color:#0476A8;border-color:#0476A8;">
        Dislikes
      </div>
    </div>
    <div class="col-9">
      <div class="card card-block bg-faded display-4" style="border-width:5px;border-top-right-radius:15px;border-top-left-radius:0px;border-bottom-right-radius:15px;border-bottom-left-radius:0px;border-color:#0476A8;color:#0476A8;">
        
        <!-- Put Dislikes Here -->
        List of dislikes
        
      </div>
    </div>
  </div>
  
  
  <!------------------------ Sixth Row ------------------------>
  <div class="row justify-content-between no-gutters">
    <div class="col-3">
      <div class="card card-block rounded-left text-white display-4 h-100" style="border-top-right-radius:0px;border-top-left-radius:15px;border-bottom-right-radius:0px;border-bottom-left-radius:15px;background-color:#0476A8;border-color:#0476A8;">
        About
      </div>
    </div>
    <div class="col-9">
      <div class="card card-block bg-faded display-4" style="border-width:5px;border-top-right-radius:15px;border-top-left-radius:0px;border-bottom-right-radius:15px;border-bottom-left-radius:0px;border-color:#0476A8;color:#0476A8;">
     
        <!-- Put About Here -->
        Can be a list of traits or a paragraph
    
      </div>
    </div>
  </div>

  <!-- Credits, Don't Remove -->
  <a class="tooltipster pull-right" style="color:#0476A8" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
    <i class="fa-solid fa-code"></i>
  </a>

</div>