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 Venom Boy (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 476 comments ( View all | Add Comment )

A0th0r.Ang3l.is.n0t.okay	1791585306 using but i have a question on which part of the code is the picture on the belt with the bat? cause I need to change it to something on another friend's profile using the same layout Report Comment nvm I figured it all out and then used this layout as a base for my friend and myself, also please be warned the profile doesn't load by A0th0r.Ang3l.is.n0t.okay; 1791642105; Report
mychemicalrevenge	1790547030 using! Report Comment
Angelina_mustdie	1789704218 using :3 Report Comment
☭𝗔𝘥𝗮𝘮♯	1789045574 Using!! Report Comment
pyx	1787939106 Using Report Comment
w1spx_	1786645056 usingg Report Comment
Hel3n4_RawRXD	1786351563 UZINGGG!!! Report Comment
shin	1785066060 thank you :) used for base (kind of) Report Comment
AnoMalY	1784690341 using!! Report Comment
Lord Sandwich	1784603401 This is so cool!! using Report Comment
bridiewentmissing	1783831968 using meow Report Comment
🎵alli💽	1783405991 Using it🥹 Report Comment
𝔤𝔞𝔟𝔶 .♱	1783190032 using!11 Report Comment
heavenhelp!uzzz	1782426612 Using!!! I luv it Report Comment
𝐁𝖾𝗅𝗅𝖺 ✟ 𝐦𝗎𝖾𝗋𝗍𝖾	1782248711 Usingg Report Comment
tyler	1781784461 using!! i love this sm ohmigosh!! Report Comment
𝕳𝖊𝖗 𝕰𝖛𝖎𝖑 𝕽𝖔𝖞𝖆𝖑𝖙𝖞	1781686948 can you do the loading screen only?? Report Comment
nikolaiᯤ ᯅ ᯤ	1780892119 using!! Report Comment
Celyn🩸🥀	1780843334 Using !! :D Report Comment
۫ ׅ ☩ 𝐕𝚎𝚜𝚙𝚎𝚛𝚒𝚘 ! 𓂃 𓈒	1780192163 Using! Report Comment