TADC LAYOUT!!

Author: Tim Hydestein ✘☣
Category: Animation
Created: July 30, 2026
I have some layouts for sites like FR, and I'm going to try to adapt them and share them here! It might take me a while, so I'm leaving this one from TADC for now. It has slight changes from the one I originally made for another site, but it's the best I could do.

It worked fine in the previewer, so I hope it works for anyone who uses it.
Comments (1)

Tim Hydestein ✘☣ 12 mins ago
I don't know why I can't add the background image, I'll update it when I can. srry 💔
You must log in to comment.
CSS Code

<style>
@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Honk:MORF@15&display=swap');

/* VB2_STATE:{"cursorUrl":"https://cdn.cursors-4u.net/previews/normal-dea9d105-32.webp","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"frame22","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"https://i.pinimg.com/1200x/ac/c6/41/acc641b2d663c7f7205b487820f6cfc0.jpg","pageBgMode":"tile","heroImageUrl":"","profileRowBgImage":"","profileRowBgMode":"tile","navBgColor":"#2b333f","navBgImage":"","navBgMode":"cover","navLinkColor":"#f814ff","navLinkHover":"#ff6614","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#4169E1","contactHeaderText":"#ffffff","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":1,"contactBorderRadius":5,"contactBoxAnimation":"","interestsHeaderBg":"#DAA520","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":5,"contentBoxAnimation":"","textBody":"#000000","textHeading":"#000000","textLink":"#0066cc","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":false,"moduleImages":{"contact":"","urlInfo":"","tableSection":"","tunes":"","blogPreview":"","blurbs":"","friends":"","Comments Background":"","comments":""}} */
/* Generated by FriendRewind.com Visual Builder */

