Mixed ColorsHTMLMiscellaneous
Line Count: 516
Difficulty:
Copy
<!--
    F2U - MISCELLANEOUS CODE: FAMILY TREE
    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 --
    
    ⚠️⚠️⚠️ WARNING ⚠️⚠️⚠️
    This code REQUIRES a CSS import to work! You MUST either have a premium membership to toyhou.se OR use this code in a world page.
    
    TUTORIAL: https://toyhou.se/28240985.family-tree/28240988.tutorial
    
-->
<div class="m-0 row no-gutters family-tree">
    
    <!-- .............................................................. KEY -->
    <div class="p-1 col-lg-12"> <div class="p-2 card bg-faded rounded-0 border-0">
        <h1 class="m-0">KEY</h1><hr class="m-0 mb-2">
        
        <div class="m-0 row font-weight-bold">
            <div class="p-1 col-6 key-marriage">
                <div>MARRIAGE</div>
            </div>
            <div class="p-1 col-6 key-child">
                <div>CHILDREN/SIBLINGS</div>
            </div>
            <div class="p-1 col-6 key-romance">
                <div>ROMANCE</div>
            </div>
            <div class="p-1 col-6 key-former">
                <div>FORMER RELATIONSHIP</div>
            </div>
        </div>
    </div> </div>
    
    <!-- .............................................................. FAMILY TREE -->
    <div class="p-1 col-lg-9"> <div class="card bg-faded rounded-0 border-0" style="height: 540px; overflow:auto;">
        
        <!--
            Please read the tutorial linked on the code page on how to edit the tree!
            Copy & paste the connector lines/character icons to make your own! 
            You can organize them in the code however you like, the order itself doesn't matter (but the classes you put in!)
        -->
        
        <!-- CONNECTORS -->
        <span class="l l-marriage l-horizontal l-width-2x r-1 c-5"></span>
        <span class="l l-child l-horizontal l-width-2x r-2 c-5"></span>
        <span class="l l-child l-vertical l-height-1x r-1 c-6"></span>
        
        <!-- .............................................................. GEN ONE -->
        
        <!-- CHARACTER -->
        <a href="#A" data-toggle="collapse" class="btn btn-secondary c fem r-1 c-5">
            <img src="//via.placeholder.com/200"><br>
            NAME
        </a>
        <!-- CHARACTER -->
        <a href="#B" data-toggle="collapse" class="btn btn-secondary c masc r-1 c-7">
            <img src="//via.placeholder.com/200"><br>
            NAME
        </a>
        
        <!-- .............................................................. GEN TWO -->
        
        <!-- CHARACTER -->
        <a href="#C" data-toggle="collapse" class="btn btn-secondary neutral c r-2 c-5">
            <img src="//via.placeholder.com/200"><br>
            NAME
        </a>
        <!-- CHARACTER -->
        <a href="#D" data-toggle="collapse" class="btn btn-secondary neutral c r-2 c-7">
            <img src="//via.placeholder.com/200"><br>
            NAME
        </a>
        
        <!-- .............................................................. GEN THREE -->
        
        <!-- CHARACTER -->
        <a href="#E" data-toggle="collapse" class="btn btn-secondary neutral c r-3 c-5">
            <img src="//via.placeholder.com/200"><br>
            NAME
        </a>
        <!-- CHARACTER -->
        <a href="#F" data-toggle="collapse" class="btn btn-secondary neutral c r-3 c-7">
            <img src="//via.placeholder.com/200"><br>
            NAME
        </a>
        
        <!-- .............................................................. GEN FOUR -->
        
        <!-- CHARACTER -->
        <a href="#G" data-toggle="collapse" class="btn btn-secondary neutral c r-4 c-5">
            <img src="//via.placeholder.com/200"><br>
            NAME
        </a>
        <!-- CHARACTER -->
        <a href="#H" data-toggle="collapse" class="btn btn-secondary neutral c r-4 c-7">
            <img src="//via.placeholder.com/200"><br>
            NAME
        </a>
        
        <!-- .............................................................. GEN FIVE -->
        
        <!-- CHARACTER -->
        <a href="#I" data-toggle="collapse" class="btn btn-secondary neutral c r-5 c-5">
            <img src="//via.placeholder.com/200"><br>
            NAME
        </a>
        <!-- CHARACTER -->
        <a href="#J" data-toggle="collapse" class="btn btn-secondary neutral c r-5 c-7">
            <img src="//via.placeholder.com/200"><br>
            NAME
        </a>
        
    </div> </div>
    
    <!-- .............................................................. BIOS -->
    <div class="p-1 col-lg-3"> <div class="card border-0 rounded-0 w-100 d-block d-lg-flex" style="min-height: 100%;">
        <div class="p-1 card bg-faded rounded-0 border-0">
            <h1 class="m-0"> TREE NAME</h1>
        </div>
        
        <div id="profiles" class="mt-2 bg-faded overflow-auto" style="flex:1 1 0;">
            
            <!-- PROFILES - DELETE THE ONES YOU WON'T USE -->
            
            <!-- CHARACTER A PROFILE -->
            <div id="A" data-parent="#profiles" class="p-3 collapse fade show">
                <div class="m-0 text-center">
                    <a class="p-1 btn btn-secondary rounded-0" target="_blank" data-toggle="tooltip" title="FULL PROFILE"
                        href="CHAR_LINK">
                        <img src="//via.placeholder.com/200"
                        style="height: 150px; width: 150px;">
                    </a>
                    <h1 class="my-2 font-weight-normal">Name</h1>
                </div>
                <div class="text-right">
                    <div class="justify-content-between">
                        <b class="text-secondary">GENERATION</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">STATUS</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">birth</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">death</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">cause of death</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">GENDER</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">AGE</b> Information
                    </div>
                </div>
                <hr class="m-0 my-1">
                <p>Bio goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</p>
            </div>
            
            <!-- CHARACTER B PROFILE -->
            <div id="B" data-parent="#profiles" class="p-3 collapse fade">
                <div class="m-0 text-center">
                    <a class="p-1 btn btn-secondary rounded-0" target="_blank" data-toggle="tooltip" title="FULL PROFILE"
                        href="CHAR_LINK">
                        <img src="//via.placeholder.com/200"
                        style="height: 150px; width: 150px;">
                    </a>
                    <h1 class="my-2 font-weight-normal">Name</h1>
                </div>
                <div class="text-right">
                    <div class="justify-content-between">
                        <b class="text-secondary">GENERATION</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">STATUS</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">birth</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">death</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">cause of death</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">GENDER</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">AGE</b> Information
                    </div>
                </div>
                <hr class="m-0 my-1">
                <p>Bio goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</p>
            </div>
            
            <!-- CHARACTER C PROFILE -->
            <div id="C" data-parent="#profiles" class="p-3 collapse fade">
                <div class="m-0 text-center">
                    <a class="p-1 btn btn-secondary rounded-0" target="_blank" data-toggle="tooltip" title="FULL PROFILE"
                        href="CHAR_LINK">
                        <img src="//via.placeholder.com/200"
                        style="height: 150px; width: 150px;">
                    </a>
                    <h1 class="my-2 font-weight-normal">Name</h1>
                </div>
                <div class="text-right">
                    <div class="justify-content-between">
                        <b class="text-secondary">GENERATION</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">STATUS</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">birth</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">death</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">cause of death</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">GENDER</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">AGE</b> Information
                    </div>
                </div>
                <hr class="m-0 my-1">
                <p>Bio goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</p>
            </div>
            
            <!-- CHARACTER D PROFILE -->
            <div id="D" data-parent="#profiles" class="p-3 collapse fade">
                <div class="m-0 text-center">
                    <a class="p-1 btn btn-secondary rounded-0" target="_blank" data-toggle="tooltip" title="FULL PROFILE"
                        href="CHAR_LINK">
                        <img src="//via.placeholder.com/200"
                        style="height: 150px; width: 150px;">
                    </a>
                    <h1 class="my-2 font-weight-normal">Name</h1>
                </div>
                <div class="text-right">
                    <div class="justify-content-between">
                        <b class="text-secondary">GENERATION</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">STATUS</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">birth</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">death</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">cause of death</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">GENDER</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">AGE</b> Information
                    </div>
                </div>
                <hr class="m-0 my-1">
                <p>Bio goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</p>
            </div>
            
            <!-- CHARACTER E PROFILE -->
            <div id="E" data-parent="#profiles" class="p-3 collapse fade">
                <div class="m-0 text-center">
                    <a class="p-1 btn btn-secondary rounded-0" target="_blank" data-toggle="tooltip" title="FULL PROFILE"
                        href="CHAR_LINK">
                        <img src="//via.placeholder.com/200"
                        style="height: 150px; width: 150px;">
                    </a>
                    <h1 class="my-2 font-weight-normal">Name</h1>
                </div>
                <div class="text-right">
                    <div class="justify-content-between">
                        <b class="text-secondary">GENERATION</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">STATUS</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">birth</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">death</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">cause of death</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">GENDER</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">AGE</b> Information
                    </div>
                </div>
                <hr class="m-0 my-1">
                <p>Bio goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</p>
            </div>
            
            <!-- CHARACTER F PROFILE -->
            <div id="F" data-parent="#profiles" class="p-3 collapse fade">
                <div class="m-0 text-center">
                    <a class="p-1 btn btn-secondary rounded-0" target="_blank" data-toggle="tooltip" title="FULL PROFILE"
                        href="CHAR_LINK">
                        <img src="//via.placeholder.com/200"
                        style="height: 150px; width: 150px;">
                    </a>
                    <h1 class="my-2 font-weight-normal">Name</h1>
                </div>
                <div class="text-right">
                    <div class="justify-content-between">
                        <b class="text-secondary">GENERATION</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">STATUS</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">birth</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">death</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">cause of death</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">GENDER</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">AGE</b> Information
                    </div>
                </div>
                <hr class="m-0 my-1">
                <p>Bio goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</p>
            </div>
            
            <!-- CHARACTER G PROFILE -->
            <div id="G" data-parent="#profiles" class="p-3 collapse fade">
                <div class="m-0 text-center">
                    <a class="p-1 btn btn-secondary rounded-0" target="_blank" data-toggle="tooltip" title="FULL PROFILE"
                        href="CHAR_LINK">
                        <img src="//via.placeholder.com/200"
                        style="height: 150px; width: 150px;">
                    </a>
                    <h1 class="my-2 font-weight-normal">Name</h1>
                </div>
                <div class="text-right">
                    <div class="justify-content-between">
                        <b class="text-secondary">GENERATION</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">STATUS</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">birth</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">death</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">cause of death</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">GENDER</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">AGE</b> Information
                    </div>
                </div>
                <hr class="m-0 my-1">
                <p>Bio goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</p>
            </div>
            
            <!-- CHARACTER H PROFILE -->
            <div id="H" data-parent="#profiles" class="p-3 collapse fade">
                <div class="m-0 text-center">
                    <a class="p-1 btn btn-secondary rounded-0" target="_blank" data-toggle="tooltip" title="FULL PROFILE"
                        href="CHAR_LINK">
                        <img src="//via.placeholder.com/200"
                        style="height: 150px; width: 150px;">
                    </a>
                    <h1 class="my-2 font-weight-normal">Name</h1>
                </div>
                <div class="text-right">
                    <div class="justify-content-between">
                        <b class="text-secondary">GENERATION</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">STATUS</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">birth</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">death</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">cause of death</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">GENDER</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">AGE</b> Information
                    </div>
                </div>
                <hr class="m-0 my-1">
                <p>Bio goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</p>
            </div>
            
            <!-- CHARACTER I PROFILE -->
            <div id="I" data-parent="#profiles" class="p-3 collapse fade">
                <div class="m-0 text-center">
                    <a class="p-1 btn btn-secondary rounded-0" target="_blank" data-toggle="tooltip" title="FULL PROFILE"
                        href="CHAR_LINK">
                        <img src="//via.placeholder.com/200"
                        style="height: 150px; width: 150px;">
                    </a>
                    <h1 class="my-2 font-weight-normal">Name</h1>
                </div>
                <div class="text-right">
                    <div class="justify-content-between">
                        <b class="text-secondary">GENERATION</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">STATUS</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">birth</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">death</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">cause of death</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">GENDER</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">AGE</b> Information
                    </div>
                </div>
                <hr class="m-0 my-1">
                <p>Bio goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</p>
            </div>
            
            <!-- CHARACTER J PROFILE -->
            <div id="J" data-parent="#profiles" class="p-3 collapse fade">
                <div class="m-0 text-center">
                    <a class="p-1 btn btn-secondary rounded-0" target="_blank" data-toggle="tooltip" title="FULL PROFILE"
                        href="CHAR_LINK">
                        <img src="//via.placeholder.com/200"
                        style="height: 150px; width: 150px;">
                    </a>
                    <h1 class="my-2 font-weight-normal">Name</h1>
                </div>
                <div class="text-right">
                    <div class="justify-content-between">
                        <b class="text-secondary">GENERATION</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">STATUS</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">birth</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">death</b> Information
                    </div>
                    <div class="mr-2 justify-content-between small">
                        <b class="text-secondary">cause of death</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">GENDER</b> Information
                    </div>
                    <div class="justify-content-between">
                        <b class="text-secondary">AGE</b> Information
                    </div>
                </div>
                <hr class="m-0 my-1">
                <p>Bio goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</p>
            </div>
            
            <!-- or you can paste more above here -->
        </div>
    </div> </div>
    
    <!-- .............................................................. CREDIT, DON'T REMOVE -->
    <div class="p-0 col-lg-12 text-center">
        <a data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes"><i class="fa-solid fa-code"></i></a>
    </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.