Create a new version of paste:

<!---- QUICK NOTE BEFORE STARTING; ------
 
 
Type ctrl+f to locate and replace the color of any of the item below.
 
  - background color: #110d0f
  - background card color: #000
  - main color: #f95e41
  - font color: #ece6df
  
  - dividers (scissors): #c9391f
  - darker main color: #5e180c
  
 
-------->

<!------------ CONTENT ------------>

<div class="container mt-5" style="max-width: 1090px; font-family: ms gothic; color: #ece6df; font-size: 14px">
   
<!------------ CARD START ------------>

<div class="card p-1 border-0 rounded-0" style="background: #110d0f; box-shadow: 4px 4px 0 #c9391f">
    
<!------------ FIRST COLUMN ------------>
       
<div class="row no-gutters">
<div class="col-lg-4 p-2">
   
<!------------ PATIENT NUMBER ------------>

<div class="card p-1 rounded-0 border-0" style="background: #000; box-shadow: 4px 4px 0 #f95e41; margin-bottom: -30px; z-index: 10; margin-left: 80px; width:260px;">
<p class="text-center" style="font-size: 21px; font-family: georgia;"><span style="color: #f95e41;">   
<i class="far fa-barcode"></i><i class="far fa-barcode"></i><i class="far fa-barcode"></i></span>

PATIENT
<span style="font-family: tahoma">
#0000</span>
   
<!------------ END ------------>

</p></div>
   
<!------------ MAIN IMAGE ------------>

<div class="card border-0 rounded-0 mt-3" style="background: url(IMG_URL) center; background-size: cover;
height: 415px; width: 350px; box-shadow: 4px 4px 0 #f95e41">
 
<!------------ ICON ------------>

<i class="far fa-paperclip" style="font-size: 70px; color: #ddd; position: absolute; left: -10px; top: -20px; text-shadow: 3px 3px 0 rgba(0,0,0,0.30)"></i>
   
<!------------ BASICS START ------------>

<div class="mt-auto"/>
<div class="collapse px-3 p-3" id="open" style="background: #000; overflow: auto;">
<div class="tab-pane fade show active" id="one">
   
<!------------ ADJETIVES ------------>

<div class="justify-content-center mt-3">
    
    <div class="card border-0 rounded-0 px-1 m-1" style="background-color: #5e180c;">
    adjective
    </div>
    
    <div class="card border-0 rounded-0 px-1 m-1" style="background-color: #5e180c;">
    adjective
    </div>
    
    <div class="card border-0 rounded-0 px-1 m-1" style="background-color: #5e180c;">
    adjective
    </div>
   
<!------------ ADD MORE ABOVE THIS LINE ------------>

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

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">NAME</span> 
                    
        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right"> content
        </div>
           
<!------------ ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">GENDER</span> 
                    
        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right"> content
        </div>
           
<!------------ ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">SPECIES</span> 
                    
        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right">
        <a href="https://toyhou.se/~world/90844.jomyu-s-temple" style="color: #f95e41; font-weight: bold">Ware-jomyu</a>
        </div>
           
<!------------ ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">AGE</span> 
                    
        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right"> content
        </div>
           
<!------------ ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">ORIENT.</span> 
                    
        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right"> content
        </div>
           
<!------------ ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">ROLE</span> 
                    
        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right"> content
        </div>
       
<!------------ ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">VOICE/SONG</span> 
                    
        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right">
        <a href="LINK_URL" style="color: #f95e41;"><i class="fas fa-music"></i></a>
        </div>
   
<!------------ TRAITS ------------>

<div class="justify-content-between mt-1 mb-2" style="font-size: 20px; color: #c9391f">
<i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span>
</div>
   
<!------------ ------------>

        <div class="justify-content-between py-1 mt-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">EXTENSIONS</span> 
                    
        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right"> content
        </div>
   
<!------------ ------------>

        <div class="justify-content-between py-1">
        <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">INTERIOR</span> 
                    
        <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
        <span class="text-right"> content
        </div>
   
<!------------ BASICS END ------------>

</div></div>
   
<!------------ BASICS LINK ------------>

<a class="p-1 text-center" style="color: #ece6df; background: #000; font-family: georgia; font-size: 25px;" data-toggle="collapse" href="#open" aria-expanded="false">
<span style="background: #f95e41;"><s>P</span>ATIENT'S</s> INFO</a>
 
