I got bored so I wrote this up
This template is mostly for myself but feel free to use if you want :)
it's simple code the bulk of which is stolen of the internet somewhere and modified.
HP
[046]
ATK
[053]
DEF
[045]
Spc.ATK
[069]
Spc.DEF
[042]
SPEED
[060]
This is where you can change the border and the colour of the progress bar - I have it in a somewhat rounded style but you don't have to.
<style>
progress {
flex-shrink:1;
border-radius: 50px;
width: 60%;
height: 10px;}
progress::-webkit-progress-bar {
background-color: black;
border-radius: 50px;
}progress::-webkit-progress-value {
background-color: #78678a ;
border-radius: 50px;}
</style>
Each section devided by the "--" is a single progress bar, here is were you can change the stat it represents and the "value".
The max (currently set to the Pokémon stat max) is how it calculates how far the value will be coloured on the bar, so if the max is 100 and you say the value="50" then thats the same as 50%
Example
[50%]
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:86px;"> HP </p>
<progress class="m-0" value="46" max="255"> </progress>
<p class="m-0">[046] </p>
</div>--
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:71px;"> ATK </p>
<progress class="m-0" value="53" max="255"> </progress>
<p class="m-0">[053] </p>
</div>--
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:71px;"> DEF </p>
<progress class="m-0" value="45" max="255"> </progress>
<p class="m-0">[045] </p>
</div>--
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:10px;"> Spc.ATK </p>
<progress class="m-0" value="69" max="255"> </progress>
<p class="m-0">[069] </p>
</div>--
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:10px;"> Spc.DEF </p>
<progress class="m-0" value="42" max="255"> </progress>
<p class="m-0">[042] </p>
</div>--
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:41px;"> SPEED </p>
<progress class="m-0" value="60" max="255"> </progress>
<p class="m-0">[060] </p>
</div>
If you want to have multiple colours or styles then you will need to add a "." to "progress" and add a number.
You will need to insert <class="progress(number you changed it to)> to the bar element.
Style Ex
[50]
Style Ex
[50]
<style>
.progress2 {
flex-shrink:1;
border-radius: 50px;
width: 60%;
height: 10px;}
.progress2::-webkit-progress-bar {
background-color: black;
border-radius: 50px;}
.progress2::-webkit-progress-value {
background-color: yellow ;
box-shadow: 1px 1px 5px 3px rgba( 255, 214, 110, 0.8 );
border-radius: 50px;
}--
.progress3 {
flex-shrink:1;
border-radius: 0px;
width: 60%;
height: 20px;}
.progress3::-webkit-progress-bar {
background-color: #001640;
border-radius: 0px;}
.progress3::-webkit-progress-value {
background-color: turquoise ;
border-radius: 0px;}
</style>
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:72px;"> Glow Ex </p>
<progress class="progress2" class="m-0" value="50" max="100">
<p class="m-0">[50] </p>
</div>--
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:41px;"> Colour Ex </p>
<progress class="progress3" class="m-0" value="50" max="100"> </progress>
<p class="m-0">[50] </p>
</div>
As a final note, if you want it to have this font for the maximum Pokémon feel and vibes then just include this:
<style>
@font-face { font-family: pokefont; src: url('https://file.garden/ZnGZOv7aF21WeO00/Fakemon/Pokemon GB.ttf'); }p {
font-family: pokefont;
font-size: 12px;
}</style>
Careful though, it will turn all of your text to this font unless specified otherwise.
And thats everything, I'm not the smartest with HTML and I'm still learning, but I thought this was a fun thing people can use to decorate their profile with.
This can be placed anywhere HTML is allowed, including literature pieces,example here