Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Ale's Pixel Paradise

Author: Ale !
Category: Testing :)
Created: May 9, 2026
A serene pixel koi pond with plenty fishy additions
Comments (0)

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

<style>
<style>
/* loading screen */
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://64.media.tumblr.com/5324dee8d4d8279de757bb1e492c4c99/8593366038eb2fa6-c2/s400x600/2f20ee3997ad2f4d87225c0866d5efae894e079b.gifv');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

<style>

.profile .contact .heading, .profile .table-section .heading { 
border-radius: 7px
}

.general-about .profile-pic img:not(.icon) { 
-webkit-mask-image: url(https://64.media.tumblr.com/17eb22ec46cb54ae1aa40e96e2d5f1b5/34a16de1725ed3fa-67/s250x400/c97fd70582469b369d687641c6a5f8fc0af21841.pnj);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.profile-info {
border: none;
padding: 0px;
margin-bottom: 0px;
}

.profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) {
-webkit-mask-image: url(https://64.media.tumblr.com/c9fb17aeda72a5107a0fd86f899f3323/b368044cc02f8f74-9b/s250x400/577db4468645a550cb8e8004c3bc58d51546fba5.pnj);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

@font-face {
font-family: "Rubik Puddles";
src: url(https://dl.dropbox.com/scl/fi/dfro7qhwnnp3aka2p839c/rubik-puddles-latin-400-normal.ttf?rlkey=7mxsq3tgxgewjx9973o2wrpxh&st=bb6sxwg0)
}

@font-face {
font-family: "Sour Gummy";
src: url(https://dl.dropbox.com/scl/fi/cki14yuj2m5rgsoc01qqw/SourGummy-VariableFont_wdth-wght.ttf?rlkey=tykzt73rqy9a0kizqb3fxw4x1&st=1h4nlzmy)
}

:root {
        --logo-blue: #FFF;

        --darker-blue: #FFF;

        --lighter-blue: #A63737;

        --even-lighter-blue: rgba(41, 122, 87, .7);

        --lightest-blue: rgba(29, 88, 63, .5);

        --dark-orange: #fff;

        --light-orange: rgba(29, 88, 63, .5);

        --even-lighter-orange: rgba(41, 122, 87, .7);

        --green: #FFF;
    }

p {
text-align: center;
}

a:hover {
color: #FFF!important;
}

h1 {
font-family: "Rubik Puddles";
font-size: 60px!important;
text-align: center;
}

.heading, .online {
font-family: "Rubik Puddles";
font-size: 30px;
text-align: center;
color: #FFF
}

h4 {
font-family: "Rubik Puddles";
font-size: 30px;}

input, .comments-table td .comment-replies, .details-table td, .comments-table td, table.comments-table, .profile .table-section, .profile .blurbs .heading, .profile .friends .heading, .profile .url-info {
border-radius: 10px;
}

button  {
border-radius: 30px;
color: #FFF;
background-color: #A63737;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
content: " 𖦹";
color: #FFF;
}

nav .top, .profile .blurbs .heading {
background-color: transparent;
}

ul {
border-radius: 30px;
text-align: center;
font-size: 13px;
}

body {
background-image: url(https://neocha-content.oss-cn-hongkong.aliyuncs.com/wp-content/uploads/sites/2/2016/11/1041uuu-12.gif);
background-size: cover;
background-attachment: fixed;
cursor: url('https://64.media.tumblr.com/ef1f55dc638a12e05dc0110de9f8cc7c/f4d91df9caca7168-85/s100x200/380d1c5a3c5ac16335a9a6df902612983c5106a5.pnj')22 30, auto;
font-family: "Sour Gummy";
}

main {
border-radius: 30px;
background-color: rgba(55, 166, 118, .6);
color: #fff;
font-size: 18px;
padding: 10px;
margin-top: 10px;
}

.profile .friends .person p {
color: #FFF
}

.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 {

color: #1D583F;	
/* Add to Friends */
font-size: 15px;
	content: url('https://64.media.tumblr.com/5a47483557a6c9bc4875ea69b14a8fd2/95830a8d1187edb7-e7/s75x75_c1/9b0e716882bc5881d8633e28b4ffdd62b78eaea8.gifv')

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
color: #297A57;
	/* Add to Favorites */
font-size: 15px;
	content: url('https://64.media.tumblr.com/27d3da0f51d5c39b547eee165f5d4c19/95830a8d1187edb7-58/s75x75_c1/d8dee9aac89da231322589f783b744773788081b.gifv')

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
color: #297A57;
	/* Send Message */
font-size: 15px;
	content: url('https://64.media.tumblr.com/5a47483557a6c9bc4875ea69b14a8fd2/95830a8d1187edb7-e7/s75x75_c1/9b0e716882bc5881d8633e28b4ffdd62b78eaea8.gifv')

}

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

color: #1D583F;
	
/* Forward to Friend */
font-size: 15px;
	content: url('https://64.media.tumblr.com/27d3da0f51d5c39b547eee165f5d4c19/95830a8d1187edb7-58/s75x75_c1/d8dee9aac89da231322589f783b744773788081b.gifv')

}

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

color: #1D583F;
	/* Instant Message */
font-size: 15px;
	content: url('https://64.media.tumblr.com/5a47483557a6c9bc4875ea69b14a8fd2/95830a8d1187edb7-e7/s75x75_c1/9b0e716882bc5881d8633e28b4ffdd62b78eaea8.gifv')

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
color: #297A57;
	/* Block User */
font-size: 15px;
	content: url('https://64.media.tumblr.com/27d3da0f51d5c39b547eee165f5d4c19/95830a8d1187edb7-58/s75x75_c1/d8dee9aac89da231322589f783b744773788081b.gifv')

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
color: #297A57;
	/* Add to Group */
font-size: 15px;
	content: url('https://64.media.tumblr.com/5a47483557a6c9bc4875ea69b14a8fd2/95830a8d1187edb7-e7/s75x75_c1/9b0e716882bc5881d8633e28b4ffdd62b78eaea8.gifv')

}

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

color: #1D583F;
	/* Report Profile */
font-size: 15px;
	content: url('https://64.media.tumblr.com/27d3da0f51d5c39b547eee165f5d4c19/95830a8d1187edb7-58/s75x75_c1/d8dee9aac89da231322589f783b744773788081b.gifv')

}

/*report comment icon*/
table.comments-table td .icon {
content: url(https://64.media.tumblr.com/5a47483557a6c9bc4875ea69b14a8fd2/95830a8d1187edb7-e7/s75x75_c1/9b0e716882bc5881d8633e28b4ffdd62b78eaea8.gifv);
}

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

font-size: 0;

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:after {

font-size: 16px;

}

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

content: "Friend"

}

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

content: "Favorite"

}

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

content: "Message"

}

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

