metal inspo layout

Tags: webcore, layout, metalhead, emo, grain

Description:

dark and dingy

Preview:

click on the image for a larger preview

Code:

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

<style>
body{
    background-color: black;
}

}
.container{
    width: 100%;
}

  nav .links a:hover {color: #b3b3b3}


nav img.logo{
  display: inline-block;
  background-color: #000;
  width: 50px;
  height: 50px;
}

main{
    background-image: url('https://img.freepik.com/free-photo/dark-grunge-style-scratched-metal-surface_1048-12951.jpg');
    background-size: 100%100%;
    background-repeat: no-repeat;
    border:8px double #1c1c1c;
    width:800px;
    height:500px;
    overflow-y: scroll;
    margin: auto;
    background-color: black;
</style>

<style>
/* font-family */
@import url('https://fonts.googleapis.com/css2?family=Astloch&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap');

</style>



<style>
h1{
    color:#bfbfbf;
    font-family: 'Astloch', cursive; 
    font-size: 40px!important;
    text-shadow: 2px 2px 3px #6e6e6e;


:root{
    --headers: #d7d8db;
    --text: #c4c6cc; 
    --names: #c4c6cc;
    --links: #c4c6cc;
    --font-family: 'IM Fell DW Pica SC', serif;;
}

}
/* this is where the colors for specific things are located */

}
</style>

<style>
nav{
    background-color: transparent;
    border: none;
    margin-bottom: 50px;
}
av .top{
    background: transparent;
    color:var(--links);
}
nav .top a, nav .links a{
    color: #ffffff;
}
nav .links{
    background-color: transparent;
    text-align: center;
}


/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: "  . ";
    color: var(--headers);
}
</style>
<style>
/* font-family */
@import url('https://fonts.googleapis.com/css2?family=Astloch&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap');
</style>


<style>
nav .top, nav .links {
    background-color: transparent;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #6e6e6e !important;
    color:#6e6e6e!important;
}

button{
    border: 0px solid #bfbfbf!important;
    font-family: 'IM Fell DW Pica SC', serif;!important;
    background-color:rgba(0, 0, 0, 0.0) !important;
    color: #bfbfbf !important;
}

