grunge 1

Tags: grunge, punk
Description:

Layout created by Jude (https://layouts.spacehey.com/rpj2004)
Code:

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

<style>

.container{
        width: 920px;
margin-top:13px;
    }

 body {  filter: grayscale(75%);
  background: url(https://i.pinimg.com/564x/0e/7f/6d/0e7f6d1b2f7ae99950122a96484421ca.jpg);
  background-size: cover ;
background-attachment: fixed;
font-family: Simonetta }

div.top {
  background: #20315a;
  box-shadow: 5px -12px 19px 6px #000000;
}
 .links {
 background: linear-gradient(0deg, rgba(48,68,118, 1) 0%, rgba(30,47,82,1) 25%, rgba(23,36,64,1) 50%, rgba(48,68,118, .9) 100%);
   text-align: center;

}

.profile h1 {
    font-size: 32px;
    margin-left: 25px;
}

.general-about .profile-pic img {
    max-width: 215px;
    max-height: 190px;
   box-shadow: 2px 2px 19px 2px #000000;
    margin-left: 10px;
   
}

.profile .mood {
 margin-top: 25px;
}

.online { 
    content: url(https://dl.glitter-graphics.com/pub/2419/2419240fiqjh31ilb.gif);
    width: 31%;

}
main:before{
width: 100%

margin-bottom: 1px;
margin-top: -6px;
height: 150px;
display: block;
content: url();
filter: grayscale(65%);
box-shadow: 2px 2px 19px 2px #000000;
background-image: url(https://i.pinimg.com/236x/d3/db/9d/d3db9d41c0e0d336435f9a522097194f.jpg);
background-position: center center;
background-size: cover;
background-position:center;
background-color: transparent;
background-repeat: repeat;
}

.profile-info {
    background: 
    url(https://i.ibb.co/fpHLFg4/emo-banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left
}

main {
  background: linear-gradient(rgba(248, 248, 248, .7) 0%, rgb(18, 31, 60, .7) 100%, rgba(18, 31, 60, .7) 0%);
box-shadow: 5px 5px 19px 6px #000000;
    font-size: 18px;
}

.profile .blurbs .heading,.profile .friends .heading {
    background: #20315a;
    text-shadow: 4px 3px 4px black;
box-shadow: 2px 2px 4px 2px black;
     font-size:15px;
}

.profile .contact .heading, .profile .table-section .heading {
background:  #20315a;
    text-shadow: 4px 3px 4px black;
box-shadow: 2px 2px 4px 2px black;
  font-size:15px;
}


.profile .contact, .profile .url-info, .profile .table-section, .setting-section {
border: transparent;
box-shadow: 2px 2px 4px 2px black;
}

.profile .blurbs .inner, .profile .friends .inner, .blog-entry .comments .inner, .bulletin .comments .inner, .setting-section .inner {
    box-shadow: 2px 2px 6px 2px black;

}

.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .setting-section .heading h4, .statistics .heading h4 { color: lightgrey; 
    text-shadow: 4px 3px 4px black;
       font-size:15px;
}

.profile .blurbs .section h4 {
 color: transparent;
}

.details-table td:first-child {
    background: #20315a;
    color: lightgrey;
    font-weight: bold;
    text-shadow: 4px 3px 4px black;
   padding: 0px;
     font-size:15px;
}

.details-table td{
    background:  rgba(24, 36, 64, .5);
    color: #929292;
    text-shadow: 4px 3px 4px black;
      padding: 0px;
  font-size:15px;
}
   

.comments-table td:first-child {
 background: #20315a;
    color: lightgrey;
    font-weight: bold;
    text-shadow: 4px 3px 4px black;
    font-size:15px;
}

table.comments-table, {
    color: lightgrey;
    text-shadow: 4px 3px 4px black;
  font-size:15px;
}

.comments-table td {
    background:  rgba(24, 36, 64, .5);
    color: #929292;
    text-shadow: 4px 3px 4px black;
  font-size:15px;
}
.profile .friends .person p {
color: black;
}

.profile .friends .inner {
    height: 250px;
    overflow-y: scroll;
}


footer {
background:#20315a;
box-shadow: 5px 12px 19px 6px #000000;
}

/* contact icons */
.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://i.ibb.co/MRXz01G/1d8850b5.gif);
 filter: grayscale(.7);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url(https://i.ibb.co/MRXz01G/1d8850b5.gif);
 filter: grayscale(.7);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url(https://i.ibb.co/wRBQZDX/OEXw2bO.png);
 filter: grayscale(.7);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url(https://i.ibb.co/wRBQZDX/OEXw2bO.png);
 filter: grayscale(.7);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url(https://i.ibb.co/MRXz01G/1d8850b5.gif);
 filter: grayscale(.7);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url(https://i.ibb.co/MRXz01G/1d8850b5.gif);
 filter: grayscale(.7);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url(https://i.ibb.co/wRBQZDX/OEXw2bO.png);
 filter: grayscale(.7);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://i.ibb.co/wRBQZDX/OEXw2bO.png);
 filter: grayscale(.7);
}


a{
  color: #fff;
  text-decoration: italic;
  text-shadow: 4px 3px 4px black;
}

button:hover {
   color: #fff;
   background:#121f3c;
}
a:hover {
   color: #121f3c;
   text-shadow:  4px 3px 4px black;
}
nav .links a:hover {
  text-decoration: none;
  Color:#121f3c;
  text-shadow:  4px 3px 4px black;
}
.count {
   color: #121f3c;
}


</style>

<style>* {cursor: url(https://cur.cursors-4u.net/holidays/hol-1/hol62.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2005/10/31/hol62.html" target="_blank" title="Black Bat"><img src="https://cur.cursors-4u.net/cursor.png" alt="Black Bat" style="position:absolute; top: 0px; right: 0px;"/></a>


<iframe width="0" height="0" src="https://www.youtube.com/embed/rBzA4shGmw8//?&;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>


<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url(https://64.media.tumblr.com/61462a67de3c3c48674e503340ed5195/ac926009ba373921-41/s500x750/c99a9511ef6675c4e6482acedd1a8967b1f9e8c5.gifv);

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 2s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>


<div>
<h4>My Cassette(s):
(your playlist here)


</h4></div>
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

Comments disabled.