zoom_in
- comment2
- visibility105
posted last month, edited last month
Completed another hybrid design! I had a lot of fun with this one. Obviously themed around mushrooms, of course!
More From staralternate_emailaetherjaySee Morearrow_outward
trophyF2U HTML - Pokemon Party<img src="https://file.garden/ZSR8ukMsLUXXEcdK/pokemonpartyhtml.png "> <!--------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   <div style="display: inline-flex; width: 83%"> <!--------HP Bar (change width/background color) --------> <div style="height: 10px; float: right; width: 100%; background: #73a84a">   </div> </div> </div> </div> </div> </div>     <!--------------------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   <div style="display: inline-flex; width: 83%"> <!--------HP Bar (change width/background color) --------> <div style="height: 10px; float: right; width: 100%; background: #73a84a">   </div> </div> </div> </div> </div> </div>     <!--------------------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   <div style="display: inline-flex; width: 83%"> <!--------HP Bar (change width/background color) --------> <div style="height: 10px; float: right; width: 100%; background: #73a84a">   </div> </div> </div> </div> </div> </div>     <!--------------------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   <div style="display: inline-flex; width: 83%"> <!--------HP Bar (change width/background color) --------> <div style="height: 10px; float: right; width: 100%; background: #73a84a">   </div> </div> </div> </div> </div> </div>     <!--------------------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   <div style="display: inline-flex; width: 83%"> <!--------HP Bar (change width/background color) --------> <div style="height: 10px; float: right; width: 100%; background: #73a84a">   </div> </div> </div> </div> </div> </div>     <!--------------------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   <div style="display: inline-flex; width: 83%"> <!--------HP Bar (change width/background color) --------> <div style="height: 10px; float: right; width: 100%; background: #73a84a">   </div> </div> </div> </div> </div> </div>     <!--------------------Level & HP #--------------------> Lv. # <p style="float: right"> # / # </p> </div> </font> </div>```