Ōotoko

<div class="container" style="min-height: calc(100vh - 253px);">             <div class="row no-gutters">          <!-------- CARD -------->   <div class="col-md-6 p-1 text-muted my-auto order-2 order-md-1">        <div class="row no-gutters"> 
    <!-------- COLOR PALLET -------->   <div class="col-2 p-0 my-auto">     <div class="h-100 px-1 mr-0">                             <!-- COLOR 1 - REPLACE '#FFF' WITH COLOR OF YOUR CHOICE --> <div class="card p-1 m-2 w-100" style="background-color:#fff; border-color: #84a9ac; border-width: 3px; height: 40px; border-top-left-radius:25px; border-bottom-left-radius:25px;"></div>  <!-- COLOR 2 - REPLACE '#FFF' WITH COLOR OF YOUR CHOICE --> <div class="card p-1 m-2 w-100" style="background-color:#fff; border-color: #84a9ac; border-width: 3px; height: 40px; border-top-left-radius:25px; border-bottom-left-radius:25px;"></div>  <!-- COLOR 3 - REPLACE '#FFF' WITH COLOR OF YOUR CHOICE --> <div class="card p-1 m-2 w-100" style="background-color:#fff; border-color: #84a9ac; border-width: 3px; height: 40px; border-top-left-radius:25px; border-bottom-left-radius:25px;"></div>  <!-------- Add more above this line! -------->     </div>   </div>     <!-------- /COLOR PALLET -------->         <!-------- CONTENT-------->   <div class="col-10 p-0">     <div class="p-0 h-100">                  <!-------- NAME -------->         <div class="mb-0 text-uppercase" style="font-size:2rem; font-weight:bold; color: #f7f7f7; text-shadow: 1px 0px 4px #204051"> Name </div> <!-------- NAME-------->         <div class="card w-100 p-3" style="background-color: #f7f7f7; color: #204051; border-color: #84a9ac; border-width: 3px;">                                     <!-- TRAITS --> <p class="text-uppercase"  style="font-size:1.2rem;">trait • trait • trait</p> <!-- /TRAITS --> <hr class="w-100 mt-1" style="border: 1px #3b6978 solid">  
                                  <!-- TEXT CONTENT || Adjust height if the traits section is more than one line!--> <div class="container p-0" style="height: 300px; overflow-y: auto;"> <ul class="list-unstyled">     <!-- BASICS-->                 <li class="mb-3">                 <span class="mb-0 font-weight-bold">                 Name                 </span>                 <span class="pull-right mb-0">                  [info]                 </span>                 <hr class="mt-1" style="border: 1px #3b6978 solid">                 </li>                                  <li class="mb-3">                 <span class="mb-0 font-weight-bold">                  Age                  </span>                 <span class="pull-right mb-0">                  [info]                 </span>                 <hr class="mt-1" style="border: 1px #3b6978 solid">                 </li>                                  <li class="mb-3">                 <span class="mb-0 font-weight-bold">                  Height                 </span>                 <span class="pull-right mb-0">                 [info]                 </span>                 <hr class="mt-1" style="border: 1px #3b6978 solid">                 </li>                                  <li class="mb-3">                 <span class="mb-0 font-weight-bold">                 Occupation                 </span>                 <span class="pull-right mb-0">                 [info]                 </span>                 <hr class="mt-1" style="border: 1px #3b6978 solid">                 </li>                                  <li class="mb-3">                 <span class="mb-0 font-weight-bold">                  Orientation                 </span>                  <span class="pull-right mb-0">                   [info]                  </span>                  <hr class="mt-1" style="border: 1px #3b6978 solid">                  </li>                                    <li class="mb-3">                  <span class="mb-0 font-weight-bold">                  Theme                 </span>                 <span class="pull-right mb-0">                      <!----- EMBEDDED SONG: replace 'VIDEOID' with appropriate youtube video id & 'song - artist' with tooltip info ----->                                   <div class="pull-right col-auto"><a href="#" class="position-relative" style="color:#759aab;"> <iframe allowfullscreen class="tooltipster d-none d-lg-flex" data-placement="top" frameborder="0"                                                             src="https://www.youtube.com/embed/VIDEOID"                                                             title="title - artist"                                                            style="height:32px;width:32px;opacity:0.001;position:absolute;z-index:1000;top:8px;" ></iframe> <i class="fas fa-headphones-alt fa-fw"></i></a> </div>                      </span>                                        <hr class="mt-1" style="border: 1px #3b6978 solid">                  </li>                  </ul>                  <!-- END BASICS-->                                    <!-- TEXT -->                   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> 

<p> </p> 

<ul style="list-style:square"> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 

<li>He actually hates girls very much</li> 

<li>Aliquam tincidunt mauris eu risus.</li>  <li>Vestibulum auctor dapibus neque.</li> </ul> 
                        <h2 class="mb-0">Header</h2>                         <hr class="mt-1 mb-2" style="border: 1px #3b6978 solid"> <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>                  <h2 class="mt-2 mb-0 pull-right">Header</h2>                         <hr class="mt-1 mb-2" style="border: 1px #3b6978 solid">                         <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>                                                  <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>                              <!-- END TEXT -->           </div>                                                                         </div>       <!--====== CREDIT =================================--> 

<div class="container col-md-12 px-1 text-right small" style="color:#84a9ac;">     <p>     <!--IMAGE/PAGEDOLL CREDIT --> <a class="tooltipster hidden-sm-down" href="URL" style="color: inherit;" title="image credit"><i class="fad fa-image"></i></a> •  <!--====== CODE CREDIT DO NOT REMOVE=================================--> <a class="tooltipster" href="https://toyhou.se/BunBox" style="color: inherit;" title="get the code here!"><i class="fas fa-rabbit-fast"></i></a> </p> </div>     </div>   </div>    </div>        <!-------- /CONTENT --------> 
 </div> <!-------- /CARD -------->               <div class="col-md-6 p-1 order-1 order-md-2">     <div class="p-3 h-100">       <div class="" style="background-image:url(https://cdn.discordapp.com/attachments/543160973788446761/729556407090806824/364109_dSaWwX1n.png);       background-position:center center;       background-size: contain;       background-repeat: no-repeat;       height:500px">       </div>     </div>   </div>      </div>             </div>