</div></div>
   
<!------------ FIRST COLUMN END ------------>
   
<!------------ SECOND COLUMN START ------------>

<div class="col-lg-7 p-2">

<div class="card-block">
   
<!------------ TABS ------------>

<ul class="nav p-1" style="z-index: 100; margin-bottom: -40px">
   
<!------------ ------------>

<li class="nav-item d-flex m-1" style="clip-path: polygon(50% 26%, 100% 0, 100% 100%, 0 100%, 0 0); width: 70px; height: 75px; background: #f95e41;">
<a href="#basic" class="nav-link active btn d-flex border-0 w-100" data-toggle="tab">

<span class="m-auto" style= "color: #fff; font-family: georgia; font-size: large;">Ⅰ</span>
</a></li>
   
<!------------ ------------>

<li class="nav-item d-flex m-1" style="clip-path: polygon(50% 26%, 100% 0, 100% 100%, 0 100%, 0 0); width: 70px; height: 75px; background: #f95e41;">
<a href="#info" class="nav-link btn d-flex border-0 w-100" data-toggle="tab">
                        
<span class="m-auto" style= "color: #fff; font-family: georgia; font-size: large;">Ⅱ</span></i>
</a></li>
   
<!------------ ------------>

<li class="nav-item d-flex m-1" style="clip-path: polygon(50% 26%, 100% 0, 100% 100%, 0 100%, 0 0); width: 70px; height: 75px; background: #f95e41;">
<a href="#story" class="nav-link btn d-flex border-0 w-100" data-toggle="tab">

<span class="m-auto" style= "color: #fff; font-family: georgia; font-size: large;">Ⅲ</span></i>
</a></li>
   
<!------------ ------------>

<li class="nav-item d-flex m-1" style="clip-path: polygon(50% 26%, 100% 0, 100% 100%, 0 100%, 0 0); width: 70px; height: 75px; background: #f95e41;">
<a href="#friends" class="nav-link btn d-flex border-0 w-100" data-toggle="tab">

<span class="m-auto" style= "color: #fff; font-family: georgia; font-size: large;">Ⅳ</span></i>
</a></li>
   
<!------------ TABS END ------------>

</ul></div>
   
<!------------ MAIN CARD START ------------>

<div class="col-md-7 col-lg-12">
<div class="card p-3 border-0 rounded-0" style="background:#000; box-shadow: 4px 4px 0 #f95e41; height: 351px; overflow: auto;">
   
<!------------ MAIN HOSPITAL ICON ------------>
    
<div style="position: absolute; bottom: 10px; right: 50px">
<i class="far fa-hospital" style="color: #ffa7a7; font-size: 100px; opacity: 0.1"></i>
</div>

   
<!------------ BASICS TAB ------------>

<div class="tab-content">
<div class="tab-pane fade in active show" id="basic">
   
<!------------ ABOUT TITLE ------------>
    
<div class="row no-gutters" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
<span style="background-color: #f95e41;"><s>A</s></span>BOUT</div>
<div class="col-lg-1"><i class="far fa-folder-user" style="color: #c9391f"></i>
</div></div>

<div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
<i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>
   
<!------------ END ------------>
  
<div style="height: 242px; overflow: auto">
       
<!------------ TITLE OR PHRASE ------------>

    <blockquote class="justify-content-between mb-3 mt-1" style="border-left: 6px solid #f95e41; font-family: georgia;">
    <i class="fad fa-quote-left" style="color: #f95e41;"></i>
    
        Some epic phrase or title in general... yas
        
    <i class="fad fa-quote-right" style="color: #f95e41;"></i>
    </blockquote>
   
<!------------ CONTENT ------------>
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. 
   
<!------------ PERSONALITY TITLE ------------>

<div class="row no-gutters mt-2" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
<span style="background-color: #f95e41;"><s>P</s></span>ERSONALITY</div>
<div class="col-lg-1"><i class="far fa-id-card" style="color: #c9391f"></i>
</div></div>

<div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
<i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>
   
<!------------ CONTENT ------------>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
   
<!------------ TRIVIA TITLE ------------>

<div class="row no-gutters mt-2" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
<span style="background-color: #f95e41;"><s>T</s></span>RIVIA</div>
<div class="col-lg-1"><i class="far fa-list" style="color: #c9391f"></i>
</div></div>

<div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
<i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>  
   
