Red & Black Layout (W/ Embedded Spotify Playlist)

Tags: red and black, grunge, dark

Description:

Most of it's ripped from "Hole (band) layout" To change the Spotify playlist, go to Spotify, click the option to share your playlist, press embed, copy the link, and replace the code, iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/0mgrnVcfTSx3ik2NzDFJgm?utm_source=generator" width="100%" height="352" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy">

Preview:

click on the image for a larger preview

Code:

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

<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: ""

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* add to favorites */

content: ""

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* send message */

content: ""

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* forward to friend */

content: ""

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/* instant message */

content: ""

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/* block user */

content: ""

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/* add to group */

content: ""

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* report profile */

content: ""

}

</style>



<style>

.comments-table{display: none !important;} 

</style>


<style>

.blog-preview{display: none !important;}

</style>

<style>* {cursor: url(https://cur.cursors-4u.net/others/oth-7/oth706.ani), url(https://cur.cursors-4u.net/others/oth-7/oth706.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/11/27/gruppled-busy.html" target="_blank" title="Gruppled - Busy"><img src="https://cur.cursors-4u.net/cursor.png" alt="Gruppled - Busy" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/0mgrnVcfTSx3ik2NzDFJgm?utm_source=generator" width="100%" height="352" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

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

<style>a{color: white !important;}</style>
<style>h1,h2,h3,h4,p{color: white !important;}</style>

<style>
    .heading{
        
    background-color: black !important;
        
    }
</style>

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

<style>
    main{
        
    background-color: black !important;
        
    }
</style>

<style>
    .top{
        
    background-color: #8c272b !important;

    }
</style>

<style>
    .links{
        
    background-color: #8c272b !important;

    }
</style>

<style>
    footer{
        
    background-color: #8c272b !important;

    }
</style>

<style>
    table.details-table{
        
    background-color: black !important;
        
    }
    .profile .details-table td{
        
    background-color: #8c272b !important;
        
    }
</style>

<style>
    .contact{
        
    background-color: #8c272b !important;
    
    }
</style>

<style>
    .comments-table td{
        
    background-color: #8c272b !important;
 
    }
</style>

<style>
   .table-section .heading{
        
    background-color: #8c272b !important;
        
    }
</style>

<style>
   .contact .heading{
        
    background-color: #8c272b !important;

    }
</style>

<style>
    button{

border: 1px solid white !important;   
        
    }
</style>

<style>
    .contact{
        
border: 1px solid white !important;   
        
    }
</style>

<style>
    table.details-table{
        
border: 1px solid black !important;   
        
    }
    .profile .details-table td{

border: 1px solid white !important;   

    }
</style>

<style>
    .table-section{

border: 1px solid white !important;   
        
    }
</style>

<style>
    .friends{
        
border: 1px solid white !important;   
        
    }
</style>

<style>
    .url-info{
        
border: 1px solid black !important;   
        
    }
</style>


<style>
main:before {
width: 100%;
height: 500px;
display: block;
content: "";
background-image: url('https://i.pinimg.com/564x/10/79/01/107901cea36414f9e8167fc3215078fe.jpg');
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}
</style>

<style>
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.ibb.co/d2Np1d2/static.gif);
  background-size: 200px !important;
  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>

<style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://i.pinimg.com/originals/1b/e0/bd/1be0bd720981a5b7073ca11f3d6f6ae4.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/jFKWVt8-9J0?si=wk9_YHI7umZm5rV0/?&;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>table.comments-table{display: block;height: 250px!important;overflow-y: scroll;}</style>
<style>.profile-info{display: none !important;}</style>
<style>.top{border-radius: 25px 25px 0 0 !important;}main{border-radius: 0 0 25px 25px !important;}</style>
<style>footer{border-radius: 25px 25px 0 0 !important;}footer{border-radius: 0 0 25px 25px !important;}</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 20 of 35 comments ( View all | Add Comment )

⠀⠀	1755131933 Using Report Comment
Lukki the geeky	1755018180 using Report Comment
Rita	1754925714 Does it have a song? Bcuz there's a song work on with it and I didn't add it Report Comment
ferxx	1753832402 usingggg!!!!! Report Comment
`~Ｉｃｅ~Ｃｒｅａｍ~`　（ラハゐ）	1752967433 hi, so im using it, but i cant figure out how to change the playlist part, it keeps saying it wont load :/ Report Comment
insane	1751039974 it's for 1 year ago but I still using it with my new acc!! Report Comment
electronic_grrl	1750280923 bless u for making this Report Comment
dr. sunshine	1746213759 using!! Report Comment
dr. sunshine	1746213759 using!! Report Comment
Reon	1746120932 using Report Comment
Lizzy ⋆ ࣪. 💄ᵎᵎ ˖˙⋆✮	1742663357 using!! Report Comment
S4Vi	1740872613 USING Report Comment
﹫﹒𝓂𝑒𝑔𝒶𝓃﹒﹒⿴﹒﹒	1740853198 using Report Comment
leka	1738622165 using Report Comment
Miafox11	1737935975 using Report Comment
Miafox11	1737935833 using Report Comment
trutlino	1737389197 using <33 Report Comment
Matt	1736814170 Usingg :D Report Comment
Emss	1736606872 usinggg Report Comment