content: "Forward"

}

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

content: "IM"

}

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

content: "Block"

}

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

content: "Group"

}

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

content: "Report"}

.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 {

color: #1D583F;	
/* Add to Friends */
font-size: 15px;
	content: url('https://64.media.tumblr.com/5a47483557a6c9bc4875ea69b14a8fd2/95830a8d1187edb7-e7/s75x75_c1/9b0e716882bc5881d8633e28b4ffdd62b78eaea8.gifv')

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
color: #297A57;
	/* Add to Favorites */
font-size: 15px;
	content: url('https://64.media.tumblr.com/27d3da0f51d5c39b547eee165f5d4c19/95830a8d1187edb7-58/s75x75_c1/d8dee9aac89da231322589f783b744773788081b.gifv')

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
color: #297A57;
	/* Send Message */
font-size: 15px;
	content: url('https://64.media.tumblr.com/5a47483557a6c9bc4875ea69b14a8fd2/95830a8d1187edb7-e7/s75x75_c1/9b0e716882bc5881d8633e28b4ffdd62b78eaea8.gifv')

}

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

color: #1D583F;
	
/* Forward to Friend */
font-size: 15px;
	content: url('https://64.media.tumblr.com/27d3da0f51d5c39b547eee165f5d4c19/95830a8d1187edb7-58/s75x75_c1/d8dee9aac89da231322589f783b744773788081b.gifv')

}

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

color: #1D583F;
	/* Instant Message */
font-size: 15px;
	content: url('https://64.media.tumblr.com/5a47483557a6c9bc4875ea69b14a8fd2/95830a8d1187edb7-e7/s75x75_c1/9b0e716882bc5881d8633e28b4ffdd62b78eaea8.gifv')

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
color: #297A57;
	/* Block User */
