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

leandr𑄝 :p	1748303089 Using Report Comment
Max Mayhem	1744577933 usinnnn Report Comment
Xx_JinxieWay_xX	1741518302 usinggg :)))) Report Comment
Diiva	1740083190 hi!! do yk the part of the coding that changes just the shape of your pfp? Report Comment
lottie loathe :p	1732976885 using ;3 Report Comment
⁠☆whitney⁠☆	1731456598 using <3 Report 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
mattie	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