Untitled

<div align="center">

<div class="container mx-auto" style="width:1200px;">
    <div class="row mb-2">
        <div class="col-3">
            <div class="card card-outline-danger mb-4" style="height:800px;">
                <div class="card-header bg-danger text-white display-3"><i class="fa fa-bars"></i><strong>&nbsp;Basics<br></strong></div>
            <div class="card-block bg-faded">

                <table class="border-0 w-80 mx-auto">
                    <tbody>
                        <tr>
                            <td class="w-60 align-top" style="text-align: center;"><img src="https://archives.bulbagarden.net/media/upload/f/f6/Dream_Stardust_Sprite.png" class="float-center mr-1 img-rounded fr-fil fr-dib" width="100" height="100"></td>
                        </tr>
                    </tbody>
                </table>
                <div align="center"><span class="badge badge-pill badge-success" style="font-size: 20px;">Artist</span></div>
<br>

<span class="badge badge-pill badge-primary"><strong>Name</strong></span>
                              <br>Aureolin Feldgrau
                                <br>
                                <br>
                                <span class="badge badge-pill badge-primary"><strong>Age</strong></span>
                                <br>Age here
                                <br>
                                <br>
                                <span class="badge badge-pill badge-primary"><strong>Gender</strong></span>
                                <br>Gender here
                                <br>
                                <br>
                                <span class="badge badge-pill badge-primary"><strong>Origin</strong></span>
                                <br>Kalos
                                <br>
                                <br>
                                <span class="badge badge-pill badge-primary"><strong>Orientation</strong></span>
                                <br>lorem
                                <br>
                                <br>
                                <span class="badge badge-pill badge-primary"><strong>Alignment</strong></span>
                                <br>Chaotic Good, Lawful Evil, etc
                                <br>
                                <br>
                                <span class="badge badge-pill badge-primary"><strong>Item</strong></span>
                                <br>Battle Item, Berry, TM, etc
                                <br>
                                <br>
                                <span class="badge badge-pill badge-primary"><strong>Pokeball</strong></span>
                                <br>What is your fave Pokeball? Do you make your own?

                </div>
            </div>
        </div>

        <div class="col-9">
            <div class="card card-outline-danger mb-4" style="height:800px;">
                <div class="card-header bg-danger text-white">

                                       <!----------------------------pokeball------------------------------->
<span class="fa-stack fa-2x pull-left mr-2">
  <!-----the pokeball bg----->
  <i class="fas fa-circle fa-stack-2x" style="color:#ddd;"></i>
  <!-----the middle dot----->
  <i class="far fa-scrubber fa-stack-2x" style="color:#fff;"></i>
  <!-----the line and outline----->
  <i class="fal fa-ban fa-stack-2x fa-spin" style="color:#fff;"></i>
  </span>
                                <!-----------------------end pokemon thing, just delete to this to remove it----------------------->

                  <div class="display-3"><strong>&nbsp;PKMN</div></strong>


                  </div>

                  <!----------------------------tabs------------------------------->

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-gmax-tab" data-toggle="pill" href="#pills-gmax" role="tab" aria-controls="pills-gmax" aria-selected="true">Gigantamax Pkmn Team</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" id="pills-mega-tab" data-toggle="pill" href="#pills-mega" role="tab" aria-controls="pills-mega" aria-selected="false">Mega Pkmn Team</a>
  </li>

  <!--<li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">contact</a>
  </li>
</ul>-->
                  <!----------------------------tabs end------------------------------->

                  <!----------------------------tabs content------------------------------->

<div class="tab-content" id="pills-tabContent">

  <div class="tab-pane fade show active" id="pills-gmax" role="tabpanel" aria-labelledby="pills-gmax-tab">
    <div class="card-block bg-faded table-responsive">

                    <table class="w-100 border-0">
                        <tbody>
                            <tr>
                                <td><img src="URL_HERE" class="float-left mr-1 img-rounded fr-fil fr-dib" width="100" height="100">
                                    <strong>【NAME ✧】</strong>
                                    <em>Starter Pokemon ║ Name (Nature)</em>
                                    <br><em>Ability ║ Move / Move / Move / Move ║ Held Item</em>
                                    <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td><img src="URL_HERE" class="float-left mr-1 img-rounded fr-fil fr-dib" width="100" height="100">
                                    <strong>【NAME】</strong>
                                    <em>Second Pokemon ║ Name (Nature)</em>
                                    <br><em>Ability ║ Move / Move / Move / Move ║ Held Item</em>
                                    <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td><img src="URL_HERE" class="float-left mr-1 img-rounded fr-fil fr-dib" width="100" height="100">
                                    <strong>【NAME】</strong>
                                    <em>Third Pokemon ║ Name (Nature)</em>
                                    <br><em>Ability ║ Move / Move / Move / Move ║ Held Item</em>
                                    <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td><img src="URL_HERE" class="float-left mr-1 img-rounded fr-fil fr-dib" width="100" height="100">
                                    <strong>【NAME】</strong>
                                    <em>Fourth Pokemon ║ Name (Nature)</em>
                                    <br><em>Ability ║ Move / Move / Move / Move ║ Held Item</em>
                                    <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td><img src="URL_HERE" class="float-left mr-1 img-rounded fr-fil fr-dib" width="100" height="100">
                                    <strong>【NAME】</strong>
                                    <em>Fifth Pokemon ║ Name (Nature)</em>
                                    <br><em>Ability ║ Move / Move / Move / Move ║ Held Item</em>
                                    <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td><img src="URL_HERE" class="float-left mr-1 img-rounded fr-fil fr-dib" width="100" height="100">
                                    <strong>【NAME】</strong>
                                    <em>Sixth Pokemon ║ Name (Nature)</em>
                                    <br><em>Ability ║ Move / Move / Move / Move ║ Held Item</em>
                                    <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                                    <br>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
  </div>

  <div class="tab-pane fade" id="pills-mega" role="tabpanel" aria-labelledby="pills-mega-tab">
    ...
  </div>
  <!--<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>-->
</div>

            <!----------------------------tab content end------------------------------->


            </div>
        </div>


    <div class="container mx-auto" style="width:1150px;">
        <div class="row mb-2">
            <div class="col-7">
                <div class="card card-outline-danger mb-4" style="height:350px;">
                    <div class="card-header bg-danger text-white display-3"><i class="fa fa-pen"></i><strong>&nbsp;Notes<br></strong></div>
                    <div class="card-block bg-faded table-responsive">

                        <p>Lorem ipsum dolor sit amet</p>
                        <br>

                        <ul class="mb-0">
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-5">
                <div class="card card-outline-danger mb-4" style="height:350px;">
                    <div class="card-header bg-danger text-white display-3"><i class="fa fa-info-circle"></i><strong>&nbsp;Important<br></strong></div>
                    <div class="card-block bg-faded table-responsive">

                        <ul class="mb-0">
                            <li>You can also use this for important moments instead!</li>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!---------- Credit, please leave here so others can get the code! ------->
<hr>
<p class="text-right small"><a href="https://toyhou.se/3075395.codes/3334385."><i class="fas fa-code"></i></a> by <a href="https://toyhou.se/VairaSmythe">VairaSmythe</a>
</p>