01 | Quoting (F2U) (CODE (custom colors))

<!--
   - Do not remove credit. 
        + You may reposition it or change it to be in a different location as long as it links back to me (chemicplosion)
   - You may frankenstein, edit, etc
   - Make sure WYSIWYG is turned off. 
   
     Use CTRL + F on E27BB0 and REPLACE to change the colors
   
   -->
<div class="container" style="max-width: 675px;">
   <div class="bg-faded rounded-0 mt-4 p-3">
      <div class="display-4 d-flex my-auto">
         <!-- FIRST QUOTE -->
         <i class="fas fa-quote-left auto-align pull-left" style="color: #E27BB0;"></i>
         <span class="m-auto text-center text-muted"><i>
         quote...
         </i></span>
         <i class="fas fa-quote-right auto-align pull-right" style="color: #E27BB0;"></i>
      </div>
   </div>
   <div class="row no-gutters">
      <div class="col-sm-8 col-12 py-2">
         <div class="card bg-faded border-0 rounded-0 p-3 d-block overflow-auto" style="height: 318px;">
            <!-- ADJECTIVES -->
            <div class="text-center text-uppercase font-italic" style="color: #E27BB0;">
               Adjective . Adjective . Adjective
            </div>
            <!-- SUMMARY/PERSONALITY -->
            <hr class="mb-2 mt-2" style="width:50%">
            <p class="text-center">
               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.
            </p>
            <hr class="mb-3 mt-3" style="width:100%">
            <div class="row no-gutters p-0">
               <!-- LIKES -->
               <div class="col-6">
                  <span class="text-uppercase" style="color: #E27BB0;">
                  <i class= "far fa-heart pr-1"></i>
                  Likes
                  </span>
                  <ul>
                     <li class="mb-1">content</li>
                     <li class="mb-1">content</li>
                     <li class="mb-1">content</li>
                  </ul>
               </div>
               <!-- DISLIKES -->
               <div class="col-6">
                  <span class="text-uppercase" style="color: #E27BB0;">
                  <i class="far fa-heart-broken pr-1"></i>
                  Dislikes
                  </span>
                  <ul>
                     <li class="mb-1">content</li>
                     <li class="mb-1">content</li>
                     <li class="mb-1">content</li>
                  </ul>
               </div>
               <hr class="mb-3 mt-1" style="width:100%">
               <!-- TRIVIA -->
               <div class="col-12">
                  <span class="text-uppercase" style="color: #E27BB0;">
                  <i class= "far fa-book-open pr-1"></i>
                  Trivia  
                  </span>
                  <ul>
                     <li class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                     <li class="mb-1">Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
                     <li class="mb-1">Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <!-- CHARACTER IMAGE -->
      <div class="col-sm-4">
         <div style="background:url(
            https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png
            ); height: 100px; background-size: cover; background-position: center; border-radius: 0;" class="ml-2 mt-2 hidden-xs-down">
         </div>
         <div class="row no-gutters">
            <div class="col-12">
               <div class="card bg-faded border-0 ml-sm-2 rounded-0 p-3 overflow-auto" style="height: 218px;">
                  <!-- BASICS / USE FONTAWESOME.COM TO SWITCH OUT SYMBOLS -->
                  <div class="justify-content-between">
                     <i class="fa fa-user pt-1" style="color: #E27BB0;"></i>
                     name lastname
                  </div>
                  <hr class="w-100 my-2">
                  <div class="justify-content-between">
                     <i class="fa fa-cake-candles pt-1" style="color: #E27BB0;"></i>
                     age
                  </div>
                  <hr class="w-100 my-2">
                  <div class="justify-content-between">
                     <i class="fa fa-earth pt-1" style="color: #E27BB0;"></i>
                     location
                  </div>
                  <hr class="w-100 my-2">
                  <div class="justify-content-between ">
                     <i class="fa fa-venus-mars pt-1" style="color: #E27BB0;"></i>
                     gender (pro/noun)
                  </div>
                  <hr class="w-100 my-2">
                  <div class="justify-content-between">
                     <i class="fa fa-dna pt-1" style="color: #E27BB0;"></i>
                     ethnicity
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="bg-faded rounded-0 p-3 mt-2 mt-sm-0">
      <div class="display-4 d-flex my-auto">
         <!--SECOND QUOTE -->
         <i class="fas fa-quote-left auto-align pull-left" style="color: #E27BB0;"></i>
         <span class="m-auto text-center text-muted"><i>
         quote...
         </i></span>
         <i class="fas fa-quote-right auto-align pull-right" style="color: #E27BB0;"></i>
      </div>
   </div>
   <!-- CREDIT. DO NOT REMOVE OR I WILL RIP OFF YOUR TOES -->
   <div class="container faded mt-1 mx-0 px-0 text-right" style="font-size:12px;">
      <a target="_blank" class="text-muted tooltipster" href="https://toyhou.se/chemicplosion"><i class="fal fa-code"></i></a>
   </div>
</div>