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

SAMMY!	1732503784 using Report Comment
Scarlet!X3	1732400650 using Report Comment
m1k3y	1732131967 Using, tysm! Report Comment
verluke, s	1731764607 using, thanksss! :3 Report Comment
savv	1731463316 im defo using this its so cool!! Report Comment
Emo Kitty	1731433093 USING :33 Report Comment
Luna .𖥔 ݁ ˖๋ ࣭ ⭑	1731420319 using!! Report Comment
carly	1731332586 using! i cant find the edit my profile button anymore tho lol Report Comment
overalx	1731211636 using!! this is awesome Report Comment
kladbishche tvoikh nadezhd	1731176038 using ty! Report Comment
Michael	1731158398 using! Report Comment
Sam	1731034201 Using!!! Report Comment
Joel!	1730856534 USING!! Report Comment
★ C☆SPER ★	1730446774 using :3 Report Comment
Lili!	1730433831 Using!!! Report Comment
Leahh	1730084783 usingg xD Report Comment
𝙚𝙫𝙖𝙣 ˗ˏˋ꒰ 🩸 ꒱	1729963996 using!!! <3 Report Comment
tobyy ✧/ᐠ-ꞈ-ᐟ\ $tobyy ✧/ᐠ-ꞈ-ᐟ\'s profile picture$	1729898297 will ve using! thank you <3 Report Comment
EDDIE!	1729783110 using :) Report Comment
lorenzo	1729600537 USINGG !! Report Comment