MCR, Black Parade layout (TBP)

Tags: frankie ☆ iero, tbp, the black parade, my chemical romance, mcr, animated, black, emo, goth

Description:

a black parade inspired layout complete with an autoplayer; playing all of tbp album, floating page animations, tbp mv loading screen, animated heart pfp, custom cursor, extra image boxes, spotify embed spots + more!! please keep my credits on the page <3

Preview:

click on the image for a larger preview

Code:

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

<style>
  
  .logo {
  
  content:url("https://cdn.discordapp.com/attachments/1111836147530874910/1134738469650976848/Untitled174_20230729004512.png")
  
  }
  
  </style>

<style>
.general-about img {-webkit-mask-image: url(https://images.emojiterra.com/google/noto-emoji/unicode-15/animated/1fac0.gif);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
</style>

<div class="about"> 
Made by Frankie ☆ Iero
about me goes here!!

</div>

<div>
<h3>music keeps me sane…:</h3>
<!-- spotify embed here -->

<!-- put a yt id here for autoplay music -->

<iframe width="0" height="0" src="https://www.youtube.com/embed/3D0K9QOyN2w//?&;amp;;autoplay=1&;loop=infinite&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>
</div>
  
  
<style>
        .online{content:url(https://64.media.tumblr.com/b0b51456284cb0e87d20261ce0ff18c2/c9c6cf1c6a2f16d5-e9/s75x75_c1/ddd296a9bdacdb2c8bc498e38071952a618f5879.gifv) }
    </style>


<style>
    body {
          background-image:url(https://i.pinimg.com/736x/5e/9a/a2/5e9aa2e60abffe868249c6db7f47a029.jpg)
    }
</style>
<style>
body { cursor: url(https://64.media.tumblr.com/cd5ffe270ea9fcebf52df5b591167ff1/3ab37b35962881fb-ac/s75x75_c1/4c32f222107c63f9e3efb5f64aae2d34951283b5.gifv), auto; }
</style>

<style>
.profile-info{
background: url(https://i.pinimg.com/originals/ef/5c/cd/ef5ccd31d9e9502eba849f2873e95f99.gif);
no-repeat fixed;
    background-size: cover;
    height: 155px;
    border: white;
    font-size: 0;
    background-size: cover;
    height: 152px;
    border: white;
    font-size: 0;
    background-position-y: top;
}

    .profile {
       
 
background:url(https://i.pinimg.com/564x/01/29/77/0129770164fd9da78bd2ebc686e81ab5.jpg);
color:white;
text-shadow: 0 0 9px black;
    }

.profile .contact, .profile .table-section, .profile .url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview { 
  border-style:Double; 
 border-width:6px; 
 border-color:#FFFFFF; 
background:#161616;
}

/* contact icons */
.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 favorite */
content: "🖤"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "꩜"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward 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 2 group  */
content: "🦴"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "☆"

}
footer {
border-radius: 15px;
background-image: 
url(https://i.pinimg.com/564x/aa/f6/8e/aaf68e11812d6b8c01b46dcb7c0721ea.jpg);
color:White; 
}
  

nav .top {
        background: url(https://i.pinimg.com/originals/36/9c/12/369c12188c05b6714f92d40d7401890a.gif);
    }
    
    nav { background: black url(""); }

:root {
--logo-blue:#FFFFFF;
--darker-blue: #FFFFFF;
--lighter-blue: #080808;
--even-lighter-blue: url(https://i.pinimg.com/564x/76/86/69/768669615dc222abe6b225eb8342ffeb.jpg);
--lightest-blue:#555555;
--dark-orange:#000000;
--light-orange: url(https://i.pinimg.com/564x/76/86/69/768669615dc222abe6b225eb8342ffeb.jpg);
--even-lighter-orange:#555555;
--green: #FFFFFF;
}


<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "fellow undead "; font-size:.8rem; font-weight:bold; 
color:black; }
}
</style>
<style>
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: ""; font-size:.8rem; font-weight:bold;
color:White; } 
</style>
<style>
 .profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "more!!"; font-size:.8rem; font-weight:bold; 
color:White; }
 </style>
<style>
    .contact .heading{ font-size:0; }
.contact .heading:before{ content: "i don't bite!! (mostly)"; font-size:.8rem; font-weight:bold; 
color:White; }
}</style>
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "me!!"; font-size:.8rem; font-weight:bold; color:White; }
<style>

h1{
animation: type 3s steps(27);
  color: transparent;
  font-size: 7px;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 6px);
}
100% {
transform: translate(0, -0px);
}

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

r4zor_ros4ry	1713964253 whats the code for the pfp mask pleaseee? Report Comment .general-about img {-webkit-mask-image: url(https://images.emojiterra.com/google/noto-emoji/unicode-15/animated/1fac0.gif);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;} by Blue Levandar; 1721265450; Report
Jack ☂	1711161676 Using!! :3 Report Comment
🩵Coin🩵	1710148469 wow! cool!! using! :3 Report Comment
JayBuggy	1708468736 Using! Report Comment
Champ.cito	1705788643 Using Report Comment
⋅˚₊‧ ୨୧ ‧₊˚ ⋅	1705729807 ¡¡usado!! Report Comment
TRex	1705677366 USING!! Report Comment
Anzel483	1705543309 using thanks Report Comment
mike	1705253015 using!! Report Comment
Mik3y	1704752073 Using thx Report Comment
Mik3y	1704752073 Using thx Report Comment
Mik3y	1704752070 Using thx Report Comment
clover	1704583815 Using as a base Report Comment
blurzxr.k	1704409146 using tyyy Report Comment
minorbutm𖤐jor	1702724862 Might use!! Report Comment
missqueenvictoria	1702389717 love this! adding it to my profile Report Comment
☆ mikey	1702287451 using!!! this layout is so nice omg Report Comment
mads ♡	1701833454 using!! Report Comment
╺⃝⃤BUNNYR4T (autoplay)	1701715054 might use! Report Comment