← Back to Layouts
interweb

Name: FriendRewind
Author: FriendRewind
Author: da
Category: Vintage
Created: August 9, 2026
description: https://friendrewind.com/blog/interweb-customizable-layout-33872
Comments (13)

swaggilicious 08/10/2026 10:50 AM
this is actually so cool omfg
da 08/10/2026 12:55 PM
thank you!!!!!!! ^_^
swaggilicious 08/13/2026 5:30 AM
ofc!!
𝕶𝖊𝖑𝖑𝖎 ᴷᵃᵗᵃˢᵗʳᵒᵖʰᵉ ⦻ 08/11/2026 3:38 AM
Ooooooo 🥹
SARUGETCHU3 08/11/2026 6:34 AM
REALLY COOL LAYOUT!!! I WILL BE TRYING OUT :D
SARUGETCHU3 08/11/2026 7:28 AM
WAIT ACTUALLY I THINK I USED THE SAME LAYOUT BACK ON SPACEHEY OMG FUNNY COINCIDENCE LOL
Def FlintnSteel 08/12/2026 10:57 AM
COOLEST LAYOUT I'VE SEEN!! :00
da 08/12/2026 5:59 PM
thank you!!!!!
Side Bar Soup 08/12/2026 5:56 PM
Could you make a black version?
da 08/12/2026 6:00 PM
I will think about it because it might take me a bit and I have veryy limited time
Side Bar Soup 08/13/2026 12:33 AM
Thx :)
peircedprincess 08/12/2026 9:25 PM
WOAHHHH can u make a light pink version IDK how to code this
da 08/12/2026 10:35 PM
please read the instructions you can add a light pink accent on it look at this blog post: https://friendrewind.com/blog/interweb-customizable-layout-33872
You must log in to comment.
CSS Code

<div class="free-space">
<!---- ADD YOUR DOWN CONTENT HERE FOR THE FREE SPACE
	   please refer to the layout page for
	   instructions + resources
---->
 
  
  
  
  
