[F2U] Pokemon Trainer Card

elim__08

Info

Created: 10 months, 17 days ago
Creator: elim__08
Favorites: 729

Profile

Pokemon Trainer Card

Mobile Friendly

Custom Colors

Free-User (HTML only)

WYSIWYG Maybe

Beginner Friendly

A super simple low-commitment template for your Pokemon trainer OCs. This trainer card template is heavily inspired/referenced off of laserbobcat's template posted on Tumblr. This code is free to use and can be modified and frankensteined as needed. The card is custom colored but it is very easy to change the colors to your preferred colors. It should be WYSIWYG friendly but I am too lazy to actually test it.

The sprites used here are from the Bulbapedia Archives. Feel free to use any sprite kind you desire, but this code was designed with Black/White sprites, and fit best with those kind. To avoid broken images, it is recommended you download your desired sprite and upload to your own private image host (see Usage Instructions for some recommended sites).

CHANGELOG

Feb 26 2024 - Fixed broken asset images after Discord took down image hosting. If you're having trouble with the asset images, you can download them from the gallery of this code to host on your own preferred image hosting site.

USAGE INSTRUCTIONS

Turn OFF Profile Text under WYSIWYG and ENABLE Code Editor in your display settings.
I recommend using Circlejourney or some other code previewer while customizing the code.
Any icons used within this code are from Font Awesome, and you can replace them with different ones if you know how to.
To avoid broken images, host your images on an external image hosting site, such as FileGarden or Imgbox. Here is a list of places to host images.
Feel free to DM me here or on discord if you run into any issues you don't know how to fix.

Show Code


