Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
XBOX Original theme

Author: Edlos3r
Category: Games
Created: May 31, 2026
My personal Layout, I am personally very happy with how it turned out, the preview is broken but it should look right when you use it
Comments (0)

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

<style>
(Layout made by Edlos3r, thanks for using it nerd!)
<style>
  @import url('https://fonts.cdnfonts.com/css/xbox-original');
  
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://media.tenor.com/FzJSMa0EnQ0AAAAC/xbox-microsoft.gif');
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 8s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
       /* == font import == */
                
body, body.profile-page {
  font-family: 'XBOX Original', sans-serif;
background-image: url(https://images.squarespace-cdn.com/content/v1/53a24656e4b0a181d6550c16/781ec498-8e57-4331-841a-af88f478d994/Garrion_Template-TheOriginal_2340x1326.jpg);
background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-position: center center !important;
  }
<style>


main {
       background-color: rgba(100, 0, 0, 0);
}

/* colors for the table headings on the left */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
     background-image: linear-gradient(darkgreen, greenyellow);
     color: black;
}

/* edit profile / user is your friend */
.profile-info {
    background-color: #ff0099;
    background-image: linear-gradient(greenyellow, darkgreen);
    border: 3.5px solid rgba(0, 0, 0, );
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
}

/* colors for table cell background (by default spacehey has a separate color for :first-child) */
.profile .table-section .details-table td {
     background-color: #ff0099;
     background-image: linear-gradient(greenyellow, darkgreen);
     border: 2px solid darkgrey;
     border-radius: 3px;
     color: black;
}

/* friends comments - friend's name */
.comments-table td:first-child{
    background-image: linear-gradient(greenyellow, darkgreen)
}

/*friends comments- comment */
.comments-table td {
    background-image: linear-gradient(greenyellow, darkgreen);
}

table.comments-table {
   border: 3px solid black;
   border-radius: 6px;
}

/* interests and links */
.profile .table-section {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
}

/* headings on the right */
.profile .blurbs .heading, .profile .friends .heading {
     background-image: linear-gradient(darkgreen, greenyellow);
     color: black;
}

/* mood and view my */
.profile .mood{
    padding-top: 5px;
    padding-left: 5px;
    box-shadow: 0px 0px 14px black;
    background-color: #ff0099;
    background-image: linear-gradient(greenyellow, darkgreen);
     border-radius: 6px;
     border-style: outset;
     border-width: 1px;
     border: 3.5px solid rgba(0, 0, 0);
     margin-bottom: 20px;
    box-shadow: 0px 0px 14px black;
}

/* blog entries */
.blog-preview{
     background-color: #ff0099;
     background-image: linear-gradient(greenyellow, darkgreen);
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
    padding: 8px;
}

nav .links {
     background-image: linear-gradient(darkgreen, greenyellow);
     color: ghostwhite;
     border: 3px solid rgba(0, 0, 0);
     border-radius: 8px;
     box-shadow: 0px 0px 14px black;      
}

nav .top {
     background-image: linear-gradient(darkgreen, greenyellow);
     color: ghostwhite;
     border: 3px solid rgba(0, 0, 0);
     border-radius: 8px;
     box-shadow: 0px 0px 14px black;      
}

footer {
     background-image: linear-gradient(darkgreen, greenyellow);
     color: ghostwhite;
    border: 3px solid rgba(0, 0, 0);
    border-radius: 8px;
    box-shadow: 0px 0px 14px black;
}

.blurbs {
     background-color: #ff0099;
     background-image: linear-gradient(greenyellow, darkgreen);
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
}

.profile .contact {
     background-color: #ff0099;
     background-image: linear-gradient(greenyellow, darkgreen);
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
}

.profile .friends {
     background-color: #ff0099;
     background-image: linear-gradient(greenyellow, darkgreen);
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
    margin-bottom: 10px
}

/* profile pic, details, etc box*/
.general-about {
    padding: 10px 10px 14px 10px;
    display: flex;
    height: 400px;
    padding: 10px 10px 14px 10px;
    display: flex;
    height: 180px;
    color: white;
     background-color: #ff0099;
     background-image: linear-gradient(Darkslategrey, black, black, black);
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
    margin-bottom: 10px;
    margin-top: 0px;
}

span[itemprop="name"] h1 {
    background-image: linear-gradient(darkgreen, greenyellow);
    color: ghostwhite;
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
    margin: 0px 0px 0px 0px;
    padding: 2px;
}

:root {
    --light-gray: #f2f0f0;
    --gray: #e3e3e3;
    --dark-gray: #919191;
    --darker-gray: #545454;
    --logo-blue: #1D4ED8;
    --darker-blue: white;
    --lighter-blue: #60A5FA;
    --even-lighter-blue: #BFDBFE;
    --lightest-blue: #DBEAFE;
    --red: #FF0000;
    --dark-orange: black;
    --light-orange: black;
    --even-lighter-orange:  darkseagreen;
    --strange-yellow: #dbae2e;
    --green: #34D399;
    --light-green: #E6F8DD;
    --medium-green: #A0C99C;
    --dark-green: #059669;
    accent-color: #1D4ED8;
    accent-color: var(--logo-blue);
}

profile .blurbs .section h4 {
    color: black !important;
}

/* friend names */
.profile .friends .person p {
    color: darkgreen;
    text-decoration: underline;
}

/* friend count colour*/
.count {
   color: darkgreen;
   text-decoration: underline;
}
<style>
  <style>
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://media.tenor.com/FzJSMa0EnQ0AAAAC/xbox-microsoft.gif');
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 8s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
<style></style></style>