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 rusted.corey (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 1 of 1 comments ( View all | Add Comment )

☆ ︵ㅤ۪ㅤ۫ㅤcass 𝅄ㅤ࿀ㅤ꒱

1713130108

usando!!

Report Comment

Obrigada por usar

Desculpe se meu português está ruim, estou usando um tradutor.

by rusted.corey; 1713161611; Report