Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Naruto

Author: Def3ct
Category: Animation
Created: July 12, 2025
Comments (0)

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

<style>
* {cursor: url(https://cur.cursors-4u.net/anime/ani-12/ani1138.cur), auto !important;}
</style>
<a href="https://www.cursors-4u.com/cursor/2012/06/24/naruto-rasengan-shuriken.html" target="_blank" title="Naruto Rasengan Shuriken"><img src="https://cur.cursors-4u.net/cursor.png" alt="Naruto Rasengan Shuriken" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
html:before {
    animation: grain 8s steps(10) infinite;
    background-image: url('https://i.gifer.com/origin/f4/f4f7a7183e2a2c112658a5b560b457b7_w200.gif');
    content: "";
    height: 300%;
    left: -50%;
    opacity:.15;
    position: fixed;
    top: -110%;
    width: 300%;
    pointer-events:none;
    z-index: -1;
}
@keyframes grain {
    0%, 100% { transform:translate(0, 0) }
    10% { transform:translate(-5%, -10%) }
    20% { transform:translate(-15%, 5%) }
    30% { transform:translate(7%, -25%) }
    40% { transform:translate(-5%, 25%) }
    50% { transform:translate(-15%, 10%) }
    60% { transform:translate(15%, 0%) }
    70% { transform:translate(0%, 15%) }
    80% { transform:translate(3%, 35%) }
    90% { transform:translate(-10%, 10%) }
}
</style>

<style>
body::after {
    content: ' ';
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 99;
    background: url('https://friendrewind.com/uploads/gallery/1/img_686d6be5cd1a37.24947163.gif');
    opacity: 0.3;
    pointer-events: none;
}
</style>


<style>
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
:root {
    --naruto-orange: #F66C2D;
    --naruto-blue: #4691CC;
    --naruto-yellow: #E7E419;
    --naruto-dark: #363641;
    --naruto-white: #F0EBDF;
    --font-main: 'Bungee', cursive;
}
</style>

<style>
nav .top {
    background: transparent;
}
nav .links {
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 3px solid var(--naruto-orange);
}
nav { 
    background-image: url(https://i.gifer.com/611.gif); 
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid var(--naruto-yellow);
}
</style>

<style>
main:before {
    width: 100%;
    height: 350px ;
    display: block;
    content: "";
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_686f422d4cdb61.06927836.gif');
    background-position: center center;
    background-size: cover;
    border-bottom: 5px solid black;
}
@media only screen and (max-width: 600px) {
    main:before{
        height: 200px;
    }
}
</style>

<style>  
body {  
    font-family: var(--font-main);
    font-size: 14pt;
    font-weight: bold;
    text-decoration: none;
}
h1, h2, h3, h4, p {
    color: var(--naruto-white);
    text-shadow: 2px 2px 4px var(--naruto-dark);
}
</style>

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

.profile h1 { 
    -webkit-text-stroke: 2px crimson;
    color: transparent;
    -webkit-transform: perspective(200px) rotateX(20deg);
    font-family: "Russo One", sans-serif;
    font-size: 60px;
    background-image: url(https://i.pinimg.com/originals/04/2e/28/042e28021c6d8cdd2d69b0425fbf510b.gif) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-size: 30% 60% !important; 
}
</style>


<style>
/* This styles all the main section containers */
.blurbs, .friendsComments, .friendSpace, .extendedNetwork, .latestBlogEntry, .profile .contact, #comments, .profileInfo {
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_686f40be367833.75157426.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: transparent !important;
    border: 3px solid var(--naruto-dark) !important;
    backdrop-filter: none !important;
    padding: 10px !important;
    margin-bottom: 20px !important;
}

/* This styles the inner content areas of regular sections */
.blurbs .inner, 
.friendsComments .inner, 
.friendSpace .friends-grid, 
.extendedNetwork .inner, 
.latestBlogEntry .inner, 
.contact .inner, 
.profileInfo .details-table {
    background-color: rgba(0, 0, 0, 0.75) !important;
    border: 1px solid var(--naruto-dark) !important;
    padding: 15px !important;
    border-radius: 5px;
}

/* This styles the comments section specifically */
#comments .inner {
    max-height: 545px;
    overflow-y: scroll !important;
    scrollbar-color: var(--naruto-orange) var(--naruto-dark);
    scrollbar-width: thin;
    background: none !important;
    padding: 0 !important;
}
#comments .comments-table td {
    background-color: rgba(0, 0, 0, 0.75) !important;
    border: none !important;
    border-bottom: 2px solid var(--naruto-dark) !important;
    padding: 10px !important;
}
#comments img {
    border-radius: 50% !important;  
    border: 3px solid var(--naruto-blue) !important;  
}
</style>

<style>
main{background: transparent} 
table, tr, td { background-color:transparent;}

/* Text & Link Colors */
span, .btext {
    background-color: transparent !important;
    color: var(--naruto-white) !important;
}
a {
    font-weight: bold !important; 
    color: var(--naruto-yellow) !important;
    transition: all 0.2s ease;
}
a:hover {
    color: var(--naruto-orange) !important;
    text-shadow: 0px 0px 5px var(--naruto-yellow);
}

/* Main Background */
body {
    background:url(https://friendrewind.com/uploads/gallery/1/img_686f3e01e953e5.22317704.jpg);
    background-attachment:fixed;
    background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
}
</style>

<style>
body:before {
    content: " ";
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed;  
    top: 0;  
    left: 0;  
    z-index: 100;
    background-image: url('https://i.gifer.com/origin/62/624c47f648db55d88c88f3414595e8a7_w200.gif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation: rasenganBlast 1.5s ease-out 0s 1 normal forwards;
    pointer-events: none;
}
@keyframes rasenganBlast { 
    0% { opacity: 1; transform: scale(0.5); }
    80% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(1.5); } 
}
</style>

<style>
footer {
    border-radius: 15px;
    background-image: url(https://friendrewind.com/uploads/gallery/1/img_686f48455d00f4.69817709.gif);
    background-size: cover;
    background-position: center;
    border-top: 3px solid var(--naruto-yellow);
}</style>