<!------------ CONTENT - add more using <li> ------------>

<ul>
    
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    
</ul>
   
<!------------ BASICS TAB END ------------>

</div></div>
    
   
<!------------ INFO TAB ------------>

<div class="tab-pane fade in" id="info">
   
<!------------ EXTRAS TITLE ------------>
    
<div class="row no-gutters" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
<span style="background-color: #f95e41;"><s>E</s></span>XTRAS</div>
<div class="col-lg-1"><i class="far fa-scalpel" style="color: #c9391f"></i>
</div></div>

<div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
<i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>
    
<!------------ END ------------>
  
<div style="height: 242px; overflow: auto">
   
<!------------ LIKES & DISLIKES ------------>

<div class="row no-gutters">
<div class="col-lg-6 p-1 px-2" style="height: 215px; overflow: auto">
   
<!------------ LIKES ------------>

<div class="mb-1" style="color: #f95e41; font-size: 17px; letter-spacing: 2px; font-weight: bold">LIKES.</div>

<ul>
    
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    
</ul>
   
<!------------ DISLIKES ------------>

<div class="mb-1" style="color: #f95e41; font-size: 17px; letter-spacing: 2px; font-weight: bold">DISLIKES.</div>

<ul>
    
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    
</ul>
   
<!------------ END ------------>

</div>
   
<!------------ PROGRESS BARS ------------>

<div class="col-lg-6 p-1 px-2" style="height: 215px; overflow: auto">
   
<!------------ ------------>
   
<div class="row no-gutters"><div style="margin-bottom: -5px">
<span style="color: #f95e41; letter-spacing: 2px; font-weight: bold">STRENGTH</span></div>
<div class="col px-1 pb-1"></div><div class="col-auto">

<span style="font-size: 13px; opacity: 0.4">
50%
</span></div></div>
<div class="progress rounded-0" style="height: 5px; background-color: #ddd">
<div class="progress-bar" style="width: 50%; background-color: #5e180c">
</div></div>
   
<!------------ ------------>

<div class="row no-gutters mt-1"><div style="margin-bottom: -5px">
<span style="color: #f95e41; letter-spacing: 2px; font-weight: bold">EMPATHY</span></div>
<div class="col px-1 pb-1"></div><div class="col-auto">

<span style="font-size: 13px; opacity: 0.4">
50%
</span></div></div>
<div class="progress rounded-0" style="height: 5px; background-color: #ddd">
<div class="progress-bar" style="width: 50%; background-color: #5e180c">
</div></div>
   
<!------------ ------------>

<div class="row no-gutters mt-1"><div style="margin-bottom: -5px">
<span style="color: #f95e41; letter-spacing: 2px; font-weight: bold">INTELLIGENCE</span></div>
<div class="col px-1 pb-1"></div><div class="col-auto">

<span style="font-size: 13px; opacity: 0.4">
50%
</span></div></div>
<div class="progress rounded-0" style="height: 5px; background-color: #ddd">
<div class="progress-bar" style="width: 50%; background-color: #5e180c">
</div></div>
   
<!------------ ------------>

<div class="row no-gutters mt-1"><div style="margin-bottom: -5px">
<span style="color: #f95e41; letter-spacing: 2px; font-weight: bold">ENERGY</span></div>
<div class="col px-1 pb-1"></div><div class="col-auto">

<span style="font-size: 13px; opacity: 0.4">
50%
</span></div></div>
<div class="progress rounded-0" style="height: 5px; background-color: #ddd">
<div class="progress-bar" style="width: 50%; background-color: #5e180c">
</div></div>
   
<!------------ ------------>

<div class="row no-gutters mt-1"><div style="margin-bottom: -5px">
<span style="color: #f95e41; letter-spacing: 2px; font-weight: bold">CONCENTRATION</span></div>
<div class="col px-1 pb-1"></div><div class="col-auto">

<span style="font-size: 13px; opacity: 0.4">
50%
</span></div></div>
<div class="progress rounded-0" style="height: 5px; background-color: #ddd">
<div class="progress-bar" style="width: 50%; background-color: #5e180c">
</div></div>
   
<!------------ ------------>

<div class="row no-gutters mt-1"><div style="margin-bottom: -5px">
<span style="color: #f95e41; letter-spacing: 2px; font-weight: bold">CHARISMA</span></div>
<div class="col px-1 pb-1"></div><div class="col-auto">

