Simplexity v1.0 HTML AND CSS

<!-- Code by Dama @damedanbo, please do not redistribute, remove credit, etc.  -->
<!-- Code by Dama @damedanbo, please do not redistribute, remove credit, etc.  -->
<!-- Code by Dama @damedanbo, please do not redistribute, remove credit, etc.  -->
<!-- Code by Dama @damedanbo, please do not redistribute, remove credit, etc.  -->

<div class="container">
  <div class="element">
<div class="text-secondary p-0">
  <div class="row no-gutters">
<!-- box one -->
    <div class="p-0 col-sm-12">
              <div class="trans">
      <!-- name -->
      <div class="ml-2 mt-0 text-uppercase">
        <span class="text-primary mr-3" style="font-size:30px;"><i class="fas fa-heartbeat"></i></span>
        <span class="mr-3" style="font-size:30px;">
          <strong>TITLE OR NAME</strong></span>
      </div>
      <hr class="my-1 mx-5 bg-primary">
    <!-- keywords lyric quote etc-->
      <div class="d-flex justify-content-center my-2" font size="14px">
        <center>subtitle, song lyric, etc.</center>

      </div>
    <div class="row no-gutters d-flex justify-content-center p-0">

  <!-- info box -->
      <div class="col-sm-3 d-inline-block m-1 p-2 table-responsive" style="height:250px;">
        <div class="d-flex justify-content-between">
          <span class="text-primary text-lowercase">
            name:</span><span>Full name</span>
        </div>
        <div class="d-flex justify-content-between">
          <span class="text-primary text-lowercase">
            nickname:</span><span>Nickname</span>
        </div>

        <div class="d-flex justify-content-between">
          <span class="text-primary text-lowercase">
            age:</span><span>
              age</span>
        </div>
        <div class="d-flex justify-content-between">
          <span class="text-primary text-lowercase">
            gender:</span><span>
              gender here</span>
        </div>
         <div class="d-flex justify-content-between">
          <span class="text-primary text-lowercase">
            pronouns:</span><span>pronouns</span>
        </div>

        <div class="d-flex justify-content-between">
          <span class="text-primary text-lowercase">
            theme:</span><span>
              <a href="/">song link</a></span>
        </div>

 <hr>

 <!--color blocks. upload an image of your character at https://www.canva.com/colors/color-palette-generator/ to get a palette with hex codes :) -->

      <div class="mb-1 mr-1 p-2  d-inline-block"
          style="background-color: #052F5A; height:35px; width:35px;" data-toggle="tooltip" title=
            "#052F5A">
          </div>
          <div class="mb-1 mr-1 p-2  d-inline-block"
          style="background-color: #041B47; height:35px; width:35px;" data-toggle="tooltip" title=
            "#041B47">
          </div>
          <div class="mb-1 mr-1 p-2  d-inline-block"
          style="background-color: #3E87B0; height:35px; width:35px;" data-toggle="tooltip" title=
            "#3E87B0">
          </div>
          <div class="mb-1 mr-1 p-2  d-inline-block"
          style="background-color: #114E79; height:35px; width:35px;" data-toggle="tooltip" title=
            "#114E79">
          </div>
          <div class="mb-1 mr-1 p-2  d-inline-block"
          style="background-color: #040933; height:35px; width:35px;" data-toggle="tooltip" title=
            "#040933">
          </div>

      </div>

  <!-- BOX ONE SECTION TWO -->
      <div class="col-sm-3 m-1 d-inline-block table-responsive p-2" style="height:250px;">

         <!-- trait bars -->
          <div class="d-flex justify-content-between mb-1">
          <div class="progress mt-1 mx-1" style="height:15px; width:70%;"><div class="progress-bar bg-primary"
            style="width:50%;"></div></div><span class="text-lowercase">charismatic
        </span></div>
        <div class="d-flex justify-content-between mb-1">
          <div class="progress mt-1 mx-1" style="height:15px; width:70%;"><div class="progress-bar bg-primary"
            style="width:50%;"></div></div><span class="text-lowercase">  friendly
        </span></div>
        <div class="d-flex justify-content-between mb-1">
          <div class="progress mt-1 mx-1" style="height:15px; width:70%;"><div class="progress-bar bg-primary"
            style="width:50%;"></div></div><span class="text-lowercase">pink
        </span></div>
        <div class="d-flex justify-content-between mb-1">
          <div class="progress mt-1 mx-1" style="height:15px; width:70%;"><div class="progress-bar bg-primary"
            style="width:50%;"></div></div><span class="text-lowercase">extroverted
        </span></div>
        <div class="d-flex justify-content-between mb-1">
          <div class="progress mt-1 mx-1" style="height:15px; width:70%;"><div class="progress-bar bg-primary"
            style="width:50%;"></div></div><span class="text-lowercase">gentle
        </span></div>
      <hr>


      <!--Aesthetic icons! Change the following three links to whatever image you like, aesthetics or icons of your chracter -->
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/4926283?1568284446" width=75px>
      <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/4926283?1568284446" width=75px>
<img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/4926283?1568284446" width=75px>
      </div>

      <div class="col-sm-3 m-1 d-inline-block table-responsive" style="height:250px;">
        <div class="row no-gutters text-center small">
      <!-- likes & dislikes -->
          <div class="col-6 d-inline-block">
            <p class="mb-1 mt-0"><i class="fas fa-heart text-success mr-2"></i>like</p>
            <p class="mb-1 mt-0"><i class="fas fa-heart text-success mr-2"></i>like</p>
            <p class="mb-1 mt-0"><i class="fas fa-heart text-success mr-2"></i>like</p>
          </div>
          <div class="bg-secondary m-0 d-inline-block" style="width:1px;"></div>
          <div class="col-5 d-inline-block">
            <p class="mb-1 mt-0"><i class="fas fa-heart-broken text-danger mr-2"></i>disliked</p>
            <p class="mb-1 mt-0"><i class="fas fa-heart-broken text-danger mr-2"></i>dislike</p>
            <p class="mb-1 mt-0"><i class="fas fa-heart-broken text-danger mr-2"></i>dislike</p>


          </div>

      </div>
            <div class="text small"><hr><ul>
              <li>Trivia</li>
              <li>Trivia</li>
              <li>Trivia</li>
              <li>Trivia</li>
              <li>Trivia</li>
              <li>Trivia</li>
              <li>Trivia</li>
              <li>Trivia looks great with 8 lines</li>
            </ul>
</div>
      </div>

<!-- extra image -->

<div class="col-sm-2 " style="height:250px;
      background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/16563964_XsSJjMrC8soEn5g.png) no-repeat top center; background-size:cover;">
    </div>
</div>

    </div><!-- closes BOX ONE-->

  </div>
</div>
</div><hr>
<!-- box for misc -->
<div class="trans" style="height:250px; overflow:auto;">
  <center>Story panel. you can absolutely add a story here, or literally anything you want! It's easy to turn this panel into anything. You can also delete this whole panel to just keep the top box!
  <p><p>Didn't have the room to say so up top, but you can change any of the traits/stats/profile things to match your character!
  <p>please if you're going to use this code, leave my credit somewhere on it! (feel free to change the credit colors, font-awesome icon, etc to match your character's theme, but don't remove it!)</p>
 </center>
  </div> <!--END MISC BOX if you want to delete it, keep everything after this point.-->

<!-- CREDIT DO NOT DELETE -->
<div class="small mr-4"><a href="https://toyhou.se/damedanbo" style="color:#fff">code by dama</a> @damedanbo <span class="fas fa-heartbeat" style="color:#fff"></span></div>
</div></div>