[F2U] Star Burst 💥 (CODE)

  <!---------

STAR BURST !!

Remember to turn off WYSIWYG while using..

accent: #ffac32

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

<div class="container mx-auto my-5" style="max-width:950px; font-family:helvetica; letter-spacing:1.5px; font-weight:300; font-size:90%">
 <div class="row no-gutters flex-row-reverse">
 
 <!-- LEFT IMAGE - replace IMG_URL with your image address -->   
            <div class="col-lg-4 mb-3">
    <div class="card p-2" style="height:670px; border-radius:40px 0px;
    background-image:url(IMG_URL);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat">
     
     <!-- MUSIC BOX -->
      <div class="card border-0 p-2 tooltipster align-self-end" style="height:50px;width:50px; background: #f6f6f6; color:#222"
        
        title="song - artist"
        
      >
        
        <p class="m-auto">
        <!-- replace [ RtQk_G728GY ] with your youtube ID [ found after https://www.youtube.com/watch?v= ] -->
        <iframe class="w-100" frameborder="0" style="height:1rem;width:1rem;position:absolute;opacity:0.002"
            
          src="https://www.youtube.com/embed/RtQk_G728GY"

        ></iframe>
        
        <!-- play button fontawesome icon here - find more icons at fontawesome.com -->
        <i class="fal fa-music fa-fw fa-xl"></i>
        </p>
        
      </div>
     
    </div>
    </div> 
    
    <div class="col-lg pl-lg-3">
      <div class="card h-100 border-0 p-3">
        <div class="card border-0">
<div class="d-flex align-items-center mb-2" style="font-family:georgia; font-weight:900; font-size:1.5rem">
    
<!-- YOUR USERNAME HERE -->    
<div class="font-italic text-white" style="font-size:120%; text-shadow:-3px 0px 0px #000, 1px 0px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000;">
username

</div>
<hr class="flex-fill mx-3 my-auto" style="border-color:rgba(0,0,0,0.1);">
⟡
</div>    

<!-- Talk about yourself here! the box scrolls -->

<div class="card-block" style="background: #ffac32; color:white; font-weight:400; max-height:150px; overflow:auto; border-radius:20px 20px 0 20px">

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.    
</div>

<!-- TIME & WEATHER - change this if you want -->
<div class="d-flex justify-content-between my-3">
  <div>
     10:23 AM
  </div>
  <div class="col"><hr class="my-2"></div>
  <p>partly cloudy. 57% chance of rain</p>
</div>
        </div>  
        
        <div class="row no-gutters flex-fill">
            
        <div class="col-lg mb-sm-2 mb-lg-0">
        <div class="card h-100 p-1">
            
    <!-- NAVIGATION -->        
<div class="nav nav-fill">
<a class="nav-item nav-link btn btn-default border-0 rounded-0 active text-center" 

data-toggle="pill" href="#folders">
    
    
<i class="fas fa-list fa-sm"></i>
</a>
<a class="nav-item nav-link btn btn-default border-0 rounded-0 text-center" data-toggle="pill" href="#char">
<i class="fas fa-users fa-sm"></i>
</a>
</div> 

<!-- TAB CONTENT -->
<div class="card flex-fill border-0 rounded-0 p-2" style="height:300px; overflow:auto">
 <div class="tab-content">
     
<!-- FOLDERS -->     
   <div class="tab-pane fade active show" id="folders" style="transition-duration:0.3s;">
    <div class="card flex-fill border-0 rounded-0">
 
 <!-- FOLDER 1 - replace IMG_URL with your image address -->       
  <div class="card rounded-0 mt-1 border-0" style="height:80px; 
  background-size:cover; 
  background-position:center; 
  background-image:url('IMG_URL');">
  
  <!-- FOLDER NAME & LINK - replace LINK_HERE with your folder link -->
      
  <a class="h-100 btn btn-outline-secondary font-weight-bold btn-block align-items-end rounded-0 border-0" 
  href="LINK_HERE" 
  style="font-size:12pt;color:#fff;letter-spacing:2px; text-shadow:0 0 8px #000">
      
  [01] folder name
  
  </a>
  </div>   
  
  <!-- FOLDER 2 - replace IMG_URL with your image address --> 
  <div class="card rounded-0 mt-1 border-0" style="height:80px; 
  background-size:cover; 
  background-position:center; 
  background-image:url('IMG_URL');">
      
    <!-- FOLDER NAME & LINK - replace LINK_HERE with your folder link -->  
      
  <a class="h-100 btn btn-outline-secondary font-weight-bold btn-block align-items-end rounded-0 border-0" 
  href="LINK_HERE" 
  style="font-size:12pt;color:#fff;letter-spacing:2px; text-shadow:0 0 8px #000">
      
  [02] folder name
  
  </a>
  </div>  
  
  <!-- FOLDER 3 - replace IMG_URL with your image address --> 
  <div class="card rounded-0 mt-1 border-0" style="height:80px; 
  background-size:cover; 
  background-position:center; 
  background-image:url('IMG_URL');">
      
  <!-- FOLDER NAME & LINK - replace LINK_HERE with your folder link -->  
      
  <a class="h-100 btn btn-outline-secondary font-weight-bold btn-block align-items-end rounded-0 border-0" 
  href="LINK_HERE" 
  style="font-size:12pt;color:#fff;letter-spacing:2px; text-shadow:0 0 8px #000">
      
  [03] folder name
  
  </a>
  </div> 
  
  <!-- FOLDER 4 - replace IMG_URL with your image address --> 
  <div class="card rounded-0 mt-1 border-0" style="height:80px; 
  background-size:cover; 
  background-position:center; 
  background-image:url('IMG_URL');">
      
    <!-- FOLDER NAME & LINK - replace LINK_HERE with your folder link -->  
      
  <a class="h-100 btn btn-outline-secondary font-weight-bold btn-block align-items-end rounded-0 border-0" 
  href="LINK_HERE" 
  style="font-size:12pt;color:#fff;letter-spacing:2px; text-shadow:0 0 8px #000">
      
  [04] folder name
  
  </a>
  </div>
  
  <!-- YOU CAN ADD MORE HERE -->
  
  </div>
  </div>
 
 <!-- FEATU#000 CHARACTERS -->  
 <div class="tab-pane fade"  id="char" style="transition-duration:0.3s;">

<div class="d-flex justify-content-center">
    
    <!-- CHARACTER #1 --> 
      <div class="card border-0 p-1 m-1">
          
    <!-- ICON - replace https://via.placeholder.com/150 with your image address -->      
    <img src="https://via.placeholder.com/150" 
    style="width:150px; box-shadow:-5px 5px 0px #ffac32; border:2px solid #ffac32" class="rounded">
    
    <!-- LINK TO YOUR CHARACTER - replace LINK_HERE with the link to your character -->
    <a href="LINK HERE" class="text-center text-danger font-weight-bold mt-2">name here</a>
    </div> 
    
    <!-- CHARACTER #2 -->
      <div class="card border-0 p-1 m-1">
          
    <!-- ICON - replace https://via.placeholder.com/150 with your image address -->      
    <img src="https://via.placeholder.com/150" 
    style="width:150px; box-shadow:-5px 5px 0px #ffac32; border:2px solid #ffac32" class="rounded">
    
    <!-- LINK TO YOUR CHARACTER - replace LINK_HERE with the link to your character -->
    <a href="LINK HERE" class="text-center text-danger font-weight-bold mt-2">name here</a>
    </div> 
</div>

<div class="d-flex justify-content-center">
    
    <!-- CHARACTER #3 -->
      <div class="card border-0 p-1 m-1">
          
    <!-- ICON - replace https://via.placeholder.com/150 with your image address -->      
    <img src="https://via.placeholder.com/150" 
    style="width:150px; box-shadow:-5px 5px 0px #ffac32; border:2px solid #ffac32" class="rounded">
    
    <!-- LINK TO YOUR CHARACTER - replace LINK_HERE with the link to your character -->
    <a href="LINK HERE" class="text-center text-danger font-weight-bold mt-2">name here</a>
    </div> 
    
    <!-- CHARACTER #4 -->
      <div class="card border-0 p-1 m-1">
          
    <!-- ICON - replace https://via.placeholder.com/150 with your image address -->      
    <img src="https://via.placeholder.com/150" 
    style="width:150px; box-shadow:-5px 5px 0px #ffac32; border:2px solid #ffac32" class="rounded">
    
    <!-- LINK TO YOUR CHARACTER - replace LINK_HERE with the link to your character -->
    <a href="LINK HERE" class="text-center text-danger font-weight-bold mt-2">name here</a>
    </div> 
</div>

<div class="d-flex justify-content-center">
    
    <!-- CHARACTER #5 -->
      <div class="card border-0 p-1 m-1">
          
    <!-- ICON - replace https://via.placeholder.com/150 with your image address -->      
    <img src="https://via.placeholder.com/150" 
    style="width:150px; box-shadow:-5px 5px 0px #ffac32; border:2px solid #ffac32" class="rounded">
    
    <!-- LINK TO YOUR CHARACTER - replace LINK_HERE with the link to your character -->
    <a href="LINK HERE" class="text-center text-danger font-weight-bold mt-2">name here</a>
    </div> 
    
    
    <!-- CHARACTER #6 -->
      <div class="card border-0 p-21 m-1">
          
    <!-- ICON - replace https://via.placeholder.com/150 with your image address -->      
    <img src="https://via.placeholder.com/150" 
    style="width:150px; box-shadow:-5px 5px 0px #ffac32; border:2px solid #ffac32" class="rounded">
    
    <!-- LINK TO YOUR CHARACTER - replace LINK_HERE with the link to your character -->
    <a href="LINK HERE" class="text-center text-danger font-weight-bold mt-2">name here</a>
    </div> 
</div>

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

<!-- BASIC INFO -->        
<div class="col-lg-5 pl-lg-2">
<div class="card h-100 p-3">

<div class="my-2">
<div class="d-flex justify-content-between">
<span class="tooltipster" title="pronouns" style="color:#ffac32;">
<i class="far fa-signature"></i></span>
<span>pro/nou/ns</span>
</div>

<hr class="my-2">

<div class="d-flex justify-content-between">
<span class="tooltipster" title="age / birthday" style="color:#ffac32;">
<i class="far fa-cake"></i></span>
<span>age / birthday</span>
</div>

<hr class="my-2">

<div class="d-flex justify-content-between">
<span class="tooltipster" title="timezone" style="color:#ffac32;">
<i class="far fa-clock"></i></span>
<span>+utc</span>
</div>

<hr class="my-2">

<div class="d-flex justify-content-between">
<span class="tooltipster" title="languages" style="color:#ffac32;">
<i class="far fa-comments"></i></span>
<span>languages</span>
</div>

<hr class="my-2">

<div class="d-flex justify-content-between">
<span class="tooltipster" title="location" style="color:#ffac32;">
<i class="far fa-globe"></i></span>
<span>location</span>
</div> 

<hr class="my-2">

<!-- ART STATUS -->

<div class="d-flex justify-content-between">
<span class="tooltipster" style="color:#ffac32;">
commissions</span>
<span>open</span>
</div> 

<hr class="my-2">

<div class="d-flex justify-content-between">
<span class="tooltipster" style="color:#ffac32;">
trades</span>
<span>ask</span>
</div> 

<hr class="my-2">

<div class="d-flex justify-content-between">
<span class="tooltipster" style="color:#ffac32;">
collabs</span>
<span>mutuals only</span>
</div> 

<hr class="my-2">

<div class="d-flex justify-content-between">
<span class="tooltipster" style="color:#ffac32;">
requests</span>
<span>closed</span>
</div> 

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

<!-- SOCIALS - replace LINK_HERE with the link to your socials! -->
      <div class="card mt-2 h-100 p-2" style="max-height:35px; font-weight:800; color:#ffac32">
        <p>
        <a href="LINK_HERE">
        <i class="fa-brands fa-twitter fa-lg fa-fw my-auto" style="color:#ffac32"></i>
        </a> ◦
        
        <a href="LINK_HERE">
        <i class="fa-brands fa-tumblr fa-lg fa-fw my-auto" style="color:#ffac32"></i>
        </a> ◦
        
        <a href="LINK_HERE">
        <i class="fa-brands fa-instagram fa-lg fa-fw my-auto" style="color:#ffac32"></i>
        </a> ◦
        
        <a class="tooltipster" title="username#000">
        <i class="fa-brands fa-discord fa-lg fa-fw my-auto" style="color:#ffac32"></i>
        </a>
        </p>
        
      </div>

<!-- C#000IT - DON'T REMOVE -->      
<div class="d-flex align-items-center mt-2 small">
<hr class="flex-fill my-auto" style="border-color:rgba(0,0,0,0.1);">    
<div class="mx-3">
<a href="https://toyhou.se/Phantasmagorical" class="text-danger">code by phanta</a>
</div>
<hr class="flex-fill my-auto" style="border-color:rgba(0,0,0,0.1);">
<div class="mx-3">
<a href="https://toyhou.se/Togo" class="text-danger">layout by togo</a>
</div>
<hr class="flex-fill my-auto" style="border-color:rgba(0,0,0,0.1);">
</div>
</div> 
</div>
<!----> 

</div>
</div>