Gijinkadex

<div class="py-5 rounded" style="background: url(https://assets.pokemon.com/static2/_ui/img/chrome/container_bg.png)">
<div class="mx-auto" style="max-width: 800px;">

     <!--[[ TITLE ]]-->
     <div class="bg-faded text-center p-2" style="clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);">
     <div style="font-size: 30px; margin-left: 15%; margin-right: 15%; font-weight: 700">

         TBA
         <span class="text-muted">
         Nº TBA
         </span>

     </div>
     </div>
     <!--[[ TITLE END ]]-->

     <!--[[ BOX ]]-->
     <div class="bg-faded mt-2">
     <div class="row no-gutters p-2">

         <!--[[ COLUMN ONE ]]-->
         <div class="col-md-6 my-auto">

             <!--[[ AVATAR ]]-->
             <div class="p-2">
             <div class="rounded" style="background: rgba(0, 0, 0, 0.05)
             url(IMG_URL) center no-repeat; background-size: contain; height: 438px;"></div>
             </div>
             <!--[[ AVATAR END ]]-->

             <!--[[ BLURB ]]-->
             <div class="p-2 text-center" style="font-size: 25px;">

                 The
                 <span class="text-muted">
                 TBA
                 </span>
                 Pokémon

             </div>
             <!--[[ BLURB END ]]-->

         </div>
         <!--[[ COLUMN ONE END ]]-->

         <!--[[ COLUMN TWO ]]-->
         <div class="col-md-6">

             <!--[[ ABOUT ]]-->
             <div class="p-2">
             <div class="rounded p-2 d-block d-flex" style="background: rgba(0, 0, 0, 0.05); height: 116px; overflow: auto">
             <div class="my-auto mx-auto text-center">

                 <p>TBA</p>

             </div>
             </div>
             </div>
             <!--[[ ABOUT END ]]-->

             <!--[[ BASICS ]]-->
             <div class="p-2">
             <div class="rounded bg-primary p-2" style="height: 160px; overflow: auto">
             <div class="row no-gutters" style="color: #ffffff;">

                 <!--[[ HEIGHT ]]-->
                 <div class="col-6 p-2">

                     <div style="font-size: 20px;">
                     Height
                     </div>

                         <div style="font-size: 17px; font-weight: 100">
                         0cm (0'0")
                         </div>

                 </div>
                 <!--[[ HEIGHT END ]]-->

                 <!--[[ WEIGHT ]]-->
                 <div class="col-6 p-2">

                     <div style="font-size: 20px;">
                     Weight
                     </div>

                         <div style="font-size: 17px; font-weight: 100">
                         0kg (0lbs)
                         </div>

                 </div>
                 <!--[[ WEIGHT END ]]-->

                 <!--[[ GENDER ]]-->
                 <div class="col-6 p-2">

                     <div style="font-size: 20px;">
                     Gender
                     </div>
                     <div style="font-size: 17px; font-weight: 100">

                         Gender
                         <i>
                         (Pro/noun)
                          </i>

                     </div>

                 </div>
                 <!--[[ GENDER ]]-->

                 <!--[[ ABILITY ]]-->
                 <div class="col-6 p-2">

                     <div style="font-size: 20px;">
                     Abilities
                     </div>
                     <div style="font-size: 17px; font-weight: 100">

                         Ability name

                     </div>

                 </div>
                 <!--[[ ABILITY ]]-->

             </div>
             </div>
             </div>
             <!--[[ BASICS END ]]-->

             <!--[[ TYPE & WEAKNESSES ]]-->
             <!--[[ TIP: COLORS TO REPLACE #POKEMON_TYPE WITH ]]-->
             <!--[[
             BUG:         #729f3f
             DRAGON:      linear-gradient(to bottom, #53a4cf 70%, #f16e57 30%)
             FAIRY:       #fdb9e9
             FIRE:        #fd7d24
             GHOST:       #7b62a3
             GROUND:      linear-gradient(to bottom, #f7de3f 70%, #ab9842 30%)
             NORMAL:      #a4acaf
             PSYCHIC:     #f366b9
             STEEL:       #9eb7b8
             DARK:        #707070
             ELECTRIC:    #eed535
             FIGHTING:    #d56723
             FLYING:      linear-gradient(to bottom, #3dc7ef 70%, #bdb9b8 30%)
             GRASS:       #9bcc50
             ICE:         #51c4e7
             POISON:      #b97fc9
             ROCK:        #a38c21
             WATER:       #4592c4
             ]]-->

             <!--[[ TYPE ]]-->
             <div class="row no-gutters justify-content-center text-center">

                 <!--[[ TITLE ]]-->
                 <div class="col-12 p-2">
                 <div style="font-size: 25px;">

                     TYPE

                 </div>
                 </div>
                 <!--[[ TITLE END ]]-->

                 <!--[[ TYPE ONE ]]-->
                 <div class="col-4 p-2">
                 <div class="rounded" style="
                 background: #POKEMON_TYPE;
                 color: #ffffff; font-size: 20px;">
                 <div style="background: rgba(255, 255, 255, 0.3); text-shadow: 0px 0px 2px #000000; font-weight: 700; letter-spacing: 1px">

                     TYPE

                 </div>
                 </div>
                 </div>
                 <!--[[ TYPE ONE END ]]-->

                 <!--[[ TYPE TWO - COPY PASTE ABOVE CODE HERE ]]-->

                 <!--[[ TYPE TWO END ]]-->

             </div>
             <!--[[ TYPE END ]]-->

             <!--[[ WEAKNESS ]]-->
             <div class="row no-gutters justify-content-center text-center">

                 <!--[[ TITLE ]]-->
                 <div class="col-12 p-2">
                 <div style="font-size: 25px;">

                     WEAKNESSES

                 </div>
                 </div>
                 <!--[[ TITLE END ]]-->

                 <!--[[ WEAKNESS ONE ]]-->
                 <div class="col-4 p-2">
                 <div class="rounded" style="
                 background: #POKEMON_TYPE;
                 color: #ffffff; font-size: 20px;">
                 <div style="background: rgba(255, 255, 255, 0.3); text-shadow: 0px 0px 2px #000000; font-weight: 700; letter-spacing: 1px">

                     TYPE

                 </div>
                 </div>
                 </div>
                 <!--[[ WEAKNESS ONE END ]]-->

                 <!--[[ WEAKNESS TWO - COPY PASTE ABOVE CODE HERE ]]-->

                 <!--[[ WEAKNESS TWO END ]]-->

             </div>
             <!--[[ WEAKNESS END ]]-->

             <!--[[ TYPE & WEAKNESS END ]]-->

         </div>
         <!--[[ INFO END ]]-->

     </div>
     </div>
     <!--[[ BOX END ]]-->

</div>
</div>

<div class="text-right text-muted mt-2" style="font-weight: 100; font-size: 12px;">
code by @honorama
</div>