<span style="font-size: 13px; opacity: 0.4">
50%
</span></div></div>
<div class="progress rounded-0" style="height: 5px; background-color: #ddd">
<div class="progress-bar" style="width: 50%; background-color: #5e180c">
</div></div>
   
<!------------ ------------>

<div class="row no-gutters mt-1"><div style="margin-bottom: -5px">
<span style="color: #f95e41; letter-spacing: 2px; font-weight: bold">HUMOR</span></div>
<div class="col px-1 pb-1"></div><div class="col-auto">

<span style="font-size: 13px; opacity: 0.4">
50%
</span></div></div>
<div class="progress rounded-0" style="height: 5px; background-color: #ddd">
<div class="progress-bar" style="width: 50%; background-color: #5e180c">
</div></div>
   
<!------------ ADD MORE ABOVE THIS LINE ------------>

</div></div>
   
<!------------ GALLERY TITLE ------------>

<div class="row no-gutters mt-2" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
<span style="background-color: #f95e41;"><s>G</s></span>ALLERY</div>
<div class="col-lg-1"><i class="far fa-folders" style="color: #c9391f"></i>
</div></div>

<div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
<i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>    
   
<!------------ GALLERY START (you can use GIFs aswell) ------------>

<div class="row no-gutters">
       
<!------------ ------------>

<div class="col-4 p-1">
<div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 80%;
clip-path: polygon(24% 0, 100% 0, 100% 100%, 0% 100%);">
</div></div>
   
<!------------ ------------>

<div class="col-4 p-1">
<div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 80%">
</div></div>
   
<!------------ ------------>

<div class="col-4 p-1">
<div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 80%">
</div></div>
   
<!------------ ------------>

<div class="col-4 p-1">
<div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 80%">
</div></div>
   
<!------------ ------------>

<div class="col-4 p-1">
<div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 80%">
</div></div>
   
<!------------ ------------>

<div class="col-4 p-1">
<div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 80%;
clip-path: polygon(100% 0, 62% 100%, 0 100%, 0 0);">
</div></div>
   
<!------------ END ------------>

</div></div></div>
   
<!------------ INFO TAB END ------------>

    
<!------------ STORY TAB ------------>
   
<div class="tab-pane fade in" id="story"> 
   
<!------------ BACKGROUND TITLE ------------>

<div class="row no-gutters" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
<span style="background-color: #f95e41;"><s>B</s></span>ACKGROUND</div>
<div class="col-lg-1"><i class="far fa-books" style="color: #c9391f"></i>
</div></div>

<div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
<i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>
    
<!------------ CONTENT ------------>
  
<div style="height: 242px; overflow: auto">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
   
<!------------ TITLE ------------>

<div class="mt-2 px-3 text-right" style="font-size: 25px; font-family: georgia">
<i class="far fa-bookmark" style="color: #c9391f"></i> SUBHEADER</div>
<div class="justify-content-between mb-3">
<span class="col my-auto m-1" style="border-top: 3px dashed; color: #c9391f"></span></div>
   
<!------------ CONTENT ------------>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
   
<!------------ TITLE ------------>

<div class="mt-2 px-3 text-right" style="font-size: 25px; font-family: georgia">
<i class="far fa-bookmark" style="color: #c9391f"></i> SUBHEADER</div>
<div class="justify-content-between mb-3">
<span class="col my-auto m-1" style="border-top: 3px dashed; color: #c9391f"></span></div>
   
<!------------ CONTENT ------------>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
   
<!------------ ADD MORE ABOVE THIS LINE ------------>
    
</div></div> 
   
<!------------ STORY TAB END ------------>
 
    
<!------------ RELATIONSHIP TAB ------------>

<div class="tab-pane fade in" id="friends">
   
<!------------ RELATIONSHIPS TITLE ------------>

<div class="row no-gutters" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
<span style="background-color: #f95e41;"><s>R</s></span>ELATIONSHIPS</div>
<div class="col-lg-1"><i class="far fa-users" style="color: #c9391f"></i>
</div></div>

<div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
<i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>
   
<!------------ END ------------>
  
<div style="height: 242px; overflow: auto">
       
<!------------ RELATIONSHIP 1 ------------>

<div class="row no-gutters">
<div class="col-lg-3 p-1">
   
<!------------ IMAGE ------------>