<!---- free space end ----></div><style>
/* customization - please refer to layout page for instructions + resources */
:root {
    --background-color: silver;
    --background-image: url("");
    --banner-image: url("");
    --accent: #030303;
}
/* code itself below this line */
::-webkit-scrollbar{width:16px}::-webkit-scrollbar:horizontal{height:17px}::-webkit-scrollbar-corner{background:#dfdfdf}::-webkit-scrollbar-track{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGElEQVR4AWI6cODAfxBgsre3Zzh48CADAAAA///4rE1UAAAABklEQVQDAGwACkBLoYrPAAAAAElFTkSuQmCC)}::-webkit-scrollbar-thumb{background-color:#dfdfdf;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement{display:block}::-webkit-scrollbar-button:vertical:start{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAAfUlEQVR4AdyQ0Q3AIAhEL06imziajuImOgmj2NKExmiJ1a+mHyeg3iNgiKjSpgBUcx6w1i4rpcRWXADOSilYEXtYN4CLHX0c4L2fTqWOIGaJGukR0Jv6uoUNAO2zdj8Acs7IitrOkg8AeXgb/wKIMaqLmy3UOOcQQtgSL/oAAAD//+wSoxgAAAAGSURBVAMA7CKgEzu7+lcAAAAASUVORK5CYII=);height:17px}::-webkit-scrollbar-button:vertical:end{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAAhElEQVR4AdyRzRHAEBhEd1RCJ0qjFJ1QiVKSrBk58IlwyuTwEj+7bwYq53zkTQAc6vpAa71MCIFVFAFHKSWswA65BZzs8EGBtRZ2gHTE7ggxRimH0XonYLsNt3NmKqKAm7VU/1yTGAoYnpWZeRQwMOMvAu99eWde2lvq3ShjDJxzW1ByAgAA//9CZxRbAAAABklEQVQDABC4oBMHj25uAAAAAElFTkSuQmCC);height:17px}::-webkit-scrollbar-button:horizontal:start{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAAfElEQVR4AczQwQ2AIBBE0QmVQCeUBqXQCVSypaBjorddFk4evtGYeQaDiEw5DMAM9wUxxu1aa5ziAXg3xsBO3LAP4MNJSyDnbLomsBpTVgHPWAW8YxXovfOdK/UIXkQF+HkPYgIeZAkQsfoJUGsFf9hO77FCSgmllKOIXAAAAP//skopKgAAAAZJREFUAwCYX5cTE8iWqwAAAABJRU5ErkJggg==);width:16px}::-webkit-scrollbar-button:horizontal:end{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAAfUlEQVR4AbzPwQ2AIBBE0QmVQCeUBqXQCVSypahjoifZXTh4+EZj5gWCiByyGYAjXA/EGJdrrXGKG+DbGAMrccNegB87TYGcs8ubAlx7EBXwICZgIS6g907nMxPQxhRVwBqrgGesAvzpSb3Cf0CtFbzzSs/pQkoJpZStiJwAAAD//1YvrgUAAAAGSURBVAMAaF+XE5WugAwAAAAASUVORK5CYII=);width:16px}body,html{overflow:visible!important}body{font-family:'MS PGothic';background:var(--background-color) var(--background-image)!important;background-attachment:fixed}.master-container{width:100%;max-width:100%}.myspace-header{height:50px!important;position:fixed;top:0;z-index:999}.myspace-header .top{height:50px;background:#fff!important;color:#000!important;justify-content:center}.myspace-header .links{background:#fff;border:0!important}.myspace-header .navigation{display:flex;width:100%;padding-inline:0px!important;padding-bottom:0!important;padding-top:5px!important;border-bottom:2px solid #000;background:#fff0;margin-top:-8px;gap:10px;text-align:center;justify-content:center}.myspace-header .navigation a{width:fit-content;padding-inline:3vw!important;padding-block:3px!important;border-radius:10px 10px 0 0;border:1px solid #000;transform:translateY(1px);margin-top:2px;display:inline-block;font-size:revert!important;font-family:SimSun;font-weight:400!important;text-decoration:none!important;box-shadow:0 -2px 2px 3px rgb(255 255 255 / .5) inset;color:#fff!important;text-shadow:0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000)!important;background:var(--accent);white-space:nowrap;text-transform:uppercase;height:100%!important;line-height:100%!important}.myspace-header .main-nav-wrapper{background:white!important}.myspace-header .navigation a:hover{background:color-mix(in srgb,var(--accent) 90%,white)!important}.myspace-header .main-nav-wrapper{height:auto!important}.dropdown-menu a{border-radius:10px 10px 10px 10px!important;width:100%!important}.dropdown-menu{background:none!important;border:none!important}.mutual-friends-section{display:none}.nav-logo{filter:drop-shadow(1px 1px 0 black) drop-shadow(1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black)}.top .left:before{content:"";position:absolute;background:var(--accent);width:100%;height:130%;top:-10px;mix-blend-mode:lighten;z-index:9999;opacity:.9;pointer-events:none}.top .left{background:#fff;margin-right:auto}.top .right{margin-right:auto}.myspace-header .search-box::before{content:"Search Everything!:";margin-right:10px;font-family:"ms pgothic"}.myspace-header .search-input{border:1px gray solid;border-radius:3px 3px 3px 3px!important;margin-right:10px;font-family:'ms pgothic';font-size:12px;text-transform:lowercase}.myspace-header .search-button{border:1px gray solid;border-radius:3px 3px 3px 3px!important;font-weight:400;color:#000;font-family:'ms pgothic';font-size:12px}.row{top:65px;width:75%;position:absolute;right:0;padding-bottom:40px;background:#fff;color:#000;display:block}.col{width:100%!important;display:block;background:#fff;border-left:1px solid #000}.col.left{display:grid;grid-template-columns:repeat(2,1fr) 15%;grid-column-gap:10px;padding-bottom:0}.general-about{position:fixed;left:1%;top:115px;padding:5px 5px 40px;height:250px;width:23%;border:1px solid #000;background:#fff}.details{text-align:right;margin-right:10px}.online{color:color-mix(in srgb,var(--accent) 50%,#000);filter:saturate(3)}.online::after{content:"ONLINE!"}.online img{display:none}.profile-mood *,.mood *{font-weight:400}.profile-mood{text-transform:uppercase;top:305px;width:21%!important;left:2vw;border-top:1px dashed var(--accent);padding-top:5px;position:fixed;padding-inline:5px}.mood{text-transform:uppercase;top:335px;width:21%!important;left:2vw;padding-top:5px;position:fixed;padding-inline:5px}.mood p:last-child{white-space:nowrap}.mood p:last-child{overflow:hidden;text-overflow:ellipsis}.col a{color:color-mix(in srgb,var(--accent) 50%,#000);filter:saturate(3);text-decoration:underline}.col a:has(img) img{filter:saturate(.4)}.profile h1{top:90px;background:#fff;width:23%;padding-inline:10px;padding-bottom:3px;border-radius:10px 10px 0 0;background:var(--accent);box-shadow:0 -8px 3px 3px rgb(255 255 255 / .5) inset;border:1px solid #000;border-bottom:0;position:fixed;left:1%;color:#fff!important;text-shadow:0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000)}.profile-pic{width:11vw;height:11vw!important}.profile-pic .pfp-fallback{border:1px solid gray;width:100%!important;height:100%!important;object-fit:cover}.contact{width:23%!important;top:365px;border:0!important;position:fixed;left:1%}.contact .inner{background:#fff;border:1px solid #000;height:120px}.contact .f-col{overflow:hidden;text-overflow:ellipsis}.contact .f-col a{color:color-mix(in srgb,var(--accent) 50%,#000)!important;font-weight:400;text-transform:uppercase;font-size:revert!important}.contact .f-col a img{filter:saturate(1);height:18px;width:18px;margin-right:5px}.contact .f-col a:first-child{font-size:13px;margin-right:5px}.heading{border-radius:8px 8px 0 0;background:var(--accent)!important;box-shadow:0 -4px 3px 3px rgb(255 255 255 / .5) inset;border:1px solid #000;border-bottom:0;color:#fff!important;text-shadow:0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000);text-transform:uppercase}.heading *{font-weight:normal!important;letter-spacing:2px}.heading a{color:silver}.profile-info{display:none}.url-info{background:#fff var(--banner-image);background-size:cover;background-position:0% 30%;height:250px;grid-column:span 3;image-rendering:pixelated;border:1px solid #000!important;width:80%!important;position:relative;margin-bottom:0!important;font-size:0}.url-info::before{content:"いらっしゃいませ！";font-size:35px;color:#fff;text-shadow:var(--accent) 3px 0 0,var(--accent) 2.83487px .981584px 0,var(--accent) 2.35766px 1.85511px 0,var(--accent) 1.62091px 2.52441px 0,var(--accent) .705713px 2.91581px 0,var(--accent) -.287171px 2.98622px 0,var(--accent) -1.24844px 2.72789px 0,var(--accent) -2.07227px 2.16926px 0,var(--accent) -2.66798px 1.37182px 0,var(--accent) -2.96998px .42336px 0,var(--accent) -2.94502px -.571704px 0,var(--accent) -2.59586px -1.50383px 0,var(--accent) -1.96093px -2.27041px 0,var(--accent) -1.11013px -2.78704px 0,var(--accent) -.137119px -2.99686px 0,var(--accent) .850987px -2.87677px 0,var(--accent) 1.74541px -2.43999px 0,var(--accent) 2.44769px -1.73459px 0,var(--accent) 2.88051px -.838247px 0}.table-section.interests{width:95%!important;grid-column:span 2;height:250px;border:0!important}.table-section.interests .inner{border:1px solid #000;height:calc(100% - 20px);overflow-y:auto;text-align:right}.table-section.interests tbody{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:5px}.table-section.interests tr{display:block;width:100%;border:1px solid color-mix(in srgb,var(--accent) 50%,#000)}.table-section.interests td:first-child{white-space:nowrap;background:linear-gradient(color-mix(in srgb,var(--accent) 40%,#fff 50%),#fff 100%)!important;height:20px}.table-section.interests td{display:block;width:100%!important;background:white!important}.table-section.interests td:first-child p{color:color-mix(in srgb,var(--accent) 80%,#000);text-decoration:underline;font-weight:400;font-size:11px;letter-spacing:1px;text-transform:uppercase;text-align:left}.free-space{position:absolute;height:510px;width:19%;;background:#fff;position:absolute;right:10px;top:20px;border:1px solid #000;padding:5px;overflow-y:scroll;text-align:center}.free-space img{max-width:100%}.table-section:not(.interests){border:0!important}.col.right{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:0}.blurbs{margin:0!important;order:-2;grid-column:span 3}.blurbs .inner{overflow-y:auto;padding:20px!important}.col.right .inner{border:1px solid #000}body .blog-preview{grid-column:span 1}.blog-preview{order:-1;padding:0!important;margin:auto!important;width:100%}.blog-preview,.table-section:not(.interests){height:200px!important;margin:0!important}.blog-preview h4{height:20px;overflow:hidden;letter-spacing:2px;margin:0;width:100%;display:block;font-weight:400;text-transform:uppercase;padding-inline:10px;padding-bottom:3px;border-radius:10px 10px 0 0;background:var(--accent);box-shadow:0 -8px 3px 3px rgb(255 255 255 / .5) inset;border:1px solid #000;border-bottom:0;color:#fff!important;text-shadow:0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000)}.free-space img{display:inline-block!important}.table-section:not(.interests) .inner{height:calc(100% - 20px);padding:10px;overflow-y:auto}.blog-preview p{margin:0;display:block;border:1px solid #000;height:calc(100% - 20px);padding:10px;overflow-y:auto}.blog-preview h4 a{color:silver!important}#comments{grid-column:span 2;height:480px!important}.friends:not(#comments){order:5;height:480px!important}.friends .inner{height:calc(100% - 20px)!important;overflow-y:auto;padding:0!important}#comments .inner{height:calc(100% - 20px)!important}#top8-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px 12px!important;width:100%!important}.profile .friends .person p{color:inherit;margin-left:0!important}.profile .friends .person img{border:1px solid gray}.inner>p{position:sticky;top:0;background:#fff;width:100%;z-index:1;border-bottom:1px solid gray;font-size:12px;padding:0!important;margin:0!important}.inner>p b{font-weight:normal!important;margin-left:5px}.comments-table{border-collapse:collapse!important;width:calc(100% - 20px)!important;margin:10px}.comments-table tr{border:1px solid var(--accent)}.comments-table td{background:linear-gradient(color-mix(in srgb,var(--accent) 50%,#fff) 0,#fff 10%)!important}.comments-table td:first-child{width:10%!important}.comments-table b,.comments-table small{font-weight:400!important;font-size:10px;color:color-mix(in srgb,var(--accent) 80%,#000);letter-spacing:1px}.friends:not(#comments) .inner{height:calc(100% - 20px)!important;overflow-y:auto}footer{position:fixed;left:1%;top:510px;height:180px!important;padding:5px 5px;width:23%;border:1px solid #000;background:#fff;overflow-y:auto}footer .links,footer p{margin:0}footer::before{content:"";display:block;height:20px;width:20px;background:url(https://friendrewind.com/uploads/gallery/23490/img_6a78d8dfdb4f15.51568776.gif);margin:auto;background-size:contain;background-repeat:no-repeat;background-position:center;filter:grayscale()brightness(0)}footer::after{content:"";background:var(--accent);width:100%;height:25px;display:block;position:absolute;top:0;left:0;mix-blend-mode:lighten}footer .links{display:block;height:fit-content;background:transparent!important;margin-bottom:5px}.top .right *,footer a{color:color-mix(in srgb,var(--accent) 50%,#000)!important;text-decoration:underline!important;text-transform:uppercase;font-weight:400;font-size:10px!important;text-shadow:none!important}footer p:nth-child(3){margin-top:10px;margin-bottom:10px}footer p:last-child::after{content:"layout by: friendrewind.com/daidai";display:block;border-top:1px dashed var(--accent);margin-top:5px;padding:5px;font-size:12px}footer *{font-style:normal}.profile-playlist-mount{position:fixed;top:700px;left:1%;overflow:visible!important}.profile-playlist-mount *{font-family:'ms pgothic'!important;text-shadow:none!important}.profile-playlist-widget{max-width:none!important;width:23vw!important;height:180px;background:white!important;color:black!important;box-shadow:none!important;border:1px solid black!important;border-radius:0!important}.pp-header h3{color:color-mix(in srgb,var(--accent) 50%,#000)!important;text-transform:uppercase;letter-spacing:2px}.pp-header h3::after{content:"ρ（＾o＾）♪";text-transform:none}.profile-playlist-add-hint{display:none}.profile-playlist-widget ul{height:80%!important;max-height:100%!important;overflow-y:scroll!important}.profile-playlist-widget li.current .song-info{color:color-mix(in srgb,var(--accent) 50%,#000)!important}.pp-equalizer span{background:color-mix(in srgb,var(--accent) 50%,#000)!important}.profile-playlist-widget li{border-radius:0!important;border:1px solid black!important}.profile-playlist-widget .song-artist{color:color-mix(in srgb,var(--accent) 50%,#000)!important;font-size:11px}.profile-playlist-widget button,.profile-playlist-widget .pp-drag{color:var(--accent)!important}.profile-playlist-widget button:hover,.profile-playlist-widget .pp-drag:hover{background:none!important}.profile-playlist-widget li.current{background-color:color-mix(in srgb,var(--accent) 50%,#fff)!important;color:color-mix(in srgb,var(--accent) 50%,#000)!important}.profile-playlist-widget li:hover{background-color:color-mix(in srgb,var(--accent) 50%,#fff)!important;color:color-mix(in srgb,var(--accent) 50%,#000)!important;border:1px solid var(--accent)!important}.music-bar{filter:grayscale()invert()brightness(1.5);box-shadow:none!important}.music-bar *{border-radius:0!important}html::after{content:"";background:color-mix(in srgb,var(--accent) 80%,#000)!important;width:100%;height:40px;bottom:0;position:fixed;z-index:99999999;mix-blend-mode:overlay;pointer-events:none}.table-section.interests tr:nth-child(6){grid-column:span 2;order:6}@media (max-width:768px){body{background:white!important}.url-info{display:none}.myspace-header{margin:0!important}.myspace-header .navigation{display:flex!important;flex-wrap:wrap!important;height:fit-content!important;margin-top:0;gap:0}.myspace-header .left{margin-left:0px!important}body.profile-page .master-container{width:100%!important;max-width:100vw!important;box-sizing:border-box!important;padding-left:0px!important;padding-right:0px!important}.col.left,.col.right,.row{border:0!important}.col.left{margin-top:-60px}.general-about .profile-pic{width:40%!important;height:100%!important}.general-about .profile-pic img{max-height:100%!important;max-width:100%!important}.contact,.general-about,.mood,span h1,.profile-playlist-mount{display:block!important;position:static!important;width:100%!important}.profile-mood{position:static;width:100%!important;margin-top:-50px}.profile-playlist-widget{margin-top:30px;max-width:none!important;width:calc(100vw - 35px)}footer,footer *{width:0;height:0;opacity:0!important;pointer-events:none}.col.left{display:block}.row{width:100%}footer::before{display:none!important}nav{position:relative!important}.profile{margin-top:80px!important}.table-section.interests .inner{height:250px!important;overflow-y:scroll}.free-space{position:static;width:100%;height:200px}.friends{margin-top:20px}.blog-preview,.table-section:not(.interests){grid-column:span 3!important;width:100%!important}.blog-preview{margin-bottom:20px!important}body:has(.photos-preview,.videos-preview) .blog-preview{grid-column:span 3!important}.table-section:not(.interests),.friends{padding-bottom:2px}body.profile-page .friends,body.profile-page #comments{height:400px!important}.friends table{margin:0!important;height:calc(100% - 15px)!important;overflow-y:scroll}.friends table tbody{padding-bottom:20px}body .blog-preview{grid-column:span 3}.friends{grid-column:span 3!important}.logo{max-width:100%!important;height:30px!important;}}</style>