← Back to Layouts
Webkinz

Name: FriendRewind
Author: FriendRewind
Author: hannuhchan
Category: 2000s
Created: August 4, 2026
Everyone's favorite 2000's game
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<!--- (c) Layout by Bellilou (https://spacehey.com/bellilou) -->

<style>

:root{

--logo-blue: ;

--darker-blue: ;

--lighter-blue: ;

--even-lighter-blue:  ;

--lightest-blue: ;

--dark-orange: ;

--light-orange: ;

--even-lighter-orange: ;

--green: ;

}

.container{

  width: 850px !important;

}

body{

  background: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpaperaccess.com%2Ffull%2F3643882.jpg&f=1&nofb=1&ipt=922404ba1891dba740288e058ecdd31581be62dcdc112fad3811693bbf0a5f56&ipo=images');

  background-size: cover;

  background-attachment: fixed;

  font-family: Trebuchet MS;

}

.count{

  color: #493490;

}

a{

  color: #180b66;

}

a:hover{

  text-decoration: none !important;

  color: #916959;

}

main{

  background: #f7fbd0;

  border-style: none solid none solid;

  border-width: 3px;

  border-color: #0122a5;

  font-size: 15px;

  color: #180b66 !important;

  padding-top: 20px;

}

.logo{

  content: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pinclipart.com%2Fpicdir%2Fbig%2F536-5368116_webkinz-logo-png-clipart.png&f=1&nofb=1&ipt=2def512fd186b689984d49dbc72179dc19cda52b6e050caceffe6c45c6cea598&ipo=images');

  width: 140px !important;

  height: 50px !important;

}

nav .top{

  background: linear-gradient(#1c7bf7, #0073ff, #0a49e6 90%);

  border-style: solid;

  border-width: 3px;

  border-radius: 15px 15px 0 0;

  border-color: #0122a5;

  font-size: 15px;

  font-weight: bold;

}

#q{

  background: linear-gradient(#f8e085, #f7fbd0 30%);

  border-style: solid;

  border-width: 3px;

  border-radius: 5px;

  border-color: #0122a5;

  font-family: Trebuchet MS;

  padding: 2px;

}

nav .center button{

  background: linear-gradient(#a670e9, #9951db 10% 80%, #9149a8);

  border-style: solid;

  border-width: 3px;

  border-radius: 5px;

  border-color: #0122a5;

  padding: 3px;

  color: white;

  font-weight: bold;

}

nav .center button:active{

  background: linear-gradient(#9149a8, #9951db 10% 80%, #a670e9);

}

nav .right .logout-form button{

  font-family: Trebuchet MS;

  font-weight: bold;

}

nav .right .logout-form button:hover{

  text-decoration: none;

}

nav .links{

  background: linear-gradient(#7ac656, #78b75d 10% 80%, #5ea82d);

  border-style: none solid solid solid;

  border-width: 3px;

  border-color: #fff #0122a5 #132911 #0122a5;

  padding: 10px;

}

nav .links{

  text-align: center;

}

nav .links a{

  background: linear-gradient(#f3fcc5 80%, #f2de85);

  border-style: solid;

  border-width: 3px;

  border-radius: 5px;

  border-color: #6d983c;

  padding: 5px;

  text-shadow: none;

  color: #180b66;

  font-weight: bold;

}

nav .links a:hover{

  background: linear-gradient(#f2c204, #ffff33 5% 60%, #ffbe22);

}

nav .links li:after{

  display: none;

}

.edit-link{

  display: none;

}

.profile h1{

  text-align: center;

  background: linear-gradient(#fef8db, #fefba8 10%);

  padding-top: 5px;

  border-style: solid solid none solid;

  border-width: 3px;

  border-radius: 5px 5px 0 0;

  border-color: #916959;

  margin-bottom: 0;

}

.profile-pic img{

  border-style: solid;

  border-width: 3px;

  border-radius: 5px;

  border-color: #916959;

}

.general-about{

  background: linear-gradient(#fefba8 95%, #fddf88);

  padding: 10px;

  height: 190px;

  border-style: none solid solid solid;

  border-width: 3px;

  border-radius: 0 0 5px 5px;

  border-color: #916959;

  margin-top: 0;

}

.mood{

  margin: 10px;

  padding: 3px;

  font-weight: bold;

}

.contact .heading{

  background: linear-gradient(#a670e9, #9951db 10% 80%, #9149a8) !important;

  border-style: solid;

  border-width: 3px;

  border-radius: 5px 5px 0 0;

  border-color: #493490;

  color: white;

}

.contact{

  border: none !important;

}

.contact .inner{

  background: linear-gradient(#fef8db, #fefba8 10% 95%, #fddf88);

  padding: 3px;

  border-style: none solid solid solid!important;

  border-width: 3px !important;

  border-radius: 0 0 5px 5px;

  border-color: #916959 !important;

}

.contact img.icon{

  display: none;

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before{

/* add to friends */

  content: " ";

  display: inline-block;

  width: 25px;

  height: 25px;

  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn2.steamgriddb.com%2Ficon_thumb%2Fe0a9b8565cb497d114bdfbd7c5049760.png&f=1&nofb=1&ipt=1608a053576799e22e2652ace138863a94a67fa6333e17da06b66b2ea5b9282d&ipo=images');

  background-size: 100% 100%;

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before{

/* add to favorites */

  content: " ";

  display: inline-block;

  width: 25px;

  height: 25px;

  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fassets.webkinz.com%2Fswf%2Fitem%2F265%2Ficon.png&f=1&nofb=1&ipt=a033128c3e6777c4bac788bba4ab2760357cb5501353f8c8af299a21380a1852&ipo=images');

  background-size: 100% 100%;

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before{

/* send message */

  content: " ";

  display: inline-block;

  width: 25px;

  height: 25px;

  background-image: url('https://static.wikitide.net/webkinzguidewiki/archive/6/64/20230207004722%21Cockerspanielavatar.png');

  background-size: 100% 100%;

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before{

/* forward to friend */

  content: " ";

  display: inline-block;

  width: 25px;

  height: 25px;

  background-image: url('https://static.wikitide.net/webkinzguidewiki/0/0f/Dancingzingoz.png');

  background-size: 100% 100%;

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before{

/* instant message */

  content: " ";

  display: inline-block;

  width: 25px;

  height: 25px;

  background-image: url('https://static.wikitide.net/webkinzguidewiki/b/b5/Wheelofwowshirt.png');

  background-size: 100% 100%;

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before{

/* block user */

  content: " ";

  display: inline-block;

  width: 25px;

  height: 25px;

  background-image: url('https://static.wikitide.net/webkinzguidewiki/c/cc/Webkinz_Diamond.png');

  background-size: 100% 100%;

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before{

/* add to group */

  content: " ";

  display: inline-block;

  width: 25px;

  height: 25px;

  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fstatic.wikia.nocookie.net%2Fwebkinz%2Fimages%2Fb%2Fb4%2F1000_kinzcash_coin.png%2Frevision%2Flatest%3Fcb%3D20201116061204&f=1&nofb=1&ipt=d4e7c9622a5bc0fafa82bae8109b88e6627f93bfafc16a5105ce44bef58fe2f6&ipo=images');

  background-size: 100% 100%;

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before{

/* report user */

  content: " ";

  display: inline-block;

  width: 25px;

  height: 25px;

  background-image: url('https://static.wikitide.net/webkinzguidewiki/5/5a/Wshopcoupon20offanyitem.png');

  background-size: 100% 100%;

}

.profile .url-info{

  background: linear-gradient(#c7f0fe, #a0e2fd);

  border-style: solid;

  border-width: 3px;

  border-radius: 5px;

  border-color: #31474c;

  text-align: center;

  padding: 10px;

}

.profile .url-info p:last-child:after{

  content: "";

  display: block;

  margin-top: 10px;

  background-image: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fimages4.fanpop.com%2Fimage%2Fphotos%2F24100000%2Fwebkinz-friends-webkinz-fan-club-24182978-279-148.png&f=1&nofb=1&ipt=84eec7f859c7e4d2d8972dd4d8d0f7f2ea60b1771a24e0ba31e8709df65a876a&ipo=images');

  width: auto;

  height: 125px;

  background-position: top center;

  background-size: 80%;

  background-repeat: no-repeat;

}

.profile .table-section .heading{

  background: linear-gradient(#a670e9, #9951db 10% 80%, #9149a8);

  border-style: solid;

  border-width: 3px;

  border-radius: 5px 5px 0 0;

  border-color: #493490;

  color: white;

}

.profile .table-section{

  border: none !important;

}

.profile .table-section .inner{

  background: linear-gradient(#fef8db, #fefba8 10% 95%, #fddf88);

  padding: 3px;

  border-style: none solid solid solid !important;

  border-width: 3px !important;

  border-radius: 0 0 5px 5px;

  border-color: #916959 !important;

}

.profile .table-section a{

  font-weight: bold;

}

.profile .table-section td{

  padding-bottom: 5px;

  font-weight: bold;

}

.col.w-40:after{

  width: 100%;

  height: 175px;

  display: block;

  content: "";

  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.webkinz.com%2Fassets%2Fimages%2Fwebkinz-logo.png&f=1&nofb=1&ipt=2302b47b4d5cc1c8dc5ab766b67b0cded68b7cf3185f766be19e4e5fb5070417&ipo=images');

  background-position: center center;

  background-size: 325px 175px;

  border-radius: 10px;

}

.profile-info{

  background: linear-gradient(#fef8db, #fefba8 10% 95%, #fddf88);

  padding: 10px;

  border-style: solid !important;

  border-width: 3px !important;

  border-radius: 5px;

  border-color: #916959 !important;

}

.blog-preview{

  background: linear-gradient(#c7f0fe, #a0e2fd);

  border-style: solid;

  border-width: 3px;

  border-radius: 5px;

  border-color: #31474c;

  padding: 10px;

}

.blog-preview p{

  font-weight: bold;

}

.blog-preview a:hover{

  color: #31474c;

}

.profile .blurbs .heading{

  background: linear-gradient(#a670e9, #9951db 10% 80%, #9149a8);

  border-style: solid;

  border-width: 3px;

  border-radius: 5px 5px 0 0;

  border-color: #493490;

  color: white;

}

.profile .blurbs .inner{

  background: linear-gradient(#fef8db, #fefba8 10% 95%, #fddf88);

  padding: 10px;

  border-style: none solid solid solid !important;

  border-width: 3px !important;

  border-radius: 0 0 5px 5px;

  border-color: #916959 !important;

}

.profile .friends .heading{

  background: linear-gradient(#a670e9, #9951db 10% 80%, #9149a8);

  border-style: solid;

  border-width: 3px;

  border-radius: 5px 5px 0 0;

  border-color: #493490;

  color: white;

}

.profile .friends .heading a:hover{

  color: #493490;

}

.profile .friends .inner{

  background: linear-gradient(#fef8db, #fefba8 10% 95%, #fddf88);

  padding: 10px;

  border-style: none solid solid solid !important;

  border-width: 3px !important;

  border-radius: 0 0 5px 5px;

  border-color: #916959 !important;

  margin-bottom: 10px;

}

.profile .friends-grid{

  text-align: center;

}

.profile .friends .person p{

  color: #916959;

}

.profile .friends .person img{

  border-style: solid;

  border-width: 3px;

  border-radius: 5px;

  border-color: #916959;

}

#comments p{

 color: black;

  font-size: 15px;

}

#comments a:hover{

  color: #493490;

}

#comments .heading{

  background: linear-gradient(#a670e9, #9951db 10% 80%, #9149a8);

  border-style: solid;

  border-width: 3px;

  border-radius: 5px 5px 0 0;

  border-color: #493490;

  color: white;

}

.comments-table p{

  background: transparent !important;

  border-style: none !important;

  color: #180b66 !important;

}

#comments .inner{

  background: #f9d249;

}

.comments-table{

  background: #f9d249;

  border-style: solid;

  border-width: 3px;

  border-radius: 10px;

  border-color: #f9d249;

}

.comments-table td{

  background: #f9d249;

  border-style: solid;

  border-width: 5px;

  border-radius: 10px;

  border-color: #e4ab2f #e4ab2f #feea59 #feea59;

  padding: 5px;

}

.comments-table a img{

  border-style: solid;

  border-width: 3px;

  border-radius: 5px;

  border-color: #916959;

}

.comments-table .report{

  font-size: 12px !important;

}

.comments-table .report img{

  border-style: none;

}

.comments-table .report a:hover{

  color: #180b66 !important;

}

.comments-table .comment-replies{

  border-style: solid;

  border-width: 4px;

  border-radius: 10px;

  border-color: #e4ab2f #e4ab2f #feea59 #feea59;

}

#comments button{

  background: linear-gradient(#ffe48c, #f9d249 10% 70%, #f3ae56);

  border-style: solid;

  border-width: 3px;

  border-radius: 10px;

  border-color: #936120;

  padding: 5px;

}

#comments button:active{

  background: linear-gradient(#f3ae56, #f9d249 10% 70%, #ffe48c);

}

#comments td button{

  background: linear-gradient(#c7f0fe, #a0e2fd 90%);

  border-style: solid;

  border-width: 3px;

  border-radius: 100px;

  border-color: #31474c;

  padding: 4px;

  margin-left: 5px;

  margin-right: 5px;

}

#comments td button:active{

  background: linear-gradient(#a0e2fd, #c7f0fe 90%);

}

footer{

  background: linear-gradient(#1c7bf7, #0073ff, #0a49e6 90%);

  border-style: solid;

  border-width: 3px;

  border-radius: 0 0 15px 15px;

  border-color: #0122a5;

  font-size: 15px;

  font-weight: bold;

  margin-top: 0;

  color: white;

}

footer a:hover{

  color: #0122a5;

}

main:after{

  width: 100%;

  height: 135px;

  display: block;

  content: "";

  background-image: url('');

  background-position: center center;

  background-size: 380px 135px;

  border-radius: 10px;

}

footer:before{

  width: 100%;

  height: 75px;

  display: block;

  content: "";

  background-image: url('https://i.imgur.com/f6f5Y6k.png');

  background-position: center center;

  background-size: 450px 75px;

  border-radius: 10px;

}

</style></style>