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

Striker__	1771088206 using!!!!!! Report Comment
Loui	1769931336 Idk if you do requests (You don't have to do this if you don't want to) but is there a way to hide the top 8 friends with some kind of code? I love this layout a lot Report Comment
Loui	1769234510 Usinggggg :D Report Comment
Draven☆	1768001376 Using :D Report Comment
★. — TOBY / ALEX ─ .✦	1767404310 using!! Report Comment
m3nherachan	1766614544 using Report Comment
pip pirrup	1764771335 using!! Report Comment
avaxDD	1761072656 using!!!!! Report Comment
avaxDD	1761072655 using!!!!! Report Comment
🦇Kai🦑🐇	1759328533 tis so peak that you papa Report 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