Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
webkinz

Author: willoughbytucker
Category: >:[
Created: May 18, 2026
webkinz layout, not mine!
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>