[F2U] Tablet (CODE)

  <!-------------------


Tablet

custom colors: #000
               #fff
               #aaa

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

<div class="container mx-auto" style="max-width:600px; font-weight:300; font-family:georgia; letter-spacing:0.6px; font-size:14px">

<p class="font-italic" style="font-family:arial black; font-weight:900; font-size:2rem;
text-shadow:-3px 0px 0px #000, 1px 0px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000; color:#fff">
    
    NAME LASTNAME 

<i class="fas fa-head-side-brain ml-2 hidden-sm-down"></i>

</p>

<div class="card p-3 rounded-0" style="background:#000; color:#fff">
 <div class="row no-gutters">
     
  <!-- ICON - replace [IMG_URL] with your image's address -->   
<div class="col-sm-12 col-lg text-center mb-lg-0 mb-3">
<div class="p-2 mx-auto" style="border-width:0px 0px 2px 6px; border-style:solid; width:210px;">
    <img src="IMG_URL" style="height:210px; width:210px; object-fit:cover; border:1px solid #fff" class="p-1">
</div>
</div>
<!---->

<!-- replace [CHARACTER NAME] with your character's name! -->
<div class="col text-center align-items-center justify-content-center px-5 pb-3 pt-2" style="font-size:15px">
    <p>CHARACTER NAME SAYS . . .
    <br>
    <br>
    <i class="far fa-quote-left fa-fw"></i>

<!-- QUOTE - remember keep it short :) -->    
    <span class="font-italic"> A quote or random text can go here, remember to keep it short. </span>
<!---->

    <i class="far fa-quote-right fa-fw"></i>
    </p>
</div>

</div>
</div>   

<!-- SECOND BOX - BASICS -->
<div class="card rounded-0 mt-2 p-3" style="background:#fff; color:#000; overflow-y:auto">
<div class="d-flex flex-row-reverse">

<!-- SIDE IMAGE - replace IMG_URL with your image's address 

note: this will be hidden on mobile

-->  
<div class="col-lg-5 hidden-sm-down">
<img src="IMG_URL" style="object-fit:cover">
</div>

<!-- BASIC INFO - just replace the word [information] with your characters information -->    
  <div class="col-lg pr-3">
  <div class="ml-n3" style="text-align:justify;">
  <div class="row no-gutters pl-4" style="border-left:20px solid #000">
    
   <div class="col-lg-6 col-12 flex-column">
    
   <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-pen-to-square fa-fw"></i>
    name</span>
    <br>
    information
   </p>
   
   <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-comments fa-fw"></i>
    pronouns</span>
    <br>
    information
   </p>
   
   <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-cake fa-fw"></i>
    age</span>
    <br>
    information
   </p>
   
   <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-dna fa-fw"></i>
    species
    </span>
    <br>
    information
   </p>
   
   <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-pen-paintbrush fa-fw"></i>
    designer
    </span>
    <br>
    information
   </p>
    
   </div>
   
   <div class="col-lg-6 col-12 mt-3 mt-lg-0 flex-column">
    
   <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-signature fa-fw"></i>
    alias</span>
    <br>
    information
   </p>
   
   <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-venus-mars fa-fw"></i>
    gender</span>
    <br>
    information
   </p>
   
   <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-calendar-days fa-fw"></i>
    birth date</span>
    <br>
    information
   </p>
   
   <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-gear fa-fw"></i>
    occupation</span>
    <br>
    information
   </p>
   
   <div class="mt-3">
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-code fa-fw"></i>
    html</span>
    <br>
    <a href="/Phantasmagorical" style="color:#000">phantasmagorical</a>
   </div>
    
   </div>
   
  </div>
  </div>
  </div> 
  
</div>  
</div>

<!-- THIRD BOX - CHARACTER -->

<div class="card rounded-0 mt-2 py-3 px-4" style="height:300px; background:#000; color:#fff; overflow-y:auto">
<div class="row no-gutters">
 
 <!-- SIDE IMAGE - replace IMG_URL with your image's address -->
<div class="col-lg-4 col-12 mb-3 mb-lg-0">
 <img src="IMG_URL" style="width:100%; height:250px; object-fit:cover">
</div> 

<div class="col-lg pl-3">
<p style="font-size:1.3rem">CHARACTER</p>
<div class="row no-gutters mt-2">
  
<!-- STATS - simply change the percentage % of the width of each trait -->  
  
<div class="col-lg-6 pr-2">
    
 <div class="d-flex justify-content-between">
