[ F2U ] 🦋 BANNER (Get The Code (w/o backboard))

Plexity

Info


Created
1 month, 24 days ago
Creator
Plexity
Favorites
1

Profile


  
    <!-- ==========================================
    
    
    
        [ BANNER ] F2U CODE BY PLEXITY
        
        
        Remove text shadow: ctrl+f and type in " text-shadow: 2px 1px 2px #000; " and delete all
        I understand text shadow looks AWFUL in light themes. Light theme people, I'm coming for you
        
        
        
        Accent color: #626273
        
        Backgrounds/Icons: BG_URL_HERE
    
    
    
    ========================================== -->


<!-- == MAIN CONTAINER == -->
<div class="mx-auto card p-3 rounded-0 bg-faded" style="max-width:700px;box-shadow: 1px 1px 3px #000;">
        
        <div class="row no-gutters">
            
            <!-- ==== INFORMATION BOX START ==== -->
            
            <div class="col-md-7">
                
                <!-- ==========================================
                
                HEADER
                
                      START 
                
                ========================================== -->
                
                <div class="flex-row align-items-center" style="justify-content:space-between">
                    <div style="border: 5px solid #626273; height:40px"></div>
                    
                    <!-- == ICON == -->
                    
                    <div class="card border-0 rounded-0" style="overflow: hidden; height: 40px; width: 100px; background-size:cover; background-position:center; 
                    
                            background-image:url(BG_URL_HERE);"
                    
                    >
                    
                    <!-- DISC ICON -->
                        
                    <i style="position:absolute; font-size: 4em; left:0; right:0; text-align: center; top: 12px;" class="mx-auto fa-thin fa-compact-disc fa-spin"></i>
                    
                    <!-- == MUSICPLAYER == -->
                    <!-- replace URL_HERE with content after " v= " in the youtube link -->
                    
                    <iframe class="w-100 h-100" style="position:absolute; z-index:1; opacity:0;" frameborder="0" 
                    
                            src="https://www.youtube.com/embed/URL_HERE">
                        
                        
                    </iframe>
                        
                        
                    </div>
                    
                    <!-- Divider -->
                    <div class="col pr-0"><hr></div>
                    
                    <!-- == NAME == -->
                    
                    <div class="text-right flex-column" style="font-weight: bold; letter-spacing: 2px; font-size: 20px; font-family:'Times New Roman'; text-shadow: 2px 1px 2px #000;">
                        
                            FIRST LAST
                            
                            <span class="text-muted" style="font-size:10px">pro/nouns</span>
                    
                    </div>
                    
                </div>
                
                <!-- ==========================================
                
                HEADER
                
                      END
                      
                      
                CHARACTER TRAITS
                
                      START
                
                ========================================== -->
                
                <div class="row no-gutters text-center mt-2 mb-2" style="font-family: 'Times New Roman'; font-size: 12px; letter-spacing: 2px;">
                    
                    <div class="col">
                        <div class="card rounded-0 mr-1">TRAIT</div>
                    </div>
                    
                    <div class="col">
                        <div class="card rounded-0 mr-1">TRAIT</div>
                    </div>
                    
                    <div class="col">
                        <div class="card rounded-0">TRAIT</div>
                    </div>
                    
                </div>
                
                <!-- ==========================================
                
                CHARACTER TRAITS
                
                      END
                      
                PARAGRAPH
                
                      START
                
                ========================================== -->
                
                <div class="card border-0 rounded-0 bg-faded" style="overflow:hidden; height:90px;">
                    <div class="mr-n4 pr-2" style="overflow:auto;">
                        
                        <p>
                            <span class="card rounded-0 float-left text-center p-1 mr-1" style="width: 34px; height: 43px; border-width: 2px; font-family:'Times New Roman'; font-weight: bold; font-size: 20px;">
                                
                                L
                                
                            </span>
                                orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type... <strong>this part scrolls</strong>
                        </p>
                        
                            <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                        
                    </div>
                    
                </div>
                
                <!-- ==========================================
                
                PARAGRAPH
                
                      END
                      
                QUOTE
                
                      START
                
                ========================================== -->
                
                <div class="card p-2 rounded-0 flex-row mt-2 mb-2 text-center" style="justify-content: space-between; border-width: 2px 0px">
                    <i class="fa-duotone fa-quote-left p-1"></i>
                    
                    <i>Lorem ipsum dolor sit amet, consectetur adipiscing</i>
                    
                    <i class="fa-duotone fa-quote-right p-1"></i>
                </div>
                
                <!-- ==========================================
                
                QUOTE
                
                      END
                      
                RELATIONSHIPS
                
                      START
                
                ========================================== -->
                
                <div class="card rounded-0 bg-faded flex-row align-items-center mb-2" style="border-width:0px 4px 0px 0px;">
                    
                    <div style="border: 5px solid #626273; height:40px"></div>
                    
                    <div class="ml-2" style="font-family:'Times new Roman'; font-weight:bold; letter-spacing:1px;text-shadow: 2px 1px 2px #000;">RELATIONSHIPS</div>
                    
                    <div class="col"><hr></div>
                    
                </div>
                
                <div class="row no-gutters text-center" style="font-family:'Times New Roman';font-size:12px;letter-spacing:2px;">
                    
                    <!-- == CHARARACTER #1 == -->
                    
                    <div class="col card bg-faded rounded-0 border-0 p-1" style="height:90px;">
                        <div class="card rounded-0 h-100" style="background-position: center; background-size: cover; 
                            
                                    background-image:url(BG_URL_HERE);">
                                
                            
                            <div class="card bg-faded rounded-0 mx-auto" style="width:22px; height:22px; transform:rotate(45deg); margin-top:-12px">
                                
                                    <!-- Heart Icon -->
                                   
                                    <i class="my-auto ml-1 fa-light fa-heart fa-fade" style="transform:rotate(-45deg);font-size:13px;"></i>
                                
                            </div>
                        </div>
                    </div>
                    
                    <!-- == CHARARACTER #2 == -->
                    
                    <div class="col card bg-faded rounded-0 border-0 p-1" style="height:90px;">
                        <div class="card rounded-0 h-100" style="background-position: center; background-size: cover; 
                            
                                    background-image:url(BG_URL_HERE);">
                                
                            
                            <div class="card bg-faded rounded-0 mx-auto" style="width:22px; height:22px; transform:rotate(45deg); margin-top:-12px">
                                
                                    <!-- Heart Icon -->
                                   
                                    <i class="my-auto ml-1 fa-light fa-heart fa-fade" style="transform:rotate(-45deg);font-size:13px;"></i>
                                
                            </div>
                        </div>
                    </div>
                    
                    <!-- == CHARARACTER #3 == -->
                    
                    <div class="col card bg-faded rounded-0 border-0 p-1" style="height:90px;">
                        <div class="card rounded-0 h-100" style="background-position: center; background-size: cover; 
                            
                                    background-image:url(BG_URL_HERE);">
                                
                            
                            <div class="card bg-faded rounded-0 mx-auto" style="width:22px; height:22px; transform:rotate(45deg); margin-top:-12px">
                                
                                    <!-- Heart Icon -->
                                   
                                    <i class="my-auto ml-1 fa-light fa-heart fa-fade" style="transform:rotate(-45deg);font-size:13px;"></i>
                                
                            </div>
                        </div>
                    </div>
                    
                </div>
                
            </div>
            
               <!-- ==========================================
                
                INFO BOX
                
                      END
                      
                FOCAL IMAGES BOX
                
                      START
                
                ========================================== -->
            
            <div class="col-md-5 mt-3 mt-md-0">
                
                <!-- == PAGEDOLL == -->
            
                <img style="filter: drop-shadow(5px 5px 1px #000000); position: absolute; z-index: 1; height:280px; width: auto; top:45px; left:20px" 
                
                        src="PAGEDOLL_IMAGE_ADDRESS_HERE">


                <div class="flex-row" style="justify-content:end">
                    
                    <!-- == SHORT BANNER == -->
                    
                    <div class="mr-4" style="height: 190px; width: 100px; background-position: center; background-size: cover; border-radius: 0px 0px 0px 30px; border:1px solid #000000;
                    
                        background-image:url(BG_URL_HERE);">
                        
                    </div>
                    
                    
                    <!-- == LONG BANNER == -->
                    
                    <div style="height:320px; width:100px; background-position:center; background-size: cover; border-radius: 0px 30px 1px 30px; border:1px solid #000000; 
                    
                        background-image:url(BG_URL_HERE);">
                        
                        <!-- == CORNER ICON + CREDITS | Please don't remove! Can be changed however == -->
                        
                        <a class="text-secondary" href="https://toyhou.se/Plexity"><i class="fa-regular fa-moon-stars p-2 tooltipster" title="Code by Plexity" style="position:absolute; bottom:0; right:0; font-size:1.2em;"></i></a>
                        
                    </div>
                    
                    
                </div>
                
            </div>
            
                <!-- ==========================================
                      
                FOCAL IMAGES BOX
                
                      END
                
                ========================================== -->
            
        </div>
        

</div>