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

bella	1752708049 using Report Comment
lily	1752705555 omg this is so awsome im usingg Report Comment
XxXAutumnXxX	1752627296 Using It’s amazing but the first status where the white is, it’s very blurry You’ll see when it’s on my page Nice layout tho Report Comment
duru :3	1752611104 usingg :3 this is so amazing ty Report Comment
vxl~tine	1752534362 using Report Comment
Cho	1752461295 using Report Comment
liv :3	1752427999 using!!! Report Comment
𝒱𝒶𝓂𝓅𝒾𝓇ℯ	1751964609 using!! Report Comment
𐂯　Vesper　🫀	1751960676 using!!!! im gonna change some things but i love this :°D Report Comment
il0veemossx3	1751662211 USING!!! I LOVE ITTTT Report Comment
°′☆ ELIO	1751579777 using :p Report Comment hii!! just a quick question, how doyou put that retro filter on your profile layout? its so cool! by il0veemossx3; 1751662145; Report
✧･ﾟ: gracie *✧･ﾟ	1751532753 Using! So cute :) Report Comment
a	1751250499 USING Report Comment
vee ☆	1751229023 usingg !! Report Comment
dakota xp	1750781279 using>_> Report Comment
binhtheredonethat	1750358545 using, this is AWESOME! Report Comment
headspacer	1750276948 using :p Report Comment
Vampiric Fizzy	1750214059 Usinggg Report Comment
⁺𝓭𝓮𝓶𝓸𝓵𝓾𝓿𝓻𝓻₊˚ ཐི⋆♱⋆ཋྀ ˚₊‧⁺	1750035860 using!! Report Comment
Xx.ZoMb0.xX	1750010247 MayB jst me, but it dosn't workkk!! TAT Report Comment