<img src="IMG_URL" style="box-shadow: -4px 4px 0 #c9391f"></div>

<div class="col-lg-9 p-1 px-2">
   
<!------------ NAME & HEARTS ------------>

<div class="row no-gutters"><div class="col-lg-7">
<a href="LINK" style="color: #f95e41; font-family: georgia; font-size: 20px;">NAME</a>
<span style="opacity: 0.7; font-weight: bold">— relationship</span></div>

<div class="col-lg-5 text-right">
    <i class="fas fa-heart" style="color: #f95e41; font-size:20px;"></i>
    <i class="fas fa-heart" style="color: #f95e41; font-size:20px;"></i>
    <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
    <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
    <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
</div></div>
   
<!------------ ABOUT ------------>

<div class="mt-2" style="height: 90px; overflow: auto">
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
    
</div>
</div></div>
   
<!------------ END ------------>

<div class="justify-content-between mb-3 mt-3">
<span class="col my-auto m-1" style="border-top: 3px dashed; color: #c9391f"></span></div>


<!------------ RELATIONSHIP 2 ------------>

<div class="row no-gutters">
<div class="col-lg-3 p-1">
   
<!------------ IMAGE ------------>

<img src="IMG_URL" style="box-shadow: -4px 4px 0 #c9391f"></div>

<div class="col-lg-9 p-1 px-2">
   
<!------------ NAME & HEARTS ------------>

<div class="row no-gutters"><div class="col-lg-7">
<a href="LINK" style="color: #f95e41; font-family: georgia; font-size: 20px;">NAME</a>
<span style="opacity: 0.7; font-weight: bold">— relationship</span></div>

<div class="col-lg-5 text-right">
    <i class="fas fa-heart" style="color: #f95e41; font-size:20px;"></i>
    <i class="fas fa-heart" style="color: #f95e41; font-size:20px;"></i>
    <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
    <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
    <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
</div></div>
   
<!------------ ABOUT ------------>

<div class="mt-2" style="height: 90px; overflow: auto">
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
    
</div>
</div></div>
   
<!------------ END ------------>

<div class="justify-content-between mb-3 mt-3">
<span class="col my-auto m-1" style="border-top: 3px dashed; color: #c9391f"></span></div>

       
<!------------ RELATIONSHIP 3 ------------>

<div class="row no-gutters">
<div class="col-lg-3 p-1">
   
<!------------ IMAGE ------------>

<img src="IMG_URL" style="box-shadow: -4px 4px 0 #c9391f"></div>

<div class="col-lg-9 p-1 px-2">
   
<!------------ NAME & HEARTS ------------>

<div class="row no-gutters"><div class="col-lg-7">
<a href="LINK" style="color: #f95e41; font-family: georgia; font-size: 20px;">NAME</a>
<span style="opacity: 0.7; font-weight: bold">— relationship</span></div>

<div class="col-lg-5 text-right">
    <i class="fas fa-heart" style="color: #f95e41; font-size:20px;"></i>
    <i class="fas fa-heart" style="color: #f95e41; font-size:20px;"></i>
    <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
    <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
    <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
</div></div>
   
<!------------ ABOUT ------------>

<div class="mt-2" style="height: 90px; overflow: auto">
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
    
</div>
</div></div>
   
<!------------ END ------------>

<div class="justify-content-between mb-3 mt-3">
<span class="col my-auto m-1" style="border-top: 3px dashed; color: #c9391f"></span></div>
    
   
<!------------ ADD MORE ABOVE THIS LINE ------------>

</div></div></div>
</div></div></div>
   
<!------------ THIRD COLUMN - PALETTE ------------>

<div class="col-md-1 mt-4 p-2">
        
        <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #752110;">
        </div>
        
        <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #9b341e;">
        </div>
        
        <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #cc5438;">
        </div>
        
        <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background:#ec6c4d;">
        </div>
        
        <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #dcd1ca;">
        </div>
        
        <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #ece6df;">
        </div>
   
<!------------ END ------------>

</div></diV></div>
   
<!------------ CREDIT - DO NOT REMOVE PLS! FEEL FREE TO MOVE IT AS LONG AS IT'S STILL VISIBLE ^^ ------------>

<a href="https://toyhou.se/burakkujakku" style="color: #f95e41; opacity: 0.5">
<i class="far fa-fish-bones tooltipster mt-2" title="code by burakkujakku"></i></a>
</div>