Paldean Pokédex
created by:dragon-heist
HTMLMixed ColorsCharacterFolderMiscellaneous
Copy
<div class="col-12 py-5" style="
--inner-label-bg: rgba(35,39,66,0.8);
--label-text: #E0F013;
--entry-width: 150px;
--entry-height: 165px;
--entry-box-shadow: 10px 0 8px rgba(0,0,0,0.5);
--shelf-width: 750px;
--inner-border: 2px #E0F013 solid;
--inner-border-height: 82%;
--inner-border-radius: 0 0 0 30%;
--inner-border-outline: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
--inner-border-top: 15px;
--name-font: Eras Demi ITC, sans-serif;
--name-offset-left: 10px;
--name-size: 1rem;
--name-text-shadow: 1px 1px 0 black, 1px -1px 0 black, -1px 1px 0 black, -1px -1px 0 black;
--name-drop-shadow: drop-shadow(0 0 3px black);
background: url('https://i.postimg.cc/PJKpQwMV/sv-daytime.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;">
<!--- I. MAIN POKEDEX CONTAINER --->
<div class="col-xl-8 col-12 mx-auto" style="
filter: drop-shadow(2px 2px 4px black);">
<!--- i. TOP BAR --->
<div class="text-dark px-3 py-1 d-flex no-wrap justify-content-between" style="background: white; border-radius: 25px 25px 0 0; border-bottom: 4px #fab84d solid; font-size: 1.4em;">
<!-- Book Icon & Title -->
<div class="col d-flex font-weight-bold justify-content-start align-items-center p-0 ml-sm-1">
<!-- Book Icon -->
<div class="px-1 rounded text-center" style="background: #CE1B17; color: white; width: 35px; text-shadow: 4px 5px 5px #3b0706;">
<i class="fa-solid fa-books"></i>
</div>
<!-- Title -->
<div class="ml-2">Pokédex</div>
</div>
<!-- User Icon; change it to whatever FA icon you want! -->
<div class="col-auto p-0 text-center d-sm-block d-none">
<i class="fa-duotone fa-circle-user fa-xl"></i>
</div>
<!-- Weather & 'Back' Button; not actually functional as a link by default -->
<div class="col p-0 d-flex no-wrap justify-content-end mr-sm-1">
<!-- Weather Icon -->
<div class="d-sm-block d-none"><i class="fa-solid fa-sun-bright fa-lg mr-1"></i></div>
<!-- 'Back' Button -->
<div class="px-2 align-items-center ml-2" style="background:#df7d3f; color:white; border-radius:20px;">
<i class="fa-sharp fa-solid fa-circle-xmark mr-2"></i>
<i class="fa-regular fa-right-to-bracket mr-1"></i>
</div>
</div>
</div>
<!--- i. TOP BAR END --->
<!--- ii. DEX SECTION --->
<div class="d-flex flex-wrap align-items-start" style="
overflow: hidden;
height: 535px;
position: relative;
">
<!-- Sidebar -->
<div class="col-xl-1 col-sm-2 col-12 d-flex flex-wrap py-0 pl-sm-3 px-2 justify-content-center align-content-center" style="z-index:5; position:absolute;">
<div class="col-sm-auto col-3 px-2 py-sm-3 p-1 m-sm-2 mx-1 mb-1 mt-sm-5 mt-2 text-center align-items-center text-white" style=" background:var(--inner-label-bg); border-radius:15px;">
<i class="fa-solid fa-circle-xmark fa-lg mx-auto"></i> <i class="ml-sm-2 mx-auto fa-solid fa-arrow-right-from-line fa-xl"></i>
</div>
<div class="nav col-sm-auto col p-2 m-sm-2 mx-1 mb-1 mt-2 d-flex flex-wrap text-center justify-content-center" style="background:var(--inner-label-bg); border-radius:10px;">
<a class="text-dark btn btn-warning nav-link col-sm-12 col rounded text-dark p-0 my-1 mx-sm-0 mx-1" href="#MAP" data-toggle="pill">
<i class="fa-duotone fa-light fa-compass fa-xl my-3"></i>
</a>
<a class="text-dark btn btn-info active nav-link col-sm-12 col rounded text-dark p-0 my-sm-2 my-1 mx-sm-0 mx-1" href="#POKEDEX" data-toggle="pill">
<i class="fa-duotone fa-light fa-books fa-xl my-3"></i>
</a>
<a class="text-dark btn btn-success nav-link col-sm-12 col rounded text-dark p-0 my-1 mx-sm-0 mx-1" href="#TRAINER" data-toggle="pill">
<i class="fa-duotone fa-light fa-id-card fa-xl my-3"></i>
</a>
</div>
</div>
<div class="tab-content h-100 w-100">
<div class="tab-pane h-100" id="MAP">
<div class="h-100 w-100" style="background:url('https://i.postimg.cc/Znvgmbvc/sv-map.png'); background-repeat:no-repeat; background-position:center; background-size:cover;"></div>
</div>
<div class="tab-pane h-100 w-100 show active" id="POKEDEX">
<div class="row no-gutters align-content-start h-100 w-100" style="background:url('https://i.postimg.cc/XYgnmLbG/wood-bg.jpg'); background-repeat:no-repeat; background-position:center; background-size:cover;">
<div class="col-xl-1 col-sm-2 mr-sm-3 mr-2" style="height:75px;"></div>
<div class="col mt-sm-5" style="height: 460px; overflow-x: hidden; overflow-y: auto; scrollbar-color: #ede7e6 rgba(0,0,0,0.6); scrollbar-width: thin;">
<div class="d-flex flex-wrap" style="overflow:hidden;">
<!-- Top Character Image -->
<div class="ml-lg-5 ml-sm-2 mr-sm-0 mx-auto my-sm-0 mt-4 order-sm-0 order-1" style="min-width:var(--entry-width);
background: url('https://s3.pokeos.com/pokeos-uploads/tcg/textless/569/142.png'); background-repeat: no-repeat; background-size: cover; background-position: center;
height: var(--entry-height); box-shadow: 10px 0 8px rgba(0,0,0,0.5); position: relative;">
<!-- Character Name -->
<div class="text-center font-weight-bold" style="position:absolute; height:3px; background:var(--label-text); color:var(--label-text);
top:15px; left:0; right:0; font-family:var(--name-font); font-size:var(--name-size); filter:var(--name-drop-shadow);">
<span style="text-shadow:var(--name-text-shadow);">CHARACTER</span>
</div>
<div style="position:absolute; height:3px; background:var(--label-text); bottom:15px; left:0; right:0; filter:drop-shadow(0 1px 0 black) drop-shadow(0 -1px 0 black);
"></div>
<!-- Character Link -->
<a href="#" class="btn rounded-0 h-100 w-100" style="position:absolute;"></a>
</div>
<!-- Top Character Image End -->
<!-- Regional Pokedex, Caught, Battled Section -->
<div class="col-md order-sm-1 order-0 my-2 ml-sm-3 text-sm-left text-center">
<div class="col-12 p-0 mx-sm-0 mx-auto font-weight-bold text-white" style="font-family: Arial, sans-serif; font-size: 1.4rem; text-shadow: 0 0 5px black;">
Regional Pokédex
</div>
<div class="font-weight-bold mt-md-2 mt-3 mb-2 mx-sm-0 mx-auto text-white" style="max-width:350px;">
<div class="pl-2 pr-3 py-1 d-flex no-wrap justify-content-between align-items-center" style="
background:var(--inner-label-bg);
border-radius: 25px;
font-family: Arial Narrow, sans-serif;
font-size: 1.3em;">
<!-- Caught Label -->
<div class="align-items-center">
<img class="mr-3" src="https://i.postimg.cc/5tFnj72f/pokeball-icon.png" width=20px> Caught
</div>
<!-- Number Caught -->
<div style="
font-family: Arial, sans-serif;
font-size: 1.1em;
">
99
</div>
</div>
</div>
<div class="font-weight-bold mx-sm-0 mx-auto text-white" style="max-width:350px;">
<div class="pl-2 pr-3 py-1 d-flex no-wrap justify-content-between align-items-center" style="
background:var(--inner-label-bg);
border-radius: 25px;
font-family: Arial Narrow, sans-serif;
font-size: 1.3em;">
<!-- Battled Label -->
<div class="align-items-center">
<img class="mr-3" src="https://i.postimg.cc/5tFnj72f/pokeball-icon.png" width=20px> Battled
</div>
<!-- Number Battled -->
<div style="
font-family: Arial, sans-serif;
font-size: 1.1em;
">
99
</div>
</div>
</div>
</div>
<!-- Regional Pokedex, Caught, Battled Section End -->
</div>
<!-- Shelf -->
<div style="max-width:var(--shelf-width); background:#E0E5E8; height:15px; border-radius:3px; z-index:2;"></div>
<!-- Shelf Shadow -->
<div class="pt-4 px-3" style="max-width:var(--shelf-width); background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.65) 95%); height:60px;">
<!-- Recently Caught Pokemon Label -->
<div class="font-weight-bold text-sm-left text-center text-white" style=" font-family: Arial, sans-serif; font-size: 1.5em; text-shadow: 0 0 5px black;">
<img class="mr-sm-3 mr-2" src="https://i.postimg.cc/5tFnj72f/pokeball-icon.png" width=25px> Recently Caught Pokémon
</div>
</div>
<div class="d-flex flex-wrap justify-content-md-start justify-content-center mt-sm-3 mt-5">
<!-- Character Container -->
<div class="col-auto p-3">
<div style="background:url('https://s3.pokeos.com/pokeos-uploads/tcg/textless/583/126.png');
background-repeat:no-repeat; background-size:cover; background-position:center; min-width: var(--entry-width); height: var(--entry-height); box-shadow:var(--entry-box-shadow); position:relative;">
<!-- Border -->
<div class="border-right-0" style=" position:absolute; height:var(--inner-border-height); border:var(--inner-border); border-radius:var(--inner-border-radius); top:var(--inner-border-top); left:10px; right:0; filter:var(--inner-border-outline);
"></div>
<!-- Character Name -->
<div class="text-center font-weight-bold" style="
position: absolute; color: var(--label-text); top:var(--inner-border-top); left:var(--name-offset-left); right: 0; font-family:var(--name-font); font-size:var(--name-size);
text-shadow:var(--name-text-shadow); filter:var(--name-drop-shadow);
">
CHARACTER
</div>
<!-- Character Link -->
<a href="#" class="btn rounded-0 h-100 w-100" style="position:absolute;"></a>
</div>
</div>
<!-- Character Container End -->
<!-- Character Container -->
<div class="col-auto p-3">
<div style="background:url('https://s3.pokeos.com/pokeos-uploads/tcg/textless/570/14.png');
background-repeat:no-repeat; background-size:cover; background-position:center; min-width: var(--entry-width); height: var(--entry-height); box-shadow:var(--entry-box-shadow); position:relative;">
<!-- Border -->
<div class="border-right-0" style=" position:absolute; height:var(--inner-border-height); border:var(--inner-border); border-radius:var(--inner-border-radius); top:var(--inner-border-top); left:10px; right:0; filter:var(--inner-border-outline);
"></div>
<!-- Character Name -->
<div class="text-center font-weight-bold" style="
position: absolute; color: var(--label-text); top:var(--inner-border-top); left:var(--name-offset-left); right: 0; font-family:var(--name-font); font-size:var(--name-size);
text-shadow:var(--name-text-shadow); filter:var(--name-drop-shadow);
">
CHARACTER
</div>
<!-- Character Link -->
<a href="#" class="btn rounded-0 h-100 w-100" style="position:absolute;"></a>
</div>
</div>
<!-- Character Container End -->
<!-- Character Container -->
<div class="col-auto p-3">
<div style="background:url('https://s3.pokeos.com/pokeos-uploads/tcg/textless/570/61.png');
background-repeat:no-repeat; background-size:cover; background-position:center; min-width: var(--entry-width); height: var(--entry-height); box-shadow:var(--entry-box-shadow); position:relative;">
<!-- Border -->
<div class="border-right-0" style=" position:absolute; height:var(--inner-border-height); border:var(--inner-border); border-radius:var(--inner-border-radius); top:var(--inner-border-top); left:10px; right:0; filter:var(--inner-border-outline);
"></div>
<!-- Character Name -->
<div class="text-center font-weight-bold" style="
position: absolute; color: var(--label-text); top:var(--inner-border-top); left:var(--name-offset-left); right: 0; font-family:var(--name-font); font-size:var(--name-size);
text-shadow:var(--name-text-shadow); filter:var(--name-drop-shadow);
">
CHARACTER
</div>
<!-- Character Link -->
<a href="#" class="btn rounded-0 h-100 w-100" style="position:absolute;"></a>
</div>
</div>
<!-- Character Container End -->
<!-- Character Container -->
<div class="col-auto p-3">
<div style="background:url('https://s3.pokeos.com/pokeos-uploads/tcg/textless/570/7.png');
background-repeat:no-repeat; background-size:cover; background-position:center; min-width: var(--entry-width); height: var(--entry-height); box-shadow:var(--entry-box-shadow); position:relative;">
<!-- Border -->
<div class="border-right-0" style=" position:absolute; height:var(--inner-border-height); border:var(--inner-border); border-radius:var(--inner-border-radius); top:var(--inner-border-top); left:10px; right:0; filter:var(--inner-border-outline);
"></div>
<!-- Character Name -->
<div class="text-center font-weight-bold" style="
position: absolute; color: var(--label-text); top:var(--inner-border-top); left:var(--name-offset-left); right: 0; font-family:var(--name-font); font-size:var(--name-size);
text-shadow:var(--name-text-shadow); filter:var(--name-drop-shadow);
">
CHARACTER
</div>
<!-- Character Link -->
<a href="#" class="btn rounded-0 h-100 w-100" style="position:absolute;"></a>
</div>
</div>
<!-- Character Container End -->
</div>
</div>
</div>
</div>
<div class="tab-pane h-100 w-100" id="TRAINER">
<div class="row no-gutters flex-wrap align-items-start h-100 w-100" style="max-height: 535px; overflow-x: hidden; overflow-y: auto; scrollbar-color: #ede7e6 rgba(0,0,0,0.6); scrollbar-width: thin;">
<div class="h-100 col-md-8 d-flex flex-wrap align-content-end" style="background:url('https://i.postimg.cc/P55NTJMm/trainer-selfie.jpg'); background-repeat:no-repeat; background-position:center; background-size:cover;">
<!-- Trainer Name & ID Label -->
<div class="col mb-4 py-1 pr-3 text-right rounded-right text-white" style="max-width:385px; font-size: 1.7em; background: rgba(104,44,123,0.8);">
<!-- Trainer Name -->
<span class="font-weight-bold" style="letter-spacing:1px;">Trainer Name</span>
<br>
<span class="mr-2" style="">ID No.</span>
<!-- Trainer ID No. -->
<span>123456</span>
</div>
<!-- Trainer Name & ID Label End -->
</div>
<!-- Adventure Records -->
<div class="col text-left p-0 text-white" style="font-size: 1.4em;">
<div class="h-100 w-100 pb-sm-1 pb-2" style="background:#222849;">
<div class="px-md-3 p-2 py-md-2 mb-2 font-weight-bold" style="background: #151633; font-size:1.7rem;">
Adventure Records
</div>
<div class="font-weight-bold px-md-3 px-2 mb-1">
Badges Collected
</div>
<div class="text-right my-1 px-md-4 px-3 font-weight-bold">
<i class="far fa-seal fa-lg fa-fw mr-3"></i> 99
</div>
<div class="my-3" style="background: linear-gradient(90deg, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0) 90%); height:1px;"></div>
<div class="font-weight-bold px-md-3 px-2 mb-1">
Paldea Pokédex
</div>
<div class="d-flex flex-wrap justify-content-end my-1">
<!-- Caught -->
<div class="col text-right my-1 px-md-4 px-3 font-weight-bold">
<i class="fas fa-box fa-lg fa-fw mr-3"></i>
99
</div>
<!-- Battled -->
<div class="col-auto text-right my-1 px-md-4 px-3 font-weight-bold">
<i class="far fa-swords fa-lg fa-fw mr-3"></i>
99
</div>
</div>
<div class="my-3" style="background: linear-gradient(90deg, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0) 90%); height:1px;"></div>
<div class="font-weight-bold px-md-3 px-2 mb-1">
Shiny Pokémon Battled
</div>
<div class="text-right my-1 px-md-4 px-3 font-weight-bold">
<i class="far fa-sparkles fa-lg fa-fw mr-3"></i>
99
</div>
<div class="my-3" style="background: linear-gradient(90deg, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0) 90%); height:1px;"></div>
<div class="font-weight-bold px-md-3 px-2 mb-1">
Recipes Collected
</div>
<div class="text-right my-1 px-md-4 px-3 font-weight-bold">
<i class="far fa-burger-lettuce fa-lg fa-fw mr-3"></i>
99
</div>
<div class="my-3" style="background: linear-gradient(90deg, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0) 90%); height:1px;"></div>
<div class="font-weight-bold px-md-3 px-2 mb-1">
Total Playtime
</div>
<div class="text-right my-1 px-md-4 px-3 font-weight-bold">
<i class="far fa-clock-three fa-lg fa-fw mr-3"></i>
000:00
</div>
</div>
</div>
<!-- Adventure Records End -->
</div>
</div>
</div>
</div>
<!--- ii. DEX SECTION END --->
<!--- iii. BOTTOM BAR --->
<div class="text-dark px-3 py-1 d-flex no-wrap" style="background:white; border-radius:0 0 25px 25px; font-size:1.1rem; border-top:4px #fab84d solid;">
<div class="col-12 p-0 d-flex no-wrap justify-content-between">
<!-- CREDITS; please do not remove! -->
<div class="col p-0">
<a href="https://toyhou.se/26747490." class="text-secondary" style="text-decoration:none;" data-toggle="tooltip" title="code by dragon-heist" data-placement="right"><i class="fa-sharp fa-code"></i></a>
</div> <!-- credits end -->
<div class="col-auto row no-gutters p-0">
<div style="font-family: Arial Narrow, sans-serif;"><i class="fa-solid fa-circle-minus fa-fw mr-sm-1"></i> Evaluate</div>
<div class="ml-sm-3 ml-2" style="font-family: Arial Narrow, sans-serif;"><i class="fa-solid fa-circle-x fa-fw mr-sm-1"></i> Back</div>
</div>
</div>
</div>
<!--- iii. BOTTOM BAR END --->
</div>
<!--- I. MAIN POKEDEX CONTAINER END --->
</div>