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

nicovel	1747170179 using! Report Comment
sobbingvamp 🎧ྀི♪⋆.✮	1746317612 Def using ! Tysm for making this coollayout Report Comment
Mary	1745074683 using tysmsmsm Report Comment
Striker__	1744904190 THIS IS SO COOL IM USING!!! Report Comment
lele	1738898277 using!!! Thank you!! Report Comment
ilovegerardway77	1738437233 USING!!!! Report Comment
Martuka 0_o !!	1738195675 using this :333 !!! Report Comment
dev/zen	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
✩°｡⦻Z0MBI3⦻🦑🐇	1722692762 Using!!!!!!!! Report Comment