Simple Animal Jam Layout

Tags: animaljam, games, nostalgia, simple, rounded

Description:

Figured i'd share the silly little Animal Jam layout i made : ) Mostly inspired by Play Wild. It's not perfect. External image links may eventually not work anymore, but the filegarden ones should stay. Customize / edit to your hearts content <3

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Ducky~☆ (https://layouts.spacehey.com/layout?id=100882) -->

<style>
/* SHORT STACK FONT - I couldn't figure out how to import the animal jam font…but this one that is vaguely similar. */
@import url('https://fonts.googleapis.com/css2?family=Short+Stack');

/* CUSTOM LOGO, MADE BY ME/FUNNYANIMAL */
.logo {
content:url("https://duckysden.neocities.org/images/spacehey-AJlogo.png");
}

BODY {
font-family: "Short Stack", comic sans ms, arial;
font-size: 20px;
background-image: url(https://images.squarespace-cdn.com/content/v1/5737ad2a1d07c093e2787063/1673742874230-1Z0B78H2HHZZ9T44491B/infinite%2Bpattern.png?format=2500w); fixed;
cursor: url('https://cdn.custom-cursor.com/db/9838/32/animal-jam-peck-and-brush-cursor.png'), default;
}

/* BANNER IMAGE */
main:before {
    width: 100%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
    height: 125px ;
    display: block;
    content: "";
    background-image: url('https://images.squarespace-cdn.com/content/v1/5737ad2a1d07c093e2787063/1673744254230-M5TGTLMUO9T76MVN3VLO/AJ%2BShop%2BPage.png');
    background-position: center center;
    background-size: cover;
}

nav .top, nav .links {
background-color: #a1cb00;
border-radius: 20px;
border: 5px solid #41a007;
box-shadow: inset 2px 3px 5px #;
margin: 1em 0;
}

nav .links {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-style: italic;
}

nav .links li::after {
display:;
}

main {
background-color: #fbf1c1;
border-radius: 20px;
border: 5px solid #c89a42;
margin: 1em 0;
padding: .5em;
opacity: .9;
}

/* CURSOR */
.hover-container {
cursor: url('https://cdn.custom-cursor.com/db/9837/32/animal-jam-peck-and-brush-pointer.png'), default;
}

.profile h1 {
color: #5b3f2e;
text-shadow: 1px 1px 2px #c89a42;
font-size: 25px;
}

.profile .profile-info {
border-radius: 20px;
border: 3px solid #c89a42;
text-shadow: 1px 1px 2px #c89a42;
color: #5b3f2e;
}

.profile .general-about {
color: #5b3f2e;
text-shadow: 1px 1px 2px #c89a42;
}

.profile .blog-preview,
.profile .mood {
color: #5b3f2e;
}

.profile .profile-pic img{
border-radius: 20px;
box-shadow: 1px 1px 2px #;
opacity: 1;
}

.profile .contact .heading,
.profile .table-section .heading {
color: #5b3f2e;
background-color: #a1cb00;
border-radius: 17px 17px 0 0;
box-shadow: inset 2px 3px 5px #;
text-align: center;
padding: .5em;
font-size: 15px;
}

.profile .table-section,
.profile .contact,
.profile .url-info {
border-radius: 20px;
border: 3px solid #c89a42;
box-shadow: inset 2px 3px 5px #;
text-shadow: 1px 1px 2px #c89a42;
color: #5b3f2e;
}

table.details-table td {
background-color: transparent !important;
color: #5b3f2e !important;
}

.profile .blurbs .heading,
.profile .friends .heading{
color: #5b3f2e;
background-color: #a1cb00;
border-radius: 17px 17px 0 0;
box-shadow: inset 2px 3px 5px #;
text-align: center;
padding: .5em;
font-size: 15px;
}

.profile .blurbs,
.profile .friends {
border-radius: 20px;
border: 3px solid #c89a42;
box-shadow: inset 2px 3px 5px #;
text-shadow: 1px 1px 2px #c89a42;
color: #5b3f2e;
}

.profile .friends {
text-align: center;
}

.profile .friends-grid .person p {
color: #5b3f2e;
}

.profile .blurbs .section h4 {
color: #5b3f2e;
padding: .5em;
}

.profile .comments-table {
background-color: #f9cd77;
border-radius: 20px;
border: 3px solid #c89a42;
box-shadow: inset 2px 3px 5px #;
color: #5b3f2e;
}

.profile .comments-table td {
background-color: transparent;
}

.profile .comments-table .comment-replies {
background-color: #f9cd77;
border-radius: 20px;
border: 3px solid #c89a42;
box-shadow: inset 2px 3px 5px #;
color: #5b3f2e;
}

.comments-table img,
.person img {
border-radius: 20px; /*THIS MAKES THE PROFILE PICS IN YOUR FRIENDS LIST ROUNDED*/
box-shadow: 1px 1px 2px #;
}

footer {
background-color: #f9cd77;
border-radius: 20px;
border: 5px solid #c89a42;
box-shadow: inset 2px 3px 5px #;
color: #5b3f2e;
}

.count {
color: #5b3f2e;
}

/*LINK STUFF*/
a{
color: #f9a300;
text-shadow: 1px 1px 2px #c89a42;
}

a:visited {
color: #f9a300;
text-shadow: 1px 1px 2px #c89a42;
}

a:hover {
color: #5b3f2e;
}

a:active {
color: #f9a300;
text-shadow: 1px 1px 2px #c89a42;
}

nav .links a:hover{
text-decoration: underline;
color: #f9a300;
}

/* CONTACTING ICONS */
.contact .inner a img {
	font-size: 0;
}
.contact .inner a img:before {
	font-size: 1em;
	display: block;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
    /* Add to Friends */
    content: url('https://file.garden/Zcm9kDwUoz3IMPhy/storage/buddy.png') !important;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
    /* Add to Favorites */
    content:url('https://file.garden/Zcm9kDwUoz3IMPhy/storage/trophy.png') !important;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
    /* Send Message */
    content:url('https://file.garden/Zcm9kDwUoz3IMPhy/storage/message.png')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
    /* Forward to Friend */
    content:url('https://images.squarespace-cdn.com/content/v1/5737ad2a1d07c093e2787063/1496706442644-3LBMWXEMXQNIA8DZOUCI/unnamed-1.gif?format=2500w')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
    /* Instant Message */
    content:url('https://images.squarespace-cdn.com/content/v1/5737ad2a1d07c093e2787063/1489177061286-3DMSJJ5EPGAS2DQ6YQPB/emote+icon.png?format=2500w')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
    /* Block User */
    content:url('https://file.garden/Zcm9kDwUoz3IMPhy/storage/phantom.png')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
    /* Add to Group */
    content:url('https://file.garden/Zcm9kDwUoz3IMPhy/storage/party.png')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
    /* Report Profile */
    content:url('https://file.garden/Zcm9kDwUoz3IMPhy/storage/safety.png')
}
</style>

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 10 of 10 comments ( View all | Add Comment )

fred stardurst	1729552392 USING!! Report Comment
Son Of Rage And Love	1722457040 THIS IS SO CUTEEEEEE!!! USING <3333 Report Comment
SOD☆!!! [AUTOPLAY] 🏳️‍⚧️	1717327022 Hey!! I was wondering what the code for the scaling and images on the contacting area was? I'll give credit for it ofc!!! I just rly like it :> /nfta Report Comment Hello! The code below can be used to change the icons by replacing "IMGLINK" to links to your own images! Credit is not needed, i didn't come up with the code /* CONTACTING ICONS / .contact .inner a img { font-size: 0; } .contact .inner a img:before { font-size: 1em; display: block; } .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before { / Add to Friends / content: url('IMGLINK') !important; } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { / Add to Favorites / content:url('IMGLINK') !important; } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { / Send Message / content:url('IMGLINK') } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { / Forward to Friend / content:url('IMGLINK') } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { / Instant Message / content:url('IMGLINK') } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { / Block User / content:url('IMGLINK') } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { / Add to Group / content:url('IMGLINK') } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { / Report Profile / content:url('IMGLINK') } by Ducky~☆; 1718478190; Report TYSVM!!! WILL CREDIT ,<3 by SOD☆!!! [AUTOPLAY] 🏳️‍⚧️*; 1718495314; Report
isaac !!	1717287841 THIS IS SO CUTEEE OMGMGGG Report Comment
Cryia;	1714395437 This is soo cute :< S2 Report Comment
zachariah	1709776931 sooo cutee !!!! currently using x3 Report Comment
lilgutz	1709679510 animal jam ajhhhhhhh!! Report Comment
smg34phobic :0	1709595566 ANIMAL JAAAAM AAAAA I LUV THIZ >W< Report Comment
Pink kandi	1709575087 I LOVE IT Report Comment
✥.VANITY༺.?	1709569875 No match my themeXC BUT THI SLAYOUT IS SOSOSOS COOL :3 Report Comment Thanks! by Ducky~☆; 1709609277; Report