Custom ColorsHTMLCharacter

Line Count: 504
Difficulty:
Copy
<!--
    F2U - CHARACTER CODE: VÖGEL
    by SparklyCodes @ Toyhou.se
	
    Make sure to read all the rules and instructions!
    
    -- TOS --
    
    1. Turn WYSIWYG off when coding. Even after you're done.
        1.5 I'm serious on this one. IF THE CODE BREAKS/ICONS DISAPPEAR THIS IS LIKELY THE CULPRIT!
    3. Use on TH only.
    4. Do not redistribute.
    5. Do not remove credit.
    6. Frankensteining is okay, as long as the other creator allows it. Credit both creators.
    7. Free to use as reference, credit in this case isn't required but appreciated!
    
    -- RESOURCES --
    
    fa-sparkles >> custom icon
    
    #141414 >> BACKGROUND
    #2E2E2E >> BORDERS (GRAY)
    #ffffff >> TEXT
    #B82F00 >> ACCENT COLOR 1
    #0099CE >> ACCENT COLOR 2
    
-->
<div class="mx-auto p-1" style="max-width: 800px; color: #ffffff">
    
    <!-- ............................. NAVIGATION -->
    <div class="m-2 p-3 justify-content-around align-items-center shadow" style="background: #141414; border: 1px solid #2E2E2E; position: sticky; top: .5em; z-index: 9;">
        <a href="#OVERVIEW" style="color: #B82F00;">
            <i class="fa-fw fa-lg fa-regular fa-sparkles"></i>
        </a>
        <a href="#FIELDS" style="color: #B82F00;">
            <i class="fa-fw fa-lg fa-regular fa-list-ul"></i>
        </a>
        <a href="#APPEARANCE" style="color: #B82F00;">
            <i class="fa-fw fa-lg fa-regular fa-hand-sparkles"></i>
        </a>
        <a href="#ISSUES" style="color: #B82F00;">
            <i class="fa-fw fa-lg fa-regular fa-triangle-exclamation"></i>
        </a>
        <a href="#GESTALT" style="color: #B82F00;">
            <i class="fa-fw fa-lg fa-regular fa-folder-user"></i>
        </a>
        <a href="#CORRUPTED" style="color: #B82F00;">
            <i class="fa-fw fa-lg fa-regular fa-skull"></i>
        </a>
        <a href="#TRIVIA" style="color: #B82F00;">
            <i class="fa-fw fa-lg fa-regular fa-star-shooting"></i>
        </a>
        <a href="#LINKS" style="color: #B82F00;">
            <i class="fa-fw fa-lg fa-regular fa-link"></i>
        </a>
    </div>
    
    <!-- ............................. INFORMATION -->
    <div class="m-2 p-1 shadow" style="background: #141414; border: 1px solid #2E2E2E;">
        
        <!-- OVERVIEW -->
        <div id="OVERVIEW" class="p-2 clearfix text-justify">
            
            <!-- floating image -->
            <div class="ml-lg-n5 mr-2 p-2 p-lg-0 float-sm-left justify-content-center">
                <img src="//placehold.co/500"
                style="max-height: 300px; max-width: 300px; border: 6px solid #FFFFFF; border-bottom: 20px solid #FFFFFF;">
            </div>
            
            <!-- name -->
            <div class="mb-2 w-100 d-block"> <div class="justify-content-between align-items-center row no-gutters text-center text-lg-left" style="color: #B82F00; border-bottom: 1px solid #2E2E2E">
                <h1 class="col-lg display-2 font-weight-normal">
                    XXX<span style="color: #0099CE">R</span>
                </h1>
                <h3 class="col-lg font-weight-normal text-lg-right">
                    Name of the <span style="color: #0099CE">Replika</span> 'Here'
                </h3>
            </div> </div>
            
            <!-- write intro here -->
            <p style="text-indent: 2em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
            <p style="text-indent: 2em;">Proin nec mollis tellus. Morbi et urna in sem pulvinar sagittis. Donec quis nibh et augue rutrum imperdiet ac sed ipsum. Fusce ut vestibulum nisi, a accumsan ex. Suspendisse dignissim fringilla leo, sit amet condimentum leo accumsan non. Sed felis dui, semper quis libero ac, eleifend imperdiet nulla. Vivamus sit amet quam in est dictum ultricies. Etiam finibus ipsum ligula, at iaculis sem lobortis malesuada.</p>
            
            <h4 class="text-monospace" style="color: #B82F00;"><i class="fa-fw fa-solid fa-sparkles"></i> Sub-title</h4>
            <p style="text-indent: 2em;">Ut efficitur dapibus convallis. Donec rhoncus libero vitae ligula imperdiet, et commodo orci posuere. Cras varius, eros non rutrum viverra, sem velit finibus ligula, ut vestibulum nibh massa id justo. Pellentesque eget aliquet sem. Aenean eget condimentum sapien. Mauris sit amet erat at metus dictum vestibulum vel et ipsum. Phasellus libero orci, euismod vitae nisi vel, blandit convallis ante. Curabitur aliquam libero et purus laoreet vestibulum. Nam tempus lacinia auctor. Mauris suscipit, nisi at placerat eleifend, justo arcu iaculis enim, at venenatis nunc nunc in justo.</p>
            <p style="text-indent: 2em;">Ut vel velit eget neque aliquet semper vitae ac lacus. Phasellus tortor augue, varius at eros vitae, consequat egestas tortor. Curabitur scelerisque convallis nisl, at molestie metus hendrerit eu. In ac metus eu nunc tincidunt mollis in sit amet arcu. Vivamus nec metus blandit, mollis massa quis, consequat tellus.</p>
            
            <!-- add more paragraphs above here -->
            <hr class="my-2" style="border-top: 1px solid #2E2E2E;">
        </div>
        
        <!-- FIELDS -->
        <div id="FIELDS" class="row no-gutters">
            <h1 class="m-0 px-2 col-12 text-monospace display-4" style="color: #B82F00">
                <i class="mr-n2 fa-regular fa-fw fa-list-ul" style="color: #0099CE;"></i> overview
            </h1>
            
            <!-- section for if you're writing about a named unit -->
            <div class="p-2 col-md-6 row no-gutters align-items-center text-right">
                <div class="col-lg font-weight-bold text-left" style="color: #0099CE;">CODE</div>
                <div class="col-lg-8">
                    Information
                </div>
                <hr class="col-12 m-0" style="border-top: 1px solid #2E2E2E;">
            </div>
            <div class="p-2 col-md-6 row no-gutters align-items-center text-right">
                <div class="col-lg font-weight-bold text-left" style="color: #0099CE;">NICKNAME(S)</div>
                <div class="col-lg-8">
                    Information
                </div>
                <hr class="col-12 m-0" style="border-top: 1px solid #2E2E2E;">
            </div>
            <div class="p-2 col-md-6 row no-gutters align-items-center text-right">
                <div class="col-lg font-weight-bold text-left" style="color: #0099CE;">GENDER</div>
                <div class="col-lg-8">
                    Information
                </div>
                <hr class="col-12 m-0" style="border-top: 1px solid #2E2E2E;">
            </div>
            <div class="p-2 col-md-6 row no-gutters align-items-center text-right">
                <div class="col-lg font-weight-bold text-left" style="color: #0099CE;">ORIENTATION</div>
                <div class="col-lg-8">
                    Information
                </div>
                <hr class="col-12 m-0" style="border-top: 1px solid #2E2E2E;">
            </div>
            
            <div class="p-2 col-md-6 row no-gutters align-items-center text-right">
                <div class="col-lg font-weight-bold text-left" style="color: #B82F00;">ROLE (DE)</div>
                <div class="col-lg-8">
                    Information
                </div>
                <hr class="col-12 m-0" style="border-top: 1px solid #2E2E2E;">
            </div>
            <div class="p-2 col-md-6 row no-gutters align-items-center text-right">
                <div class="col-lg font-weight-bold text-left" style="color: #B82F00;">ROLE (EN)</div>
                <div class="col-lg-8">
                    Information
                </div>
                <hr class="col-12 m-0" style="border-top: 1px solid #2E2E2E;">
            </div>
            <div class="p-2 col-md-6 row no-gutters align-items-center text-right">
                <div class="col-lg font-weight-bold text-left" style="color: #B82F00;">TYPE</div>
                <div class="col-lg-8">
                    Information
                </div>
                <hr class="col-12 m-0" style="border-top: 1px solid #2E2E2E;">
            </div>
            <div class="p-2 col-md-6 row no-gutters align-items-center text-right">
                <div class="col-lg font-weight-bold text-left" style="color: #B82F00;">FRAME</div>
                <div class="col-lg-8">
                    Information
                </div>
                <hr class="col-12 m-0" style="border-top: 1px solid #2E2E2E;">
            </div>
            <div class="p-2 col-md-6 row no-gutters align-items-center text-right">
                <div class="col-lg font-weight-bold text-left" style="color: #B82F00;">HEIGHT</div>
                <div class="col-lg-8">
                    Information
                </div>
                <hr class="col-12 m-0" style="border-top: 1px solid #2E2E2E;">
            </div>
            <div class="p-2 col-md-6 row no-gutters align-items-center text-right">
                <div class="col-lg font-weight-bold text-left" style="color: #B82F00;">AFFILIATION</div>
                <div class="col-lg-8">
                    Information
                </div>
                <hr class="col-12 m-0" style="border-top: 1px solid #2E2E2E;">
            </div>
            
        </div>
        
        <!-- APPEARANCE -->
        <div id="APPEARANCE" class="row no-gutters">
            <h1 class="m-0 px-2 col-12 text-monospace display-4 order-1" style="color: #B82F00">
                <i class="mr-n2 fa-regular fa-fw fa-hand-sparkles" style="color: #0099CE;"></i> appearance
            </h1>
            
            <!-- IMAGE -->
            <div class="p-2 col-md-5 order-md-3 order-2">
                <!-- image link -->
                <div style="background:url('//placehold.co/500');
                background-position: center; background-size: cover; height: 500px; width: 100%;">
                    <a href="IMAGE_SOURCE" class="m-1 pt-1 d-block" style="color: #ffffff">
                        <i class="fa-lg fa-regular fa-search"></i>
                    </a>
                </div>
            </div>
            <!-- INFORMATION -->
            <div class="p-1 col-md-7 order-md-2 order-3"> <div class="card border-0 rounded-0 w-100 d-block d-md-flex" style="min-height: 100%; background: none;"> 
                
                <!-- basics -->
                <div class="p-1 row no-gutters justify-content-center">
                    <div class="p-1 col-lg-4 col-6"> <div class="w-100 justify-content-center align-items-center flex-column">
                        <div class="p-2 pb-3 w-100 text-center" style="border: 1px solid #2E2E2E;">
                            000cm
                            <br><span class="faded">height</span>
                        </div>
                        <div class="mt-n3 p-2" style="background: #141414;">
                            <i class="faded fa-regular fa-lg fa-person-arrow-up-from-line"></i>
                        </div>
                    </div> </div>
                    <div class="p-1 col-lg-4 col-6"> <div class="w-100 justify-content-center align-items-center flex-column">
                        <div class="p-2 pb-3 w-100 text-center" style="border: 1px solid #2E2E2E;">
                            Keyword
                            <br><span class="faded">demeanor</span>
                        </div>
                        <div class="mt-n3 p-2" style="background: #141414;">
                            <i class="faded fa-regular fa-lg fa-megaphone"></i>
                        </div>
                    </div> </div>
                    <div class="p-1 col-lg-4 col-6"> <div class="w-100 justify-content-center align-items-center flex-column">
                        <div class="p-2 pb-3 w-100 text-center" style="border: 1px solid #2E2E2E;">
                            @ user here
                            <br><span class="faded">designer</span>
                        </div>
                        <div class="mt-n3 p-2" style="background: #141414;">
                            <i class="faded fa-regular fa-lg fa-copyright"></i>
                        </div>
                    </div> </div>
                </div>
                
                <!-- color -->
                <div class="p-1 row no-gutters" style="height: 35px;">
                    <div class="h-100 col" data-toggle="tooltip" title="label" style="background-color: #111111;"></div>
                    <div class="h-100 col" data-toggle="tooltip" title="label" style="background-color: #333333;"></div>
                    <div class="h-100 col" data-toggle="tooltip" title="label" style="background-color: #555555;"></div>
                    <div class="h-100 col" data-toggle="tooltip" title="label" style="background-color: #777777;"></div>
                    <div class="h-100 col" data-toggle="tooltip" title="label" style="background-color: #999999;"></div>
                    <div class="h-100 col" data-toggle="tooltip" title="label" style="background-color: #bbbbbb;"></div>
                    <!-- you can add more here -->
                </div>
                
                <!-- description -->
                <div class="m-1 pr-md-2 overflow-auto text-justify" style="flex:1 1 0;">
                    <p style="text-indent: 2em;">Write a couple paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit.</p>
                    <p style="text-indent: 2em;">Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
                    
                    <ul class="m-0 pl-4">
                        <li>Or a list! Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                        <li>Praesent et euismod enim, vel lobortis sapien.</li>
                        <li>Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</li>
                        <li>Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus.</li>
                    </ul>
                </div>
                
                <!-- end appearance info -->
            </div>  </div>
            
        </div>
        <hr class="mt-0 m-2" style="border-top: 1px solid #2E2E2E;">
        
        <!-- KNOWN ISSUES -->
        <div id="ISSUES" class="p-2 text-justify">
            
            <h1 class="m-0 text-monospace display-4" style="color: #B82F00">
                <i class="mr-n2 fa-regular fa-fw fa-triangle-exclamation" style="color: #0099CE;"></i> known issues
            </h1>
            
            <p style="font-family:'ms gothic';" class="my-2 text-center">- <span style="color: #B82F00;">CLASSIFIED INFORMATION</span> - AEON Personnel Only -</p>
            
            <!-- write intro here -->
            <p style="text-indent: 2em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
            <p style="text-indent: 2em;">Proin nec mollis tellus. Morbi et urna in sem pulvinar sagittis. Donec quis nibh et augue rutrum imperdiet ac sed ipsum. Fusce ut vestibulum nisi, a accumsan ex. Suspendisse dignissim fringilla leo, sit amet condimentum leo accumsan non. Sed felis dui, semper quis libero ac, eleifend imperdiet nulla. Vivamus sit amet quam in est dictum ultricies. Etiam finibus ipsum ligula, at iaculis sem lobortis malesuada.</p>
            
            <hr class="my-2" style="border-top: 1px solid #2E2E2E;">
        </div>
        
        <!-- GESTALT -->
        <div id="GESTALT" class="p-2 clearfix text-justify">
            
            <h1 class="mt-n2 text-monospace display-4" style="color: #B82F00">
                <i class="mr-n2 fa-regular fa-fw fa-folder-user" style="color: #0099CE;"></i> gestalt
            </h1>
            
            <!-- floating image -->
            <div class="mr-lg-n5 ml-2 p-2 p-lg-0 float-lg-right justify-content-center">
                <img src="//placehold.co/500"
                style="max-height: 300px; max-width: 300px; border: 6px solid #FFFFFF; border-bottom: 20px solid #FFFFFF;">
            </div>
            
            <!-- basics -->
            <div class="p-1 row no-gutters justify-content-center">
                <div class="p-1 col-md-4 col-lg col-6"> <div class="w-100 justify-content-center align-items-center flex-column">
                    <div class="p-2 pb-3 w-100 text-center" style="border: 1px solid #2E2E2E;">
                        Information
                        <br><span class="faded">name</span>
                    </div>
                    <div class="mt-n3 p-2" style="background: #141414;">
                        <i class="faded fa-regular fa-lg fa-pen-nib"></i>
                    </div>
                </div> </div>
                <div class="p-1 col-md-4 col-lg col-6"> <div class="w-100 justify-content-center align-items-center flex-column">
                    <div class="p-2 pb-3 w-100 text-center" style="border: 1px solid #2E2E2E;">
                        Information
                        <br><span class="faded">origin</span>
                    </div>
                    <div class="mt-n3 p-2" style="background: #141414;">
                        <i class="faded fa-regular fa-lg fa-planet-moon"></i>
                    </div>
                </div> </div>
                <div class="p-1 col-md-4 col-lg col-6"> <div class="w-100 justify-content-center align-items-center flex-column">
                    <div class="p-2 pb-3 w-100 text-center" style="border: 1px solid #2E2E2E;">
                        Information
                        <br><span class="faded">profession</span>
                    </div>
                    <div class="mt-n3 p-2" style="background: #141414;">
                        <i class="faded fa-regular fa-lg fa-briefcase"></i>
                    </div>
                </div> </div>
            </div>
            
            <!-- write info here -->
            <p style="text-indent: 2em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
            <p style="text-indent: 2em;">Proin nec mollis tellus. Morbi et urna in sem pulvinar sagittis. Donec quis nibh et augue rutrum imperdiet ac sed ipsum. Fusce ut vestibulum nisi, a accumsan ex. Suspendisse dignissim fringilla leo, sit amet condimentum leo accumsan non. Sed felis dui, semper quis libero ac, eleifend imperdiet nulla. Vivamus sit amet quam in est dictum ultricies. Etiam finibus ipsum ligula, at iaculis sem lobortis malesuada.</p>
            
            <hr class="my-2" style="border-top: 1px solid #2E2E2E;">
        </div>
        
        <!-- CORRUPTED FORM -->
        <div id="CORRUPTED" class="p-2 clearfix text-justify">
            
            <h1 class="mt-n2 text-monospace display-4" style="color: #B82F00">
                <i class="mr-n2 fa-regular fa-fw fa-skull" style="color: #0099CE;"></i> corrupted form
            </h1>
            
            <!-- floating image -->
            <div class="ml-lg-n5 mr-2 p-2 p-lg-0 float-sm-left justify-content-center">
                <img src="//placehold.co/500"
                style="max-height: 300px; max-width: 300px; border: 6px solid #FFFFFF; border-bottom: 20px solid #FFFFFF;">
            </div>
            
            <!-- write info here -->
            <p style="text-indent: 2em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
            <p style="text-indent: 2em;">Proin nec mollis tellus. Morbi et urna in sem pulvinar sagittis. Donec quis nibh et augue rutrum imperdiet ac sed ipsum. Fusce ut vestibulum nisi, a accumsan ex. Suspendisse dignissim fringilla leo, sit amet condimentum leo accumsan non. Sed felis dui, semper quis libero ac, eleifend imperdiet nulla. Vivamus sit amet quam in est dictum ultricies. Etiam finibus ipsum ligula, at iaculis sem lobortis malesuada.</p>
            
            <hr class="my-2" style="border-top: 1px solid #2E2E2E;">
        </div>
        
        <!-- TRIVIA -->
        <div id="TRIVIA" class="row no-gutters">
            
            <h1 class="px-2 col-12 text-monospace display-4" style="color: #B82F00">
                <i class="mr-n2 fa-regular fa-fw fa-star-shooting" style="color: #0099CE;"></i> trivia
            </h1>
            
            <!-- fun facts -->
            <div class="p-2 col-12">
                <ul class="m-0 pl-4 text-justify">
                    <li>Proin nec mollis tellus. Morbi et urna in sem pulvinar sagittis.</li>
                    <li>Donec quis nibh et augue rutrum imperdiet ac sed ipsum. Fusce ut vestibulum nisi, a accumsan ex.</li>
                    <li>Suspendisse dignissim fringilla leo, sit amet condimentum leo accumsan non. Sed felis dui, semper quis libero ac, eleifend imperdiet nulla.</li>
                    <li>Vivamus sit amet quam in est dictum ultricies. Etiam finibus ipsum ligula, at iaculis sem lobortis malesuada.</li>
                </ul>
            </div>
            
            <!-- images -->
            <div class="mx-auto p-1 col-md-6 col-sm-10 align-items-center"> <div class="w-100 row no-gutters">
                
                <div class="p-1 col-6">
                    <div style="background:url('//placehold.co/500');
                    background-position: center; background-size: cover; width: 100%; padding-top: 100%; border: 6px solid #FFFFFF;">
                        <a href="IMAGE_SOURCE" class="m-1 text-white" style="position: absolute; top: .75em;">
                            <i class="fa-solid fa-camera"></i>
                        </a>
                    </div>
                </div>
                <div class="p-1 col-6">
                    <div style="background:url('//placehold.co/500');
                    background-position: center; background-size: cover; width: 100%; padding-top: 100%; border: 6px solid #FFFFFF;">
                        <a href="IMAGE_SOURCE" class="m-1 text-white" style="position: absolute; top: .75em;">
                            <i class="fa-solid fa-camera"></i>
                        </a>
                    </div>
                </div>
                <div class="p-1 col-6">
                    <div style="background:url('//placehold.co/500');
                    background-position: center; background-size: cover; width: 100%; padding-top: 100%; border: 6px solid #FFFFFF;">
                        <a href="IMAGE_SOURCE" class="m-1 text-white" style="position: absolute; top: .75em;">
                            <i class="fa-solid fa-camera"></i>
                        </a>
                    </div>
                </div>
                <div class="p-1 col-6">
                    <div style="background:url('//placehold.co/500');
                    background-position: center; background-size: cover; width: 100%; padding-top: 100%; border: 6px solid #FFFFFF;">
                        <a href="IMAGE_SOURCE" class="m-1 text-white" style="position: absolute; top: .75em;">
                            <i class="fa-solid fa-camera"></i>
                        </a>
                    </div>
                </div>
                
            </div> </div>
            
            <!-- tastes -->
            <div class="p-2 col-md-6 flex-column justify-content-around">
                
                <h3 class="mx-auto my-2 faded text-center font-weight-normal font-italic">
                    "A quote goes here! Lorem ipsum, sit dolor amet."
                </h3>
                
                <!-- likes -->
                <div>
                    <h4 class="text-monospace" style="color: #B82F00;">Likes</h4>
                    <ul class="pl-4">
                        <li>Information</li>
                        <li>Information</li>
                        <li>Information</li>
                        <li>Information</li>
                    </ul>
                </div>
                
                <!-- dislikes -->
                <div>
                    <h4 class="text-monospace" style="color: #B82F00;">Dislikes</h4>
                    <ul class="pl-4">
                        <li>Information</li>
                        <li>Information</li>
                        <li>Information</li>
                        <li>Information</li>
                    </ul>
                </div>
                
            </div>
            
            <div class="p-2 col-12">
                <hr class="m-0" style="border-top: 1px solid #2E2E2E;">
            </div>
        </div>
        
        <!--
            LINKS: MAY BE USED FOR NOTABLE UNITS OR THEIR DYNAMICS WITH OTHER REPLIKAS
            or you can delete it idk
        -->
        
        <!-- LINKS -->
        <div id="LINKS" class="p-2 text-justify">
            
            <h1 class="mt-n2 text-monospace display-4" style="color: #B82F00">
                <i class="mr-n2 fa-regular fa-fw fa-link" style="color: #0099CE;"></i> links
            </h1>
            
            <!-- PERSON -->
            <div class="row no-gutters">
                <hr class="my-2 col-12" style="border-top: 1px solid #2E2E2E;">
                <!-- IMAGE -->
                <div class="p-1 col-md-auto justify-content-center">
                    <img src="//placehold.co/500"
                    style="height: 150px; border: 4px solid #ffffff;">
                </div>
                <!-- BIO -->
                <div class="p-1 col-md">
                    <h4 class="text-monospace text-center text-md-right">
                        <a style="color: #B82F00;" href="LINK">Name</a> - relationship
                    </h4>
                    <p style="text-indent: 2em;">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>
            <!-- PERSON -->
            <div class="row no-gutters">
                <hr class="my-2 col-12" style="border-top: 1px solid #2E2E2E;">
                <!-- IMAGE -->
                <div class="p-1 col-md-auto justify-content-center">
                    <img src="//placehold.co/500"
                    style="height: 150px; border: 4px solid #ffffff;">
                </div>
                <!-- BIO -->
                <div class="p-1 col-md">
                    <h4 class="text-monospace text-center text-md-right">
                        <a style="color: #B82F00;" href="LINK">Name</a> - relationship
                    </h4>
                    <p style="text-indent: 2em;">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>
            <!-- PERSON -->
            <div class="row no-gutters">
                <hr class="my-2 col-12" style="border-top: 1px solid #2E2E2E;">
                <!-- IMAGE -->
                <div class="p-1 col-md-auto justify-content-center">
                    <img src="//placehold.co/500"
                    style="height: 150px; border: 4px solid #ffffff;">
                </div>
                <!-- BIO -->
                <div class="p-1 col-md">
                    <h4 class="text-monospace text-center text-md-right">
                        <a style="color: #B82F00;" href="LINK">Name</a> - relationship
                    </h4>
                    <p style="text-indent: 2em;">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>
            
            <!-- add more above here -->
        </div>
        
        <!-- ................................................. CREDIT - DO NOT REMOVE -->
        <div class="py-1 pt-2 text-center" style="border-top: 1px solid #2E2E2E;">
            <a href="/SparklyCodes" title="Code by SparklyCodes" data-toggle="tooltip" style="color: #2E2E2E;">
                <i class="fa-fw fa-solid fa-code"></i>
            </a>
        </div>
        
    </div>
    
</div>

Password (optional)

Users must enter a password before unlocking this specific version. Please note that this password will only apply to this version.