Linkin Park - Xero demo tape

Tags: xero, linkin park, 90s, 2000s, underground, demo, nu metal, hip hop

Description:

In 1997, when LP were going by the name Xero, they released a 4-track demo cassette that they handed out at shows. This layout is based pm the cover of the cassette. Original layout by HACKSAW, I simply edited it and added some minor tweaks.

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@900&display=swap');
p{ font-family: 'Orbitron', sans-serif; 
font-size: 100%;
color: white; 
text-shadow: 1px 1px 1px black;
}

h1, h2, h3, h4, h5{
font-family: 'Orbitron', sans-serif;
font-size: 100%;
color: white;
text-shadow: 1px 1px 1px black;
}


body {
background:url(https://i.ibb.co/NCkZxgP/uyfu36djvy421.png) fixed;
}


main {
background: transparent;
border: none;
}


:root {
--logo-blue: transparent;
--darker-blue: white;
--lighter-blue: transparent;
--even-lighter-blue: transparent ;
--lightest-blue:  transparent;
--dark-orange: white;
--light-orange:transparent;
--even-lighter-orange:;
--green: blue;
}

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

a:hover {
     color: lightgrey;
   } 
   a{
     color: white; 
   }

}
    .count {
        color: lightgrey;
    }

.profile .friends .person p {
color: lightgrey;  
}
.profile .friends .person p:hover {
color: lightgrey;
}

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

a:hover {
     color: lightgrey; 

}
    .count {
        color: grey;
    }


nav .top{
background-image: linear-gradient(to bottom right,#9BAB9A,#466852,#6C68AD);
margin: 1em 0;
text-align: center;
border-radius: 25px;
}

nav .links{
background-image: linear-gradient(to bottom right, #9BAB9A,#466852,#6C68AD);
border-radius: 25px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-style: italic;
}


.profile .contact .heading,
.profile .table-section .heading{
color: #7A007A;
background-image: linear-gradient(to bottom right,#9BAB9A,#466852,#6C68AD);
border-radius: 25px;
text-align: center;
padding: .1em;
}

.profile .blurbs .heading,
.profile .friends .heading{
color: #7A007A;
background-image: linear-gradient(to bottom right, #9BAB9A,#466852,#6C68AD);
border-radius: 25px;
text-align: center;
padding: .1em;
}

footer{
background-image: linear-gradient(to bottom right, #9BAB9A,#466852,#6C68AD);
border-radius: 25px;
font-style: italic;
color: #520052;
}</style>

<style>
body { cursor: url(https://cur.cursors-4u.net/cursors/cur-2/cur116.cur), auto; }

}
a:hover {
     color: lightgrey;
}

nav{ 
font-size: 13px !important;
font-family: 'Orbitron', sans-serif;
text-shadow: 1px 1px black;
text-transform:none;
padding-left:3px;
text-align: center;
}


/* 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.imgur.com/GCCa893.gif);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url(https://i.imgur.com/GCCa893.gif);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content:url(https://i.imgur.com/GCCa893.gif);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forward to friend*/
content: url(https://i.imgur.com/GCCa893.gif);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url(https://i.imgur.com/GCCa893.gif);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url(https://i.imgur.com/GCCa893.gif);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url(https://i.imgur.com/GCCa893.gif);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://i.imgur.com/GCCa893.gif);
}   

.friends {
    overflow: scroll;
    overflow-x: scroll;
    overflow-x: hidden;
    height: 300px; 
}


count, .friends a p {
color: white;
}


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

html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.imgur.com/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}


</style>

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