<!--
This code is INTERMEDIATE to ADVANCED.
Mobile-functional (Not necessarily friendly...)
** DO NOT PROFIT FROM, CLAIM, OR USE MY CODE OFF SITE. DO NOT REMOVE MY CREDIT. You can move it, though.
Thank you for using my code! Consider donating to my ko-fi if you'd like to see more!
https://ko-fi.com/fauxphantom
Ill try to help out with any difficulties that you run into using this code! However, some of my knowledge may be limited, as this was an exercise to learn negative margins :)
Font awesome: https://fontawesome.com/v5/search
Circlejourney: https://th.circlejourney.net/
Pattern resources: https://toyhou.se/~world/86093.resources-hub/characters/folder:2645823
More geocities's gifs and backgrounds: https://gifcities.org/
-->
<div class="hidden-sm-down" style="position:absolute; top:0; bottom:0; left:0; z-index:3; background:#028182; width:100%; margin-left:-400px;"></div>
<div style="position:absolute; top:0; bottom:0; left:0; z-index:3; background:#028182; width:100%;"></div>
<!-- pagedoll -->
<div class="hidden-md-down" style="position:fixed; bottom:0; right:0; z-index:9999;">
<img src="#" style="height:300px;">
</div>
<!--- credit, do not remove; can be moved anywhere visible + accessible. -->
<div style="position:fixed; bottom:0; left:0; z-index:1000;">
<a class="tooltipster" href="https://toyhou.se/23387601.f2u-html-digit" title="this code was made with FIBER!!!!">
<img class="ml-1 mb-1" src="https://web.archive.org/web/20091026153509/http://geocities.com/SiliconValley/Code/2594/a_pc.gif">
</a>
</div>
<!--- end of credit -->
<!--- sidebar icons -->
<div class="mt-5 ml-2 hidden-sm-down text-light" style="position:fixed; top:0; left:0; z-index:5; width:230px; font-family: MS Sans Serif sans-serif; font-style:normal;">
<div class="mt-2 row no-gutters">
<!-- icon -->
<div class="card border-0 text-center align-items-center" style="background:#028182;">
<!-- Reaplce # with URL of return folder. This is usually the folder on your account you can find the character in. -->
<a href="#" class="mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/81498641_zdZDdhXdOjsMloU.png); height:60px; width:60px; background-size:cover;"></a>
<span style="font-family:MS Sans Serif; font-size:14px; width:100px;">Return Home</span>
</div>
<!--
You can hit CTRL+F, and in the top box, put 'CharID', and then hit the +. Type in (or paste) the character ID, then hit "all".
That will quickly replace all "CharID" slots with your character's ID.
-->
<!-- icon -->
<div class="card border-0 text-center align-items-center" style="background:#028182;">
<!-- Reaplce CharID with character id. -->
<a href="https://toyhou.se/CharID./gallery" class="mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/81498908_s6XzPXRfW3I4lvo.png); height:60px; width:60px; background-size:cover;"></a>
<span style="font-family:MS Sans Serif; font-size:14px; width:100px;">Gallery</span>
</div>
<!-- icon -->
<div class="card border-0 text-center align-items-center" style="background:#028182;">
<!-- Reaplce CharID with character id. -->
<a href="https://toyhou.se/CharID./library" class="mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/81498914_SASIAAvivGCsEQm.png); height:60px; width:60px; background-size:cover;"></a>
<span style="font-family:MS Sans Serif; font-size:14px; width:100px;">Library</span>
</div>
<!-- icon -->
<div class="card border-0 text-center align-items-center" style="background:#028182;">
<!-- Reaplce CharID with character id. -->
<a href="https://toyhou.se/CharID./worlds" class="mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/81498918_76MBwyego0BSQuu.png); height:60px; width:60px; background-size:cover;"></a>
<span style="font-family:MS Sans Serif; font-size:14px; width:100px;">Worlds</span>
</div>
<!-- icon -->
<div class="card border-0 text-center align-items-center" style="background:#028182;">
<!-- Reaplce CharID with character id. -->
<a href="https://toyhou.se/CharID./links" class="mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/81498913_kZiJClApYVtYjWw.png); height:60px; width:60px; background-size:cover;"></a>
<span style="font-family:MS Sans Serif; font-size:14px; width:100px;">Links</span>
</div>
<!-- icon -->
<div class="card border-0 text-center align-items-center" style="background:#028182;">
<!-- Reaplce CharID with character id. -->
<a href="https://toyhou.se/CharID./comments" class="mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/81498892_rBLFtcQWcmt3UJC.png); height:60px; width:60px; background-size:cover;"></a>
<span style="font-family:MS Sans Serif; font-size:14px; width:100px;">Comments</span>
</div>
<!-- icon -->
<div class="card border-0 text-center align-items-center" style="background:#028182;">
<!-- Reaplce CharID with character id. -->
<a href="https://toyhou.se/CharID./favorites" class="mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/81499223_RKDg5wY256GrSgM.png); height:60px; width:60px; background-size:cover;"></a>
<span style="font-family:MS Sans Serif; font-size:14px; width:100px;">Favorites</span>
</div>
<!-- icon -->
<div class="card border-0 text-center align-items-center" style="background:#028182;">
<!-- Reaplce CharID with character id. -->
<a href="https://toyhou.se/CharID./ownership" class="mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/81498902_Hmx25guYaV2exZ0.png); height:60px; width:60px; background-size:cover;"></a>
<span style="font-family:MS Sans Serif; font-size:14px; width:100px;">Ownership</span>
</div>
<!-- icon -->
<div class="card border-0 text-center align-items-center" style="background:#028182;">
<!-- Reaplce CharID with character id. -->
<a href="https://toyhou.se/~tickets/create/character/CharID" class="mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/81498906_cxw5x5AfAHOJ7pB.png); height:60px; width:60px; background-size:cover;"></a>
<span style="font-family:MS Sans Serif; font-size:14px; width:100px;">Report</span>
</div>
<!-- icon -->
<div class="card border-0 text-center align-items-center" style="background:#028182;">
<!-- Reaplce CharID with character id. -->
<a href="https://toyhou.se/CharID./block" class="mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/81498915_DoWyWHOSoYGplfA.png); height:60px; width:60px; background-size:cover;"></a>
<span style="font-family:MS Sans Serif; font-size:14px; width:100px;">Block</span>
</div>
<!-- icon -->
<div class="card border-0 text-center align-items-center" style="background:#028182;">
<!-- Replace CharID with character ID. -->
<a href="https://toyhou.se/CharID./control-panel" class="mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/81498903_FeiG4vHAMvymApk.png); height:60px; width:60px; background-size:cover;"></a>
<span style="font-family:MS Sans Serif; font-size:14px; width:100px;">Admin Panel</span>
</div>
</div>
</div>
<!-- end of side bar -->
<div style="margin-top:-180px">
<!-- button panel for tabs! Not visible/necessary on mobile. Can be deleted if your character doesn't have any tabs! -->
<div class="justify-content-center hidden-sm-down" style="max-width:1000px; z-index:5; font-family:'MS Sans Serif' sans-serif; font-style:normal;">
<div class="col-lg-9 ml-md-n5">
<div class="card p-1" style="z-index:5; border-radius:0px; background-color:#c5c5c4; color:#000; border-width:3px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<!-- top border -->
<div class="card border-0 pr-1 pl-1" style="border-radius:0px; background-color:#818081; color:#fefeff">
<div class="row no-gutters justify-content-between align-items-center">
<span style="font-size:14px; font-family:MS Sans Serif;">
Character Tabs
</span>
<div class="row no-gutters m-1">
<div class="card align-items-center mr-n1" style="height:20px; width:20px; border-radius:0px; background-color:#c5c5c4; color:#000; border-width:2px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<i class="fas fa-times"></i>
</div>
</div>
</div>
</div>
<div class="row no-gutters justify-content-center">
<!-- replace 'TabLink' with the link to the tab. You can have as many as you want! -->
<!-- tab button -->
<div class="col-lg-2 col-md-2 px-1">
<a href="TabLink" class="card my-2" style=" border-radius:0px; background-color:#c5c5c4; color:#000; border-width:3px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<span class="text-center" style="font-size:14px; font-family:MS Sans Serif;">
tab name
</span>
</a>
</div>
<!-- end of tab button -->
<!-- tab button -->
<div class="col-lg-2 col-md-2 px-1">
<a href="TabLink" class="card my-2" style=" border-radius:0px; background-color:#c5c5c4; color:#000; border-width:3px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<span class="text-center" style="font-size:14px; font-family:MS Sans Serif;">
tab name
</span>
</a>
</div>
<!-- end of tab button -->
<!-- tab button -->
<div class="col-lg-2 col-md-2 px-1">
<a href="TabLink" class="card my-2" style=" border-radius:0px; background-color:#c5c5c4; color:#000; border-width:3px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<span class="text-center" style="font-size:14px; font-family:MS Sans Serif;">
tab name
</span>
</a>
</div>
<!-- end of tab button -->
<!-- tab button -->
<div class="col-lg-2 col-md-2 px-1">
<a href="TabLink" class="card my-2" style=" border-radius:0px; background-color:#c5c5c4; color:#000; border-width:3px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<span class="text-center" style="font-size:14px; font-family:MS Sans Serif;">
tab name
</span>
</a>
</div>
<!-- end of tab button -->
<!-- tab button -->
<div class="col-lg-2 col-md-2 px-1">
<a href="TabLink" class="card my-2" style=" border-radius:0px; background-color:#c5c5c4; color:#000; border-width:3px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<span class="text-center" style="font-size:14px; font-family:MS Sans Serif;">
tab name
</span>
</a>
</div>
<!-- end of tab button -->
</div>
</div>
</div>
</div>
<!-- end of tabs -->
<div class="col-lg-12 mt-2" style="max-width:1000px; z-index:5; font-family: MS Sans Serif sans-serif; font-style:normal;">
<div class="row no-gutters">
<!-- start of intro -->
<div class="col-lg-5 mt-lg-n1 px-1 py-1">
<div class="card p-1" style=" border-radius:0px; background-color:#c5c5c4; color:#000; border-width:3px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<div class="card border-0 pr-1 pl-1" style="border-radius:0px; background-color:#028080; color:#fefeff">
<div class="row no-gutters justify-content-between align-items-center">
<span style="font-size:13px; font-family:MS Sans Serif;">
AboutMe.Exe
</span>
<div class="m-1">
<div class="card align-items-center mr-n1" style="height:20px; width:20px; border-radius:0px; background-color:#c5c5c4; color:#000; border-width:2px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<i class="fas fa-times"></i>
</div>
</div>
</div>
</div>
<div class="row no-gutters mt-1">
<!--- replace the # with any image URl. -->
<div class="col-md-4 hidden-sm-down order-lg-1 py-1 px-1">
<a class="card tooltipster" style="height:100px; border-radius:0px;
background-image: url(#);
background-size: cover;
background-position: center;
background-repeat:no-repeat;
border-radius:0px; background-color:#c5c5c4; border-width:2px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;"
title="by artist name"
href="ArtistLink">
<!-- be sure to link to the artist's page by pasting their link in 'artistlink'! -->
</a>
</div>
<div class="col-sm-8 order-lg-2 px-1 py-1">
<div class="card p-1" style="border-radius:0px; background-color:#fefeff; border-width:2px; border-bottom-color:#fefeff;border-right-color:#fefeff;border-top-color:#323d40; border-left-color:#323d40; height:100px; overflow:auto;">
<!-- feel free to add or remove any section you want!
The code to add more:
<div class="justify-content-between">
<span style="font-size:13px; font-family:MS Sans Serif; font-weight:bold;">Name:</span>
<span class="font-size:13px; font-family:MS Sans Serif;">Full Name</span>
</div>
-->
<!--- section -->
<div class="justify-content-between">
<span style="font-size:13px; font-family:MS Sans Serif; font-weight:bold;">Name:</span>
<span class="font-size:13px; font-family:MS Sans Serif;">Full Name</span>
</div>
<!--- section end -->
<!--- section -->
<div class="justify-content-between">
<span style="font-size:13px; font-family:MS Sans Serif; font-weight:bold;">Pronouns:</span>
<span class="font-size:13px; font-family:MS Sans Serif;">Pro/nouns</span>
</div>
<!--- section end -->
<!--- section -->
<div class="justify-content-between">
<span style="font-size:13px; font-family:MS Sans Serif; font-weight:bold;">Gender:</span>
<span class="font-size:13px; font-family:MS Sans Serif;">Identity</span>
</div>
<!--- section end -->
<!--- section -->
<div class="justify-content-between">
<span style="font-size:13px; font-family:MS Sans Serif; font-weight:bold;">Age:</span>
<span class="font-size:13px; font-family:MS Sans Serif;">## years</span>
</div>
<!--- section end -->
<!--- section -->
<div class="justify-content-between">
<span style="font-size:13px; font-family:MS Sans Serif; font-weight:bold;">D.O.B.:</span>
<span class="font-size:13px; font-family:MS Sans Serif;">DD/MM/YY</span>
</div>
<!--- section end -->
<!--- section -->
<div class="justify-content-between">
<span style="font-size:13px; font-family:MS Sans Serif; font-weight:bold;">Orientation:</span>
<span class="font-size:13px; font-family:MS Sans Serif;">orientation</span>
</div>
<!--- section end -->
<!--- section -->
<div class="justify-content-between">
<span style="font-size:13px; font-family:MS Sans Serif; font-weight:bold;">Job:</span>
<span class="font-size:13px; font-family:MS Sans Serif;">occupation</span>
</div>
<!--- section end -->
<!--- section -->
<div class="justify-content-between">
<span style="font-size:13px; font-family:MS Sans Serif; font-weight:bold;">Status:</span>
<span class="font-size:13px; font-family:MS Sans Serif;">alive/dead</span>
</div>
<!--- section end -->
<!--- section -->
<div class="justify-content-between">
<span style="font-size:13px; font-family:MS Sans Serif; font-weight:bold;">S.O.:</span>
<span class="font-size:13px; font-family:MS Sans Serif;">S/O</span>
</div>
<!--- section end -->
<!--- add more sections above this line! -->
</div>
</div>
</div>
</div>
<!-- end of intro -->
<!--- start of relationships -->
<div class="col-lg-8 ml-5">
<div class="mt-2 card p-1" style="z-index:7;border-radius:0px; background-color:#c5c5c4; color:#000; border-width:3px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<!-- top border -->
<div class="card border-0 pr-1 pl-1" style="border-radius:0px; background-color:#030381; color:#fefeff">
<div class="row no-gutters justify-content-between align-items-center">
<span style="font-size:14px; font-family:MS Sans Serif;">
MSN Messanger
</span>
<div class="m-1">
<div class="card align-items-center mr-n1" style="height:20px; width:20px; border-radius:0px; background-color:#c5c5c4; color:#000; border-width:2px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<i class="fas fa-times"></i>
</div>
</div>
</div>
</div>
<div class="card" style="border-radius:0px; background-color:#c5c5c4; color:#000; border-width:1px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<div class="justify-content-between">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/81499420_RSBCAI6iFV4Xo17.png" style="height:20px;">
</div>
</div>
<div class="card" style="border-radius:0px; background-color:#c5c5c4; color:#000; border-width:1px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<div class="justify-content-center">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/81499434_KAjYsBO80JAbfnn.png" style="height:40px;">
</div>
</div>
<!--- list of friends -->
<div class="card p-1 mt-1" style="border-radius:0px; background-color:#fefeff; border-width:2px; border-bottom-color:#fefeff;border-right-color:#fefeff;border-top-color:#323d40; border-left-color:#323d40; height:250px; overflow:auto;">
<!--- These nav tabs a little complicated!!
The code to add more:
<li class="col-md-12 mb-1 pl-4" style="font-size:13px; font-family:MS Sans Serif;">
<a class="text-dark" data-toggle="tab"
href="#buddyID">
Char Name/Username
</a>
</li>
Theres two spots to insert more links! Both have been marked with a 'paste above' note! For each tab, be sure to change:
- Character name
- href="#name1" in char tab
- id="#name1" in the BuddyNotes panel!
For each name here, you'll need a corresponding tab on the buddy notes!
-->
<div class="col-lg-12 pl-1">
<span style="font-size:13px; font-family:MS Sans Serif; font-weight:900;">
Contacts Currently Online
</span>
<ul class="nav nav-tabs row border-0" style="width:max;">
<!--- char tab -->
<li class="col-md-12 mb-1 pl-4" style="font-size:13px; font-family:MS Sans Serif; ">
<a class="text-dark" data-toggle="tab"
href="#buddy1">
Char Name/Username
</a>
</li>
<!-- end of char tab -->
<!--- char tab -->
<li class="col-md-12 mb-1 pl-4" style="font-size:13px; font-family:MS Sans Serif;">
<a class="text-dark" data-toggle="tab"
href="#buddy2">
Char Name/Username
</a>
</li>
<!-- end of char tab -->
<!-- add more online above! -->
<li class="col-md-12">
<span style="font-size:13px; font-family:MS Sans Serif; font-weight:900;">
Contacts Not Online
</span>
</li>
<!--- char tab -->
<li class="col-md-12 mb-1 pl-4" style="font-size:13px; font-family:MS Sans Serif;">
<a class="text-dark" data-toggle="tab"
href="#buddy3">
Char Name/Username
</a>
</li>
<!-- end of char tab -->
<!-- add more 'not online' above here!!-->
</ul>
</div>
</div>
<!--- end of friends list -->
<div class="card" style="border-radius:0px; background-color:#c5c5c4; color:#000; border-width:1px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<div class="justify-content-center">
<div class="card p-1 mt-2 mb-2" style="border-radius:0px; background-color:#fefeff; border-width:2px; border-bottom-color:#fefeff;border-right-color:#fefeff;border-top-color:#323d40; border-left-color:#323d40;">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/81499421_16njCanfA9L6Xhy.png" style="height:25px;">
</div>
</div>
</div>
<div class="card" style="border-radius:0px; background-color:#c5c5c4; color:#000; border-width:1px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<div class="row no-gutters align-items-center">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/81499437_KzNF3g7a5jrHjKO.png" style="height:15px;">
<!-- enter number of online buddies here -->
<span class="ml-1 mr-1" style="font-size:13px; font-family:MS Sans Serif;">
10
</span>
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/81499423_4gnktN4RiIF7rzK.png" style="height:15px;">
</div>
</div>
</div>
</div>
<!--- end of relationships -->
</div>
<!-- end of intro -->
<!-- start of history/personality -->
<div class="col-lg-7 col-md-12 mt-2 px-1 py-1 ml-lg-n4">
<div class="card p-1" style="border-radius:0px; background-color:#c5c5c4; color:#000; border-width:3px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<div class="card border-0 pr-1 pl-1" style="border-radius:0px; background-color:#818081; color:#fefeff">
<div class="row no-gutters justify-content-between align-items-center">
<span style="font-size:13px; font-family:MS Sans Serif;">
Microsoft Internet Explorer
</span>
<div class="m-1">
<div class="card align-items-center mr-n1" style="height:20px; width:20px; border-radius:0px; background-color:#c5c5c4; color:#000; border-width:2px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<i class="fas fa-times"></i>
</div>
</div>
</div>
</div>
<div class="card" style="border-radius:0px; background-color:#c5c5c4; color:#000; border-width:1px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<div class="justify-content-between">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/81499420_RSBCAI6iFV4Xo17.png" style="height:20px;">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/81499446_VoqeJHUgfBg47tI.png" style="height:20px;">
</div>
</div>
<div class="card" style="border-radius:0px; background-color:#c5c5c4; color:#000; border-width:1px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/81499444_0Dzb0GlCbJ70u7B.png">
</div>
<div class="card" style="border-radius:0px; background-color:#c5c5c4; color:#000; border-width:1px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<div class="justify-content-between">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/81499425_GcnwCQKeLEcdXIp.png" style="height:20px;">
<div class="card justify-content-center" style="border-radius:0px; background-color:#fefeff; border-width:2px; border-bottom-color:#fefeff;border-right-color:#fefeff;border-top-color:#323d40; border-left-color:#323d40; width:100%;">
<!--- adress can be changed to wahtever you want! IF you want to keep it in the geocities theme, old geocities URL's end with /[pagename/username]/[4 digit code] -->
<span class="ml-1" style="font-size:10px; font-weight:bold;">
http://www. geocities .com/pagename/1763/
</span>
</div>
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/81499442_Jggslog80qn5Om4.png" style="height:20px;">
</div>
</div>
<!--- written content -->
<!-- delete 'background-image url for a solid color background!
Background-size: 200px;
the 200px can be changed to contain, center, left, right, auto, or another size entirely depending on what you want!
'center' will make one image fill the screen.
-->
<div class="card mt-1" style="border-radius:0px; background-color:#fefeff;
background-image: url(https://64.media.tumblr.com/b55e414642dc5944857514ceb2b7b004/7b100907ad94189e-27/s400x600/6db6e3f45524a91362cbac7ef37a1c1e3dcf734e.gif);
background-size: 200px;
background-position: center;
border-width:2px; border-bottom-color:#fefeff;border-right-color:#fefeff;border-top-color:#323d40; border-left-color:#323d40; height:340px; overflow:auto;">
<!--- i based this on an old geocities page! If you want to make your own, absolutely go wild and feel free to! I reccomend you have at least a little coding knowledge if you want to make one, though :)
If you do want to make one, I recommend making it more llegible than old geocities pages! Just for the sake of people's eyes lol; but your call!
***** PLEASE remember to put a content wanting on your character if there is eyestrain or flashy colors!!
Also, you can google 'geocities background tiles' for more old-web type backgrounds, or find them here!
https://gifcities.org/
Feel free to keep this layout and change the images/background/colors, too! Be as creative as you want! This uses all custom colors.
-->
<div class="p-1 mb-2">
<div class="row no-gutters justify-content-center">
<span style="font-weight:bold; color:#fff; font-family:'tahoma'; font-size:36px;">
<!-- star gif left -->
<img src="https://web.archive.org/web/20090831063629/http://www.geocities.com/dircearwenminerva1987/starsanim.gif" style="height:50px;">
CHARACTER NAME
<!-- star gift right -->
<img src="https://web.archive.org/web/20090831063629/http://www.geocities.com/dircearwenminerva1987/starsanim.gif" style="height:50px;">
</span>
</div>
<hr style="background-color:#fff; border-width:2px;">
<div class="justify-content-center">
<!--- space dog -->
<img src="https://web.archive.org/web/20090829012411/http://geocities.com/odriscolll/spacedog.gif" style="height:70px; margin-top:-10px;">
<!--- planet -->
<img src="https://web.archive.org/web/20090805151220/http://www.geocities.com/bdlew_98/space.gif" style="height:80px; margin-top:-10px;">
</div>
<div class="justify-content-center">
<span class="text-center" style="color:#fff; font-family:'tahoma'; font-size:14px;">
IC intro for your character goes here! Or a quote, or whatever you want, but keep it short probably.... Or don't lol. Box scrolls.
</span>
</div>
</div>
<div class="card w-100 pb-1" style="border-radius:0px; border-left-width:0px; border-right-width:0; border-top-color:#fff; border-bottom-color:#fff; border-top-width:2px; border-bottom-width:2px; background-color:#000;">
<div class="row no-gutters justify-content-center">
<!--- feel free to add more personality bars! -->
<!--- personality bar --->
<div class="col-lg-6 p-1">
<div class="justify-content-between">
<span style="font-family:tahoma; font-size:12px; color:#fff;">
Introverted
</span>
<span style="font-family:tahoma; font-size:12px; color:#fff">
Extroverted
</span>
</div>
<div class="progress rounded-0" style="background-color:#8830ff;">
<div class="progress-bar" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="width:
85%;
height:7px; background-color:#ffc928">
</div>
</div>
</div>
<!--- end of personality bar -->
<!--- personality bar --->
<div class="col-lg-6 p-1">
<div class="justify-content-between">
<span style="font-family:tahoma; font-size:12px; color:#fff;">
Friendly
</span>
<span style="font-family:tahoma; font-size:12px; color:#fff">
Reserved
</span>
</div>
<div class="progress rounded-0" style="background-color:#8830ff;">
<div class="progress-bar" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="width:
85%;
height:7px; background-color:#ffc928">
</div>
</div>
</div>
<!--- end of personality bar -->
<!--- personality bar --->
<div class="col-lg-6 p-1">
<div class="justify-content-between">
<span style="font-family:tahoma; font-size:12px; color:#fff;">
Polite
</span>
<span style="font-family:tahoma; font-size:12px; color:#fff">
Blunt
</span>
</div>
<div class="progress rounded-0" style="background-color:#8830ff;">
<div class="progress-bar" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="width:
85%;
height:7px; background-color:#ffc928">
</div>
</div>
</div>
<!--- end of personality bar -->
<!--- personality bar --->
<div class="col-lg-6 p-1">
<div class="justify-content-between">
<span style="font-family:tahoma; font-size:12px; color:#fff;">
Brave
</span>
<span style="font-family:tahoma; font-size:12px; color:#fff">
Timid
</span>
</div>
<div class="progress rounded-0" style="background-color:#8830ff;">
<div class="progress-bar" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="width:
85%;
height:7px; background-color:#ffc928">
</div>
</div>
</div>
<!--- end of personality bar -->
<!--- personality bar --->
<div class="col-lg-6 p-1">
<div class="justify-content-between">
<span style="font-family:tahoma; font-size:12px; color:#fff;">
Logical
</span>
<span style="font-family:tahoma; font-size:12px; color:#fff">
Irrational
</span>
</div>
<div class="progress rounded-0" style="background-color:#8830ff;">
<div class="progress-bar" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="width:
85%;
height:7px; background-color:#ffc928">
</div>
</div>
</div>
<!--- end of personality bar -->
<!--- personality bar --->
<div class="col-lg-6 p-1">
<div class="justify-content-between">
<span style="font-family:tahoma; font-size:12px; color:#fff;">
Humble
</span>
<span style="font-family:tahoma; font-size:12px; color:#fff">
Arrogant
</span>
</div>
<div class="progress rounded-0" style="background-color:#8830ff;">
<div class="progress-bar" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="width:
85%;
height:7px; background-color:#ffc928">
</div>
</div>
</div>
<!--- end of personality bar -->
<!--- add more personality bars above this line. -->
</div>
</div>
<div class="justify-content-center mt-2">
<div class="card" style="width:300px;">
<!--- replace # with the youtube video ID. (The numbers after 'Watch?v=') -->
<iframe src="https://www.youtube.com/embed/#" style="width:300px; height:auto; border: 2px solid #fff"></iframe>
</div>
</div>
<div class="row no-gutters mt-2 mb-2">
<div class="col-lg-6 px-1 py-1">
<div class="card p-1" style="height:100px; border-radius:0px; border-width:2px; border-color:#b7b7b7; background-color:#000000; color:#e8e7ed">
<span style="font-family:tahoma; font-size:12px; font-weight:bold;">
My Likes!!!
<!-- heart gif -->
<img src="https://web.archive.org/web/20011005155224/http://www.geocities.com:80/ahchooma/heart.GIF" style="height:12px;">
</span>
<div style="height:90px; overflow:auto;">
<!-- start of list -->
<ul class="fa-ul" style="font-size:11px;font-family:tahoma">
<li><span class="fa-li"><img src="https://web.archive.org/web/20091026232923/http://www.geocities.com/Tokyo/Market/7773/star.gif"></span>
Item!!!
</li>
<li><span class="fa-li"><img src="https://web.archive.org/web/20091026232923/http://www.geocities.com/Tokyo/Market/7773/star.gif"></span>
Item!!!
</li>
<li><span class="fa-li"><img src="https://web.archive.org/web/20091026232923/http://www.geocities.com/Tokyo/Market/7773/star.gif"></span>
Item!!!
</li>
<li><span class="fa-li"><img src="https://web.archive.org/web/20091026232923/http://www.geocities.com/Tokyo/Market/7773/star.gif"></span>
Item!!!
</li>
<li><span class="fa-li"><img src="https://web.archive.org/web/20091026232923/http://www.geocities.com/Tokyo/Market/7773/star.gif"></span>
Item!!!
</li>
<!--- add more likes above! --->
</ul>
</div>
</div>
</div>
<div class="col-lg-6 px-1 py-1">
<div class="card p-1" style="height:100px; border-radius:0px; border-width:2px; border-color:#b7b7b7; background-color:#000000; color:#e8e7ed">
<span style="font-family:tahoma; font-size:12px; font-weight:bold;">
My Dislikes!
<!--- sad penguin dude -->
<img src="https://web.archive.org/web/20091027015836/http://geocities.com/pillow_named_rosie/sadpenguin.gif" style="height:12px;">
</span>
<div style="height:90px; overflow:auto;">
<ul class="fa-ul" style="font-size:11px;font-family:tahoma">
<!-- start of list -->
<li><span class="fa-li"><img src="https://web.archive.org/web/20091026232923/http://www.geocities.com/Tokyo/Market/7773/star.gif"></span>
Item!!!
</li>
<li><span class="fa-li"><img src="https://web.archive.org/web/20091026232923/http://www.geocities.com/Tokyo/Market/7773/star.gif"></span>
Item!!!
</li>
<li><span class="fa-li"><img src="https://web.archive.org/web/20091026232923/http://www.geocities.com/Tokyo/Market/7773/star.gif"></span>
Item!!!
</li>
<li><span class="fa-li"><img src="https://web.archive.org/web/20091026232923/http://www.geocities.com/Tokyo/Market/7773/star.gif"></span>
Item!!!
</li>
<li><span class="fa-li"><img src="https://web.archive.org/web/20091026232923/http://www.geocities.com/Tokyo/Market/7773/star.gif"></span>
Item!!!
</li>
<!--- add more dislikes above! --->
</ul>
</div>
</div>
</div>
<div class="col-lg-6 px-1 py-1">
<div class="card p-1" style="height:100px; border-radius:0px; border-width:2px; border-color:#b7b7b7; background-color:#000000; color:#e8e7ed">
<span style="font-family:tahoma; font-size:12px; font-weight:bold;">
Who I Truly Am!
<!--- star spin -->
<img src="https://web.archive.org/web/20091027121217/http://geocities.com/bootlegs66/star.gif" style="height:12px;">
</span>
<div style="height:90px; overflow:auto;">
<p style="font-family:tahoma; font-size:12px;">
Write about their personality here! You can take the headers from "What I believe" if you want! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Malesuada fames ac turpis egestas maecenas pharetra.
</p>
</div>
</div>
</div>
<div class="col-lg-6 px-1 py-1">
<div class="card p-1" style="height:100px; border-radius:0px; border-width:2px; border-color:#b7b7b7; background-color:#000000; color:#e8e7ed">
<span style="font-family:tahoma; font-size:12px; font-weight:bold;">
What I Believe!!
<!--- cross -->
<img src="https://web.archive.org/web/20040403165324/http://www.geocities.com/harrisonm357/image/spincross.gif" style="height:12px;">
</span>
<div style="height:90px; overflow:auto; font-size:12px; font-family:tahoma;">
<!--- start of section -->
<span style="font-weight:bold; font-size:12px; font-family:tahoma; color:#f7b811">
<u>Header!</u>
</span>
<p>
Write about a blief here!!! This doesn't have to be about religion- it can be about their societies laws, their beliefs on right-and-wrong, or whatever really!
</p>
<!--- end of section -->
<!-- start of section -->
<span style="font-weight:bold; font-size:12px; font-family:tahoma; color:#f7b811">
<u>Header!</u>
</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Malesuada fames ac turpis egestas maecenas pharetra.
</p>
<!-- end of section -->
<!-- add more sections above! -->
</div>
</div>
</div>
<div class="col-lg-12 px-1 py-1">
<div class="card p-1" style="height:150px; border-radius:0px; border-width:2px; border-color:#b7b7b7; background-color:#000000; color:#e8e7ed">
<span style="font-family:tahoma; font-size:12px; font-weight:bold;">
My past, my present, and my future...
<!--- book -->
<img src="https://web.archive.org/web/20070206052108/http://br.geocities.com:80/wilmellofranco/livretobook.gif" style="height:12px;">
</span>
<div style="height:140px; overflow:auto;">
<!-- start of section -->
<span style="font-weight:bold; font-size:12px; font-family:tahoma; color:#f7b811">
<u>Header!</u>
</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Malesuada fames ac turpis egestas maecenas pharetra.
</p>
<!-- end of section -->
<!-- start of section -->
<span style="font-weight:bold; font-size:12px; font-family:tahoma; color:#f7b811">
<u>Header!</u>
</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Malesuada fames ac turpis egestas maecenas pharetra.
</p>
<!-- end of section -->
<!-- start of section -->
<span style="font-weight:bold; font-size:12px; font-family:tahoma; color:#f7b811">
<u>Header!</u>
</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Malesuada fames ac turpis egestas maecenas pharetra.
</p>
<!-- end of section -->
<!--- add more sections above -->
</div>
</div>
</div>
</div>
<!-- dont delete this div if you're making your own 'website'! -->
</div>
<!--- end of written content -->
<div class="card" style="border-radius:0px; background-color:#c5c5c4; color:#000; border-width:1px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<div class="justify-content-between">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/81499424_ooYfiSgfB9B8Whp.png" style="height:12px;">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/81499426_Letxkqfs1ABZ1HX.png" style="height:12px;">
</div>
</div>
</div>
<!-- end of history/personality -->
<!-- relationship boxes -->
<div class="col-lg-10 mt-2 ml-md-n5">
<div class="card p-1" style=" border-radius:0px; background-color:#c5c5c4; color:#000; border-width:3px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<div class="card border-0 pr-1 pl-1" style="border-radius:0px; background-color:#818081; color:#fefeff">
<div class="row no-gutters justify-content-between align-items-center">
<span style="font-size:13px; font-family:MS Sans Serif;">
BuddyNotes
</span>
<div class="m-1">
<div class="card align-items-center mr-n1" style="height:20px; width:20px; border-radius:0px; background-color:#c5c5c4; color:#000; border-width:2px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<i class="fas fa-times"></i>
</div>
</div>
</div>
</div>
<div class="tab-content">
<!--- see previous note on "MSN messanger" Tab
Be sure to change the id="buddy1" to their CORRESPONDING href="#buddy1" name, or else it will not work!
Code to add more buddy panels:
<div class="tab-pane fade" id="buddy1">
<div class="row no-gutters mt-1">
<div class="col-md-5 hidden-sm-down order-lg-2 py-1 px-1">
<a class="card tooltipster" style="height:150px; border-radius:0px;
background-image: url(#);
background-size: cover;
background-position: center;
background-repeat:no-repeat;
border-radius:0px; background-color:#c5c5c4; border-width:2px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;"
title="by artist name"
href="ArtistLink">
</a>
</div>
<div class="col-sm-7 order-lg-1 px-1 py-1">
<div class="card p-1" style="border-radius:0px; background-color:#fefeff; border-width:2px; border-bottom-color:#fefeff;border-right-color:#fefeff;border-top-color:#323d40; border-left-color:#323d40; height:150px; overflow:auto;">
<p style="font-size:13px; font-family:MS Sans Serif; font-weight:bold; color:#ff3636">
Relationship: relationship
</p>
<p style="font-size:13px; font-family:MS Sans Serif; color:#000;">
"optional quote"
</p>
<p style="font-size:13px; font-family:MS Sans Serif; color:#000;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<a href="CharLink" class="card my-2" style=" border-radius:0px; background-color:#c5c5c4; color:#000; border-width:3px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<span class="text-center" style="font-size:14px; font-family:MS Sans Serif;">
Character Name
</span>
</a>
</div>
-->
<!--- buddy one -->
<div class="tab-pane fade active show" id="buddy1">
<div class="row no-gutters mt-1">
<!--- replace the # with any image URl. -->
<div class="col-md-5 hidden-sm-down order-lg-2 py-1 px-1">
<a class="card tooltipster" style="height:150px; border-radius:0px;
background-image: url(#);
background-size: cover;
background-position: center;
background-repeat:no-repeat;
border-radius:0px; background-color:#c5c5c4; border-width:2px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;"
title="by artist name"
href="ArtistLink">
<!-- be sure to link to the artist's page by pasting their link in 'artistlink'! -->
</a>
</div>
<div class="col-sm-7 order-lg-1 px-1 py-1">
<div class="card p-1" style="border-radius:0px; background-color:#fefeff; border-width:2px; border-bottom-color:#fefeff;border-right-color:#fefeff;border-top-color:#323d40; border-left-color:#323d40; height:150px; overflow:auto;">
<!--- color can be changed to any hex value!! -->
<p style="font-size:13px; font-family:MS Sans Serif; font-weight:bold; color:#ff3636">
Relationship: ENEMY!!!!
</p>
<p style="font-size:13px; font-family:MS Sans Serif; color:#000;">
"AN ANGRY QUOTE because this buddy SUCKS!!!"
</p>
<p style="font-size:13px; font-family:MS Sans Serif; color:#000;">
Heres some notes on why theyre awful! This box scrolls to let you let out all your frustrastions about how TERRIBLE they are!!!! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<!--- change 'charlink' with the link to your other character's toyhouse! -->
<a href="CharLink" class="card my-2" style=" border-radius:0px; background-color:#c5c5c4; color:#000; border-width:3px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<span class="text-center" style="font-size:14px; font-family:MS Sans Serif;">
Character Name
</span>
</a>
</div>
<!-- end of buddy one -->
<!--- buddy two -->
<div class="tab-pane fade" id="buddy2">
<div class="row no-gutters mt-1">
<!--- replace the # with any image URl. -->
<div class="col-md-5 hidden-sm-down order-lg-2 py-1 px-1">
<a class="card tooltipster" style="height:150px; border-radius:0px;
background-image: url(#);
background-size: cover;
background-position: center;
background-repeat:no-repeat;
border-radius:0px; background-color:#c5c5c4; border-width:2px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;"
title="by artist name"
href="ArtistLink">
<!-- be sure to link to the artist's page by pasting their link in 'artistlink'! -->
</a>
</div>
<div class="col-sm-7 order-lg-1 px-1 py-1">
<div class="card p-1" style="border-radius:0px; background-color:#fefeff; border-width:2px; border-bottom-color:#fefeff;border-right-color:#fefeff;border-top-color:#323d40; border-left-color:#323d40; height:150px; overflow:auto;">
<!--- color can be changed to any hex value!! -->
<p style="font-size:13px; font-family:MS Sans Serif; font-weight:bold; color:#ff3636">
Relationship: friend! :3
</p>
<p style="font-size:13px; font-family:MS Sans Serif; color:#000;">
"A nice note for a nice guy!"
</p>
<p style="font-size:13px; font-family:MS Sans Serif; color:#000;">
Heres some notes on why theyre great!!!! Love them MWA MWA MWA! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<!--- change 'charlink' with the link to your other character's toyhouse! -->
<a href="CharLink" class="card my-2" style=" border-radius:0px; background-color:#c5c5c4; color:#000; border-width:3px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<span class="text-center" style="font-size:14px; font-family:MS Sans Serif;">
Character Name
</span>
</a>
</div>
<!-- end of buddy two -->
<!--- buddy three -->
<div class="tab-pane fade" id="buddy3">
<div class="row no-gutters mt-1">
<!--- replace the # with any image URl. -->
<div class="col-md-5 hidden-sm-down order-lg-2 py-1 px-1">
<a class="card tooltipster" style="height:150px; border-radius:0px;
background-image: url(#);
background-size: cover;
background-position: center;
background-repeat:no-repeat;
border-radius:0px; background-color:#c5c5c4; border-width:2px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;"
title="by artist name"
href="ArtistLink">
<!-- be sure to link to the artist's page by pasting their link in 'artistlink'! -->
</a>
</div>
<div class="col-sm-7 order-lg-1 px-1 py-1">
<div class="card p-1" style="border-radius:0px; background-color:#fefeff; border-width:2px; border-bottom-color:#fefeff;border-right-color:#fefeff;border-top-color:#323d40; border-left-color:#323d40; height:150px; overflow:auto;">
<!--- color can be changed to any hex value!! -->
<p style="font-size:13px; font-family:MS Sans Serif; font-weight:bold; color:#ff3636">
Relationship: Stranger
</p>
<p style="font-size:13px; font-family:MS Sans Serif; color:#000;">
"I have no idea who you are! Why are we friended?"
</p>
<p style="font-size:13px; font-family:MS Sans Serif; color:#000;">
Notes about this really average guy! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<!--- change 'charlink' with the link to your other character's toyhouse! -->
<a href="CharLink" class="card my-2" style=" border-radius:0px; background-color:#c5c5c4; color:#000; border-width:3px; border-top-color:#fefeff;border-left-color:#fefeff;border-right-color:#323d40; border-bottom-color:#323d40;">
<span class="text-center" style="font-size:14px; font-family:MS Sans Serif;">
Character Name
</span>
</a>
</div>
<!-- end of buddy three -->
</div>
</div>
</div>
<!-- end of relationship panel -->
</div>
</div>
</div>
</div>
