Toontown Layout

Tags: cartoon, cute, 2000s, layout

Description:

cartoony layout of the old game ToonTown Online PLEASE READ SOME PARTS IN THE CODE(near the bottom) FOR WHERE TO PUT THINGS!!!!!!!!!!!!!!!!!!!!!!!!!!! Includes: -toony cursor -toontown music -toontown gifs -scrolling messages -spinning pfp

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Zackary (https://layouts.spacehey.com/layout?id=32190) -->

<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(0deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>

<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>

<style>
body {
        background:url(https://media.discordapp.net/attachments/1014737547152330762/1113827854711521300/IMG_0883.webp);
background-attachment: fixed ;
}

/* this is the spacehey logo */
nav img.logo {

}

/* this is the online img*/
.online {content:url('https://cdn.discordapp.com/attachments/1014737547152330762/1113842775008477267/flippy.gif'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; 
}
/* this is color of all the text and links */

a, .profile .friends .person p, p, h2, h3, h4, .count {
  color: rgb(255,255,255)!important;
}
h1{
   border: 0px solid rgb(255,255,255)!important;
   padding: 5px;
   background-color: rgb(255,255,255,0.4)!important;
   color: rgb(255,255,255)!important;
   text-shadow: -2px 2px 3px black!important;
   box-shadow: 0px 0px 10px white!important;
}

/* this is where you edit the search button and the Delete and Reply button */
button{
  background-color: transparent!important;
  border: none;
  color: rgb(255,255,255)!important;
  font-weight: normal;
  text-shadow: -2px 2px 3px black!important;
}
top .button {
  background-color: transparent!important;
  color: rgb(255,255,255)!important;
  text-shadow: -2px 2px 3px black!important; 
}
.general-about {
  border: 0px solid rgb(255,255,255)!important;
  background-color: rgb(255,255,255,0.4)!important;
  color: rgb(255,255,255)!important;
  text-shadow: -2px 2px 3px black!important;
  padding: 12px;
  box-shadow: 0px 0px 10px white!important;
}
.mood {
   background-color: rgb(255,255,255,0.4)!important;
   border: 0px solid rgb(255,255,255)!important;
  padding: 3px;
  margin-bottom: 10px;
  margin-top: 10px;
  color: rgb(255, 255, 255)!important;
  text-shadow: -1px 3px 4px black!important;
  box-shadow: 0px 0px 10px white!important;
}
.url-info, .table-section, .blog-preview, .blurbs, .friends, .profile-info {
  border: 0px solid rgb(255,255,255)!important;
  background-color: rgb(255,255,255,0.4)!important;
  color: rgb(255,255,255)!important;
  text-shadow: -2px 2px 3px black!important;
   box-shadow: 0px 0px 10px white!important;
}
.contact {
  border: 0px solid rgb(255,255,255)!important;
  background-color: rgb(255,255,255,0.4)!important;
  color: rgb(255,255,255)!important;
  text-shadow: -2px 2px 3px black!important;
   box-shadow: 0px 0px 10px white!important;
}
.contact a {
  color: rgb(255,255,255)!important;
}
.contact .inner a img {
font-size: 0;
}

.contact .inner a img:before {
font-size: 1em;
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* Add to Friends */
	content: "+"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: "⭐"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "💬"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: "➡"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: "✉️"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: "🚫"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: "👥"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report User */
	content: "⚠️"
} 
.comments-table td {
   border: ;
}
.table-section td {
  border: 0px solid black;
}
/* line in between comment replies*/
.comment-reply:not(:first-child) {
    border: 1px solid rgb(255, 255, 255);
   box-shadow: 0px 0px 10px white!important;
}
.comment-replies {
    border: 1px solid rgb(255, 255, 255);
   box-shadow: 0px 0px 10px white!important;
}

/* these backgrounds are usually transparent */
nav .top, nav .links {
  background-color: transparent!important;
  color: rgb(255, 255, 255)!important;
  font-weight: bold;
  text-align: center;
  text-shadow: -2px 2px 3px black!important;
}
nav .links a {
  color: rgb(255, 255, 255)!important;
  text-shadow: -2px 2px 3px black!important;
}

main, footer {
  background-color: transparent!important;
}
.friends:not(#comments) {
  margin-bottom: 10px;
}
.comments-table {
  border: 1px solid rgb(255, 255, 255);
  border-spacing: 5px;
   box-shadow: 0px 0px 10px black!important;
}
.general-about {
   overflow: auto;
}
.heading {
  background-color: transparent!important;
}
td {
  background-color: transparent!important;
  border: none!important;
}
.friends-grid {
    display: none;
}
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/lJdWq_YalL4//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://media.discordapp.net/attachments/1014737547152330762/1114388895543599214/flippywave-removebg-preview.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 60px;
    bottom: 0px;
    height: 260px;
    width: 210px;
    z-index: 1000;
    opacity: 1;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>



(put this part in who I want to meet)
<img src="https://cdn.discordapp.com/attachments/1014737547152330762/1113982524364959824/bunnycog.gif"/>


<style>
body { cursor: url('data:image/x-icon;base64,AAACAAEAICACAAAAAAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAgAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAMAAAB8wAAD/sAAB/9gAA//AAAcH0AAEc9AAD/vYAA/5uAAP+DgAB/M4AAfnuAAAB5AAB/fQAAf38AAH9/AAA+PgAAAJwAAH8AAAH+AAAH/AAAH/gAAH/wAAD/wAAA/wAAAHwAAAAAAAAAAAAAA////x////4P///8B///8Af//gAP//AAH//gAB//wAA//4AAf/8AAH//AAA//gAAP/4AAD/+AAA//wAAP/8AAD//AAB//wAAf/8AAH//AAB//4AA//+AAf/+AGP/+AD//+AB//+AA///AAf//gAP//4AP///AP///4P////////8='), auto; }
a:hover {
    cursor: url('data:image/x-icon;base64,AAACAAEAICACAAAAAAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAgAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAMAAAB8wAAD/sAAB/9gAA//AAAcH0AAEc9AAD/vYAA/5uAAP+DgAB/M4AAfnuAAAB5AAB/fQAAf38AAH9/AAA+PgAAAJwAAH8AAAH+AAAH/AAAH/gAAH/wAAD/wAAA/wAAAHwAAAAAAAAAAAAAA////x////4P///8B///8Af//gAP//AAH//gAB//wAA//4AAf/8AAH//AAA//gAAP/4AAD/+AAA//wAAP/8AAD//AAB//wAAf/8AAH//AAB//4AA//+AAf/+AGP/+AD//+AB//+AA///AAf//gAP//4AP///AP///4P////////8='), auto;
</style>


<style>
table.comments-table{
display: block;
height: 400px!important;
overflow-y: scroll;
}
</style>



(gif for movies)
<img src="https://media.tenor.com/pnUtMMt_60cAAAAC/toon-town-toon-town-online.gif"/>

(gif for heroes)
<img src="https://img.wattpad.com/ae759c0b3ebb6f68041f03cf6f0a346559f32e6c/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f4d4e3655644355533933726b31413d3d2d3531343539393032332e313530346533366336326464633262323238393633393133333735302e676966"/>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 6 of 6 comments ( View all | Add Comment )

Nexisia	1720153226 so cute lol Report Comment
Liliy 💙	1688402959 yes omg using Report Comment
pesterchum	1686938467 deff using this Report Comment
Haley Homicide	1686298871 Epic. I luv toontown Report Comment
TGnostic	1686053911 yoink Report Comment 👀 by Zackary; 1686063126; Report