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

†+✝+ 𝕳𝖊𝖑𝖑𝕳𝖔𝖚𝖓𝖉 +✝+†	1785378860 using Report Comment
yuu	1776248502 using! Report Comment
711	1775733637 using Report Comment
Astro	1770448916 using lolol Report Comment
Nini	1769383526 usingg Report Comment
Caylee	1769320239 Using🥹 Report Comment
adam	1769297968 using Report Comment
M4CD3M4RC0	1765698357 using Report Comment
vibren	1765325599 using Report Comment
NeuralIncision	1764602721 using! :D Report Comment
Quinn !!	1764028223 Using! Report Comment
spaghettivii	1762198644 gonna use this!! Report Comment
Jesse ♡	1760631119 usingg Report 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
CannibalMania	1757458602 Using Report Comment
⠀⠀	1755131933 Using Report Comment
⦻wolpertinger꩜	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