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

Dr. Sunshine	1746213759 using!! Report Comment
Dr. Sunshine	1746213759 using!! Report Comment
Kaien	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
𝕰𝖒𝖒𝖎 𓆩♱𓆪	1736395765 Using <3 Report Comment
Kijisyk0	1736282365 Using Report Comment
cas :33	1734231957 usinggg tyyy Report Comment
adlinw	1733572502 I'm using :3 Report Comment
𝔖𝔢𝔯𝔭𝔢𝔫𝔱𝔦𝔫𝔢 𝔙𝔦𝔰𝔞𝔤𝔢	1730966809 Using, thanks! Report Comment
CHARLEY!	1730857756 using Report Comment
Nomi	1728549692 using, tysm!! Report Comment