* { cursor: url(https://cdn.cursors-4u.net/previews/normal-dea9d105-32.webp), auto !important; }

body, body.profile-page {
  background-image: url("https://i.pinimg.com/1200x/ac/c6/41/acc641b2d663c7f7205b487820f6cfc0.jpg") !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-attachment: scroll !important;
  background-position: center center !important;
}

@media (min-width: 769px) and (pointer: fine) {
  body, body.profile-page {
    background-attachment: fixed !important;
  }
}

.profile-pic{position:relative;width:180px;height:180px;display:inline-block;overflow:hidden;}
.profile-pic img{position:absolute;top:8%!important;left:8%!important;width:84%!important;height:84%!important;object-fit:cover;z-index:1;border-radius:12px!important;}
.profile-pic::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url('https://friendrewind.com/uploads/gallery/1/img_697046ab2f09b6.56462334.png');background-size:100% 100%;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:2;}

body::before {
  content: ' ';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
  z-index: 100;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
p, b{
 font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
  "wdth" 100;
  color:white!important;

}
h1{
font-size:30px!important;
 font-family: "Honk", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" 15,
    "SHLN" 50;
    animation: glitch-1 2s infinite linear;
  }

  @keyframes glitch-1 {
    0%,
    12%,
    15%,
    52%,
    55%,
    82%,
    85%,
    100% {
      opacity: 1;
      transform: scaleX(1) scaleY(1);
    }

    13% {
      opacity: .8;
      transform: scaleY(2);
      color: #;
    }

    53% {
      opacity: .8;
      transform: scaleX(.7);
      color: #;
    }

    83% {
      opacity: 8;
      transform: rotate(-10deg);
      color: #;
    }
  }

  @keyframes glitch-2 {
    13% {
      color: #;
    }

    53% {
      color: #;
    }

    83% {
      color: #;
    }
  }
h2{ 
font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight:500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
color:white;
} 
 
h3{ 
font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight:500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
color:white;
 
}  

h4{ 
  font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  color:white !important;
}
.profile-pic{position:relative;width:180px;height:180px;display:inline-block;overflow:hidden;}
.profile-pic img{position:absolute;top:8%!important;left:8%!important;width:84%!important;height:84%!important;object-fit:cover;z-index:1;border-radius:12px!important;}
.profile-pic::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url('https://friendrewind.com/uploads/gallery/1/img_697046ab2f09b6.56462334.png');background-size:100% 100%;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:2;}

::selection { 
color:white; 
background:#500096;
}

a:link { 
color:#F814FF!important;
text-decoration:none ;
}
a:visited {
color:#14EBFF;
}
a:hover { 
color:#FF6614!important;
text-decoration:none;
}

main{
border: 3px groove black;
background-image: url(https://i.pinimg.com/736x/b0/e9/fb/b0e9fbc699cfe662598e0fdb6aa0d3ff.jpg)!important; 
}

.myspace-header .main-nav li a {
color:#F814FF!important;
text-decoration:none;
text-transform:uppercase;
 font-family: "Honk", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" 15,
    "SHLN" 50;
font-size:17px!important;       
text-shadow: 0px 0px 0px  !important; 
}

.myspace-header .main-nav li a:hover {
color:#FF6614!important;
text-decoration:none;
}

.profile-pic:hover{
filter: invert(100%) !important;
}

button { 
border:3px groove #500096!important;
background:linear-gradient(180deg,rgba(106, 0, 255, 1) 0%, rgba(169, 5, 245, 1) 6%, rgba(80, 0, 150, 1) 50%, rgba(169, 5, 245, 1) 96%, rgba(106, 0, 255, 1) 100%)!important;
 font-family: "Honk", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" 15,
    "SHLN" 50;
}

button:hover {
border:3px ridge #500096!important;
background:linear-gradient(180deg,rgba(106, 0, 255, 1) 0%, rgba(169, 5, 245, 1) 6%, rgba(80, 0, 150, 1) 50%, rgba(169, 5, 245, 1) 96%, rgba(106, 0, 255, 1) 100%)!important;
}

.myspace-header{
border:3px groove black;
background:url(https://i.pinimg.com/736x/01/48/0a/01480a2c3c1139bacb683e320c198075.jpg)!important;
background-size:cover;
background-position:center center;
font-size:17px!important;
text-transform:uppercase;
align-items:center;
}
.myspace-header .search-box {
 font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  color:black;
border:3px groove black;
}

.myspace-header .search-input {
 font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  color:black;
border:3px groove black;
}

.myspace-header .top-nav .search-button {
border:3px groove #500096!important;
background:linear-gradient(180deg,rgba(106, 0, 255, 1) 0%, rgba(169, 5, 245, 1) 6%, rgba(80, 0, 150, 1) 50%, rgba(169, 5, 245, 1) 96%, rgba(106, 0, 255, 1) 100%)!important;
 font-family: "Honk", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" 15,
    "SHLN" 50;
}

.myspace-header .search-button:hover{
border:3px ridge #500096!important;
background:linear-gradient(180deg,rgba(106, 0, 255, 1) 0%, rgba(169, 5, 245, 1) 6%, rgba(80, 0, 150, 1) 50%, rgba(169, 5, 245, 1) 96%, rgba(106, 0, 255, 1) 100%)!important;
}

.myspace-header .left{
transition: ease-in-out 0.3s;
}

.myspace-header .left:hover{
filter:invert(100%);
}

.main-nav-wrapper {
text-transform:uppercase;
background:linear-gradient(180deg,rgba(64, 64, 64, 1) 0%, rgba(8, 8, 8, 1) 11%, rgba(0, 0, 0, 1) 90%, rgba(64, 64, 64, 1) 98%);
border:2px groove black;
}

.myspace-header .main-nav li a{
border:2px groove black;
color:#39ff14;
background:linear-gradient(180deg,rgba(64, 64, 64, 1) 0%, rgba(8, 8, 8, 1) 11%, rgba(0, 0, 0, 1) 90%, rgba(64, 64, 64, 1) 98%)!important;
}

.myspace-header .main-nav li a:hover{
color:green;
background:linear-gradient(180deg,rgba(64, 64, 64, 1) 0%, rgba(8, 8, 8, 1) 11%, rgba(0, 0, 0, 1) 90%, rgba(64, 64, 64, 1) 98%)!important;
}

.heading{
border:3px groove #500096!important;
background:linear-gradient(180deg,rgba(106, 0, 255, 1) 0%, rgba(169, 5, 245, 1) 6%, rgba(80, 0, 150, 1) 50%, rgba(169, 5, 245, 1) 96%, rgba(106, 0, 255, 1) 100%)!important;
text-align: center;
color:white!important;
font-size: medium;
}

.general-about {
color:white!important;
background-image: url("https://i.pinimg.com/736x/28/06/2a/28062afd813525a3c0611a001e0c7062.jpg");
background-size:cover;
border: 3px groove black;
padding: 3px;
}

.profile-playlist-widget{
background:#500096;
border: 1px solid black;
}

.profile-playlist-widget h3{
color:white!important;
}

.mood{
color:white;
}

.mood:after {
    width: 100%;
    height: 200px;
    display: block;
    content: "";
    background-image: url(https://i.pinimg.com/1200x/2c/54/e9/2c54e91aa1d6cba09b77e34e535daa8d.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius:px;

}

.contact{
border: groove 3px black!important;
background:linear-gradient(180deg,rgba(64, 64, 64, 1) 0%, rgba(8, 8, 8, 1) 11%, rgba(0, 0, 0, 1) 90%, rgba(64, 64, 64, 1) 98%)!important;
}
.contact a { 
 font-family: "Honk", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" 15,
    "SHLN" 50; ;
padding:5px;
}
.contact .inner a img {
margin-right: -2px;
font-size: 0;
}
li.active .icon { 

content: url("https://gifcity.carrd.co/assets/images/gallery13/457fe0c3.gif?v=3fc8f5cd"); 
width: 20px;
height: 10x;
}

.profile .url-info{
border:3px groove #500096!important;
background:linear-gradient(180deg,rgba(106, 0, 255, 1) 0%, rgba(169, 5, 245, 1) 6%, rgba(80, 0, 150, 1) 50%, rgba(169, 5, 245, 1) 96%, rgba(106, 0, 255, 1) 100%)!important;    
}

.profile .table-section{
border: 3px groove black!important;
background:linear-gradient(180deg,rgba(64, 64, 64, 1) 0%, rgba(8, 8, 8, 1) 11%, rgba(0, 0, 0, 1) 90%, rgba(64, 64, 64, 1) 98%)!important;
color:white!important;
}

.details-table td{
border:3px groove black!important;
background:linear-gradient(180deg,rgba(64, 64, 64, 1) 0%, rgba(8, 8, 8, 1) 5%, rgba(0, 0, 0, 1) 97%, rgba(64, 64, 64, 1) 98%)!important;
}

.details-table td p {
color:white;
}

.profile-info{
background-image:url(https://i.pinimg.com/1200x/18/d2/01/18d2013d2d7e0ba8c5d7eb26b39ca219.jpg)!important;
background-size:cover;
background-position:center center;
border: 3px groove black;  
}
.photos-preview img:hover{
animation: shake 0.5s; 
animation-iteration-count: infinite; 
-webkit-filter:blur(1px); 
-webkit-transition: .5s ease-in; 
} 
 
@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); }
}  
.blog-preview h4{
border:3px groove black;
background:linear-gradient(180deg,rgba(64, 64, 64, 1) 0%, rgba(8, 8, 8, 1) 11%, rgba(0, 0, 0, 1) 90%, rgba(64, 64, 64, 1) 98%)!important;
color:white!important;
}
.blog-preview p{ 
margin:0px;
padding:5px;
color:white!important;
border:2px groove black;
background:linear-gradient(180deg,rgba(64, 64, 64, 1) 0%, rgba(8, 8, 8, 1) 11%, rgba(0, 0, 0, 1) 90%, rgba(64, 64, 64, 1) 98%)!important;
}
.blog-preview p:hover{
margin:0px;
padding:5px;
color:white!important;
border:3px ridge black;
background:linear-gradient(180deg,rgba(64, 64, 64, 1) 0%, rgba(8, 8, 8, 1) 11%, rgba(0, 0, 0, 1) 90%, rgba(64, 64, 64, 1) 98%)!important;
}  
.blurbs{
text-align: center;
padding: 5px;
background: url('https://i.pinimg.com/736x/f6/be/1e/f6be1ebd19cdd25275b79877e41c8c94.jpg');
}
#top8-grid .person img:not(.icon){
transition: ease-in-out filter 0.3s;
}
#top8-grid .person img:not(.icon):hover{
filter: invert(100%)!important;
}
.friends p:first-of-type{
color:#14EBFF;
}
#top8-grid .person p {
color:#14EBFF;
}

