<div class="container mx-auto" style="background: url('https://cdnb.artstation.com/p/assets/images/images/008/512/935/large/david-luna-cathedral-interior-4.jpg') fixed;font-family:'MS Gothic', monospace;sans-serif;width:1050px">
  <div class="row justify-content-between">
    <!-- Left Column -->
    <div class="col-8 mb-4">
      <!-- First Quote -->
      <div class="blockquote mt-4 mx-auto" style="background: rgba(34,35,36,0.8) url('https://i.imgur.com/FEQRYJx.png'); border-left: 0.25rem double #d9be68; font-size: 1.3em">
        <span class="m-3" style="color: #fff; font-size: 12px; letter-spacing: 1px; text-align: center"><b>“We're just going straight to fighting... I'm sorry for what happens next, then.”</b></span><br>
        <p class="text-right" style="color: #fff">— Vince</p>
      </div>
      <!-- First Row -->
      <div class="row ml-1">
        <!-- First Row, First Column -->
        <div class="col-6 card card-block mt-2" style="background: rgba(34,35,36,0.8) url('https://i.imgur.com/FEQRYJx.png')">
          <h5 class="m-1" style="color: #fff"><i class="fa fa-user" style="color: #fff"></i> Personality</h3>
          <div style="border-left: 0.25rem double #d9be68"><p class="m-1 ml-2" style="color: #fff; text-align: justify; text-indent: 2em">Vince is a shell of a man, constantly at war with the malicious and consuming nature of his power. While every day is a struggle to keep his abilities in check, he continues to try and persevere in order to prevent it doing more damage. He's a firm believer that powers do actually need training and observation to ensure they're controlled, with his own lack of control being a firm reason for his ideal. When the power consumes him and takes control, it's an internal fight to take back control. The Vince controlled by his powers is cruel and ruthless; incomparible to the man's true nature.</p></div>
        </div>
        <!-- First Row, Second Column-->
        <div class="col-6">
          <div class="card card-block mt-2 mx-auto" style="background: rgba(34,35,36,0.8) url('https://i.imgur.com/FEQRYJx.png')">
            <ul class="fa-ul ml-4" style="color: #fff; font-size: 16px; line-height: 2; list-style-type: none">
              <li><i class="fa-li fa fa-thumbs-up" style="color: #FFF"></i> Meditation practice</li>
              <li><i class="fa-li fa fa-thumbs-up" style="color: #FFF"></i> Zen gardens</li>
              <li><i class="fa-li fa fa-thumbs-up" style="color: #FFF"></i> Visiting waterfalls</li>
              <li><i class="fa-li fa fa-thumbs-up" style="color: #FFF"></i> Old architexture</li>
            </ul>
          </div>
          <div class="card card-block mt-2 mx-auto" style="background: rgba(34,35,36,0.8) url('https://i.imgur.com/FEQRYJx.png')">
            <ul class="fa-ul ml-4" style="color: #fff; font-size: 16px; line-height: 2; list-style-type: none">
              <li><i class="fa-li fa fa-thumbs-down" style="color: #FFF"></i> His "condition"</li>
              <li><i class="fa-li fa fa-thumbs-down" style="color: #FFF"></i> Having to fight people</li>
              <li><i class="fa-li fa fa-thumbs-down" style="color: #FFF"></i> Romance</li>
              <li><i class="fa-li fa fa-thumbs-down" style="color: #FFF"></i> Other villains</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- Second Quote -->
      <div class="blockquote mt-4 mx-auto" style="background: rgba(34,35,36,0.8) url('https://i.imgur.com/FEQRYJx.png'); border-left: none; border-right: 0.25rem double #d9be68; font-size: 1.3em">
        <span class="m-3" style="color: #fff; font-size: 12px; letter-spacing: 1px; text-align: center"><b>“You kids... This school's the right place for you. If you can't control your powers, well...”</b></span><br>
        <p class="text-right" style="color: #fff">— Vince  </p>
      </div>
      <!-- Second Row -->
      <div class="row ml-1 mr-1">
        <div class="card card-block mt-2" style="background: rgba(34,35,36,0.8) url('https://i.imgur.com/FEQRYJx.png')">
          <h5 class="m-1" style="color: #fff"><i class="fa fa-info-circle" style="color: #fff"></i> Overview</h3>
          <div style="border-left: 0.25rem double #d9be68"><p class="m-1 ml-2" style="color: #fff; text-align: justify; text-indent: 2em">Vince Blakesley, simply dubbed as "Yellow Eyes" by the authorities is a villain of Signia. There have been multiple reported murders by the criminal, although reports from the aftermath report some care for the victims he brutualy kills. It is rumoured his powers have a connection to demons or the occult - Although such powers are more a blessing than a curse...</p></div>
        </div>
      </div>
    </div>
    <!-- Right Column -->
    <div class="col-4 card card-block" style="background: rgba(34,35,36,0.8) url('https://i.imgur.com/FEQRYJx.png'); color: #FFFDFA">
      <!-- Avatar -->
      <img class="avatar mx-auto" src="https://imgur.com/6PbJlwB.png" style="width:230px"> <!-- Replace the url after src with the link to your avatar -->
      <div class="card mt-2 mx-auto" style="background: rgba(34,35,36,1) url('https://imgur.com/FEQRYJx.png'); width: 250px">
        <!-- Name -->
        <span class="display-1 mt-2 mx-auto" style="letter-spacing: 2px; font-family:'MS Gothic'">Vince</span>
        <!-- Information -->
        <span class="mx-auto" style="color: #d9be68">male ▪ villain ▪ human(?)</span>
        <br>
        <span class="mx-auto">"mr penguin hair"</span>
        <img class="mx-auto" src="https://imgur.com/gxyacpX.png">
        <span class="mx-auto">typically a chill guy</span>
        <img class="mx-auto" src="https://imgur.com/gxyacpX.png">
        <span class="mx-auto">does have "anger" issues</span>
        <img class="mx-auto" src="https://imgur.com/gxyacpX.png">
        <span class="mx-auto">appriciator of high collars</span>
        <img class="mx-auto" src="https://imgur.com/gxyacpX.png">
        <span class="mb-2 mx-auto">if looks could kill-</span>
      </div>
      <div class="card mt-2 mx-auto" style="background: rgba(34,35,36,1) url('https://imgur.com/FEQRYJx.png'); width: 250px">
        <!-- Moodboard or Extra Image -->
        <div style="text-align: center"><img class="rounded m-2 mb-3" src="https://imgur.com/Ef5A9OR.png" style="width: 220px"></div>
      </div>
      <div class="card mt-2 mx-auto" style="background: rgba(34,35,36,1) url('https://i.imgur.com/FEQRYJx.png'); width: 250px">
        <!-- Theme Song -->
        <span class="mb-2 mt-2 text-white" style="text-align: center">Theme: "Devil Trigger”</span>
        <a href="https://www.youtube.com/watch?v=72OPSJWIJ0k" style="text-align:center"><img class="rounded m-2 mb-3" src="https://media0.giphy.com/media/TdslY9378T9Mk/giphy.gif" style="width: 220px"></a> <!-- album cover, music video gif/screenshot or some other kind of cool picture -->
      </div>
    </div>
  </div>
</div>
<!-- Credit -->
<p class="mr-5 text-right">html by @K1-B0</p>