Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind

FriendRewind

← Back to Layouts

Rainbow Checkers

Author: Def3ct

Category: Colors

Created: July 6, 2025

Color punk rock dream

Comments (2)

B4T_ANDSPARKLES 07/10/2025 4:08 PM

i love the colors

blue.skyyz 🦇🍋🫠 08/25/2025 3:07 AM

I literally lovelove this sm!! 🥹

You must log in to comment.

CSS Code

<style>
@import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');

@keyframes pulseGlow {
  0%, 100% { text-shadow: 2px 2px 3px #000, 0 0 25px #E014FF, 0 0 5px #fff; }
  50% { text-shadow: 2px 2px 3px #000, 0 0 40px #ff69b4, 0 0 10px #fff; }
}

@keyframes rainbowBorder {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes panBackground {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body{
  font-family:'Potta One';
  background:url('https://external-media.spacehey.net/media/sikWyuQiBQn6apumbCZeDpx8_oUtKbi9yzVlNi7ATHcI=/https://64.media.tumblr.com/db12bcab036a956e1c18ae1446be549b/b22decb9abb60136-25/s400x600/d9699fbc0f3dbc2e3e83b17d46699249cb0042bc.gif');
}

.profile{
  background:url('https://external-media.spacehey.net/media/sJ1VhFU-cJN5CG2VzT6-JoUz0bfMBTKKKngV0g6WObVw=/https://i.imgur.com/a4sh9K3.png') repeat;
  border-radius:12px;
  animation: float 6s ease-in-out infinite;
}

h1{
  color:#000;
  animation: pulseGlow 2s infinite;
}

:root{
  --table-header:#ffd1dc;
  --table-color:#fff;
  --link-text:#fff;
  --main-text:#fff;
}

a:hover {
    animation: shake 0.5s infinite;
}

main{
  background:#000;
  border-radius:14px;
  font-size:90%;
  color:#E014FF;
}

.contact{
  width:310px;height:180px;
  border-radius:8px;
  background:url('https://external-media.spacehey.net/media/seUqXJ-mHJL5uAgk7z31_NPk8jmXG_hZnHFmMrw8BrYI=/https://cdn.wallpapersafari.com/13/51/SVRnle.jpg') right top repeat;
  color:#000;
  text-shadow:1px 1px 2px #E014FF,0 0 25px #E014FF,0 0 3px #E014FF;
  background-size: cover;
  animation: panBackground 20s linear infinite;
}

.profile .table-section,
.profile .contact,
.profile .url-info,
.home-actions{
  border:4px outset #E014FF;
  border-radius:15px;
  animation: rainbowBorder 4s linear infinite;
}

.profile .table-section .heading{
  background:#000;
  border:1px solid #E014FF;
  border-radius:15px 15px 0 0;
  text-align:center;
}
.profile .table-section .heading h4{
  color:#E014FF;
  text-shadow:1px 2px 3px #000;
}
.profile .table-section .details-table td{
  background:transparent;
  padding-right:10%;
}

.profile .friends .heading{
  background:#000;
  color:#E014FF;
  text-shadow:1px 1px 2px #000;
  text-align:center;
}

*{
  cursor:url('https://external-media.spacehey.net/media/srhhUjb_gNw_YD_tjWIGT6sEyk5jEzfskm5_tbt8yx5E=/https://cur.cursors-4u.net/toons/too-4/too354.ani'),
         url('https://external-media.spacehey.net/media/sy5Jg2enleFkjh791It43XmJ8I22h-yvaANZSsSYstro=/https://cur.cursors-4u.net/toons/too-4/too354.png'),
         auto !important;
}

body:before{
  content:" ";
  position:fixed;inset:0;z-index:100;
  background:url('https://external-media.spacehey.net/media/s8dltJE7N21aehBRmde2Ahjj9xyQKgUcEcC9ogidDSOM=/https://2.bp.blogspot.com/-De7fA6RPu88/UJbUHQ5hmDI/AAAAAAAAGd4/XB6vCPPXqzI/s1600/MikuGif+%252819%2529.gif')
             center/cover no-repeat;
  animation:fadeSplash 2s forwards;
  pointer-events:none;
}
@keyframes fadeSplash{0%,75%{opacity:1}100%{opacity:0}}

.contact .inner a:before{content:""}

.contact .inner a:hover:before {
    transform: rotate(360deg);
    transition: transform 0.6s ease-in-out;
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before{
  background:url('https://external-media.spacehey.net/media/s2Egob2kxnwRONiRU8gFGKLaOGEOKceQF27gVX8vCfmQ=/https://pixels.crd.co/assets/images/gallery112/56607b05.gif?v=2942f085');
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before{
  background:url('https://external-media.spacehey.net/media/sFv9vOJ0aWM4KT39aof9PN2Kqx9Fkq6P4vAtFpTZqtmI=/https://pixels.crd.co/assets/images/gallery90/9f8f06f9.gif?v=2942f085');
}

@keyframes flying-santa{from{left:-400px}to{left:calc(100% + 20px)}}
#santa{
  position:fixed;left:-400px;top:200px;width:130px;
  animation:flying-santa 5s linear infinite;
  pointer-events:none;
}</style>