Stor8

<!--------------------------------------------------
PREVIEW
https://toyhou.se/26016430.one-piece-bounty-ftu

PASTEBIN
https://pastebin.com/amAxmr5u


PAPER BG
https://jooinn.com/img/get

BERRY SIGN
https://f2.toyhou.se/file/f2-toyhou-se/images/78309472_c6KEJ83zsc41Xld.png
    
DCORE
https://f2.toyhou.se/file/f2-toyhou-se/images/78309522_dhy2ytddupCb66q.png


Do "Ctrl" + "F" to find, replace, delete or edit
text faster


CUSTOM COLORS
    - text color:   #000
    - bg color      #dccbb7
    
JUMP TO FILL OUT INFO
    - general: LOREM
    - character img: LOREM_IMG_LINK


IMPORTANT NOTES

    - decore and berry sign cannot change color
unless you download image and change it yourself

    - because there is a paper filter overlay over
the code you can't highlight or click on text, This
means adding a scroll or clickable text will not
work

If you want to add these features you can either:
A) delete paper overlay
B) change paper overlay z-index: to 0
C) add z-index to what you want to be clickable
number must be greater than overlay (1) so it
should be 2 or higher

Text is still readable for screen readers

    - If you need help you can comment, message me
or get help from the help thread. Character picture
is clickable

-------------------------------------------------->
<div class="mx-auto row no-gutters" style="position:relative;">
    
    
    <!-- WANTER POSTER --------------------------->
    {{%Add Another Poster%<div class="my-2 mx-auto" style="position:relative; max-width:380px; color:#000; font-family:'Times New Roman'; background-color:#dccbb7;">
        
        <!-- paper filter overlay -->
        <div style="position:absolute; z-index:1; opacity:.30; height:100%; width:100%; background-image:url('https://jooinn.com/images/paper-texture-78.jpg');"></div>
        
        <!-- WANTED -->
        <div class="mx-2 text-center text-uppercase" style="z-index:#; position:relative; font-size:78px; font-weight:bold;">wanted</div>
        
        <!-- CHARACTER PICTURE -->
        <div class="mt-n3 mx-auto col-10" style="z-index:2; position:relative; height:250px; border:3px solid #000; background-image:url('{{u%Char Image%}}'); background-position:center; background-size:cover; background-repeat:no-repeat;">
            
            <!-- link -->
            <a href="{{u%Char Link%}}" class="d-block" style="position:absolute; top:-2px; left:-3px; opacity:.30; background-image:url('https://jooinn.com/images/paper-texture-78.jpg'); background-position:center; background-size:cover; background-repeat no-repeat; height:102%; width:102%;"></a>
        </div>
        
        
        <!-- BOTTOM INFO ------------------------->
        <div class="pb-3 mx-3 row no-gutters justify-content-center align-items-center">
            
            <!-- LEFT DECOR ----------------------
            - You might need to mess with height
            - goes top to bottom
            -------------------------------------->
            <div class="col-auto flex-column align-items-center">
                <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/78309522_dhy2ytddupCb66q.png" alt="" class="mb-1" style="height:80px; width:14px;">
                
                <!-- bottom - touch -->
                <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/78309522_dhy2ytddupCb66q.png" alt="" style="height:114px; width:14px; transform:rotateY(180deg);">
            </div>
            <!-- END LEFT DECOR ------------------>
            
            
            
            <!-- INFO ---------------------------->
            <div class="col row no-gutters">
                
                <!-- NAME + BOUNTY --------------->
                <div class="col mx-2 text-center text-uppercase" style="z-index:#; font-weight:bold; overflow:hidden;">
                    
                    <div class="justify-content-between" style="font-size:30px;">
                        <span>dead</span>
                        <span>or</span>
                        <span>alive</span>
                    </div>
                    
                    <!-- NAME -----------------------
                    - don't change font size
                    -
                    - transform:scale(#, 6.0)
                    - only touch first number, it
                    - changes letter boldness. use
                    - it to make the name fit
                    - 
                    - letter-spacing:#px;
                    - space between letters like on
                    - Nami's wanted posters
                    - 
                    - regular dot: •
                    - smaller dot: ·
                    --------------------------------->
                    <div class="my-4 pl-0 pr-0" style="transform:scale({{n%Char Spacing%}}, 6.0); letter-spacing:0px; font-size:18px;">{{%Char Name%}}</div>
                    
                    <!-- BOUNTY ---------------------
                    - make letter spacing smaller if
                    - bounty is bigger
                    --------------------------------->
                    <div class="d-flex align-items-center justify-content-center" style="font-family:'Symbol'; font-size:30px; letter-spacing:3px;">
                        <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/78309472_c6KEJ83zsc41Xld.png" alt="Berry Sign" class="mr-2" style="height:30px; width:23px;">
                        <span class="mr-1" style="letter-spacing:{{%Bounty Spacing%}}px;">{{%Bounty%}}</span>
                        <i class="fa-light fa-hyphen"></i>
                    </div>
                    
                </div>
                <!-- END NAME + BOUNTY ----------->
                
                
                <!-- RIGHT DECOR ---------------->
                <div class="col-auto flex-column align-items-center">
                    <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/78309522_dhy2ytddupCb66q.png" alt="" class="mt-2 mb-1" style="height:70px; width:14px; transform:rotateY(180deg)">
                    
                    <!-- bottom - touch -->
                    <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/78309522_dhy2ytddupCb66q.png" alt="" style="height:80px; width:14px;;">
                </div>
                <!-- END RIGHT DECOR ------------->
                
                
                <!-- BOTTOM TEXT ----------------->
                <div class="col-12 row no-gutters" style="z-index:#; font-family:'Georgia';">
                    <!-- QUOTE OR INFO - doesn't scroll keep short -->
                    <div class="col ml-2 mr-n3" style="line-height:13px;">{{l%Short Info%}}</div>
                    
                    <!-- ROLE -->
                    <div class="mr-n4 col-auto display-3 text-uppercase" style="transform:scale(.7, 1.0); font-weight:bold;">{{%Role%}}</div>
                </div>
                <!-- END BOTTOM TEXT ------------->
                
            </div>
            <!-- END INFO ------------------------>
            
        </div>
        <!-- END BOTTOM INFO --------------------->
        
    </div>%end%}}
    <!-- END WANTER POSTER ----------------------->
    
    
    <!-- add more here - 3 per row on computer -->
    
    
    <!-- CREDITS - feel free to move -->
    <a href="https://toyhou.se/26016430.one-piece-bounty-ftu" class="col-12 text-right text-secondary"><i class="fa-solid fa-trash fa-xs" data-toggle="tooltip" title="Code by Ansuperope"></i></a>
    
</div>