what it says on the tin

(you can change it so it's not all hydreigons with charmanders)

don't steal keep credits yada yada

background images made w flaticon, uploaded on imgur here

Nickname

Pokemon

Lv. Level

Type 1 Type 2

Nickname2

Pokemon

Lv. Level

Type 1 Type 2

Nickname3

Pokemon

Lv. Level

Type 1 Type 2

Nickname4

Pokemon

Lv. Level

Type 1 Type 2

Nickname5

Pokemon

Lv. Level

Type 1 Type 2

Name's PC

<div class="card p-3 bg-light border-0 mx-auto" style="width: 570px;">
  <div class="row no-gutters">
    <!-- pokemon profiles -->
    <div class="col-md-4">
      <div class="tab-content h-100 mr-md-1 mb-2 mb-md-0">
        <div class="card bg-primary tab-pane fade in active show" id="pc1" style="border: ridge 4px #555; height:365px;">
          <h1 class="text-uppercase m-2">Nickname</h1>
          <div class="card ml-1 bg-secondary" style="height:175px; border: ridge 4px #555; margin-right: -4px;">
            <img src="https://cdn.pixabay.com/photo/2021/12/26/17/31/pokemon-6895600__340.png" style="max-width: 175px; max-height: 175px;">
          </div>
          <h1 class="text-uppercase m-2">Pokemon <i class="fas fa-mars"></i></h1>
          <h2 class="m-2">Lv. Level</h2>
          <span class="m-2">
          <span class="badge badge-pill" style="background-color:#7038F8;color:#fff;">Type 1</span>
          <span class="badge badge-pill" style="background-color:#7038F8;color:#fff;">Type 2</span>
          </span>
        </div>
        <div class="card bg-primary tab-pane fade in" id="pc2" style="border: ridge 4px #555; height:365px;">
          <h1 class="text-uppercase m-2">Nickname2</h1>
          <div class="card ml-1 bg-secondary" style="height:175px; border: ridge 4px #555; margin-right: -4px;">
            <img src="https://cdn.pixabay.com/photo/2021/12/26/17/31/pokemon-6895600__340.png" style="max-width: 175px; max-height: 175px;">
          </div>
          <h1 class="text-uppercase m-2">Pokemon <i class="fas fa-mars"></i></h1>
          <h2 class="m-2">Lv. Level</h2>
          <span class="m-2">
          <span class="badge badge-pill" style="background-color:#7038F8;color:#fff;">Type 1</span>
          <span class="badge badge-pill" style="background-color:#7038F8;color:#fff;">Type 2</span>
          </span>
        </div>
        <div class="card bg-primary tab-pane fade in" id="pc3" style="border: ridge 4px #555; height:365px;">
          <h1 class="text-uppercase m-2">Nickname3</h1>
          <div class="card ml-1 bg-secondary" style="height:175px; border: ridge 4px #555; margin-right: -4px;">
            <img src="https://cdn.pixabay.com/photo/2021/12/26/17/31/pokemon-6895600__340.png" style="max-width: 175px; max-height: 175px;">
          </div>
          <h1 class="text-uppercase m-2">Pokemon <i class="fas fa-mars"></i></h1>
          <h2>Lv. Level</h2>
          <span class="m-2">
          <span class="badge badge-pill" style="background-color:#7038F8;color:#fff;">Type 1</span>
          <span class="badge badge-pill" style="background-color:#7038F8;color:#fff;">Type 2</span>
          </span>
        </div>
        <div class="card bg-primary tab-pane fade in" id="pc4" style="border: ridge 4px #555; height:365px;">
          <h1 class="text-uppercase m-2">Nickname4</h1>
          <div class="card ml-1 bg-secondary" style="height:175px; border: ridge 4px #555; margin-right: -4px;">
            <img src="https://cdn.pixabay.com/photo/2021/12/26/17/31/pokemon-6895600__340.png" style="max-width: 175px; max-height: 175px;">
          </div>
          <h1 class="text-uppercase m-2">Pokemon <i class="fas fa-mars"></i></h1>
          <h2 class="m-2">Lv. Level</h2>
          <span class="m-2">
          <span class="badge badge-pill" style="background-color:#7038F8;color:#fff;">Type 1</span>
          <span class="badge badge-pill" style="background-color:#7038F8;color:#fff;">Type 2</span>
          </span>
        </div>
        <div class="card bg-primary tab-pane fade in" id="pc5" style="border: ridge 4px #555; height:365px;">
          <h1 class="text-uppercase m-2">Nickname5</h1>
          <div class="card ml-1 bg-secondary" style="height:175px; border: ridge 4px #555; margin-right: -4px;">
            <img src="https://cdn.pixabay.com/photo/2021/12/26/17/31/pokemon-6895600__340.png" style="max-width: 175px; max-height: 175px;">
          </div>
          <h1 class="text-uppercase m-2">Pokemon <i class="fas fa-mars"></i></h1>
          <h2 class="m-2">Lv. Level</h2>
          <span class="m-2">
          <span class="badge badge-pill" style="background-color:#7038F8;color:#fff;">Type 1</span>
          <span class="badge badge-pill" style="background-color:#7038F8;color:#fff;">Type 2</span>
          </span>
        </div>
      </div>
    </div>
    <!-- /pokemon profiles -->
    <!-- pc layout -->
    <div class="col-md-8">
      <div class="card p-2 mb-1" style="height:50px; border: ridge 4px #555; background:url(https://i.imgur.com/V6U0ppW.png);background-size:cover;">
        <h1 class="text-center">Name's PC</h1>
      </div>
      <div class="card bg-success" style="height:310px; border: ridge 4px #555; background:url(https://i.imgur.com/wpRcx7X.png);background-size:cover;">
        <div class="nav nav-pills d-flex flex-wrap mx-auto text-center">
          <!-- pc tabs -->
          <a class="btn p-1 nav-link" data-toggle="tab" href="#pc1" style="background:none; height:70px;width:70px"><img src="https://img.pokemondb.net/sprites/black-white/normal/hydreigon.png"></a>
          <a class="btn p-1 nav-link" data-toggle="tab" href="#pc2" style="background:none;height:70px;width:70px"><img src="https://img.pokemondb.net/sprites/black-white/normal/hydreigon.png"></a>
          <a class="btn p-1 nav-link" data-toggle="tab" href="#pc3" style="background:none;height:70px;width:70px"><img src="https://img.pokemondb.net/sprites/black-white/normal/hydreigon.png"></a>
          <a class="btn p-1 nav-link" data-toggle="tab" href="#pc4" style="background:none;height:70px;width:70px"><img src="https://img.pokemondb.net/sprites/black-white/normal/hydreigon.png"></a>
          <a class="btn p-1 nav-link" data-toggle="tab" href="#pc5" style="background:none; height:70px;width:70px"><img src="https://img.pokemondb.net/sprites/black-white/normal/hydreigon.png"></a>
        </div>
      </div>
    </div>
    <!-- /pc layout -->
  </div>
</div>
<div class="mx-auto" style="width: 570px;">
  <span>
    <a href="https://toyhou.se/15321863.pokemon-pc-snippet-"><i class="fal fa-moon-cloud"></i></a>
    <span class="pull-right">background pics by <a href="https://www.flaticon.com/pattern">flaticon</a></span>
  </span>
</div>