.profile .comments-table td{ 
border:3px groove black!important;
background:linear-gradient(180deg,rgba(64, 64, 64, 1) 0%, rgba(8, 8, 8, 1) 11%, rgba(0, 0, 0, 1) 90%, rgba(64, 64, 64, 1) 98%)!important;
}
.profile .comments-table td *{ 
color:white!important;
}

.profile .comments-table {
background:linear-gradient(180deg,rgba(64, 64, 64, 1) 0%, rgba(8, 8, 8, 1) 11%, rgba(0, 0, 0, 1) 90%, rgba(64, 64, 64, 1) 98%)!important
color:white!important;
border:3px black groove!important;
}
.comments-table td:first-child img{
transition: ease-in-out filter 0.3s;
}
.comments-table td:first-child img:hover{
filter: invert(100%)!important;
}

.comment-replies {
    padding: 0 5px;
    border:3px groove black!important;
    margin-top: 10px;
    background:linear-gradient(180deg,rgba(64, 64, 64, 1) 0%, rgba(8, 8, 8, 1) 11%, rgba(0, 0, 0, 1) 90%, rgba(64, 64, 64, 1) 98%)!important;
}
.count {
color:#14EBFF;
}
.volume-slider{
background: linear-gradient(180deg, #40126e 0%, #5a1a84 100%)!important;
}
.badges-widget .badges-list {
color:white;
 font-family: "Honk", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" 15,
    "SHLN" 50;
}
main:after {
	width: 100%;
	height: 200px ;
	display: block;
	content: "";
	background-image: url(https://i.pinimg.com/originals/dd/2c/1c/dd2c1c971ad23ca723142eae9d717ba6.gif)!important;
	background-position: center;
        background-size:cover;
	background-repeat:no-repeat;

@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
    }
}
main:before {
	width: 100%;
	height: 250px ;
	display: block;
	content: "";
	background-image: url(https://preview.redd.it/kck2d5er02qg1.jpeg?auto=webp&s=a2cbe6d78d603425a41abdbf3e6472f0a3e3f5f6)!important;
	background-position: center;
	background-repeat:no-repeat;
        background-size:cover;


@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
    }
}
div.col.w-40.left:after {
    content: " ";
    display: block;
    height: 460px;
    background: url("https://i.pinimg.com/736x/99/51/51/9951519ca56a1f0646000332a4818147.jpg") no-repeat;
    background-size: 320px;
}
div.col.right:after {
    content: " ";
    display: block;
    height: 500px;
    background: url("https://i.pinimg.com/1200x/88/be/f2/88bef287afdb62f0fbc808c3692dbb1f.jpg") no-repeat;
    background-size: 500px ;
    background-position: center top;
}
footer{  
border: 3px groove black;
background-image:url(https://i.pinimg.com/736x/43/76/e7/4376e7b976b2ccc29439cf25fc3fdcc0.jpg)!important;      
background-position:bottom center;
background-size: cover;
}
::-webkit-scrollbar {
      width: 16px;
      height: 16px;
    }

    ::-webkit-scrollbar-track {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
      image-rendering: pixelated;
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
    }

    ::-webkit-scrollbar-track:active {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
    }

    ::-webkit-scrollbar-thumb {
      border-top: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      z-index: 1;
    }

    ::-webkit-scrollbar-corner {
      background-color: #cccccc;
    }

    ::-webkit-resizer {
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
      background-position: bottom right;
      background-repeat: no-repeat;
      image-rendering: pixelated;
    }

    ::-webkit-scrollbar-button,
    .scroll::-webkit-scrollbar-button {
      border-top: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
      display: block;
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      image-rendering: pixelated;
      background-repeat: no-repeat;
      background-position: center center;
    }

    ::-webkit-scrollbar-button:active,
    .scroll::-webkit-scrollbar-button:active {
      background-position: 2px 2px;
    }

    ::-webkit-scrollbar-button:horizontal:decrement,
    .scroll::-webkit-scrollbar-button:horizontal:decrement {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
    }

    ::-webkit-scrollbar-button:horizontal:increment,
    .scroll::-webkit-scrollbar-button:horizontal:increment {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
    }

    ::-webkit-scrollbar-button:vertical:decrement,
    .scroll::-webkit-scrollbar-button:vertical:decrement {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
    }

    ::-webkit-scrollbar-button:vertical:increment,
    .scroll::-webkit-scrollbar-button:vertical:increment {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
    }

    ::-webkit-scrollbar-button:horizontal:increment:start,
    .scroll::-webkit-scrollbar-button:horizontal:increment:start {
      display: none;
    }

    ::-webkit-scrollbar-button:horizontal:decrement:end,
    .scroll::-webkit-scrollbar-button:horizontal:decrement:end {
      display: none;
    }

    ::-webkit-scrollbar-button:vertical:increment:start,
    .scroll::-webkit-scrollbar-button:vertical:increment:start {
      display: none;
    }

    ::-webkit-scrollbar-button:vertical:decrement:end,
    .scroll::-webkit-scrollbar-button:vertical:decrement:end {
      display: none;
    }

    ::-webkit-scrollbar-button:active,
    .scroll::-webkit-scrollbar-button:active {
      border-top: 1px solid #868a8e;
      border-left: 1px solid #868a8e;
      border-bottom: 1px solid #868a8e;
      border-right: 1px solid #868a8e;
      box-shadow: none;
    }</style>