Three Cheers for Sweet Revenge MCR layout

Tags: mcr, my chemical romance, three cheers for sweet revenge, red, emo, vampire, gerard way, blood, animation, autoplay

Description:

Includes: Autoplay of Cemetery Drive, Three Cheers cursor, blood drip overlay, loading screen, floating gerard gif, circular pfp and friend pfps, custom header/footer etc! Free for everyone to use, just let me know in the comments :D

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by arlo atomickk (https://layouts.spacehey.com/layout?id=27121) -->

<style>
/*UPDATE - ADDED RED NAVIGATION BAR*/

main{ background: none }

/*GRADIENT HEADINGS+BORDERS*/
.profile .table-section, .profile .url-info, .profile .contact {
    border: 2px solid white;
border-radius: 5px;
box-shadow: 0px 0px 7px 5px #a82e3c;
}
.profile .table-section .heading, .profile .contact .heading {
   color: white;
   text-shadow: -1px 1px 1px pink;
   background: linear-gradient(#a82e3c, black);
   border-bottom: 2px solid white;
   border-radius: 5px;
}
.profile .blurbs .heading, .profile .friends .heading{
   color: white;
   text-shadow: -1px 1px 1px white;
   background: linear-gradient(#a82e3c, black);
   border: 2px solid white;
   border-radius: 5px;}

/*HEADINGS FONT*/
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
   h1, h2, h3, h4{font-family: 'Press Start 2P', cursive;
   color: white;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px #c167b5, 0 0 5px #FFFFFF}

/*BODY FONT*/
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
   .table-section td, body{font-family: 'Cedarville Cursive', cursive;
   color: white;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px #FFFFFF, 0 0 5px white;}

/*BODY TEXT SETTINGS*/
main p{
    letter-spacing: 2px;
    font-weight: 700; 
    line-height: 1.5;}

/*FONT COLOURS*/
p{color: white}
.count {color: white}
.profile .blurbs .section h4{color: #a82e3c}
.contact a{color: white}
.mood a, .mood p, .mood{color: #a82e3c}

/*VERY BACK BACKGROUND*/
body{
   background: url(https://i.ibb.co/rs5prjV/ods0QDR.jpg);  
   background-size: auto}

/*PROFILE BCKGROUND*/
.profile{
   background-image: url(https://i.ibb.co/XSsgctC/nSY1JqD.jpg);
   background-size: 120%;
   border-radius: 12px;
   box-shadow: 0px 0px 13px 9px #a82e3c;
   color: red}

/*FOOTER*/
footer {
   height: 150px;
   border-radius: 15px;
   background-image: url(https://i.ibb.co/8Y9773W/7yDwlVL.png);
   background-position: centre !important;
   background-size: cover;
   box-shadow: 0px 0px 9px 7px #a82e3c}

/*CIRCULAR PFP*/
.profile-pic {
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 7px 5px white}

/*TOP BAR*/
.top{
   background:  !important;
   background-image: url(https://i.ibb.co/c2LzpWt/rZhqJoH.jpg) !important;
   background-size: cover !important;
   border-radius: 15px;
   box-shadow: 0px 0px 9px 7px #a82e3c;
   margin-bottom: 20px !important}

/*LOGO*/
.logo{ 
   filter: sepia(100%) hue-rotate(45deg) saturate(10);
   box-shadow: 0px 0px 7px 5px white;}

/* NAV BAR*/
.links{
   background: linear-gradient(#a82e3c, black) !important;
   margin-bottom: 20px !important;
   border-radius: 4px !important;
   text-align: center}

/*FRIENDS NAMES COLOUR*/
.friends-grid a{color: #ff61a8}

/*FRIENDS BACKGROUND*/
.friends{
   background-image: url(https://i.ibb.co/42f7Vyj/aQtdR3j.gif);
   background-size: cover;
   border-style:Double; 
   border-width:6px; 
   border-radius: 5px;
   border-color: white}

/*CONTACT SECTION*/
.contact {
        font-size: 12px;
        font-family: times;
        border: dashed white 3px!important;
        background-image: url(https://i.ibb.co/T4JGX0V/NgBUt6X.gif)!important;
        background-size: 50%;
        border-radius: 5px;
        border-top: 1px;
box-shadow: 0px 0px 7px 5px red;}

/*URL SECTION*/
.profile .url-info{
background-image:url(https://i.ibb.co/jL3q4xg/M985Xuk.gif);
background size: cover !important}

/*TRANSPARENT INTERESTS GRID*/
:root{
   --even-lighter-blue: pink, opacity:0.01;
   --lightest-blue: pink, opacity:0.01;

/*FRIENDS-GRID*/
--light-orange: url(https://i.ibb.co/jL3q4xg/M985Xuk.gif);
--even-lighter-orange: url(https://64.media.tumblr.com/fd5adbe4aa70ce748c03eabeab502847/25ae3be84810b5fa-99/s500x750/13f12ba7b3a059be4cb6192c19ba97342da1694e.gif)}

.friends-grid img{ 
 border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 7px 5px black}

/*DOUBLE BORDERS*/
.profile .contact, .profile .table-section,
   DIV.blog-preview{ 
   border-style: Double;
   border-radius: 5px; 
   border-width:6px; 
   border-color: white; 
   text-shadow: 0 0 9px white;
   linear-gradient(#a82e3c, black)}

/*ONLINE*/
.online{content: url(https://i.ibb.co/gzpFzvt/xpegu0B.gif)}

/*IMAGE ABOVE BLURBS*/
.profile-info {
   font-size: 0px;
   border: 4px dashed black;
   border-radius: 5px;
   background: url(https://i.ibb.co/kxjPtgm/lLz7Q5N.jpg);
   width: cover!important;
   position: centre;
   height: 130px;
   box-shadow: 0px 0px 7px 5px #a82e3c}

/*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: url("https://i.ibb.co/sbp9LFW/lFdn5FJ.png")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://i.ibb.co/sbp9LFW/lFdn5FJ.png")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://i.ibb.co/sbp9LFW/lFdn5FJ.png")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://i.ibb.co/sbp9LFW/lFdn5FJ.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://i.ibb.co/sbp9LFW/lFdn5FJ.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://i.ibb.co/sbp9LFW/lFdn5FJ.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://i.ibb.co/sbp9LFW/lFdn5FJ.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://i.ibb.co/sbp9LFW/lFdn5FJ.png")}

/*LINK COLOURS*/
a{
   color: white !important;}
a:hover{
    color: #a82e3c !important;}
a:visited{
    color: white !important;}
    
.top a{
    color: white !important;}
.top a:hover{
    color: #a82e3c !important;}
.top a:visited{
    color: white !important;}
    
.links a{
    color: white !important;}
.links a:hover{
    color: #a82e3c !important;}
.links a:visited{
    color: white !important;}
   
.friends-grid p{
    color: white !important;}

footer .links a{
    color: white !important;}
footer .links a:hover{
    color: #a82e3c !important;}
footer .links a:visited{
    color: white !important;}

/*BLOOD ANIMATION OVERLAY*/
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.ibb.co/QFV3VvV/Uv9nnqh.gif);
no-repeat fixed; 
background-size: cover;
  content: "";
  height: 200%;
  left: -50%;
  opacity:.5;
  position: fixed;
  top: -110%;
  width: 200%;
  pointer-events:none;}

/*CURSOR*/
*{cursor: url(http://www.rw-designer.com/cursor-extern.php?id=62351), auto !important}

/*LINKS ICONS*/
  .icon, .award img {
        content: url(https://i.ibb.co/3sTmT5J/DF9xotF.gif);
        box-shadow: 0px 0px 7px 5px #a82e3c
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0)}

/*TRANSPARENT FOOTER LINKS*/
footer .links {
   background: rgba(0, 0, 0, 0);
   border: 0px;}
.inner {color: #fffFFF;}

/*FLOATING GIF*/
</style>

<div style="float: ; max-height: 800px; position: fixed; left: 1px; bottom: 10px; z-index: 200;"><img src="https://i.ibb.co/4jH7J0S/pPKXrya.gif"/>

<style>

/*BUTTONS*/
button {
   color: #fff;
   background: #000 url(https://i.ibb.co/jL3q4xg/M985Xuk.gif); 
   border: 2px solid #FFFFFF;}
button:hover {
   color: #FFFFFF;
   background: #ff0000;}

/*TOP SEARCH BAR*/
  .search-wrapper input[type=text] {
    background-color: #a82e3c !important;
    border: 1px dotted white var(--headers) !important;
    border-radius: 10px !important}
 button{
    border-radius: 10px !important;
    border: 1px dotted var(--headers) !important;
    background-color: #a82e3c !important;
    color:var(--headers) !important}

/*LOADING SCREEN!*/
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://i.ibb.co/N3XK37P/0tVm9gY.gif');
	background-size: cover;
	background-repeat: repeat;
    background-position:center;
    background-color: black;
	animation: yourAnimation 2.5s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }  

/*SONG AUTOPLAY - to change the song, copy in the link AFTER THE = SIGN of any youtube video into the spot after the /embed/and before the slashes*/

</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/02W8DAnKvlA//?&;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>

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

Marcy	1742531251 Using, heavily modified Report Comment
𝑷𝑟𝑒𝑡𝑡𝑦 𝑽𝑎𝑚𝑝	1742446376 Using!!! Ty for this beautiful layout!!! 🖤🖤🖤 Report Comment
Leko	1741916738 usiiing Report Comment
Satoru tsuakda	1741739160 USING OHMYGOD ILY Report Comment
☆ -h4ru! ᘎ	1741652658 Using!! Report Comment
✙✮✙ ANTHONY ✙✮✙	1741547177 uzingg:3 Report Comment
𝙹𝙾𝙷𝙽 𝙳𝙾𝙴	1741042673 using"" Report Comment
OLIII	1740819531 using:3 Report Comment
Ell1ott	1740681357 usingg !!! Report Comment
monarcha >_<	1740590610 using <3 Report Comment
Rav3n=)	1740312456 usinggggggggggggggggg!!!!!! Report Comment
A☆	1740084499 Usingg Report Comment
KAITLYN!	1739755590 usinggg!! Report Comment
bee	1739247480 using!!!! Report Comment
sidosww	1739211775 using Report Comment
sophmustdie	1738373697 usingg!! X33 Report Comment
𝙈𝙖𝙩𝙞𝙡𝙙𝙖.ᐟ	1738366043 using ily Report Comment
~Lillian~🖤	1737850947 using! Report Comment
☆Aim☆	1737831135 Usingggg Report Comment
Ryro ˙⋆✮.	1737664305 using, tytyy awesome person on the internet Report Comment