F2U HTML - Pokemon Party by @aetherjay

<!--------Change text color (name or hex)-------->
<font color="white">
  <!--------------------FIRST CHARACTER-------------------->
  <!--------Can change border and background color-------->
  <div style="display: inline-block; width: 47%; height:100%; padding: 3px; margin: 5px; align-items: center; border: solid; border-radius: 10px;
  border-color: #ffffff;
  background-color: rgba(255, 255, 255,0.1)">
    <div style="display: inline-flex; width: 100%">
  <!--------------------Image-------------------->
      <img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/ditto.png" style="width: 25%">
        <div style="width: 100%; margin: 3px">
    <!--------------------Name & Gender -------------------->
        <b> Name <p style="float: right">
        <font color="white" size="4"> ♂○♀ </font> </p></b>
          <hr style="border: none">
          <div> <hr style="height: 12px; border: none">
            <div style="display: flex; background: #000000; width:                 100%; padding: 5px; height: 20px; align-items: center"> HP &nbsp
             <div style="display: inline-flex; width: 83%">
             <!--------HP Bar (change width/background color) -------->
               <div style="height: 10px; float: right;
               width: 100%;
               background: #73a84a"> &nbsp
                 </div>
               </div>
              </div>
            </div>
          </div>
        </div> &nbsp&nbsp&nbsp
    <!--------------------Level & HP #-------------------->
    Lv. # <p style="float: right"> # / # </p>
  </div>

  <!--------------------SECOND CHARACTER-------------------->
  <!--------Can change border and background color-------->
  <div style="display: inline-block; width: 47%; height:100%; padding: 3px; margin: 5px; align-items: center; border: solid; border-radius: 10px;
  border-color: #ffffff;
  background-color: rgba(255, 255, 255,0.1)">
    <div style="display: inline-flex; width: 100%">
  <!--------------------Image-------------------->
      <img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/ditto.png" style="width: 25%">
        <div style="width: 100%; margin: 3px">
    <!--------------------Name & Gender -------------------->
        <b> Name <p style="float: right">
        <font color="white" size="4"> ♂○♀ </font> </p></b>
          <hr style="border: none">
          <div> <hr style="height: 12px; border: none">
            <div style="display: flex; background: #000000; width:                 100%; padding: 5px; height: 20px; align-items: center"> HP &nbsp
             <div style="display: inline-flex; width: 83%">
             <!--------HP Bar (change width/background color) -------->
               <div style="height: 10px; float: right;
               width: 100%;
               background: #73a84a"> &nbsp
                 </div>
               </div>
              </div>
            </div>
          </div>
        </div> &nbsp&nbsp&nbsp
    <!--------------------Level & HP #-------------------->
    Lv. # <p style="float: right"> # / # </p>
  </div>

  <!--------------------THIRD CHARACTER-------------------->
  <!--------Can change border and background color-------->
  <div style="display: inline-block; width: 47%; height:100%; padding: 3px; margin: 5px; align-items: center; border: solid; border-radius: 10px;
  border-color: #ffffff;
  background-color: rgba(255, 255, 255,0.1)">
    <div style="display: inline-flex; width: 100%">
  <!--------------------Image-------------------->
      <img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/ditto.png" style="width: 25%">
        <div style="width: 100%; margin: 3px">
    <!--------------------Name & Gender -------------------->
        <b> Name <p style="float: right">
        <font color="white" size="4"> ♂○♀ </font> </p></b>
          <hr style="border: none">
          <div> <hr style="height: 12px; border: none">
            <div style="display: flex; background: #000000; width:                 100%; padding: 5px; height: 20px; align-items: center"> HP &nbsp
             <div style="display: inline-flex; width: 83%">
             <!--------HP Bar (change width/background color) -------->
               <div style="height: 10px; float: right;
               width: 100%;
               background: #73a84a"> &nbsp
                 </div>
               </div>
              </div>
            </div>
          </div>
        </div> &nbsp&nbsp&nbsp
    <!--------------------Level & HP #-------------------->
    Lv. # <p style="float: right"> # / # </p>
  </div>

  <!--------------------FOURTH CHARACTER-------------------->
  <!--------Can change border and background color-------->
  <div style="display: inline-block; width: 47%; height:100%; padding: 3px; margin: 5px; align-items: center; border: solid; border-radius: 10px;
  border-color: #ffffff;
  background-color: rgba(255, 255, 255,0.1)">
    <div style="display: inline-flex; width: 100%">
  <!--------------------Image-------------------->
      <img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/ditto.png" style="width: 25%">
        <div style="width: 100%; margin: 3px">
    <!--------------------Name & Gender -------------------->
        <b> Name <p style="float: right">
        <font color="white" size="4"> ♂○♀ </font> </p></b>
          <hr style="border: none">
          <div> <hr style="height: 12px; border: none">
            <div style="display: flex; background: #000000; width:                 100%; padding: 5px; height: 20px; align-items: center"> HP &nbsp
             <div style="display: inline-flex; width: 83%">
             <!--------HP Bar (change width/background color) -------->
               <div style="height: 10px; float: right;
               width: 100%;
               background: #73a84a"> &nbsp
                 </div>
               </div>
              </div>
            </div>
          </div>
        </div> &nbsp&nbsp&nbsp
    <!--------------------Level & HP #-------------------->
    Lv. # <p style="float: right"> # / # </p>
  </div>

  <!--------------------FIFTH CHARACTER-------------------->
  <!--------Can change border and background color-------->
  <div style="display: inline-block; width: 47%; height:100%; padding: 3px; margin: 5px; align-items: center; border: solid; border-radius: 10px;
  border-color: #ffffff;
  background-color: rgba(255, 255, 255,0.1)">
    <div style="display: inline-flex; width: 100%">
  <!--------------------Image-------------------->
      <img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/ditto.png" style="width: 25%">
        <div style="width: 100%; margin: 3px">
    <!--------------------Name & Gender -------------------->
        <b> Name <p style="float: right">
        <font color="white" size="4"> ♂○♀ </font> </p></b>
          <hr style="border: none">
          <div> <hr style="height: 12px; border: none">
            <div style="display: flex; background: #000000; width:                 100%; padding: 5px; height: 20px; align-items: center"> HP &nbsp
             <div style="display: inline-flex; width: 83%">
             <!--------HP Bar (change width/background color) -------->
               <div style="height: 10px; float: right;
               width: 100%;
               background: #73a84a"> &nbsp
                 </div>
               </div>
              </div>
            </div>
          </div>
        </div> &nbsp&nbsp&nbsp
    <!--------------------Level & HP #-------------------->
    Lv. # <p style="float: right"> # / # </p>
  </div>

  <!--------------------SIXTH CHARACTER-------------------->
  <!--------Can change border and background color-------->
  <div style="display: inline-block; width: 47%; height:100%; padding: 3px; margin: 5px; align-items: center; border: solid; border-radius: 10px;
  border-color: #ffffff;
  background-color: rgba(255, 255, 255,0.1)">
    <div style="display: inline-flex; width: 100%">
  <!--------------------Image-------------------->
      <img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/ditto.png" style="width: 25%">
        <div style="width: 100%; margin: 3px">
    <!--------------------Name & Gender -------------------->
        <b> Name <p style="float: right">
        <font color="white" size="4"> ♂○♀ </font> </p></b>
          <hr style="border: none">
          <div> <hr style="height: 12px; border: none">
            <div style="display: flex; background: #000000; width:                 100%; padding: 5px; height: 20px; align-items: center"> HP &nbsp
             <div style="display: inline-flex; width: 83%">
             <!--------HP Bar (change width/background color) -------->
               <div style="height: 10px; float: right;
               width: 100%;
               background: #73a84a"> &nbsp
                 </div>
               </div>
              </div>
            </div>
          </div>
        </div> &nbsp&nbsp&nbsp
    <!--------------------Level & HP #-------------------->
    Lv. # <p style="float: right"> # / # </p>
  </div>
 </font>
</div>```

I tried my hand at making some code for your profile that resembles a pokemon party like you'd see in-game! I'm not super experienced with code, so I apologize if I did it inefficiently.

This should work for all users, regardless of subscription status.
This is completely free to use, and I'd love to see what you do with it if you use it! Feel free to comment if you do, but you don't have to. You could also customize this to feature your own OCs instead of Pokemon. Hope you enjoy!

By default, there are 6 slots for Pokemon. This should be expandable (or reduced) fairly easily. Copy everything from where it says "_ CHARACTER" down to the next character section, and paste it in at the bottom. Make sure you leave the last </font> and </div> underneath it at the very bottom of the code, though!

I used the Pokemon sprites from PokéSprite! Right click on one, copy the image address, and replace the ditto image. You also may be able to simply change the name of the Pokemon in the image url.

Colors can be specified with a name, hex value, or rgb in the case of the box backgrounds, with the 0.1 being the opacity for that one.
You can also, of course, edit the name, gender icon, level, and hp as well.

(Congrats if you recognize the example image's Pokemon)

More From staralternate_emailaetherjaySee Morearrow_outward

Similar ArtworksSee Morearrow_outward