<div class="card col-12 col-lg-6 p-1 mx-auto" style=" border-radius:20px;  box-shadow:2px 2px 5px rgba(0,0,0,0.5); overflow:hidden; 



    background: linear-gradient(#a6e9bb, #80c0a8);
    
    border:solid 6px #258850;
    
    

">
    
    <!-- background img-->
    <div class="container h-100" style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/78280736_W0CR2cxQXv2AxPR.png); background-size:cover; background-position:center; position:absolute; mix-blend-mode:luminosity; left:0px; top:0; opacity:0.5"></div>
    
    
    
    <div class="container pl-3 pr-3 pt-3" style="min-height:485px; border-radius:15px; border:solid rgba(255,255,255,0.4) ; font-family:">
        
        <!-- header NO CHANGES NEEDED-->
        <div class="container col-12 p-1 px-4 align-items-center" style="background: rgba(255,255,255,0.5); border-radius:10px; mix-blend-mode:luminosity">
            
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/78280753_xwTJjoAxaI06lNr.png" style="height:35px; left:5px; position:absolute; z-index:5">
            
            <div class="col text-center" style="border-top:solid 2px #a5a3a3; border-bottom:solid 2px #a5a3a3; text-shadow: 0px 0px 1px #000000; text-shadow: 0px 0px 2px #000000,  0px 0px 1px #000000, 0px 0px 1px #000000, 3px 0px 1px #676767;  color:white; font-weight:700; font-size:20px"><span class="hidden-md-down">POKEMON</span> TRAINER CARD</div>
            
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/78280753_xwTJjoAxaI06lNr.png" style="height:35px; right:5px; position:absolute; z-index:5">
            
        </div>
        <!-- header end-->
        
        <div class="row no-gutters mt-2">
            
            <!--=============================================================
            
                                 POKEMON SPRITE COLUMN
                                 
            You can get sprites from BULBAGARDEN ARCHIVES: https://archives.bulbagarden.net/wiki/Category:Game_sprites. Use the search function to find your Pokemon, then copy the image url.
            
            They are APNG files, and some of the larger ones break on TH. To get around this, you can use https://ezgif.com/apng-to-gif to convert them to .gif files, then you can upload the gif file to your host website of choice. I recommend a private Discord server/channel.  
            
            If your character has less than 6 Pokemon on their main team, then you can delete unneeded <div>'s or add 'd-none' to the class tag.
            ==============================================================-->
            <div class="col-lg-2 col-12 p-2 row no-gutters justify-content-around order-3 order-lg-1" style="background: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,.6)); border-radius:10px; column-gap:5px">
                
                <div class="card align-items-center justify-content-center col-lg-12 col-3 mb-3 mb-lg-1" style="background:white; border-radius:10px; height:60px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2)">
                    
                    
                    <!--===========
                     POKE SPRITE 1
                    =============-->
                    <img src="https://archives.bulbagarden.net/media/upload/9/92/Spr_5b_328.png" 
                    
                    
                style="height:60px"></div>
                
                <div class="card align-items-center justify-content-center col-lg-12 col-3 mb-1" style="background:white; border-radius:10px; height:60px; width:80px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2)">
                    
                    
                    <!--===========
                     POKE SPRITE 2
                    =============-->
                    <img src="https://archives.bulbagarden.net/media/upload/2/24/Spr_5b_129_m.png" 
                    
                    
                style="height:60px"></div>
                
                <div class="card align-items-center justify-content-center col-lg-12 col-3 mb-1" style="background:white; border-radius:10px; height:60px; width:80px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2)">
                    
                    
                    <!--===========
                     POKE SPRITE 3
                    =============-->
                    <img src="https://archives.bulbagarden.net/media/upload/9/9c/Spr_5b_133.png" 
                    
                    
                style="height:60px"></div><div class="card align-items-center justify-content-center col-lg-12 col-3 mb-1" style="background:white; border-radius:10px; height:60px; width:80px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2)">
                    
                    
                    <!--===========
                     POKE SPRITE 4
                    =============-->
                    <img src="https://cdn.discordapp.com/attachments/268038071243636736/1119226050099032074/test.gif" 
                    
                    
                style="height:60px"></div><div class="card align-items-center justify-content-center col-lg-12 col-3 mb-1" style="background:white; border-radius:10px; height:60px; width:80px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2)">
                    
                    
                    <!--===========
                     POKE SPRITE 5
                    =============-->
                    <img src="https://archives.bulbagarden.net/media/upload/a/af/Spr_5b_624.png" 
                    
                    
                style="height:60px"></div>
                <div class="card align-items-center justify-content-center col-lg-12 col-3" style="background:white; border-radius:10px; height:60px; width:80px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2)">
                    
                    
                    <!--===========
                     POKE SPRITE 6
                    =============-->
                    <img src="https://archives.bulbagarden.net/media/upload/c/c0/Spr_5b_571.png" 
                    
                    
                style="height:60px"></div>
                
            </div>
            <!--=============================================================
                               POKEMON SPRITE COLUMN END
            ==============================================================-->
            
            <!--=============================================================
            
                               TRAINER INFO COLUMN 
      
            ==============================================================-->

            <div class="col-12 col-lg-5 px-lg-2 px-0 mb-3 mb-lg-0 order-2 py-0">
                <div class="col-12 p-2 mb-2" style="background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.1) 100%); border-radius:10px; font-weight:500; mix-blend-mode:luminosity; color:#444444" > <div class="text-truncate" style="border-bottom: dotted 1px;"><b>NAME:</b>
                    
                    <!--=============
                       CHAR NAME
                    ==============-->
                    Character Name
                    
                    
                </div></div>
                
                
                
                <div class="col-12 p-2 mb-2" style="background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.1) 100%); border-radius:10px; font-weight:500; mix-blend-mode:luminosity; color:#444444" > <div class="text-truncate" style="border-bottom: dotted 1px;"><b>REGION:</b>
                    
                    <!--=============
                         REGION
                    ==============-->
                    Region
                    
                    
                </div></div>
                
                <div class="col-12 p-2 mb-2" style="background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.1) 100%); border-radius:10px; font-weight:500; mix-blend-mode:luminosity; color:#444444" > <div class="text-truncate" style="border-bottom: dotted 1px;"><b>HOMETOWN:</b>
                    
                    <!--=============
                        HOMETOWN
                    ==============-->
                    City Name
                    
                    
                </div></div>
                
                <div class="col-12 p-2 mb-2" style="background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.1) 100%); border-radius:10px; font-weight:500; mix-blend-mode:luminosity; color:#444444" > <div class="text-truncate" style="border-bottom: dotted 1px;">
                    
                    <!--=============
                      ADD. CATEGORY
                    ==============-->
                    <b>FAV TYPE:</b>
                    Bug
                    
                    
                </div></div>
                
                <div class="col-12 p-2" style="background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.1) 100%); border-radius:10px; mix-blend-mode:luminosity; color:#444444;  font-weight:700">ABOUT:<div class="text" style="border-bottom: dotted 1px; height:212px; overflow:auto; line-height:1.1; font-weight:400; font-size:90%">
                    
                    <!--=============
                         ABOUT
                    ==============-->
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                    
                    
                </div></div>
                
            </div>
            <!--=============================================================
                               TRAINER INFO COLUMN END
            ==============================================================-->
            
            
            <!--=============================================================
            
                               TRAINER PICTURE COLUMN 
            
            Requires a transparent png image of your trainer. Best dimensions are ~200x400px. 
            Recommend to host images on Imgur or Discord. 
      
            ==============================================================-->
            <div class="col-lg col-12 order-lg-3 order-1 mb-3 mb-lg-0 p-2 align-items-center justify-content-center" style="background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6) 100%); border-radius:10px; min-height:400px">
                
                
                <!--===================================
                            IMAGE URL HERE
                ====================================-->
                <img src="https://static.wikia.nocookie.net/pokemon/images/7/75/Hilbert.png" 
                
                
            style=" max-height:420px"></div>
            <!--=============================================================
                               TRAINER PICUTRE COLUMN END
            ==============================================================-->
            
        </div>
        
        <!-- credit, please don't remove!-->
        <div class="col-12 p-1 align-items-center justify-content-center justify-content-lg-end" style="text-transform:uppercase; line-height:1; color:#f3f3f3; font-weight:500; mix-blend-mode:luminosity">
            
            Template Inspired by <a href="https://laserbobcat.tumblr.com/post/611871259964342272/i-made-a-trainer-card-template-slap-a-color-layer" style="color:white; margin-left:3px">Laserbobcat</a>
            
            <a href="https://toyhou.se/22032986.f2u-pokemon-trainer-card" data-toggle="tooltip" data-placement="bottom" title="Coded by elim__08" ><i class="fa-solid fa-circle-half-stroke ml-2" style="transform:rotate(90deg)"></i></a>
            
        </div>
        
    </div>

</div>
<!-- TRAINER CARD END-->

POKEMON TRAINER CARD

NAME: Character Name

REGION: Region

HOMETOWN: City Name

FAV TYPE: Bug

ABOUT:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.

Template Inspired by Laserbobcat

Recent Images

Details

Viewing full image.

Credits

26 Feb 2024, 1:54:01 am

elim__08

Characters

[F2U] Pokemon Trainer Card
Details

Viewing full image.

Credits

26 Feb 2024, 1:53:16 am

elim__08

Characters

[F2U] Pokemon Trainer Card