Rogue (F2U) (Code)

<!-- Rogue Profile by Exo-Comet -->
<!-- Background Credit: https://unsplash.com/photos/D6Bk1A3-gMA -->

<!-- Note: Any time you see LINKHERE or URLHERE, paste the link there! -->

<!-- Main profile section -->
<div class="p-4 px-md-5 px-3 mx-auto" style="max-width:650px;border-radius:1em;background:url('https://images.unsplash.com/photo-1453413453658-27fec8f43f29?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80') no-repeat center;background-size:cover">
    
    <!-- Basic info section -->
    <div class="p-3" style="background:#222;color:white;box-shadow: 0px 0px 15px 0px rgba(255,255,255,0.25);">
      
        <div class="w-75 mx-auto" style="position:relative;z-index:999;background:#111">
            <!-- Character image -->
            <div class="w-100" style="background:url('URLHERE') no-repeat center 25%;background-size:cover;padding-bottom:50%;margin:0 auto;position:relative;z-index:1000">
            </div>
            <div class="w-100 h-100 d-flex align-items-center justify-content-center" style="position:absolute;font-size:13em;z-index:1;left:0;top:0">
                <!-- Dagger in the background -->
                <i class="fa-solid fa-dagger" style="color:rgba(175, 76, 237,0.5);transform:rotate(-45deg);transform-origin:center"></i>
            </div>
        </div>
        
        <h1 class="text-center display-3 my-1">Character Name</h1>
        
        <!-- About -->
        <p class="my-2 px-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend elementum magna, sed lobortis sem tempor in. Cras faucibus sed nisi nec euismod. Donec eu dignissim lacus. Donec ornare mi eu justo tempus tempor sed gravida ante. Nulla facilisi.</p>
        
        <!-- Info boxes -->
        <div class="p-2" style="border:2px solid rgba(255,255,255,0.125);background:#111">
            <div class="row m-n2">
                <div class="col-md px-2 pt-2 pb-0 pb-md-2">
                    <div class="text-center">
                        <div class="d-flex flex-wrap">
                            <span class="flex-fill text-left m-1" style="font-variant:small-caps;">Full Name</span>
                            <span class="flex-fill text-right m-1">content</span>
                        </div>
                        <div class="d-flex flex-wrap">
                            <span class="flex-fill text-left m-1" style="font-variant:small-caps;">Gender</span>
                            <span class="flex-fill text-right m-1">content</span>
                        </div>
                        <div class="d-flex flex-wrap">
                            <span class="flex-fill text-left m-1" style="font-variant:small-caps;">Sexuality</span>
                            <span class="flex-fill text-right m-1">content</span>
                        </div>
                        <div class="d-flex flex-wrap">
                            <span class="flex-fill text-left m-1" style="font-variant:small-caps;">Age</span>
                            <span class="flex-fill text-right m-1">content</span>
                        </div>
                        <div class="d-flex flex-wrap">
                            <span class="flex-fill text-left m-1" style="font-variant:small-caps;">Race</span>
                            <span class="flex-fill text-right m-1">content</span>
                        </div>
                    </div>
                </div>
                <div class="col px-2 pb-2 pt-0 pt-md-2">
                    <div class="text-center">
                        <div class="d-flex flex-wrap">
                            <span class="flex-fill text-left m-1" style="font-variant:small-caps;">Class</span>
                            <span class="flex-fill text-right m-1">content</span>
                        </div>
                        <div class="d-flex flex-wrap">
                            <span class="flex-fill text-left m-1" style="font-variant:small-caps;">Subclass</span>
                            <span class="flex-fill text-right m-1">content</span>
                        </div>
                        <div class="d-flex flex-wrap">
                            <span class="flex-fill text-left m-1" style="font-variant:small-caps;">Alignment</span>
                            <span class="flex-fill text-right m-1">content</span>
                        </div>
                        <div class="d-flex flex-wrap">
                            <span class="flex-fill text-left m-1" style="font-variant:small-caps;">Occupation</span>
                            <span class="flex-fill text-right m-1">content</span>
                        </div>
                        <div class="d-flex flex-wrap">
                            <span class="flex-fill text-left m-1" style="font-variant:small-caps;">Affliation</span>
                            <span class="flex-fill text-right m-1">content</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Start of collapse section -->
    <div class="collapse" id="collapseMain">
        
        
        <p class="mt-3 text-center"><i class="fa-solid fa-dagger fa-3x" style="color:rgb(175, 76, 237);"></i></p>
        
        
        <!-- Music player -->
        <div class="p-3 mt-3" style="background:#222;color:white;box-shadow: 0px 0px 15px 0px rgba(255,255,255,0.25);">
            
            <a class="text-center" href="" style="position:relative;color:white;text-decoration:none">
              <iframe class="w-100 h-100" src="https://www.youtube.com/embed/LINKHERE?modestbranding=1" title="YouTube video player" frameborder="0" style="opacity:.001;position:absolute;left:0;top:0;z-index:999;"></iframe>
              
              <h5 class="m-0" style="position:relative"><i class="fa-solid fa-compact-disc fa-spin mr-1"></i> Song - Artist</h5>
            </a>
            
        </div>
        
        <!-- Biography section -->
        <div class="p-3 mt-3" style="background:#222;color:white;box-shadow: 0px 0px 15px 0px rgba(255,255,255,0.25);">
          
            <h2 class="display-4 mb-0">Biography</h2>
            <hr class="mt-1" style="border-color:rgba(255,255,255,0.25)">
            
            <!-- Backstory -->
            <h3>Backstory</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend elementum magna, sed lobortis sem tempor in. Cras faucibus sed nisi nec euismod. Donec eu dignissim lacus. Donec ornare mi eu justo tempus tempor sed gravida ante. Nulla facilisi.</p>
            
            <!-- Current day -->
            <h3>Current Day</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend elementum magna, sed lobortis sem tempor in. Cras faucibus sed nisi nec euismod. Donec eu dignissim lacus. Donec ornare mi eu justo tempus tempor sed gravida ante. Nulla facilisi.</p>
        </div>
        
        
        <!-- Design section -->
        <div class="p-3 mt-3" style="background:#222;color:white;box-shadow: 0px 0px 15px 0px rgba(255,255,255,0.25);">
            
            <h2 class="display-4 mb-0">Design</h2>
            <hr class="mt-1" style="border-color:rgba(255,255,255,0.25)">
            
            <div class="row m-0 mb-2">
              
                <div class="col-md-auto p-0">
                    <!-- First section of colour palette -->
                    <div class="d-flex flex-md-column h-100">
                        <div class="p-3 flex-fill" style="background:#ffffff"></div>
                        <div class="p-3 flex-fill" style="background:#f6e6fd"></div>
                        <div class="p-3 flex-fill" style="background:#eccdfb"></div>
                        <div class="p-3 flex-fill" style="background:#e2b5f9"></div>
                    </div>
                </div>
                
                <div class="col-md p-0">
                    <!-- Reference image -->
                    <div style="padding-bottom:50%;background:url('URLHERE') no-repeat center;background-size:cover;position:relative">
                        <div class="w-100 text-center py-2 px-3" style="position:absolute;bottom:0;left:0;background:rgba(0,0,0,0.75)">
                            <!-- Link -->
                            <a href="" style="color:white;font-size:1.25em">Full Reference Sheet</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-auto p-0">
                    <!-- Last section of colour palette -->
                    <div class="d-flex flex-md-column h-100">
                        <div class="p-3 flex-fill" style="background:#d69cf6"></div>
                        <div class="p-3 flex-fill" style="background:#ca83f3"></div>
                        <div class="p-3 flex-fill" style="background:#bd69f0"></div>
                        <div class="p-3 flex-fill" style="background:#af4ced"></div>
                    </div>
                </div>
            </div>
            
            <!-- Divider -->
            <div class="d-flex align-items-center">
                <hr class="flex-fill" style="border-color:rgba(255,255,255,0.25)">
                <i class="fa-solid fa-dagger mx-2" style="color:rgb(175, 76, 237);"></i>
                <hr class="flex-fill" style="border-color:rgba(255,255,255,0.25)">
            </div>
            
            <!-- Info about design, etc -->
            <div class="d-flex flex-wrap m-n1">
                <div class="d-flex flex-wrap m-1 flex-fill" style="background:#111">
                    <span class="flex-fill text-left m-1" style="font-variant:small-caps;">Owner</span>
                    <span class="flex-fill text-right m-1">content</span>
                </div>
                <div class="d-flex flex-wrap m-1 flex-fill" style="background:#111">
                    <span class="flex-fill text-left m-1" style="font-variant:small-caps;">Designer</span>
                    <span class="flex-fill text-right m-1">content</span>
                </div>
                <div class="d-flex flex-wrap m-1 flex-fill" style="background:#111">
                    <span class="flex-fill text-left m-1" style="font-variant:small-caps;">Worth</span>
                    <span class="flex-fill text-right m-1">content</span>
                </div>
            </div>
            
        </div>
        
        <!-- Combat section -->
        <div class="p-3 mt-3" style="background:#222;color:white;box-shadow: 0px 0px 15px 0px rgba(255,255,255,0.25);">
            <h2 class="display-4 mb-0">Combat</h2>
            <hr class="mt-1" style="border-color:rgba(255,255,255,0.25)">
            
            <!-- Progress bars for stats -->
            <div class="row m-n2">
                <div class="col-md p-2">
                    <h3 class="mb-1">STR</h3>
                    <div class="progress mb-2 rounded-0" style="background:#111;height:10px">
                        <div class="progress-bar" style="background:rgb(175, 76, 237);width:50%"></div>
                    </div>
                    <h3 class="mb-1">DEX</h3>
                    <div class="progress mb-2 rounded-0" style="background:#111;height:10px">
                        <div class="progress-bar" style="background:rgb(175, 76, 237);width:50%"></div>
                    </div>
                    <h3 class="mb-1">CON</h3>
                    <div class="progress rounded-0" style="background:#111;height:10px">
                        <div class="progress-bar" style="background:rgb(175, 76, 237);width:50%"></div>
                    </div>
                </div>
                <div class="col-md px-2 pb-2 pt-md-2 pt-0">
                    <h3 class="mb-1">INT</h3>
                    <div class="progress mb-2 rounded-0" style="background:#111;height:10px">
                        <div class="progress-bar" style="background:rgb(175, 76, 237);width:50%"></div>
                    </div>
                    <h3 class="mb-1">WIS</h3>
                    <div class="progress mb-2 rounded-0" style="background:#111;height:10px">
                        <div class="progress-bar" style="background:rgb(175, 76, 237);width:50%"></div>
                    </div>
                    <h3 class="mb-1">CHA</h3>
                    <div class="progress mb-2 rounded-0" style="background:#111;height:10px">
                        <div class="progress-bar" style="background:rgb(175, 76, 237);width:50%"></div>
                    </div>
                </div>
            </div>
            
            <!-- Divider -->
            <div class="d-flex align-items-center">
                <hr class="flex-fill" style="border-color:rgba(255,255,255,0.25)">
                <i class="fa-solid fa-dagger mx-2" style="color:rgb(175, 76, 237);"></i>
                <hr class="flex-fill" style="border-color:rgba(255,255,255,0.25)">
            </div>
            
            <!-- Abilities -->
            <h3>Abilities</h3>
            
            <h4>Sneak Attack</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend elementum magna, sed lobortis sem tempor in. Cras faucibus sed nisi nec euismod. Donec eu dignissim lacus.</p>
            
            <h4>Uncanny Dodge</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend elementum magna, sed lobortis sem tempor in. Cras faucibus sed nisi nec euismod. Donec eu dignissim lacus.</p>
            
            <!-- Divider -->
            <div class="d-flex align-items-center">
                <hr class="flex-fill" style="border-color:rgba(255,255,255,0.25)">
                <i class="fa-solid fa-dagger mx-2" style="color:rgb(175, 76, 237);"></i>
                <hr class="flex-fill" style="border-color:rgba(255,255,255,0.25)">
            </div>
            
            <!-- Weaknesses -->
            <h3>Weaknesses</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend elementum magna, sed lobortis sem tempor in. Cras faucibus sed nisi nec euismod. Donec eu dignissim lacus.</p>
            
        </div>
        
        <!-- Relations -->
        <div class="p-3 mt-3" style="background:#222;color:white;box-shadow: 0px 0px 15px 0px rgba(255,255,255,0.25);">
          
            <h2 class="display-4 mb-0">Relations</h2>
            <hr class="mt-1" style="border-color:rgba(255,255,255,0.25)">
            
            <!-- Image on the left -->
            <div class="row m-n2 justify-content-center">
                <div class="col-md-3 col-8 p-2">
                    <div style="padding-bottom:100%;background:url('URLHERE') #111 no-repeat center;background-size:cover"></div>
                </div>
                <div class="col-md p-2 text-md-left text-center">
                    <h3><a href="" style="color:white">Name</a></h3>
                    <p>Description of relation.</p>
                </div>
            </div>
            
            <!-- Divider -->
            <div class="d-flex align-items-center">
                <hr class="flex-fill" style="border-color:rgba(255,255,255,0.25)">
                <i class="fa-solid fa-dagger mx-2" style="color:rgb(175, 76, 237);"></i>
                <hr class="flex-fill" style="border-color:rgba(255,255,255,0.25)">
            </div>
            
            <!-- Image on the right -->
            <div class="row m-n2 justify-content-center">
                <div class="col-md-3 order-md-1 col-8 p-2">
                    <div style="padding-bottom:100%;background:url('URLHERE') #111 no-repeat center;background-size:cover"></div>
                </div>
                <div class="col-md p-2 text-md-left text-center">
                    <h3><a href="" style="color:white">Name</a></h3>
                    <p>Description of relation.</p>
                </div>
            </div>
            
            <!-- Divider -->
            <div class="d-flex align-items-center">
                <hr class="flex-fill" style="border-color:rgba(255,255,255,0.25)">
                <i class="fa-solid fa-dagger mx-2" style="color:rgb(175, 76, 237);"></i>
                <hr class="flex-fill" style="border-color:rgba(255,255,255,0.25)">
            </div>
            
            <!-- Image on the left -->
            <div class="row m-n2 justify-content-center">
                <div class="col-md-3 col-8 p-2">
                    <div style="padding-bottom:100%;background:url('URLHERE') #111 no-repeat center;background-size:cover"></div>
                </div>
                <div class="col-md p-2 text-md-left text-center">
                    <h3><a href="" style="color:white">Name</a></h3>
                    <p>Description of relation.</p>
                </div>
            </div>
            
        </div>
        
        <!-- Trivia -->
        <div class="p-3 mt-3" style="background:#222;color:white;box-shadow: 0px 0px 15px 0px rgba(255,255,255,0.25);">
          
            <h2 class="display-4 mb-0">Trivia</h2>
            <hr class="mt-1" style="border-color:rgba(255,255,255,0.25)">
            
            <h3>Likes</h3>
            <ul>
                <li>Like</li>
                <li>Like</li>
                <li>Like</li>
            </ul>
            
            <h3>Dislikes</h3>
            <ul>
                <li>Dislike</li>
                <li>Dislike</li>
                <li>Dislike</li>
            </ul>
            
            <h3>Other</h3>
            <ul>
                <li>Thing</li>
                <li>Thing</li>
                <li>Thing</li>
            </ul>
            
        </div>
        
    </div>
    
    <!-- Collapse toggle button -->
    <div class="p-3 mt-3" style="background:#222;color:white;box-shadow: 0px 0px 15px 0px rgba(255,255,255,0.25);">
        <div style="background:rgb(175, 76, 237)">
            <a class="btn btn-danger rounded-0 btn-block" data-toggle="collapse" href="#collapseMain" role="button" aria-expanded="false" aria-controls="collapseMain" style="mix-blend-mode:luminosity">
                Toggle Content (sneakily)
            </a>
        </div>
    </div>
    
</div>

<!-- Credit. You can move it, but please make it visible and easy to find. -->
<p class="mt-3 text-center">
  <a href="https://toyhou.se/Exo-Comet" data-toggle="tooltip" title="Profile by Exo-Comet"><i class="fa-solid fa-meteor"></i></a>
</p>