F2U Research [html] (CODE)

  
 <!-------

CODE BY CLOWNIICAT ON TOYHOUSE

DO NOT STEAL/REMOVE CREDIT


IMPORTANT: have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it


Palette to change colours!!
select the colour and press Ctrl+F to replace it

(if you're on mobile, put them on toyhouse in the code editor, select the color you want to change, press the 3 dots to the right and press "find")


Text: #444444
Main colour: #dddddd
Main colour border: #aaaaaa
Lighter colour boxes: #fefefe
Lighter colour boxes border: #cccccc


-------->


<div>
    <div class="row no-gutters mx-auto" style="max-width:800px;font-family:Lucida Console,monospace">
        
<div class="col-12 p-2">
    
    <div class="p-3" style="background-color:#dddddd;border:2px solid #aaaaaa;color:#444444">
        
<div class="row no-gutters">

<!------------------------
 
 
 BUTTONS THAT ACTUALLY WORK
 
 
 ------------------------->

<div class="col-auto">
    
<!------------------------
 
 
 HOME BUTTON
 
 LEAVE IT WITH THE NORMAL TOYHOUSE LINK
 OR PUT THE LINK TO YOUR TH PROFILE
 
 
 ------------------------->
    
<a href="https://toyhou.se/" style="color:#444444">
    
        <i class="far fa-house mr-2"></i>
        
</a>

<!------------------------
 
 
 PREVIOUS BUTTON
 
 ADD THE LINK TO THE FOLDER THE
 CHARACTER IS IN
 
 
 ------------------------->

<a href="https://toyhou.se/" style="color:#444444">

        <i class="far fa-arrow-left mr-2"></i>
        
</a>

<!------------------------
 
 
 NEXT BUTTON
 
 only one that doesnt work,
 but if you want add a link to a tab
 of the character and remove the 'faded' class
 
 
 ------------------------->
        
        <i class="far fa-arrow-right mr-2 faded"></i>
        
<!------------------------
 
 
 REFRESH BUTTON
 
 ADD THE LINK TO THE CURRENT CHARACTER
 SO WHEN YOU TAP ON IT, IT SHOULD ACTUALLY
 REFRESH THE PAGE
 
 
 ------------------------->
        
<a href="https://toyhou.se/" style="color:#444444">
    
        <i class="far fa-arrow-rotate-right"></i>
    
</a>


    
</div>
        
<div class="col mx-2">
    
<hr style="border-top:1px dotted #aaaaaa;margin-top:11px">
    
</div>
        
<!------------------------
 
 
 CLOSE, MINIMIZE & FULLSCREEN BUTTONS
 
 
 ------------------------->
        
<div class="col-auto">
        
    <div class="text-right mb-1">
        
        <i class="fas fa-stack fa-xs" style="margin-bottom:2px">
            <i class="fas fa-stack-2x fa-square text-success"></i>
            <i class="fas fa-stack-1x fa-window-minimize" style="color:#dddddd"></i>
        </i>
        
        <i class="fas fa-stack fa-xs" style="margin-bottom:2px">
            <i class="fas fa-stack-2x fa-square text-warning"></i>
            <i class="far fa-stack-1x fa-square fa-lg" style="color:#dddddd;margin-top:0.5px;margin-right:1px"></i>
        </i>
        
        <i class="fas fa-square-xmark fa-xl text-danger"></i>
    </div>
    
</div>
    
</div>
    
        <div class="p-2" style="background-color:#fefefe;border:2px solid #cccccc">
            
<!------------------------
 
 
 WEBSITE INPUT BAR
 
 ADD THE LINK TO THE CURRENT CHARACTER
 OR IDK, WHATEVER YOU WANT
 
 
 ------------------------->
            
            <div class="row no-gutters">
            
            <div class="col-auto">
                    <i class="fas fa-lock fa-sm text-success mr-1"></i>
            <span class="faded">https://</span> website.com
            </div>
            
            <div class="col text-right">
                
<!------------------------
 
 
 FAVOURITE BUTTON THAT ACTUALLY WORKS
 
 (wont show up in the editor)
 
 
 ------------------------->
                
<a href="#" data-toggle="th-favorite">
                
                
                <i class="favorite toggle-favorite far fa-star fa-fw tooltipster"
                title="favourite?"></i>
                
                <i class="unfavorite toggle-favorite fas fa-star fa-fw tooltipster text-primary"
                title="unfavourite?"></i></a>
                
            </div>
            
            </div>
            
        </div>
        
    </div>
    
</div>

<!------------------------
 
 
 INFO PART THINGY
 
 
 ------------------------->

<div class="order-lg-1 order-2 col-lg-8 p-2">

    <div class="p-3" style="background-color:#dddddd;border:2px solid #aaaaaa;color:#444444;">
        
<!------------------------
 
 
 NAV BUTTONS
 
 
 ------------------------->
        
<div class="row no-gutters justify-content-center nav nav-tabs" style="border-bottom:none">
    
<a class="btn btn-outline-warning m-1 col px-4 col active" href="#aboutWEB" data-toggle="tab" style="mix-blend-mode:luminosity;border:1.5px solid #999999;color:#4e464e">ABOUT</a>

<a class="btn btn-outline-warning m-1 col px-4 col" href="#designWEB" data-toggle="tab" style="mix-blend-mode:luminosity;border:1.5px solid #999999;color:#4e464e">DESIGN</a>

<a class="btn btn-outline-warning m-1 col px-4 col" href="#relationWEB" data-toggle="tab" style="mix-blend-mode:luminosity;border:1.5px solid #999999;color:#4e464e">RELATIONSHIPS</a>

    
</div>

        <div class="p-4 mt-3 overflow-auto" style="background-color:#fefefe;border:2px solid #cccccc;height:400px">
            
<div class="tab-content">
    
<!------------------------
 
 
 ABOUT PART
 
 
 ------------------------->
    
    <div class="tab-pane fade active show" id="aboutWEB">
        
<p>
    
<span style="background-color:#dddddd;font-size:20px;" class="text-uppercase p-1 px-2">l</span>

orem 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>

<hr style="border-top:1px dotted #aaaaaa;margin-top:11px">
        
        <div class="row no-gutters mx-3">
            
    <div class="col-sm-6 px-2 mb-3">
        
        <p style="letter-spacing:5px" class="text-center text-lowercase mb-1">intelligence</p>
        
        <div class="progress" style="background-color:#fefefe;border:2px solid #aaaaaa"> <div class="progress-bar" style="width:50%;border-right:2px solid #aaaaaa;background-color:#cccccc"> </div> </div>
        
    </div>
    <div class="col-sm-6 px-2 mb-3">
        
        <p style="letter-spacing:5px" class="text-center text-lowercase mb-1">confidence</p>
        
        <div class="progress" style="background-color:#fefefe;border:2px solid #aaaaaa"> <div class="progress-bar" style="width:50%;border-right:2px solid #aaaaaa;background-color:#cccccc"> </div> </div>
        
    </div>
    
    <div class="col-sm-6 px-2 mb-3">
        
        <p style="letter-spacing:5px" class="text-center text-lowercase mb-1">humour</p>
        
        <div class="progress" style="background-color:#fefefe;border:2px solid #aaaaaa"> <div class="progress-bar" style="width:50%;border-right:2px solid #aaaaaa;background-color:#cccccc"> </div> </div>
        
    </div>
    <div class="col-sm-6 px-2 mb-3">
        
        <p style="letter-spacing:5px" class="text-center text-lowercase mb-1">charisma</p>
        
        <div class="progress" style="background-color:#fefefe;border:2px solid #aaaaaa"> <div class="progress-bar" style="width:50%;border-right:2px solid #aaaaaa;background-color:#cccccc"> </div> </div>
        
    </div>

    <div class="col-sm-6 px-2 mb-3">
        
        <p style="letter-spacing:5px" class="text-center text-lowercase mb-1">kindness</p>
        
        <div class="progress" style="background-color:#fefefe;border:2px solid #aaaaaa"> <div class="progress-bar" style="width:50%;border-right:2px solid #aaaaaa;background-color:#cccccc"> </div> </div>
        
    </div>
    <div class="col-sm-6 px-2 mb-3">
        
        <p style="letter-spacing:5px" class="text-center text-lowercase mb-1">patience</p>
        
        <div class="progress" style="background-color:#fefefe;border:2px solid #aaaaaa"> <div class="progress-bar" style="width:50%;border-right:2px solid #aaaaaa;background-color:#cccccc"> </div> </div>
        
    </div>

<!--------ADD/DELETE ABOVE THIS LINE-------->

            
        </div>
        
    </div>
    
<!------------------------
 
 
 DESIGN & TRIVIA PART
 
 
 ------------------------->
    
    <div class="tab-pane fade show" id="designWEB">
        
        
        <div class="row no-gutters mx-4">
            
<!------------------------
 
 
 DESIGN NOTES
 
 
 ------------------------->
            
<div class="col-lg-6">
    
    <p style="font-size:20px" class="text-uppercase">Design Notes</p>

<p class="my-2">
    
    <i class="fas fa-chevron-right"></i> content
<br>
    <i class="fas fa-chevron-right"></i> content
<br>
    <i class="fas fa-chevron-right"></i> content
<br>
    <i class="fas fa-chevron-right"></i> content
<br>
    
<!--------ADD/DELETE ABOVE THIS LINE-------->
    
</p>
        

</div>

<!------------------------
 
 
 TRIVIA
 
 
 ------------------------->

<div class="col-lg-6 pl-lg-5">
    
    <p style="font-size:20px" class="text-uppercase">TRIVIA</p>

<p class="my-2">
    
    <i class="fas fa-chevron-right"></i> content
<br>
    <i class="fas fa-chevron-right"></i> content
<br>
    <i class="fas fa-chevron-right"></i> content
<br>
    <i class="fas fa-chevron-right"></i> content
<br>

<!--------ADD/DELETE ABOVE THIS LINE-------->
    
</p>
        

</div>

            
        </div>
        
        
<hr style="border-top:1px dotted #aaaaaa;margin-top:11px">

<!------------------------
 
 
 PALETTE
 
 
 ------------------------->
    
<div class="p-1 mb-3" style="background-color:#dddddd">
    
    <p style="font-size:20px" class="text-uppercase text-center">Palette</p>

    
    <div class="row no-gutters justify-content-center mt-2">
        
        <div class="px-4 p-3 m-1 rounded tootlipster" data-toggle="tooltip" target="_BLANK" title="#HEXCODE" style="background-color:#999999"></div>
        
        <div class="px-4 p-3 m-1 rounded tootlipster" data-toggle="tooltip" target="_BLANK" title="#HEXCODE" style="background-color:#999999"></div>
        
        <div class="px-4 p-3 m-1 rounded tootlipster" data-toggle="tooltip" target="_BLANK" title="#HEXCODE" style="background-color:#999999"></div>
        
        <div class="px-4 p-3 m-1 rounded tootlipster" data-toggle="tooltip" target="_BLANK" title="#HEXCODE" style="background-color:#999999"></div>
        
        <div class="px-4 p-3 m-1 rounded tootlipster" data-toggle="tooltip" target="_BLANK" title="#HEXCODE" style="background-color:#999999"></div>

<!--------ADD/DELETE ABOVE THIS LINE-------->


    </div>
    
</div>

<!------------------------
 
 
 REFERENCE SHEET
 
 
 ------------------------->
        
        
        <div class="text-center">
            
    <p style="font-size:20px" class="text-uppercase mb-1">Reference sheet</p>
            
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/70529097_hxk9q6ZIYw0arx4.png" class="img-thumbnail" style="border:2px solid #cccccc;background-color:#fefefe;">
            
        </div>
        
    </div>
    
<!------------------------
 
 
 RELATIONSHIPS PART
 
 
 ------------------------->
    
    <div class="tab-pane fade show" id="relationWEB">
        
<!------------------------
 
 
 RELATIONSHIP 1
 
 
 ------------------------->
        
<div class="row no-gutters mb-3 mx-lg-0 mx-sm-4 mx-2">
    
<!------------------------
 
 
 IMAGE
 
 
 ------------------------->
    
    <div class="col-lg-4 text-center px-lg-0 px-5 mx-auto" style="max-width:300px">
        
        <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" class="rounded img-thumbnail" style="background-color:#fefefe;border: 2px solid #bbbbbb;">

        
    </div>
    
<!------------------------
 
 
 CHARACTER LINK & RELATIONSHIP INFO
 
 
 ------------------------->
    
    <div class="col-lg-8 px-lg-4 mt-lg-0 mt-2">
        
        <div class="row no-gutters">
            
            <div class="col-auto" style="font-size:20px">
                
                <a href="CHARACTER LINK">
                CHARACTER
                </a>
                
                </div>
            
            <div class="col mx-2 mt-2"> <hr style="border-top:1px dotted #aaaaaa;margin-top:11px"> </div>
            
            <div class="col-auto" style="font-size:10px;margin-top:11px">relationship</div>
            
        </div>
        
        <p style="max-height:107px;overflow:auto;text-align:justify">
            
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>

<hr style="border-top:1px dotted #aaaaaa;margin-top:11px">

<!------------------------
 
 
 RELATIONSHIP 2
 
 
 ------------------------->

<div class="row no-gutters mb-3 mx-lg-0 mx-sm-4 mx-2">
    
<!------------------------
 
 
 IMAGE
 
 
 ------------------------->
    
    <div class="col-lg-4 order-lg-2 text-center px-lg-0 px-5 mx-auto" style="max-width:300px">
        
        <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" class="rounded img-thumbnail" style="background-color:#fefefe;border: 2px solid #bbbbbb;">

        
    </div>
    
<!------------------------
 
 
 CHARACTER LINK & RELATIONSHIP INFO
 
 
 ------------------------->
    
    <div class="col-lg-8 order-lg-1 pr-lg-4 mt-lg-0 mt-2">
        
        <div class="row no-gutters">
            
            <div class="col-auto order-lg-3 order-1" style="font-size:20px">
                
                
                <a href="CHARACTER LINK">
                CHARACTER
                </a>
                
                
            </div>
            
            <div class="col mx-2 mt-2 order-2"> <hr style="border-top:1px dotted #aaaaaa;margin-top:11px"> </div>
            
            <div class="col-auto order-lg-1 order-3" style="font-size:10px;margin-top:11px">relationship</div>
            
        </div>
        
        <p style="max-height:107px;overflow:auto;text-align:justify">
            
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>

<hr style="border-top:1px dotted #aaaaaa;margin-top:11px">

<!------------------------
 
 
 RELATIONSHIP 3
 
 
 ------------------------->

<div class="row no-gutters mb-3 mx-lg-0 mx-sm-4 mx-2">
    
<!------------------------
 
 
 IMAGE
 
 
 ------------------------->
    
    <div class="col-lg-4 text-center px-lg-0 px-5 mx-auto" style="max-width:300px">
        
        <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" class="rounded img-thumbnail" style="background-color:#fefefe;border: 2px solid #bbbbbb;">

        
    </div>
    
<!------------------------
 
 
 CHARACTER LINK & RELATIONSHIP INFO
 
 
 ------------------------->
    
    <div class="col-lg-8 px-lg-4 mt-lg-0 mt-2">
        
        <div class="row no-gutters">
            
            <div class="col-auto" style="font-size:20px">
                
                <a href="CHARACTER LINK">
                CHARACTER
                </a>
                
                </div>
            
            <div class="col mx-2 mt-2"> <hr style="border-top:1px dotted #aaaaaa;margin-top:11px"> </div>
            
            <div class="col-auto" style="font-size:10px;margin-top:11px">relationship</div>
            
        </div>
        
        <p style="max-height:107px;overflow:auto;text-align:justify">
            
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/DELETE ABOVE THIS LINE-------->

        
    </div>

    
</div>
            
        </div>


<hr style="border-top:1px dotted #aaaaaa;margin-top:11px">




</div>
</div>

<!------------------------
 
 
 SIDE BAR THINGY
 
 
 ------------------------->

<div class="order-lg-2 order-1 col-lg-4 p-2">
    
    <div class="p-3 overflow-auto" style="background-color:#dddddd;border:2px solid #aaaaaa;color:#444444;height:525px">
        
<!------------------------
 
 
 ICON
 
 
 ------------------------->
        
        <div class="mx-auto" style="max-width:300px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" class="rounded img-thumbnail" style="background-color:#fefefe;border: 2px solid #bbbbbb;">
        </div>


<p style="font-size:35px;letter-spacing:2px" align="center">NAME</p>

<!------------------------
 
 
 BASIC INFO THINGIES
 
 remember, you can always delete/edit
 the ones you dont want to answer :)
 
 
 ------------------------->

<div class="row no-gutters">
    
    <div class="col-6 text-uppercase">AGE:</div>
    <div class="col-6 text-lowercase text-right">content</div>
    
    <div class="col-6 text-uppercase">BIRTHDAY:</div>
    <div class="col-6 text-lowercase text-right">content</div>
    
    <div class="col-6 text-uppercase">SPECIES:</div>
    <div class="col-6 text-lowercase text-right">content</div>
    
    <div class="col-6 text-uppercase">GENDER:</div>
    <div class="col-6 text-lowercase text-right">content</div>

    <div class="col-6 text-uppercase">SEXUALITY:</div>
    <div class="col-6 text-lowercase text-right">content</div>
    
    <div class="col-6 text-uppercase">PRONOUNS:</div>
    <div class="col-6 text-lowercase text-right">content</div>
    
<!--------ADD/DELETE ABOVE THIS LINE-------->
    
</div>

    </div>
    
</div>
        
<div class="col-12 order-4 text-right">
    

<div class="col-auto"><a href="https://toyhou.se/clownii" class="far fa-star text-primary"></i></a></div>


</div>

        
    </div>
    
    
    
</div>



<!------------------------
 
 
 END OF THE CODE
 
 silly bingus >:)
 
 
 ------------------------->