<p class="mr-3">charisma</p>    
<div class="progress card rounded-0 w-100 bg-transparent my-auto" 
style="height:10px; padding:2px; border:1px solid #fff">
<div class="progress-bar" style="width:50%; background:#fff;"></div>
</div>
</div>

<div class="d-flex justify-content-between mt-2">
<p class="mr-3">integrity</p>    
<div class="progress card rounded-0 w-100 bg-transparent my-auto" 
style="height:10px; padding:2px; border:1px solid #fff">
<div class="progress-bar" style="width:50%; background:#fff;"></div>
</div>
</div>

<div class="d-flex justify-content-between mt-2">
<p class="mr-3">temper</p>    
<div class="progress card rounded-0 w-100 bg-transparent my-auto" 
style="height:10px; padding:2px; border:1px solid #fff">
<div class="progress-bar" style="width:50%; background:#fff;"></div>
</div>
</div>

</div>  

<div class="col-lg-6 pl-2 mt-2 mt-lg-0">
    
 <div class="d-flex justify-content-between">
<p class="mr-3">humor</p>    
<div class="progress card rounded-0 w-100 bg-transparent my-auto" 
style="height:10px; padding:2px; border:1px solid #fff">
<div class="progress-bar" style="width:50%; background:#fff;"></div>
</div>
</div>

<div class="d-flex justify-content-between mt-2">
<p class="mr-3">courage</p>    
<div class="progress card rounded-0 w-100 bg-transparent my-auto" 
style="height:10px; padding:2px; border:1px solid #fff">
<div class="progress-bar" style="width:50%; background:#fff;"></div>
</div>
</div>

<div class="d-flex justify-content-between mt-2">
<p class="mr-3">intellect</p>    
<div class="progress card rounded-0 w-100 bg-transparent my-auto" 
style="height:10px; padding:2px; border:1px solid #fff">
<div class="progress-bar" style="width:50%; background:#fff;"></div>
</div>
</div>

</div>

<!-- DESCRIPTION - short description about your character's personality -->
<p class="small mt-3" style="height:120px; overflow-y:auto; text-align:justify">
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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. 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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>

</div>


</div>
</div>

<!-- DESIGN NOTES -->

<div class="row no-gutters flex-row-reverse mt-3">
 
<!-- SIDE IMAGE - replace IMG_URL with your image's address --> 
<div class="col-lg-4 col-12 mb-3 mb-lg-0">
 <img src="IMG_URL" style="width:100%; object-fit:cover" class="h-100">
</div> 

<div class="col-lg pr-3">
<p style="font-size:1.3rem">DESIGN NOTES</p>

<div class="row no-gutters my-2">
 
 <!-- DESIGN BASICS - just replace the word [information] with your characters information -->
<div class="col-lg-6">
   <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-ruler fa-fw"></i>
    height</span>
    <br>
    information
   </p>
   
      <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-person fa-fw"></i>
    build</span>
    <br>
    information
   </p>
   
    <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-box-open fa-fw"></i>
    obtained via</span>
    <br>
    information
   </p>
   
</div> 
  
<div class="col-lg-6 mt-3 mt-lg-0">

   <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-scale-balanced fa-fw"></i>
    weight</span>
    <br>
    information
   </p>    
    
   <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-icons fa-fw"></i>
    style</span>
    <br>
    information
   </p>
   
   <p>
    <span style="color:#aaa; font-style:italic">
    <i class="fal fa-sack-dollar fa-fw"></i>
    value</span>
    <br>
    information
   </p>
   
</div>   
</div>

<hr class="w-75" style="border-top:1px solid #fff; opacity:.25">

<!-- write extra design notes here! -->
<ul class="mt-3">
 <li>design note 1</li>
 <li>design note 2</li>
 <li>design note 3</li>
 <li>design note 4</li>
</ul>

</div>
</div>
</div>

<!-- MUSIC PLAYER -->

<div class="card px-2 mt-2 rounded-0" style="background:#fff; color:#000">
    
