Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind

FriendRewind

← Back to Layouts

Silent Hill

Author: Def3ct

Category: Goth

Created: July 16, 2025

Silent Hill scary layout (:

Comments (1)

Xx_ranalan_xX 07/20/2025 2:28 AM

when I saw this I started doing backflips

You must log in to comment.

CSS Code

<style>
/* Start https://www.cursors-4u.com */ * {cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1156.ani), url(https://ani.cursors-4u.net/cursors/cur-13/cur1156.png), auto !important;} /* End https://www.cursors-4u.com */
</style>

<style>
/* Static Overlay */
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:.1;
    position: fixed;
    top: -110%;
    width: 300%;
    pointer-events:none;
    z-index: 100;
}
@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>
/* Constant GIF Overlay */
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>
/* Horror Animation Keyframes */
@keyframes breathing {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px #000; }
    50% { transform: scale(1.005); box-shadow: 0 0 15px #000; }
}
@keyframes textGlitch {
  2%, 64% { transform: translate(2px, 0) skew(0deg); color: #8B0000; }
  4%, 60% { transform: translate(-2px, 0) skew(0deg); color: #E0E0E0; }
  62% { transform: translate(0, 0) skew(2deg); }
}
@keyframes fadeInOut {
    0%   { opacity: 0; }
    5%   { opacity: 0; }
    10%  { opacity: 0.7; }
    25%  { opacity: 0.7; }
    30%  { opacity: 0; }
    100% { opacity: 0; }
}

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
:root {
    --sh-red: #8B0000;
    --sh-rust: #8D4004;
    --sh-dark: #1a1a1a;
    --sh-fog: #A9A9A9;
    --sh-text: #E0E0E0;
    --font-main: 'Special Elite', monospace;
}
</style>

<style>
/* Navigation Bar - Updated with Barbed Wire Background */
nav .top {
    background: transparent url('https://friendrewind.com/uploads/gallery/1/img_687834b446e704.42749623.gif') repeat-x center;
    height: 25px; /* Sets the height of the barbed wire strip */
    border-bottom: 3px solid var(--sh-dark); /* Adds a line below the wire */
}
nav .links {
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 2px solid var(--sh-red);
}
nav { 
    background-image: url(https://i.gifer.com/78cI.gif); 
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid var(--sh-rust);
}
</style>

<style>
/* Header Image */
main:before {
    width: 100%;
    height: 300px ;
    display: block;
    content: "";
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_68782e68301143.87573769.gif');
    background-position: center bottom;
    background-size: cover;
    border-bottom: 5px solid black;
    filter: sepia(0.2) grayscale(0.3);
}
@media only screen and (max-width: 600px) {
    main:before{
        height: 150px;
    }
}
</style>

<style>  
/* Base Font & Text Styling */
body {  
    font-family: var(--font-main);
    font-size: 15pt;
    font-weight: normal;
    text-decoration: none;
}
h1, h2, h3, h4, p {
    color: var(--sh-text);
    text-shadow: 2px 2px 2px var(--sh-dark);
}
</style>

<style>
/* Username Styling - with Glitch Animation */
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');
.profile h1 { 
    font-family: "Creepster", cursive;
    font-size: 50px;
    color: var(--sh-red);
    text-shadow: 2px 2px 2px #000, 0 0 10px var(--sh-red);
    animation: textGlitch 2s cubic-bezier(.25, .46, .45, .94) both infinite;
}
</style>

<style>
/* Profile Row Background */
.profile {
    background-image: url('https://giffiles.alphacoders.com/254/25405.gif') !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;
    background-position: top center !important;
}
</style>

<style>
/* Main Containers - with Breathing Animation */
.blurbs, .friendsComments, .friendSpace, .extendedNetwork, .latestBlogEntry, .profile .contact, #comments, .profileInfo {
    background-color: rgba(10, 5, 5, 0.8) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    border: 12px solid transparent !important;
    border-image: url(https://friendrewind.com/uploads/gallery/1/img_687042898993c9.19973811.jpg) 30 stretch !important;
    padding: 10px !important;
    margin-bottom: 25px !important;
    animation: breathing 10s infinite ease-in-out;
}

/* Inner Content Areas */
.blurbs .inner, .friendsComments .inner, .friendSpace .friends-grid, .extendedNetwork .inner, .latestBlogEntry .inner, .contact .inner, .profileInfo .details-table, #comments .comments-table td {
    background: transparent !important;
    border: none !important;
}

/* Comments Section Specifics */
#comments .inner {
    max-height: 500px;
    overflow-y: scroll !important;
    scrollbar-color: var(--sh-rust) var(--sh-dark);
    scrollbar-width: thin;
}
#comments .comments-table td {
     border-bottom: 1px solid rgba(139, 0, 0, 0.4) !important;
     padding: 10px 0 !important;
}
#comments img {
    border: 3px solid var(--sh-rust) !important;
    filter: grayscale(50%) contrast(110%);
}
</style>

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

/* Link Styling */
a {
    font-weight: bold !important; 
    color: #C0C0C0 !important;
    text-shadow: 1px 1px 3px var(--sh-dark) !important;
    transition: all 0.3s ease;
}
a:hover {
    color: var(--sh-red) !important;
    text-shadow: 0px 0px 5px var(--sh-red);
}

/* Main Background */
body {
    background-color: #000 !important;
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_68782f00869292.18720547.jpeg') !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
}
</style>

<style>
/* Intro Animation - Welcome to Silent Hill */
body:before {
    content: " ";
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed;  
    top: 0;  
    left: 0;  
    z-index: 1000;
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_68782e66d16006.30029767.gif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation: silentHillIntro 4s ease-out 0s 1 normal forwards;
    pointer-events: none;
}
@keyframes silentHillIntro { 
    0% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; } 
}
</style>

<style>
/* Footer - with Corner GIF Animation */
footer {
    border-radius: 0;
    background-image: url(https://i.gifer.com/5E2v.gif);
    background-size: cover;
    background-position: center;
    border-top: 5px solid var(--sh-dark);
    height: 150px;
}
footer::before {
    content: '';
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 150px;
    height: 220px;
    background: url('https://friendrewind.com/uploads/gallery/1/img_687833faeeb1b8.68505414.webp') no-repeat center center / contain;
    z-index: 98;
    animation: fadeInOut 25s infinite;
    pointer-events: none;
}</style>