[ F2U ] Unity (CODE (CC))

<!--------------------------------
        
        Mini Card - Code by jiko
        
        RULES
             – READ this thoroughly please, and maybe leave a small comment saying that you've read it? :'3
               [ https://toyhou.se/~bulletins/127417.code-rules ]
            
        TIPPY TIPS
            – this layout uses custom colours.
            – looking for a good online code editor?  try [ https://th.circlejourney.net/# ] !
            
            – need more help with HTML? try asking the help forum before PMing me! <3
            
        COLOURS
            – side bar : #222
            – accent   : #ce2b37

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

<div class="mx-auto p-1" style="font-size:13px; max-width:750px; margin:45px">
<div class="row no-gutters">

    
  <!-------------------------------- [ BOX ONE ] --------------------------------->
  <div class="col-lg-1 row no-gutters">
    <div class="col-12 p-1">
      <div class="p-3 text-center h-100" style="background-color:#222">
          
          <i class="fal fa-moon-stars fa-2x" style="color:#ce2b37"></i>
          
      </div>
    </div>
  </div>
  <!-------------------------------- [ BOX ONE END] --------------------------------->
  
  
  
  
  
  <!-------------------------------- [ BOX TWO ] --------------------------------->
  <div class="col-lg-11 row no-gutters">
    <div class="col-12 p-1">
      <div class="bg-faded p-2 h-100">
       
       <!-------------------------------- [ NAME ] --------------------------------->
       <div class="text-uppercase text-center" style="color:#ce2b37; font-weight:200; font-size:40px; letter-spacing:7px"> Name</div>
            
       <!-------------------------------- [ NAME END ] --------------------------------->
       
       
       <hr class="my-1 mb-3">
       
       
       <!-------------------------------- [ SIMPLE INFO ] --------------------------------->
       <div class="text-center">
           
           <!-- [ NAME / NICKNAME / ALILAS ] -->
           <span class="mx-2"><b>i.</b> content</span>
           
           <!-- [ AGE ] -->
           <span class="mx-2"><b>ii.</b> content </span>
           
           <!-- [ GENDER ] -->
           <span class="mx-2"><b>iii.</b> content</span>
           
           <!-- [ ORIENT ] -->
           <span class="mx-2"><b>iv.</b> content</span>
           
           <!-- [ SPECIES ] -->
           <span class="mx-2"><b>v.</b> content</span>
           
       </div>
       <!-------------------------------- [ SIMPLE INFO END ] --------------------------------->
       
       
       <hr class="my-1 mt-3 mb-3">
       <div class="row no-gutters">
           
           
       <!-------------------------------- [ AVATAR / IMAGE ] --------------------------------->
       <div class="col-lg-5 p-2">
           
           <!-- i don't really recommand using a square image (or anything smaller than 200x200px), but as long as the charatcer is in the middle, you're cool -->
           <!-- if your character's face is NOT at the top, you can change it to top, left, right, center or bottom [ https://toyhou.se/3599600.-f2u-backgrounds ] -->
           
           <div style="background:url(IMG URL HERE) center; 
                                background-size:cover; min-height:310px;">
          
          </div>
       </div>
       <!-------------------------------- [ AVATAR / IMAGE END ] --------------------------------->
       
       
       <!-------------------------------- [ INFO ] --------------------------------->
       <div class="col-lg-7 p-2" style="max-height:320px; overflow:auto">
           <div class="text-muted text-justify text-lowercase"> <!-- not feeling that lowercase aesthetic?  that's okay, just delete [ text-lowercase ] lol -->
               
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque id nibh tortor id aliquet. Id aliquet lectus proin nibh nisl condimentum id venenatis a.</p>
               
               <p>Lacus laoreet non curabitur gravida arcu ac tortor. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Euismod quis viverra nibh cras pulvinar. Lacinia at quis risus sed vulputate odio ut.</p>
               
               <p>Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Elementum eu facilisis sed odio morbi quis commodo odio. Nec nam aliquam sem et tortor consequat id. Risus nec feugiat in fermentum posuere urna. At tempor commodo ullamcorper a lacus vestibulum sed.</p>
               
               <p>Also, I scroll!</p>
           </div>
       </div>
       <!-------------------------------- [ INFO END ] --------------------------------->
       </div>
       
      </div>
    </div>
  </div>
  
  <!---------- [ CREDITS DON'T TOUCH PLS ] ---------->
  <small class="ml-2">code by <a href="https://toyhou.se/5643051.-f2u-unity" style="color:#ce2b37">jiko</a>
  
  <!-------------------------------- [ BOX TWO ] --------------------------------->
</div>
</div>