<div class="card mx-auto rounded bg-warning text-white" style="width:482px; height:432px;">
<div class="card mx-auto rounded" style="margin-top:14px; width:474px; height:379px; background-color:#000; border: 3px solid white;">
<div class="tab-content">
<!-- ~~~~~~~~~~~MAIN DEX PAGE~~~~~~~~~~~~ -->
<div class="tab-pane fade in show active" id="ONE">
<div style="margin-top:6px; margin-left:18px">
<div class="row">
<!-- background:url(squarish works best)-->
<div style="width:170px; height:170px; background:url(https://file.toyhou.se/thumbnails/5006369_hJ0.png) center; background-size:cover; background-color:#fff;">
<p style="font-size: 24px; text-align:center; font-family:'Lucida Console', Monaco, monospace; margin-top:162px">No.000</p>
</div>
<div class="font-weight-bold" style="margin-left:20px; width:255px; font-family:'Lucida Console', Monaco, monospace; font-size: 32px;">
<div class="w-100 text-right">
<i class="fas fa-star"></i>
</div>
<div class="text-uppercase" style="margin-top:-13px">
missingno.
</div>
<div class="text-uppercase">
Glitch
</div>
<div class="row">
<div class="col-3 text-uppercase">
HT
</div>
<div class="col-9">
9'12"
</div>
</div>
<div class="row">
<div class="col-3 text-uppercase">
wT
</div>
<div class="col-9">
9999lb
</div>
</div>
</div>
</div>
</div>
<div class="bg-warning" style="width:456px; height:6px; margin-top:4px; margin-left:3px;"></div>
<div style="margin-left:27px; height:120px; width:418px; overflow: auto; font-family:'Lucida Console', Monaco, monospace; font-size: 32px;">
<p>A wild glitch Pokémon with a strange face. Its actions are damaging and confusing, but easy to take advantage.</p>
</div>
</div>
<!-- ~~~~~~~~~~~AREA + OTHER INFO ~~~~~~~~~~~~ -->
<div class="tab-pane fade in text-white font-weight-bold" id="TWO">
<div class="width-100" style="height:371px; overflow:auto;">
<div class="text-uppercase" style="margin-left:27px; width:418px; font-family:'Lucida Console', Monaco, monospace; font-size: 32px;">
Type:
</div>
<div class="text-uppercase" style="margin-left:52px; width:390px; font-family:'Lucida Console', Monaco, monospace; font-size: 32px;">
<span class="badge badge-pill" style="background-color:#fff;color:#000;">Normal</span> <span class="badge badge-pill" style="background-color:#fff;color:#000;">Bird</span>
</div>
<div class="text-uppercase" style="margin-left:27px; width:418px; font-family:'Lucida Console', Monaco, monospace; font-size: 32px;">
Level:
</div>
<div style="margin-left:52px; width:390px; font-family:'Lucida Console', Monaco, monospace; font-size: 24px;">
82
</div>
<div class="text-uppercase" style="margin-left:27px; width:418px; font-family:'Lucida Console', Monaco, monospace; font-size: 32px;">
Met:
</div>
<div style="margin-left:52px; width:390px; font-family:'Lucida Console', Monaco, monospace; font-size: 24px;">
Kanto: Cinnabar Island, Lvl 80
</div>
<div class="text-uppercase" style="margin-left:27px; width:418px; font-family:'Lucida Console', Monaco, monospace; font-size: 32px;">
Ability:
</div>
<div style="margin-left:52px; width:390px; font-family:'Lucida Console', Monaco, monospace; font-size: 24px;">
Intimidate, Pickup<br>
Hidden: Dry Skin
</div>
<div class="text-uppercase" style="margin-left:27px; width:418px; font-family:'Lucida Console', Monaco, monospace; font-size: 32px;">
Nature:
</div>
<div style="margin-left:52px; width:390px; font-family:'Lucida Console', Monaco, monospace; font-size: 24px;">
Naughty
</div>
<div class="text-uppercase" style="margin-left:27px; width:418px; font-family:'Lucida Console', Monaco, monospace; font-size: 32px;">
Moves:
</div>
<div style="margin-left:52px; width:390px; font-family:'Lucida Console', Monaco, monospace; font-size: 24px;">
Water Gun<br>
Water Gun<br>
Sky Attack<br>
-
</div>
</div>
</div>
<!-- ~~~~~~~~~ TEAM / FRIENDS PAGE ~~~~~~~~~~~~~ -->
<!--background;url(works best as square-ish) -->
<div class="tab-pane fade in text-white font-weight-bold" id="THREE">
<div class="mx-auto" style="margin-left:4px; height:371px; width:465px; overflow:auto;">
<div style="width:70px; height:70px; background:url(https://file.toyhou.se/thumbnails/5006369_hJ0.png) center; background-size:cover; background-color:#fff;"></div>
<div style="margin-top:-70px; margin-left:75px;height:70px; font-family:'Lucida Console', Monaco, monospace; font-size: 24px;">
Red: 7 BADGES <br>
SEEN 115 OWN 34</span>
</div>
<div style="width:70px; height:70px; background:url(https://file.toyhou.se/thumbnails/5006369_hJ0.png) center; background-size:cover; background-color:#fff;"></div>
<div style="margin-top:-70px; margin-left:75px;height:70px; font-family:'Lucida Console', Monaco, monospace; font-size: 24px;">
<div class="row" style="width:370px;">
<div class="col-8 text-uppercase">
Saura
</div>
<div class="col-2">
LVL:48
</div>
</div>
Venusaur <span class="badge badge-pill" style="background-color:#fff;color:#000;">Grass</span> <span class="badge badge-pill" style="background-color:#fff;color:#000;">Poison</span>
</div>
<div style="width:70px; height:70px; background:url(https://file.toyhou.se/thumbnails/5006369_hJ0.png) center; background-size:cover; background-color:#fff;"></div>
<div style="margin-top:-70px; margin-left:75px;height:70px; font-family:'Lucida Console', Monaco, monospace; font-size: 24px;">
<div class="row" style="width:370px;">
<div class="col-8 text-uppercase">
Saura
</div>
<div class="col-2">
LVL:48
</div>
</div>
Blastoise <span class="badge badge-pill" style="background-color:#fff;color:#000;">Water</span>
</div>
<div style="width:70px; height:70px; background:url(https://file.toyhou.se/thumbnails/5006369_hJ0.png) center; background-size:cover; background-color:#fff;"></div>
<div style="margin-top:-70px; margin-left:75px;height:70px; font-family:'Lucida Console', Monaco, monospace; font-size: 24px;">
<div class="row" style="width:370px;">
<div class="col-8 text-uppercase">
Splish
</div>
<div class="col-2">
LVL:44
</div>
</div>
Pidgeot <span class="badge badge-pill" style="background-color:#fff;color:#000;">Normal</span> <span class="badge badge-pill" style="background-color:#fff;color:#000;">Flying</span>
</div>
<div style="width:70px; height:70px; background:url(https://file.toyhou.se/thumbnails/5006369_hJ0.png) center; background-size:cover; background-color:#fff"></div>
<div style="margin-top:-70px; margin-left:75px;height:70px; font-family:'Lucida Console', Monaco, monospace; font-size: 24px;">
<div class="row" style="width:370px;">
<div class="col-8 text-uppercase">
Charmy
</div>
<div class="col-2">
LVL:51
</div>
</div>
Charizard <span class="badge badge-pill" style="background-color:#fff;color:#000;">Fire</span> <span class="badge badge-pill" style="background-color:#fff;color:#000;">Flying</span>
</div>
<div style="width:70px; height:70px; background:url(https://file.toyhou.se/thumbnails/5006369_hJ0.png) center; background-size:cover; background-color:#fff"></div>
<div style="margin-top:-70px; margin-left:75px;height:70px; font-family:'Lucida Console', Monaco, monospace; font-size: 24px;">
<div class="row" style="width:370px;">
<div class="col-8 text-uppercase">
King
</div>
<div class="col-2">
LVL:51
</div>
</div>
Nidoking <span class="badge badge-pill" style="background-color:#fff;color:#000;">Poison</span> <span class="badge badge-pill" style="background-color:#fff;color:#000;">Ground</span>
</div>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~ FREE PAGE, STORY WORKS NICE -->
<div class="tab-pane fade in text-white" id="FOUR">
<div class="p-4" style="margin-left:4px; height:371px; width:465px; overflow:auto; font-family:'Lucida Console', Monaco, monospace; font-size: 16px;">
<p class="text-uppercase font-weight-bold" style="font-size: 32px;">story</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit elit eu tempus posuere. Cras facilisis rutrum ipsum sed ornare. In orci dui, pretium eu lacus eu, ullamcorper tincidunt diam. Aliquam nec ipsum ut massa finibus blandit ut sit amet mi. Aliquam ultricies lectus vestibulum, lobortis mauris ut, venenatis nisi. Sed volutpat ut odio quis volutpat. Praesent molestie lacus massa, ut pulvinar est viverra aliquet. Nunc eu ultrices leo, eget facilisis orci. Maecenas molestie pulvinar lorem id fringilla. Quisque tincidunt, tortor vitae accumsan sodales, erat lacus congue felis, eget facilisis libero nunc eu nulla. Duis pretium urna libero, ut scelerisque nulla rutrum vitae.
<p>Sed in ornare nisi, et volutpat risus. Praesent lectus libero, aliquam eget elit tincidunt, posuere bibendum lorem. Proin augue urna, elementum non congue non, euismod ullamcorper mauris. Nulla eu arcu eu nisl pellentesque iaculis. Nunc mauris diam, auctor fermentum lacus quis, auctor tincidunt dolor. Sed vitae sem non neque porttitor suscipit. Sed porttitor, lorem vel dapibus dapibus, leo lorem bibendum ex, eu luctus enim leo dapibus ipsum. Nunc tempus pulvinar fermentum. Aliquam in ex a lacus tempus venenatis non vel ex. Cras eu mattis risus. Mauris et sollicitudin leo, aliquam tincidunt sem. Morbi dignissim risus sit amet massa hendrerit consequat.
<p>In hac habitasse platea dictumst. Vivamus in vehicula elit. Sed dignissim ex a ullamcorper egestas. Proin posuere lacus a bibendum suscipit. Nulla eu lacus quis arcu finibus consequat. Sed et laoreet massa, sit amet imperdiet sapien. Etiam eu tincidunt tellus. Aliquam risus ex, tempor vel consectetur sed, accumsan id libero. Duis quis nisi in augue feugiat tempor. Etiam dapibus augue id dolor facilisis facilisis. Curabitur convallis quam quis purus commodo, sit amet faucibus orci hendrerit.
<p>Curabitur mollis nisl odio, in mollis nibh convallis gravida. Proin tincidunt vel mauris at mattis. Nunc vulputate elit sit amet neque egestas mollis. Integer risus leo, rhoncus feugiat finibus ac, facilisis vel lacus. Duis finibus magna in arcu imperdiet sollicitudin. Proin aliquam sapien in sapien lacinia dictum. Aenean auctor et purus vitae pellentesque. Nulla rhoncus gravida nisl, non elementum enim maximus maximus. Aliquam rhoncus ultricies justo quis pellentesque. Proin vestibulum blandit diam, ac bibendum massa pellentesque et. Morbi in erat quis ipsum accumsan porttitor et eu nulla. In malesuada lorem sit amet velit consectetur sagittis. Donec mattis rhoncus nunc, id mollis sapien feugiat ut.
</div>
</div>
</div>
</div>
<!-- BOTTOM NAVIGATION, I do not recommend the words be too long. -->
<div class="card badge badge-pill" style="margin-top:15px; margin-left:3px; width:468px; height:24px; background-color:#000;">
<ul class="nav justify-content-center" style="margin-top:-12px;">
<li class="nav-item">
<a class="nav-link active show" data-toggle="tab" href="#ONE"><span class="text-white text-uppercase" style="font-family:'Lucida Console', Monaco, monospace; font-size: 32px;">info</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#TWO"><span class="text-white text-uppercase" style="font-family:'Lucida Console', Monaco, monospace; font-size: 32px;">area</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#THREE"><span class="text-white text-uppercase" style="font-family:'Lucida Console', Monaco, monospace; font-size: 32px;">team</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#FOUR"><span class="text-white text-uppercase" style="font-family:'Lucida Console', Monaco, monospace; font-size: 32px;">more</span></a>
</li>
</ul>
</div>
</div>
<p class="text-right text-muted small"><b>HTML by Pepperly</b></p>