Resident Evil 4 layout!

Tags: resident evil, video games, dark, brown, 2000s, animation, horror, gif

Description:

Has animations and autoplaying music.

Preview:

click on the image for a larger preview

Code:

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

<style>

@font-face {
    font-family: 'biohazard';
    src: url('https://dl.dropbox.com/scl/fi/m7h9lm9spa06iud2woxy1/Pithazard-1.ttf?rlkey=f3o5fknuh4d5ikf7ekawlev9r');
}

body{background:url("https://wallpaperaccess.com/full/3777781.jpg") no-repeat fixed; background-size:cover;
background-color: black;
}

.row.profile{
box-shadow: 0px 0px 8px 6px black;
}


nav .links .special a {
color: red;
}

small {
font-size:100%;
}
 
main {
background: transparent;
}

.general-about .profile-pic img {
border: 10px solid transparent;
border-image: url("https://i.ibb.co/1MWSwNt/ezgif-4-d6d6f39b17.jpg") 60 fill stretch;
box-shadow: 0px 0px 10px 0px black;
 }   

b {
font-size: 14px;
}

time.ago {
color: white;
}

h1{
    font-family: 'biohazard';
font-size: 40px !important;
text-shadow: 5px 5px 0px black;
color: white;
}

.profile .friends .inner b, .profile .friends .inner a{
text-align: center;
color: white;
text-shadow: 3px 3px 3px black;
}

p{
font-size: 16px;
}

.details-table td a {
color: black;
}

.details-table td p {
color: black;
font-size: 14px;
}

  .table-section .heading{ 
font-size:14px; 
}

.profile h1{
    font-family: 'biohazard';
color: white !important;
font-size: 14px;
}

.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
font-size: 14px;
}

.friends p, .friends a {
color: white;
text-shadow: 3px 3px 3px  black;
}

.profile .friends .inner{
text-align: center;
background-image: url("https://png.pngtree.com/thumb_back/fh260/background/20220915/pngtree-grunge-wood-background-tinted-background-wood-photo-image_1148204.jpg");
border: 3px inset black;
box-shadow: 0px 0px 10px 0px black;
}

.profile .blurbs .section h4 {
text-align: center;
font-size: 14px;
color: white;
border: 3px black;
}

.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4{
display: none;
}

.profile-info{
background:url("https://i.ibb.co/sKmj50d/ezgif-4-405e12eccb.gif") no-repeat fixed; background-size:cover;
border: 3px inset black;
box-shadow: 0px 0px 15px 0px black;
}

.profile-info a{
font-size: 14px;
color:white;
text-shadow:  3px 3px 2px black;
}

.profile-info h3{
color:white;
}

.profile .blurbs .heading, .profile .friends .heading {
color: white;
background-color:transparent;
}

.profile .blurbs .inner{
background: url("https://i.ibb.co/273yDdf/old-rusty-brown-grunge-background-86638-743.jpg");
box-shadow: 0px 0px 10px 0px black;
border: 3px inset black;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: transparent;
color: black;
}

.contact .heading h4{
display:none !important;}


