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

⋅⊰༻♱ 𝐡𝐚𝐳𝐞𝐥 ♱༺⊱⋅	1758413352 heyyyy my bad I finally found a way!! :DD Report Comment
⋅⊰༻♱ 𝐡𝐚𝐳𝐞𝐥 ♱༺⊱⋅	1758412742 hiiii i tried using the spotify playlist thing but replacing it with my own playlist, i made sure it's public, but for some reason mine won't work, do you have any idea why?? Report Comment how did you do it? by ೃ༄ 𝘳𝘦𝘢𝘨𝘢𝘯˚◞♡ ⃗; 1759374675; Report i replaced the code with my own embeded code of the playlist from google by ⋅⊰༻♱ 𝐡𝐚𝐳𝐞𝐥 ♱༺⊱⋅*; 1759430164; Report
sally	1758376245 usingg Report Comment
CannibalMania	1757458602 Using Report 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