.online{
    margin:auto;
    padding-bottom: 5px;
    content: url(https://pixelbank.neocities.org/decome/decorative/0828d47b.gif);
}


/* font family for the headers, navigtion links, links, body text */

a, p, nav label, .section{ 
    font-family: var(--font-family);	
    font-size: 12px!important;
    font-weight: 1;
}
h2, h3, h5{
    font-family: var(--font-family);
    font-size: 12px!important;
    font-weight: 1;
}
hr{
    height:1px;
    background: #6e6e6e;
    border: none!important;
}

</style>

<style>
/* this is where you adjust the borders and background */
.blurbs, .mood, .friends, .contact, .profile .table, .blog-preview, .profile .table-section{
    border: #808080 !important;
    background-color: transparent!important;
}


.comment-replies{border:1px solid #808080;} /* this is the border around the replies */
.comment-reply:not(:first-child){border-top: 4px double #808080;} /* line in between comment replies*/
.comment-reply p{
 margin: 0;
 text-align: left;
}

/* your interest and comments table row background color */
td{
    background-color: transparent!important;
}

/* the interest table */
.table-section{
    border:none !important;
}


</style>

<style>
/* the header section of the boxes */
.profile .contact .heading, .profile .table-section .heading,.home-actions .heading, .profile .friends .heading{
    background: #000000;
    background-size: contain;
    border: 1px #b8b8b8;
    font-family: 'IM Fell DW Pica SC', serif;
    font-size: 16px!important;
    font-weight: bold;
    color: #b8b8b8;
    text-align: center;
    text-shadow: 1px 1px 5px #b8b8b8;
}


</style>


<style>.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 to friends */
content: url("https://xyz.crd.co/assets/images/gallery03/7b278584.gif?v=364e4a1e")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: URL("https://maguro.carrd.co/assets/images/gallery03/868d60b0.gif?v=2e38620a")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://maguro.carrd.co/assets/images/gallery03/868d60b0.gif?v=2e38620a")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://maguro.carrd.co/assets/images/gallery03/868d60b0.gif?v=2e38620a")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://maguro.carrd.co/assets/images/gallery03/868d60b0.gif?v=2e38620a")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://maguro.carrd.co/assets/images/gallery03/868d60b0.gif?v=2e38620a")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://maguro.carrd.co/assets/images/gallery03/868d60b0.gif?v=2e38620a")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://maguro.carrd.co/assets/images/gallery03/868d60b0.gif?v=2e38620a")
}
</style>

<style>


body::before {

content: " ";

display: block;

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);

z-index: 2;

background-size: 100% 2px, 3px 100%;

pointer-events: none;


</style>
<style>
h1{
animation: type 3s steps(27);
  color: #bfbfbf;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  }
@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

/*div*/


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

</style>

<style>
.comments-table{ 
   border: solid #bfbfbf 2px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px #383838 !important;
   margin-bottom: 20px !important}

footer .links{
   background: none !important;
   box-shadow: none !important}



/*FOOTER*/
footer {
   height: 150px;
   background-image: url(https://img.freepik.com/free-photo/dark-grunge-style-scratched-metal-surface_1048-12951.jpg);
   background-position: centre !important;
   background-size: cover;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px #383838 !important}

</style>

<style>
 .profile .blurbs .section h4{
        	color: #696969;
	font-size: 20px;
	-webkit-text-stroke: 1px #a1a1a1;
    text-align: center;
font-family: 'IM Fell DW Pica SC', serif
       }

 img:hover{
          transform: scale(1.1); 
          transition: transform .2s; 
        
    }
  </style>
<style>
.profile .blurbs .heading,
.profile .friends .heading{
    background: #000000;
    background-size: contain;
    border: 1px #b8b8b8;
    font-family: 'IM Fell DW Pica SC', serif;
    font-size: 16px!important;
    font-weight: bold;
    color: #b8b8b8;
    text-align: center;
    text-shadow: 1px 1px 5px #b8b8b8;
}


/* this is the box that says "Edit Info" when you're logged in,
and to your friends it says "Profile Name is your friend". */

.profile-info {
    background-color: transparent !important;
    border:none !important;
}
</style>


<style>
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 2px;
    border: 1px dotted #3b3b3b;
}
::-webkit-scrollbar-thumb {
    background: #707070; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;  
}
</style>


<style>
 .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }
    
    .count {color: #9a9a9a;}
    
    .profile .friends .person p{color: #9a9a9a;}

    .profile .friends .person img:not(.icon) {
        border-radius:15px;
        box-shadow: 1px 0px 7px 2px #000000;
        border: 2px solid #000000
    }

 .profile .friends .person img:not(.icon):hover {
        transform: scale(1.1);
        transition: 0.5s ease;
    }
    
    .profile .friends .person img:not(.icon) {
        transition: 0.5s ease
    }

main {
  background-color: transparent;
  color: #9c9898;
 text-shadow: 2px 2px 3px #262626;
}


/* text decoration */
a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active{
    text-decoration: underline;
    text-decoration-style: wavy;
}
.logout-btn:hover,
.logout-btn:active{
    text-decoration: underline;
    text-decoration-style: wavy;
}
nav .top a:hover{
    text-decoration: underline;
    text-decoration-style: wavy;
}
nav .links a:hover{
    text-decoration: underline;
    text-decoration-style: wavy;
}




friends p, .friends a {
color: grey;
}


a:active {
     color: grey; 

}
a:hover {
     color: grey; 

}



/*LINK COLOURS*/
.links, .links a, .logout-btn{
   color: #808080!important;
   text-shadow: 0px 0px 5px 3px black!important
}



a{color: #808080!important}
   a:hover{color:  #ababab!important;
    text-decoration: underline}
   a:visited: color: #3d3d3d !important}

.links a{color: #808080!important}
   .links a:hover{color: #ababab !important
    text-decoration: underline}
   .links a:visited{color:#616161 !important}

.top a{color: #808080!important}
   .top a:hover{color:#ababab !important
 text-shadow: 0px 0px 5px 3px black!important
    text-decoration: underline}
   .top a:visited{color: #3d3d3d !important}
   
footer .links a{color: black !important}
   footer .links a{color: black  !important
    text-decoration: underline}
   footer .links a{color: black  !important}

.details-table td:first-child{display:none;}

.blurbs .inner .section:nth-child(2) {display:none;}

.url-info {display:none;}

.blog-preview h4 {display:none;} 



.profile .friends .person img:not(.icon) {
    filter: grayscale(100%) brightness(40%);
}

.logo {
filter: sepia(100%) grayscale(100%)  brightness(40%) saturate(20) drop-shadow(-1px 3px 2px black);
}


<div style=max-height: 800px; position: fixed; top: 1px; bottom: 10px; right: 1px; z-index: 200; width: 500px;"><img src="https://i.imgur.com/NE5ua1t.gif"/>


</style>

/* created by /koba ! */

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

allukam	1715471452 using!! Report Comment
Elliotz	1714754200 using Report Comment
CrInKLy	1714598024 using :p Report Comment
(tyler's broken heart)	1713413232 usingggg Report Comment
roman	1712997538 using Report Comment
ryder	1711662256 usandogg Report Comment
Bunny	1709622364 using<3 Report Comment
SEVYN/AARON	1709162297 Using!! Report Comment
edd	1708862392 using!1!1!1 Report Comment
Zzelleysaur	1706922424 Using! <3 Report Comment
macabre_x3	1706325518 usiiiing! Report Comment
sjukdom💸	1706084801 using Report Comment
NOTMIYAVI	1706079131 using Report Comment
Cas	1703357396 Using! Report Comment
sir.m0th	1703108086 usinf this rn!! Report Comment
Lum1n0us	1702568987 Using :3 Report Comment
shayne!! :P	1701064586 using!! Report Comment
alex⋆｡°✩	1700551669 usinggg ^^! Report Comment
Newly-dead	1698524625 Using Report Comment
★ b r i t t	1696927459 Using. <3(: Report Comment