font-size: 15px;
	content: url('https://64.media.tumblr.com/27d3da0f51d5c39b547eee165f5d4c19/95830a8d1187edb7-58/s75x75_c1/d8dee9aac89da231322589f783b744773788081b.gifv')

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
color: #297A57;
	/* Add to Group */
font-size: 15px;
	content: url('https://64.media.tumblr.com/5a47483557a6c9bc4875ea69b14a8fd2/95830a8d1187edb7-e7/s75x75_c1/9b0e716882bc5881d8633e28b4ffdd62b78eaea8.gifv')

}

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

color: #1D583F;
	/* Report Profile */
font-size: 15px;
	content: url('https://64.media.tumblr.com/27d3da0f51d5c39b547eee165f5d4c19/95830a8d1187edb7-58/s75x75_c1/d8dee9aac89da231322589f783b744773788081b.gifv')

}

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

font-size: 0;

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:after {

font-size: 16px;

}

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

content: "Friend"

}

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

content: "Favorite"

}

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

content: "Message"

}

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

content: "Forward"

}

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

content: "IM"

}

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

content: "Block"

}

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

content: "Group"

}

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

content: "Report"}

footer {
border-radius: 30px;
background-color: #A63737;
color: #FFF;
font-size: 13px;
}

.online img { 
content: url("https://i.gifer.com/origin/1f/1f5c637837baff7253f1acefbd3e7ae6_w200.webp");
animation-name: none; visibility: visible; height: 80px; width: 80px;
}

.profile .contact {
border-radius: 10px;
padding-bottom: 10px;}

.profile .blurbs .section h4, div.blog-preview, .general-about .details, .details-table td {
text-align: center}

table, th, td {

  border: 0px solid;

     }

:root {

  --topic1: "MISC.";
  --topic2: "TUNES";
  --topic3: "FILMS";
  --topic4: "SHOWS";
  --topic5: "BOOKS";
  --topic6: "𖦹";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
    
    
color:var(--links) !important;
letter-spacing: 40px !important;
text-shadow: 2px 2px white !important;
filter: brightness(95%) !important;
font-family: "Rubik Puddles";
font-size: 50px;
   
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
}


        /*rewriting titles/headings*/
h4, .profile .url-info {
font-size: 0;
}

        /*contact*/
.contact .heading h4:before {

	font-size: 30px;
        text-align: center!important;

	content: "FRIEND ME!";

}
            
        /*interests*/
.table-section:not(:last-child) .heading h4:before {

	font-size: 30px;

	content: "INTERESTS"

}

	
	/* blog */
.blog-preview h4:before {

	font-size: 30px;

	content: "BLOG ENTRIES";

}


	/* BLURBS */
.blurbs .heading h4:before {

	font-size: 30px;

	content: url("https://64.media.tumblr.com/3837f81efb037b78d5f3b83136abd9ff/a2b9a9b92798b874-24/s400x600/0c9e64c94fb660d3ef32326e9c1a891cab720857.pnj");

}

	/* ABOUT ME*/
.blurbs .section:nth-child(1) h4:before {

	font-size: 30px;

	content: "ABOUT ALE";

}

	/* WHO I'D LIKE TO MEET*/
.blurbs .section:nth-child(2) h4:before {

	font-size: 30px;

	content: "LOOKING TO CHAT WITH";

}

	/* FRIENDS*/

.friends:not(#comments) .heading h4:before {

	font-size: 30px;

	content: "FRIENDS";

}

	/* COMMENTS*/


#comments .heading h4:before {

	font-size: 30px;

	content: "COMMENTS";

}

            
        /*links*/
.table-section:last-child .heading h4:before {

	font-size: 30px;

	content: "SOCIALS"

}


.friends .heading a.more {
font-size: 0
}

.profile .url-info:before { 
font-size: 22px;
text-align: center;
content: url("https://64.media.tumblr.com/f71ac46e3666ea21e6c27b80f23b7a57/95830a8d1187edb7-62/s400x600/7fbdca3a47dceeaaedc12336c42c3f17825d0800.webp");
}

.profile .url-info, div.blog-preview, .comment-replies {
border-style: dotted;
border-color: #FFF;
border-width: 5px;
border-radius: 20px;
}

</style></style>