Sunripe

<!--------------


-- Title & Left Box Color: #F58549
-- Paragraph/Image BG: #F2A65A
-- Font: #fff

--->



<div class="container" style="color:#fff">
  <div class="row no-gutters">
    <div class="col-12 py-2" style="background-color: #F58549;">
      <!--- title --->
      <h1 class="ml-3 pt-1" style="font-size:52px;font-family:Trebuchet;font-variant: small-caps"
        >
        <i class="fa-solid fa-jack-o-lantern mr-3"></i>
        <u>Title here</u>
      </h1>
    </div>
    <div class="col-lg">
      <div class="row no-gutters h-100">
        <div class="col-lg-5 px-2" style="background-color:#F58549;">

<!--------------------- LEFT IMAGE ------------------------->
          <div class="mb-3" style="
            background-image:url('https://via.placeholder.com/250');
            background-size:cover; background-position:top center;  background-repeat:no-repeat; min-height:230px; max-width:250px;"></div>
<!--------------------- LEFT CONTENT ------------------------->
          <div>
            <span class="text-uppercase" style="opacity: .6;">
            name</span>
            <span class="pull-right mr-2">Content</span>
            <hr class="my-2" style="border-color: #fffff;">
          </div>
          <div>
            <span class="text-uppercase" style="opacity: .6;">
            age</span>
            <span class="pull-right mr-2">Content</span>
            <hr class="my-2" style="border-color: #fffff;">
          </div>
          <div>
            <span class="text-uppercase" style="opacity: .6;">
            gender</span>
            <span class="pull-right mr-2">Content</span>
            <hr class="my-2" style="border-color: #fffff;">
          </div>
          <div>
            <span class="text-uppercase" style="opacity: .6;">
            pronouns</span>
            <span class="pull-right mr-2">Content</span>
            <hr class="my-2" style="border-color: #fffff;">
          </div>
          <div>
            <span class="text-uppercase" style="opacity: .6;">
            race</span>
            <span class="pull-right mr-2">Content</span>
            <hr class="my-2" style="border-color: #fffff;">
          </div>
          <div>
            <span class="text-uppercase" style="opacity: .6;">
            role</span>
            <span class="pull-right mr-2">Content</span>
            <hr class="my-2" style="border-color: #fffff;">
          </div>
        </div>

<!--------------------- MIDDLE CONTENT ------------------------->
        <div class="col-lg-7" style="background-color:#F2A65A">
          <div class="container text-justify mt-3" style="max-height:450px;max-width:350px;overflow:auto;scrollbar-width:thin">
            <p style="font-variant: small-caps;font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sapien justo, consequat in imperdiet id, pulvinar in urna. Quisque faucibus nisl est, id commodo tortor dignissim at. Cras nec quam non augue auctor tincidunt at ullamcorper urna. Integer mollis semper tristique. Vestibulum elementum ante eros. Nunc id nulla vitae metus vehicula mattis. Duis sit amet facilisis quam. Donec at ex erat. Duis non nunc fringilla, ornare velit eu, sagittis nulla. Nunc vestibulum aliquam elit, vitae efficitur erat. Phasellus euismod tellus nec tristique viverra. </p>
            <p style="max-height:500px;font-variant: small-caps;font-size:14px;">Aenean efficitur faucibus augue scelerisque sodales. Aenean elementum lectus et magna egestas, ut laoreet massa tempus. Morbi fringilla est ut lectus iaculis gravida. Nulla iaculis ex a suscipit semper. Donec quis vehicula ante. Donec in odio sed metus faucibus congue. Sed euismod sagittis sapien venenatis scelerisque. Proin feugiat elit ac enim ornare vehicula. Nunc rutrum tellus non pharetra sollicitudin. Donec quis condimentum justo. Curabitur eu tortor quis arcu eleifend malesuada id sit amet sapien. Vestibulum ut laoreet lorem.  </p>
          </div>
        </div>
      </div>
    </div>

<!--------------------- IMAGE COLUMN ------------------------->


    <div class="col-lg-auto col-12 flex-column">
      <div class="container px-5 bg-faded"
        style="min-width: 125px; height:125px;background-image: url('IMG_URL');
        background-size: cover;"></div>

      <div class="container px-5 bg-faded"
      style="min-width: 125px; height:125px
        ;background-image: url('IMG_URL');
        background-size: cover;"></div>

      <div class="container px-5 bg-faded"
      style="min-width: 125px; height:125px;
        background-image: url('IMG_URL');
        background-size: cover;"></div>

      <div class="container px-5 bg-faded"
      style="min-width: 125px; height:125px;
        background-image: url('IMG_URL');
        background-size: cover;"></div>
    </div>


<!--------------------- RIGHT IMAGE ------------------------->

    <div class="p-5 col-lg-4 col-12" style="background-image: url('IMG_URL');
      background-size: cover; height:500px;background-color:#F2A65A">
      <!---- Right Container Column -->
    </div>

  </div>

<!--------------------- CREDIT DO NOT TOUCH ------------------------->

        <div class="mb-4 pb-1">
        <p class="pull-right" style="font-size:9.5px">
          <a href="https://toyhou.se/Strixxus" style="color:#F58549;text-shadow:#F58549 0 0 10px, #FFD42A 0 0 10px;font-weight:900;font-size:18px">
          <i class="fas fa-code"></i></a>
        </p>
      </div>
</div>