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

𝐂𝐎𝐃𝐘𝐘𝐘 :3	1756317270 usinggg tysmmm Report Comment
🪦⛓🤍𝕸𝒶𝖉𝒽𝖆𝓉𝖙ℯ𝖗🗝	1755649088 I REALLY LUV IT!!! UZZZIIINGGG IT!!XP Report Comment
Khayri	1754861878 using, thank you! Report Comment
CutMeGently	1754369447 this ones totally cool! I'm so using this!! Report Comment
ALEXUS (⁠≧⁠▽⁠≦⁠)	1750569057 Using Report 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
denny demolition	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