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

clownz x_x	1744292000 using :D Report Comment
Ry0	1744190080 USINGGG Report Comment
bando	1743702379 using Report Comment
catzeatcollage	1742376661 using :) Report Comment
jani★	1741906079 using!! Report Comment
Mahri	1741715473 Using Report Comment
V3rmine	1741361029 usingg Report Comment
x_vl	1740455811 Using Report Comment hi by Janeyney; 1741051331; Report hi by Janeyney; 1741051344; Report
x_vl	1740455809 Using Report Comment
Spirit	1740334620 using! Report Comment
Lucas	1739955532 using Report Comment
c00lzo‼️	1739013342 usingg Report Comment
Charlie ☥	1738541844 usingg! Report Comment
Dee	1738042783 Using Report Comment
Maé	1738022846 using Report Comment
Tobias Marguet	1737993742 using Report Comment
Harsh	1737384497 USING Report Comment
𖤐RustySpikes𖤐	1736206791 using! tysm XP Report Comment
Karou	1736125825 usinggg :p Report Comment
𝓕𝓻𝓸𝓰𝓰𝔂 ^_^	1736005893 USINGGGG!!! Report Comment