<div class="card-0">
  <div class="row no-gutters">
    <!-- video -->
    <div class="col-auto p-3 mx-auto">
      <!-- youtuble link -->
      <div
        class="card border-0 mt-2 rounded-0"
        style="overflow: hidden; width: 200px; height: 200px"
      >
          
         
        <div style="position: relative; left: -50px; top: -35px">
          <!-- repalce [xIKW3NKYBWw], leave ?controls=0 -->
          <iframe
            width="300"
            height="270"
            src="
          
          
          https://www.youtube-nocookie.com/embed/xIKW3NKYBWw?controls=0
          
          
          "
            frameborder="0"
          ></iframe>
        </div>
      </div>
    </div>
    <!-- song info -->
    <div class="col p-3 pb-4">
      <div
        class="card-0 pl-3 h-100"
        style="border: 1px solid #000; border-width: 0 0 0 15px"
      >
        <div class="my-2">
          <!-- song name -->
          <div class="display-4 text-uppercase mb-n3"
            style="font-size: 20pt; font-weight: 400; letter-spacing: 2px"
            >
            tablet
            </div>
            <br>
          <!-- artist & lyrics -->
          <div style="color:#aaa">
              
          <i> by TOOBOE</i>
          
<!-- please keep this to 4 lines! this doesn't scroll -->          
<p class="mt-3" style="line-height:25px">
Shinzou bakka yureteiru
<br>
Mata kori mo sezu ai wo sagashiteiru
<br>
Kyouten douchi mizou 
<br>
no akuma to deaeru hi made
          </p>
          
          </div>
          
        </div>
      </div>
    </div>

    <!---->
  </div>
</div>
    
    
</div>

<!-- LINKS AND RELATIONS -->

<div class="card rounded-0 mt-2 p-3" style="height:300px; background:#000; color:#fff; overflow-y:auto">
    
<p style="font-size:1.3rem">RELATIONSHIPS</p>
 
<!-- RELATION #1 -->  
<div class="mt-3">
<div class="d-flex">
<!-- ICON - replace IMG_URL with your image's address -->
<img src="IMG_URL" style="width:100px; height:100px; border:1px solid #fff; object-fit:cover" class="p-1">

<!-- replace CHARACTER_LINK with your character's porfile link --> 
<div class="col">
 <span>
  <a href="CHARACTER_LINK" class="text-white">Name Lastname</a>
 </span> 
 
 <!-- write down what kind of relationship this char has ( ex. friends, romantic partners, etc. ) -->
 
 || Relationship

<!-- description of that relationship -->  
<p class="small mt-1" style="height:75px; overflow-y:auto">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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
 
</div>
</div>    
</div>  

<!-- RELATION #2 -->  
<div class="mt-3">
<div class="d-flex">
<!-- ICON - replace IMG_URL with your image's address -->
<img src="IMG_URL" style="width:100px; height:100px; border:1px solid #fff; object-fit:cover" class="p-1">

<!-- replace CHARACTER_LINK with your character's porfile link --> 
<div class="col">
 <span>
  <a href="CHARACTER_LINK" class="text-white">Name Lastname</a>
 </span> 
 
 <!-- write down what kind of relationship this char has ( ex. friends, romantic partners, etc. ) -->
 
 || Relationship

<!-- description of that relationship -->  
<p class="small mt-1" style="height:75px; overflow-y:auto">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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
 
</div>
</div>    
</div> 

<!-- RELATION #3 -->  
<div class="mt-3">
<div class="d-flex">
<!-- ICON - replace IMG_URL with your image's address -->
<img src="IMG_URL" style="width:100px; height:100px; border:1px solid #fff; object-fit:cover" class="p-1">

<!-- replace CHARACTER_LINK with your character's porfile link --> 
<div class="col">
 <span>
  <a href="CHARACTER_LINK" class="text-white">Name Lastname</a>
 </span> 
 
 <!-- write down what kind of relationship this char has ( ex. friends, romantic partners, etc. ) -->
 
 || Relationship

<!-- description of that relationship -->  
<p class="small mt-1" style="height:75px; overflow-y:auto">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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
 
</div>
</div>    
</div> 

<!-- RELATION #4 -->  
<div class="mt-3">
<div class="d-flex">
<!-- ICON - replace IMG_URL with your image's address -->
<img src="IMG_URL" style="width:100px; height:100px; border:1px solid #fff; object-fit:cover" class="p-1">

<!-- replace CHARACTER_LINK with your character's porfile link --> 
<div class="col">
 <span>
  <a href="CHARACTER_LINK" class="text-white">Name Lastname</a>
 </span> 
 
 <!-- write down what kind of relationship this char has ( ex. friends, romantic partners, etc. ) -->
 
 || Relationship

<!-- description of that relationship -->  
<p class="small mt-1" style="height:75px; overflow-y:auto">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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
 
</div>
</div>    
</div> 

</div>
<!---->
</div>