[F2U TH CODE] SYMMETRICAL

<!--
      SYMMETRICAL
      free html character profile by juette

      RULES:
      1) dont remove the credit or edit the link so people can find this easily
      2) feel free to edit or mix it with other codes as long as the other codes' makers are ok with it and you dont redistribute it
      3) please comment on the forum post if you use! i wanna see the results! https://toyhou.se/~forums/16.htmlcss-graphics/153697

      CTRL+F to change the images
      left image -> LEFTIMG
      header background -> HEADERIMG
      right image -> RIGHTIMG

-->

<div class="container-fluid px-0 mt-lg-4" style="max-width: 1000px; min-height: 650px;">
  <div class="row no-gutters">
    <div class="col-lg-2 d-none d-lg-block">
      <div
        class="card card-block p-2 p-lg-3 pt-1 mt-lg-2 border-0"
        style="
          height: 350px;
          background-image: url(LEFTIMG);
          background-size: cover; background-position: center; border-radius: 0% 0% 0% 100%;"
      ></div>
    </div>
    <div class="col-12 col-lg-8">
      <div
        class="card card-block p-2 p-lg-3 pt-1 mt-2 border-0 rounded-0 text-center"
        style="
          background-image: url(HEADERIMG);
          background-size: cover;
          background-position: center;
        "
      >
        <h2 class="display-1" style="color: #fff;">NAME</h2>
      </div>
      <div class="card card-block p-2 p-lg-3 pt-1 mt-2 bg-faded border-0 rounded-0 text-center">
        <h3>ABOUT</h3>
        <p>This is a character profile HTML based on one of the very first Tumblr themes I made for myself when i was just learning HTML. You can use it for any kind of character!</p>
        <p>You can write as much as you want in the boxes, they will not scroll. The two side images will not appear on small screens.</p>
      </div>
      <div class="card card-block p-2 p-lg-3 pt-1 mt-2 bg-faded border-0 rounded-0 text-center">
        <h3>BACKSTORY</h3>
        <p>
          Write here!
        </p>
      </div>
      <div class="card card-block p-2 p-lg-3 pt-1 mt-2 bg-faded border-0 rounded-0">
        <h3 class="text-center">TRIVIA</h3>
        <ul>
          <li>one</li>
          <li>
            two
            <ul>
              <li>two two</li>
            </ul>
          </li>
          <li>three</li>
        </ul>
      </div>
      <p class="text-right small mt-2 mr-2"><a href="https://toyhou.se/22985175.f2u-12-symmetrical">HTML by juette</a></p>
    </div>
    <div class="col-lg-2 d-none d-lg-block">
      <div
        class="card card-block p-2 p-lg-3 pt-1 mt-lg-2 border-0"
        style="
          height: 350px;
          background-image: url(RIGHTIMG);
          background-size: cover; background-position: center; border-radius: 0% 0% 100% 0%;"
      ></div>
    </div>
  </div>
</div>