.contact .heading{ font-size:20px;}
.contact .heading:before{ content: url(https://i.ibb.co/KFqSjS7/ezgif-2-c784c45f94.gif); 
overflow:hidden;
}

  .table-section .heading{ font-size:0; }
.table-section .heading:before{ content: url(https://i.ibb.co/k9DfNgF/ezgif-4-ae698e80f7.png); 
padding-bottom: 10px;
}


h4 {
font-size: 14px !important;
color: white;
  font-family: Arial, sans-serif;
 }

p {
  font-family: Arial, sans-serif;
color: white;
   } 

   a {
font-size: 14px;
     color: white; 
   }


a:hover {
     color: darkred; 

}
    .count {
        color: red;
    }

.profile .friends .person p {
color: white;  
}
.profile .friends .person p:hover {
color: darkred;  
}

.blog-preview{
text-align: center;
background-image: url(https://png.pngtree.com/thumb_back/fh260/background/20220915/pngtree-grunge-wood-background-tinted-background-wood-photo-image_1148204.jpg);
color: white;
box-shadow: 0px 0px 10px 0px black;
}

.contact .heading h4{
font-size:14px;
}

.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 19px 0px black;
}


.online {
    margin:auto;
    padding-bottom: 5px;
    content: url(https://i.ibb.co/PxLBcCV/ezgif-2-48553eb320.gif);
}
  
.icon {
        content: url(https://i9.glitter-graphics.org/pub/910/910759a6tbrb0i7g.gif);
        display: inline-block;
        height: 1.5em;
        width: 1.5em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
}

.profile .contact {
border: black;
  font-family: Arial, sans-serif;
background: url(https://png.pngtree.com/thumb_back/fh260/background/20220915/pngtree-grunge-wood-background-tinted-background-wood-photo-image_1148204.jpg);
border: 3px inset black;
box-shadow: 0px 0px 10px 0px black;
}

.profile .contact a{
font-size: 12px;
}

.f-col{
border: 2px black;
}

.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* add friend */
	content: url(https://i.ibb.co/DCVypHK/ezgif-1-0c7b4c5e76.gif);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add 2 fav */
	content: url(https://pixels.crd.co/assets/images/gallery05/71018225.gif?v=b3554822)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* chat */
	content: url(https://pixels.crd.co/assets/images/gallery02/88488dee.gif?v=b3554822)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward */
	content: url(https://external-media.spacehey.net/media/sFV0Mq-MrDwe9p0yvS4lD4jbv48Iwi7LaDaS-Wq-nDYE=/https://caterpie.crd.co/assets/images/gallery31/880574ea.gif?v=08522da7)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant msg */
	content: url(https://pixels.crd.co/assets/images/gallery76/ac5e79de.gif?v=b3554822)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block */
	content: url(https://pixels.crd.co/assets/images/gallery02/eb638353.gif?v=b3554822)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add 2 group */
	content: url(https://external-media.spacehey.net/media/sACFyCVoxv3YrtvueJAQLFmHr2-Z1LGtkkhWZ8yt-0T8=/https://64.media.tumblr.com/0f516a82de2bbc3f6e7ffe66f58a6ca1/072f93d78594d9a6-84/s75x75_c1/2e98cd750caabd7035c13104eb0b2d3f1f9b6aa7.gifv)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report */
	content: url(https://external-media.spacehey.net/media/sGBVzOdmUsoGedi6M5Kgr51k_1s5Ls4IKjIfrqNvmJUE=/https://caterpie.crd.co/assets/images/gallery27/d85f2cb8.gif?v=08522da7)
} 

.contact .inner a img {
 font-size: 0;
}
.contact .inner a img:before {
 font-size: 1em;
 display: block
}

.profile .table-section .details-table td p, .profile .table-section .details-table td a{
color: white;
}

.profile .table-section .details-table td a:hover{
color: darkred;
}

.profile .table-section .details-table td {
background:url("https://i.ibb.co/273yDdf/old-rusty-brown-grunge-background-86638-743.jpg");
border: 3px inset black;
box-shadow: 0px 0px 10px 0px black;
}


.profile .friends .comments-table td {
background-image: url("https://i.ibb.co/hXBKcc6/cmmnts2.jpg");
border: 7px solid black;
}

.profile .comments-table .inner {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3); 
background: black;
}

.comments-table td:first-child img{
box-shadow: 0px 0px 19px 0px black;
}

.comment-replies{
border: 3px inset darkred;
color: white;
}

.general-about .details{
padding: 2px;
background: black;
border: 3px inset black;
background-image: url("https://motionarray.imgix.net/preview-95126-uPKjfP4omp-high_0012.jpg?w=660&q=60&fit=max&auto=format");
background-size:cover;
box-shadow: 0px 0px 10px 0px black;
  font-family: Arial, sans-serif;
}

.general-about .details p:not(.online){
color: white !important;
font-size: 14px;
  font-family: Arial, sans-serif;
}

.general-about .details a{
  font-family: Arial, sans-serif;
color: white !important;
font-size: 14px;
}

nav{ 
color:white;
font-size: 13px !important;
text-transform:none;
text-align: center;
    }

.links{
width=810px;
}

nav .links {
background: transparent;
}

nav .links a:hover {
color: darkred;
}

nav .top{
background-color: transparent;
}

nav .top a{
color: white !important;
}

nav .top label{
color: white;
}

  .search-wrapper input[type=text] {
    background: white;
  font-family: Arial, sans-serif;
    border: 3px black;
  }

button{
font-family: courier !important;
background: rgb(121,121,121);
background: linear-gradient(360deg, rgba(121,121,121,1) 83%, rgba(190,190,190,1) 94%);
color: black;
}

.profile .url-info {
border: 3px solid transparent;
color: transparent;
font-size: 0.1px;
height: 133px;
background-image: url(https://i.ibb.co/PMjDZqQ/ezgif-2-17d6cd0dee.png);
}

.url-info p{
    opacity: 0.0;
}

.profile .table-section {
border: none;
}


nav .links a{
color: white;
font-family: Arial, sans-serif;
font-size: 13px;
text-shadow: 0 0 7px black;
}
table .comments-table {
border: 2px inset black;
}


footer p{
color: white;
font-size: 100%;
}

footer a{
color: white;
}

footer {
color: white !important;
box-shadow: 0px 0px 15px 6px black;
text-decoration: underline !important;
text-decoration-style: dotted !important;
background-image: url(https://i.ibb.co/0M8Km7k/ezgif-4-a06bc44bf1.jpg);
  }    

    </style>

<style>

h1{
    font-family: 'biohazard';
animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  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 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 6px);
}
100% {
transform: translate(0, -0px);
}

</style>

<style>
table.comments-table{
background-color:black;
display: block;
height: 300px!important;
overflow-y: scroll;
border-color:black;
border-width: 5px;
}
</style>

<style>
img:hover , .url-info: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>
    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: darkred;}

    ::-webkit-scrollbar-track {
    background:black;}
</style>

<style>
.profile .friends .comments-table td:first-child{
background-image: url(https://i.ibb.co/jyxrpc1/ezgif-4-54758147c2.jpg);

}

.comments-table td{
border-width:0;
background-color: black;
border: 2px solid black;
</style>

<style>
body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(0 0 0 / 48%) 50%, rgb(255 255 255 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
</style>

<style>
body { cursor: url(https://cur.cursors-4u.net/games/gam-10/oth959.png), auto; }
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/qgnZ9w5ghwE?si=jL1OY0UqWpiT5KKC//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

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 76 comments ( View all | Add Comment )

http?	1721848205 using Report Comment
rhinerei	1721007993 Usinggg Report Comment
theo	1720219539 using (tysm for creating it :> ) Report Comment
einsamenordichter	1719435752 using this, thanks <3 Report Comment
ೃ❀༄ morgan	1717852148 using! tysm Report Comment
-`♡´- Sebbvastian -`♡´-	1717729545 using ! Report Comment
Tara (>_<)	1717674496 using Report Comment
!! chum 🎸	1717414445 using !! :3 Report Comment
Butler Yuno	1715978788 usinggg<3 Report Comment
ashlyn	1715478843 using lolz Report Comment
simon x_x	1715358626 using!! youre so awesome ^u^ Report Comment
realreal:!@	1715190784 USING!! Report Comment
Giovanni	1715133688 USING Report Comment
jillyfish	1714880820 using!!! Report Comment
dexinqk	1714731472 Using :))) Report Comment
callisto	1714403169 using, ty Report Comment
1_Vee_1	1713442432 Using!! Report Comment
Draglo	1712784288 using. Report Comment
fishncryptz	1712288231 using!! Report Comment
\|7ELOA\|7	1711880410 using Report Comment