silent hill 3

Tags: silent hill, red, horror, layout, layouts

Description:

layout that i coded in class !!!<3 pls comment if you are using and DO NOT remove creds

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by  (https://layouts.spacehey.com/layout?id=88769) -->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap');
font-family: 'Playfair Display', serif;
</style>

<style>
@font-face { font-family: 'palatino';
src: url(https://dl.dropbox.com/s/https://www.dropbox.com/scl/fi/7q9hv9kzk48o892m1lzli/Palatino-Font-Free.zip?rlkey=4o6cjrorxwouvqbzha97w0xlb&dl=0);
</style>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');
font-family: 'Oswald', sans-serif; 
</style>

<style>
.profile h1 { font-family: 'Oswald'; text-align: center; font-size: xx-large; }

body {
    background: url(https://sightingames.files.wordpress.com/2021/10/silenthill3.jpg);
    background-size: cover;
    background-attachment:fixed;                                                                                  
    background-position: right;
   background-repeat:no-repeat;
    filter:grayscale(70%);

  }

.logo{content: url(https://www.nicepng.com/png/full/189-1892605_silent-hill-silent-hill-logo-png.png);

}

 main{
background-image: none;
background-position:undefined;
background-attachment: fixed;
background-size: auto;
background-color: rgba(0, 0, 0, 0);
color:white;
font-family: 'palatino';
font-size:100%;
text-shadow: 2px 2px 2px black;

  }
.contact, .url-info, .table-section, .blurbs, .friends, .comments {
background-image: none;
background-position:undefined;
background-attachment: fixed;
background-size: auto;
background-color: rgba(0, 0, 0, 0.7);
border: 2px Solid black!important;
text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 8px white; 

}

.heading{
background:red!important;
text-align:center;
}

a, .count {
color: white;
}

footer {
background-image: none;
background-position:undefined;
background-attachment: fixed;
background-size: auto;
background-color: transparent;
color:white;
}

:root {
--logo-blue:;
--darker-blue:none;
--lighter-blue: none;
--even-lighter-blue: transparent;
--lightest-blue:transparent;
--dark-orange:white;
--light-orange:transparent;
--even-lighter-orange: transparent;
--green:transparent;
}
nav .links {
font-family: 'Neuton', serif;
text-align:center;

}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
content: '♰' !important;
padding-left: 4px !important;
color:white;
text-decoration:bold;

}
.contact img.icon { 
 display: none; 
}

.contact{background-color:  !important;}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before{ 
 /* add to friends */
 content: " ★ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px;  
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before{ 
 /* add to favorites */
 content: " ★ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px;  
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before{ 
 /* send message */
 content: " ★ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before{
 /* forward to friend */
 content: " ★ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px;  
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before{
    /* instant message */
 content: " ★ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
    /* block user */
 content: " ★ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
    /* add to group */
 content: " ★ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
    /* report user */
 content: " ★ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px;  
 background-size: 100% 100%;
</style>

<style>

img:hover , .url-info:hover , .online:hover {

  animation: shake 1s;

  animation-iteration-count: infinite;

}

@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); }
}

</style>

<style>
font-family: 'palatino';
h1{
  animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  font-family: courier;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{

  0%{
    width:0ch;
  }

  100%{
    width:27ch;
  }

}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes float {
0% { transform: translate(0, 0px);
}

50% {
transform: translate(0, 8px);
}

100% {
transform: translate(0, -0px);
}

</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
 {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
body::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
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%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;

</style>
<a href="https://spacehey.com/laterzombie">layout by lynx</a>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 43 comments ( View all | Add Comment )

୧ ‧₊˚ elliot ⋅ ☆	1714338516 USING !! Report Comment
GuLu	1714328990 using Report Comment
victoria	1712852952 using Report Comment
Harvey	1712734226 using :3 Report Comment
<3	1710950650 usingggg Report Comment
Leon Shit Kennedy	1710807373 Using :) Report Comment
Marui \| ☆ \|	1710541658 Using!! Report Comment
¡Mei!𖤐	1708737662 USANDOO!! Report Comment
ranpolvrr	1708392205 using Report Comment
Genan	1708034136 Using! Report Comment
double sided	1707703588 usando!!!! Report Comment
𝐳𝐨𝐥𝐢	1707158121 using :3 Report Comment
✩swooferz ✩	1707069515 using :p Report Comment
bombie6000	1707031471 using !! Report Comment
D1SC0G4L	1706019634 so pretty! using Report Comment
𝜗𝜚	1705983511 using! Report Comment
𝜗𝜚	1705983507 using! Report Comment
Zamdie	1705961051 using Report Comment
Cassidy!¡	1705854558 using!! Report Comment
saiko	1705851983 Usando Report Comment