Mindless Self Indulgence (MSI) Layout

Tags: frankie ☆ iero, msi, mindless self indulgence, scene, neon, emo, black, animated

Description:

a layout inspired by msi!! complete with a custome logo, cd pfp, autoplayer with a playlist of the best msi songs, custom pixel icons, floating page animation, extra image boxes + more please keep my credits in the code <33

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Kyle or something  (https://layouts.spacehey.com/layout?id=89241) -->

<style>
 .logo {
  
  content:url("https://media.discordapp.net/attachments/891566988432928788/1180434063853637693/Picsart_23-12-02_20-03-10-217.png?ex=657d67e4&is=656af2e4&hm=108f47148e608b41fd16a955e78110f1833203b23869ba08c38f093fbb7a0eee&=&format=webp&quality=lossless&width=1024&height=260")
  
  }
</style>


<div class="about"> 
Made by Frankie ☆ Iero
about me goes here!!

</div>

<div>
<h3>music keeps me sane…:</h3>
<!-- spotify embed here -->
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/2DYNJbuT3WksBec8dfGbmN?utm_source=generator" width="100%" height="352" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
<!-- put a yt id here for autoplay music -->

<iframe width="0" height="0" src="https://www.youtube.com/embed/ovwRGIErTBk//?&;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/7ed09f01ab86b5991bb863db1fb23e40/87968e75d0757ea8-38/s75x75_c1/698fe8058cb6a77462f99d0ad3019cddc6fc5878.gifv) }
    </style>

<style>
    body {
          background-image:url(https://i.pinimg.com/564x/b6/fb/03/b6fb0302c641a573a53083d50544d0cd.jpg)
    }

body { cursor: url(https://64.media.tumblr.com/fd7178dbcdcae058c8c89133be885fae/6f3362f170f7d2bb-16/s75x75_c1/1c2ddbec0a47f97f7e61969ac52bee3a5bbd8a90.gifv), auto; }
</style>

<style>
.profile-info{
background: url(https://i.pinimg.com/originals/62/d8/18/62d818c12c4b2d78281b046753b1bef7.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: center;
}

    .profile {
       
 
background:url(https://i.pinimg.com/564x/b3/7c/3b/b37c3b40c32a7a113911fc22f84819c4.jpg);
color:white;
text-shadow: 0 0 9px #61E9FF;
 </style> 

<style>
.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:#29F137; 
background:#000000;
}

/* 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://64.media.tumblr.com/1caed0b44d1a867aa855fe4ac88d7781/74e3a4f2f60c0e4d-1b/s75x75_c1/e0ecf206ecb66a61f1f6d5c817de70c838b0d99a.gifv);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content:url(https://64.media.tumblr.com/bbac00e6dff6f1c1e1e875a9c3eaec7c/f651789587d2564c-52/s75x75_c1/170e00283491e13cfa7c9642ad0a1a171400785e.gifv);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content:url(https://64.media.tumblr.com/b5aecbb79345a3f249167364f45c9eeb/3fb0d56c4d22b106-76/s75x75_c1/2a7574ea361b100a6f9426da2a044dd25fee890c.gifv);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content:url(https://64.media.tumblr.com/a5938a48b27ff1036f8b53caf072a950/e530cedacf80aa8e-44/s75x75_c1/30bb0d94570e15c2407a959199d81dc378dcb045.gifv);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content:url(https://64.media.tumblr.com/1eca76eef6f986fb30dc92c563e4a6a6/2f63e265cb249f48-da/s75x75_c1/59717cfc3905f6a5a799dc60ec538d2a26bf694c.gifv);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content:url(https://64.media.tumblr.com/114df30a79bc45fb9076f1bf2e2dab42/cd30ff3c9008ddf5-b3/s75x75_c1/27387db5717f1cf7239f8e5f64560153272a0d6f.gifv);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content:url(https://64.media.tumblr.com/b9587d63e59d031c783153662d6e6161/f651789587d2564c-e6/s75x75_c1/c21ae6b510b37356d80e308f5bd0d7dc5aa1af2f.gifv);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content:url(https://64.media.tumblr.com/276c3af1d05f4092bb959c2c96f9bf00/6883b74fe29d203c-14/s75x75_c1/cb5db5e93ce7a9e2f730229ff3c6987d891a98e9.gifv);

}
footer {
border-radius: 15px;
background-image: 
url(https://i.pinimg.com/564x/24/94/0e/24940e0fa3259f93610c2f38096077e0.jpg);
color:White; 
}
  

nav .top {
        background: url(https://i.pinimg.com/564x/24/94/0e/24940e0fa3259f93610c2f38096077e0.jpg);
    }
    
    nav { background: black url(""); }

:root {
--logo-blue:#FFFFFF;
--darker-blue: #000000;
--lighter-blue: #C32929;
--even-lighter-blue: url(https://i.pinimg.com/564x/46/9c/cf/469ccfd58b10a79c3a3e3c9bd26b0529.jpg);
--lightest-blue:#555555;
--dark-orange:#000000;
--light-orange: url(https://i.pinimg.com/564x/46/9c/cf/469ccfd58b10a79c3a3e3c9bd26b0529.jpg);
--even-lighter-orange:#555555;
--green: #FFFFFF;
}
</style>

<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>

<style>
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');
}
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem gray);
}
.profile-pic:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.profile-pic:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 5px;
left: -20px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profile-pic .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none;
}
.general-about .profile-pic img {
max-width: inherit;
}
</style>

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

Erinxcx	1751366401 this is so cool and I wanna use it! But is it possible to have ur own pfp on it and to keep the song you were using before? Report Comment
nicovel	1747170179 using! Report Comment
sobbingvamp 🎧ྀི♪⋆.✮	1746317612 Def using ! Tysm for making this coollayout Report Comment
27peanuts	1745074683 using tysmsmsm Report Comment
Striker__	1744904190 THIS IS SO COOL IM USING!!! Report Comment
ben	1738898277 using!!! Thank you!! Report Comment
ilovegerardway77	1738437233 USING!!!! Report Comment
Martuka 0_o !!	1738195675 using this :333 !!! Report Comment
EDGY GIRL	1734934269 Using ><!! Report Comment
: 🦑 Mellz 🎸 :	1733554796 using omfg Report Comment
prophitute	1732933452 usingg partially Report Comment
soymaya ꩜ .ᐟ	1732813132 using !! Report Comment
Jecka	1732646527 using :) Report Comment
ꃴꍟꈤꀎꌗ	1729518695 using!!!111 Report Comment
🦑🐇Porotos lol🌈🌴	1729467700 Using xD Report Comment
BunBun	1727062051 oh i am def using Report Comment
Y0urS1llyEm0	1726937604 Using!! Report Comment
. SALEM !! 🦑🐇	1724203016 usssinnggg!!! Report Comment
Sop ;p	1723643497 usingggg Report Comment