my melody windows theme

Tags: pink, retro, windows, windows 95, my melody, cute, sanrio, computer, 90s, layout

Description:

comment if used :) requested by purbabie !!
spacehey custom logo by ✧💧Lumi💧✧
HIGHLY inspired by nini
!! not overly compatible with mobile !! (sorry)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ray ☆ 🍉 (https://layouts.spacehey.com/layout?id=95114) -->

<style>

body{ 
background: url(https://pbs.twimg.com/media/B6EXuZwCAAA0rzr?format=png&name=large) fixed;
    background-size: cover;
font-family: monospace;
    color: white;
    text-shadow: 1px 1px red!important;
}

.container {
    width: 62%;
    max-width: 100%;
    margin: 0 auto 10px;
}

main{
background: transparent;
}

nav .top {
    padding: 15px 10px 14px 10px;
    display: flex;
    position: relative;
}

nav:before {
    content: "https://spacehey.com";
    font-family: monospace;
    width: 98.7%;
    height: 21px;
    display: block;
    background-image: url(https://cdn.discordapp.com/attachments/1085563000599097355/1144306155410169937/Screenshot_2023-08-24_at_17.06.56.png), linear-gradient(180deg,#ffd6e7,#ff70ae 8%,#ff9ac6 40%,#ffbcd9 88%,#ff89bc 93%,#ff70ae 95%,#ff2483 96%,#ff2483);
    background-repeat: no-repeat !important;
    background-position: right center!important;
    padding: 3px 5px 3px 3px;
    border-top: 1px solid #ff2483;
    border-left: 1px solid #ff2483;
    border-right: 1px solid #eb268b;
    border-top-left-radius: 8px;
    border-top-right-radius: 7px;
    font-size: 13px;
    text-shadow: 1px 1px #eb268b;
    height: 21px;
    color: #fffafc;
    font-weight: normal;
    filter: hue-rotate(19deg);
    box-shadow: #ffffff7a 0 1px 1px 1px inset;
    margin-top: 20px;
    width: 64%;
}

nav .top {
    background: linear-gradient(180deg, #f68194, pink);
    padding: 5px 5px 5px 5px;
    border: 1px solid #ff3b5b;
    display: flex;
    position: relative;
    border-top: none!important;
    box-shadow: #ffffff7a 0 1px 1px 1px inset;
    align-items: center;
    width: 65%;
}

input {
    overflow: visible;
    background: #ffe8ec;
    box-shadow: inset 2px 2px grey, 2px 2px #dcd2d2;
    border: none;
    padding-top: 2px;
}

button {
    background: lightpink;
    outline: pink inset 3px;
    border: 1px solid #84797996;
    color: white;
    text-shadow: 1px 1px 1px #000000a6;
}

nav .links {
    background-color: transparent;
    padding: 3.5px 16px 5.5px 16px;
    display: flex;
    flex-direction: column;
    width: 59px;
    position: absolute;
    transform: translateX(0px);
    height: -webkit-fill-available;
    justify-content: center;
    margin-left: -165px;
}

nav .links a {
    text-decoration: none;
    color: white;
    text-shadow: 1px 1px #0000007d;
    font-size: max(0.98em, 12px);
    background: pink;
    border: inset #ff9bad 4px;
    padding: 5px;
    width: 97px;
    display: flex;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: none;
}

nav .links a:before {
    content: "↬";
    color: white;
    padding-right: 6px;
    font-weight: bold;
}

nav .links li {
    min-height: 1.4em;
    margin-bottom: 26px;
}

body > div > nav > ul > li:nth-child(12) > a > img {
    filter: hue-rotate(305deg);
}

body > div > nav > ul > li.active > a:nth-child(1) > img {
    filter: hue-rotate(298deg);
}

html *::-webkit-scrollbar-track {
    image-rendering: pixelated;
    background-position: 0 0;
    background-repeat: repeat;
    background: #ffe2e7;
    border: 1px solid #ff147685;
}

html *::-webkit-scrollbar-button {
  background-repeat: no-repeat;
  background-size: 16px;
}

html *::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTcgNWgxTTYgNmgzTTUgN2g1TTQgOGg3IiAvPgo8L3N2Zz4=");
}

html *::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTQgNWg3TTUgNmg1TTYgN2gzTTcgOGgxIiAvPgo8L3N2Zz4=");
}

html *::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTggM2gxTTcgNGgyTTYgNWgzTTUgNmg0TTYgN2gzTTcgOGgyTTggOWgxIiAvPgo8L3N2Zz4=");
}

html *::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTYgM2gxTTYgNGgyTTYgNWgzTTYgNmg0TTYgN2gzTTYgOGgyTTYgOWgxIiAvPgo8L3N2Zz4=");
}

html *::-webkit-scrollbar-corner {
  background: pink;
}

html *::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: none;
}

html *::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-button {
    width: 16px;
    height: 16px;
    background: pink;
    box-shadow: inset 1px 1px #ffecec, inset -1px -1px #ab2323;
    border: 1px solid;
    border-color: silver #000 #000 silver;
}

.profile h1 {
    width: 98.7%;
    height: 21px;
    display: block;
    background-image: url(https://cdn.discordapp.com/attachments/1085563000599097355/1144306155410169937/Screenshot_2023-08-24_at_17.06.56.png), linear-gradient(180deg,#ffd6e7,#ff70ae 8%,#ff9ac6 40%,#ffbcd9 88%,#ff89bc 93%,#ff70ae 95%,#ff2483 96%,#ff2483);
    background-repeat: no-repeat !important;
    background-position: right center!important;
    padding: 3px 5px 3px 3px;
    border-top: 1px solid #ff2483;
    border-left: 1px solid #ff2483;
    border-right: 1px solid #eb268b;
    border-top-left-radius: 8px;
    border-top-right-radius: 7px;
    font-size: 17px;
    padding-bottom: 26px!important;
    text-shadow: 1px 1px #eb268b;
    height: 21px;
    color: #fffafc;
    font-weight: normal;
    filter: hue-rotate(19deg);
    box-shadow: #ffffff7a 0 1px 1px 1px inset;
    margin-top: 20px;
    width: 64%;
    padding-left: 10px!important;
}

body > div > main > div.row.profile > div.col.w-40.left > p {
    display: none;
}

.general-about {
    margin-top: -12px;
}

.online {
    color: #0C8C00;
    font-weight: bold;
    font-size: 143%;
    filter: hue-rotate(226deg);
}

.award a {
    color: white;
    font-size: 117%;
    text-decoration: none;
}

.general-about .profile-pic img {
    max-width: 160px;
    max-height: 160px;
    border-radius: 8px;
    border: 1px solid #ffffff;
    box-shadow: 0 0 4px #740000;
    margin-left: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.logo {
content:url("https://cdn.discordapp.com/attachments/1181715699207507978/1188186541516914758/Untitled193_20231223102854.png?ex=65999bf2&is=658726f2&hm=593e8edd7d02155c3c5ae006c491867aba9986d4f629b7e6523e9284e432ccef&"); }

img.logo.logo-fallback {
    transform: scale(1.3) scaleY(1.5);
}

.profile h1, .general-about {
    transform: translate(-24px, -26px);
}

.general-about .details {
    margin-top: -12px;
    padding-top: 8px;
    background: linear-gradient(180deg, #f5768c, pink);
    padding-left: 7px;
    border: 1px solid #ff006c;
    box-shadow: inset 1px 2px 1px #ffffffe0, inset -1px -2px #bd040469;
    color: white;
    text-shadow: 1px 1px black;
width: 80%;
padding-right: 10px!important;
    border-radius: 0 8px 0 0;
}

.profile .mood {
    width: 100%;
    display: inline-block;
    background: linear-gradient(180deg, #ff758d, pink);
    padding: 11px 11px 1px;
    margin-bottom: 15px;
    text-align: center;
    color: white;
    border: 1px solid deeppink;
    box-shadow: inset 1px 2px 1px #ffeeeecf, inset -1px -2px 1px #9527636e;
    border-radius: 8px 8px 0 0;
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading{
    background-image: url(https://cdn.discordapp.com/attachments/1085563000599097355/1144306155410169937/Screenshot_2023-08-24_at_17.06.56.png), linear-gradient(180deg,#ffd6e7,#ff70ae 8%,#ff9ac6 40%,#ffbcd9 88%,#ff89bc 93%,#ff70ae 95%,#ff2483 96%,#ff2483);
    background-repeat: no-repeat !important;
    background-position: right center!important;
    padding: 3px 5px 3px 3px;
    border-top: 1px solid #ff2483;
    border-left: 1px solid #ff2483;
    border-right: 1px solid #eb268b;
    border-top-left-radius: 8px;
    border-top-right-radius: 7px;
    font-size: 17px;
    padding-bottom: 26px!important;
    text-shadow: 1px 1px #eb268b;
    height: 21px;
    color: #fffafc;
    font-weight: normal;
    filter: hue-rotate(19deg);
    box-shadow: #ffffff7a 0 1px 1px 1px inset;
    padding-left: 10px!important;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: none;
    margin: 10px 0;
}

.contact .inner {
    background: linear-gradient(180deg, #ff6c86, pink);
    border: 1px solid deeppink;
    border-top: #ff6580 1px solid;
    box-shadow: inset 1px 2px 1px #ffffff9e, inset -1px -2px 1px #75024061;
    padding-bottom: 10px;
    padding-top: 5px;
    padding-left: 15px;
}

.contact {
    transform: translate(-17px, -22px);
}

.url-info{
background: url(https://i.pinimg.com/564x/57/96/94/5796947547c77690fa1abf35919afa98.jpg);
font-size: 0;
    height: 272px;
    background-size: cover;
    filter: hue-rotate(4deg);
    transform: translateY(-42px);
}

.details-table td:first-child, .details-table td, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td, .comment-replies {
    background: linear-gradient(180deg, #f16c83, pink);
    color: white;
    font-weight: bold;
    border: 1px solid deeppink;
    box-shadow: inset 1px 2px 1px #ffffff9e, inset -1px -2px 1px #90004e85;
    padding: 5px;
}

body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(7) > div.inner > table > tbody > tr:nth-child(1) > td:nth-child(2), body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(7) > div.inner > table > tbody > tr:nth-child(2) > td:nth-child(2), body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(7) > div.inner > table > tbody > tr:nth-child(3) > td:nth-child(2), body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(7) > div.inner > table > tbody > tr:nth-child(4) > td:nth-child(2), body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(7) > div.inner > table > tbody > tr:nth-child(5) > td:nth-child(2), body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(7) > div.inner > table > tbody > tr:nth-child(6) > td:nth-child(2) {
    transform: translate(-30px, 10px);
}

body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(7) > div.heading {
    width: 65%;
    margin-bottom: -13px;
    margin-left: 78px;
    font-size: 118%;
    padding-bottom: 0px;
}

.table-section {
    transform: translateY(-30px);
}

.profile-info {
    border: 2px solid rgba(0,0,0,0.7);
    padding: 15px 5px;
    margin-bottom: 10px;
    display: none;
}

.blog-preview {
    width: 100%;
    display: inline-block;
    background: linear-gradient(180deg, #ff758d, pink);
    padding: 1px 11px 1px;
    margin-bottom: 15px;
    color: white;
    border: 1px solid deeppink;
    box-shadow: inset 1px 2px 1px #ffeeeecf, inset -1px -2px 1px #9527636e;
    width: 80%;
    transform: translate(-55px, 2px);
}

.profile .blurbs .heading, .profile .friends .heading{
    background-image: url(https://external-media.spacehey.net/media/sMUK45upO5INlW-L-IHJNB85FZ84ElJmU-vGgv5E7kTA=/https://cdn.discordapp.com/attachments/1085563000599097355/1144306155410169937/Screenshot_2023-08-24_at_17.06.56.png), linear-gradient(180deg,#ffd6e7,#ff70ae 8%,#ff9ac6 40%,#ffbcd9 88%,#ff89bc 93%,#ff70ae 95%,#ff2483 96%,#ff2483);
    background-repeat: no-repeat !important;
    background-position: right center!important;
    padding: 3px 5px 3px 3px;
    border-top: 1px solid #ff2483;
    border-left: 1px solid #ff2483;
    border-right: 1px solid #eb268b;
    border-top-left-radius: 8px;
    border-top-right-radius: 7px;
    font-size: 17px;
    padding-bottom: 26px!important;
    text-shadow: 1px 1px #eb268b;
    height: 21px;
    color: #fffafc;
    font-weight: normal;
    filter: hue-rotate(19deg);
    box-shadow: #ffffff7a 0 1px 1px 1px inset;
    padding-left: 10px!important;
}

.profile .blurbs .inner, .profile .friends .inner, .blog-entry .comments .inner, .bulletin .comments .inner, .setting-section .inner {
    padding: 7px;
    background: linear-gradient(180deg, #ed768b, pink);
    border: 1px solid deeppink;
    box-shadow: inset 1px 2px 1px #ffffffba, inset -1px -2px 1px #7c004399;
    padding-left: 12px;
    padding-right: 13px;
}

.profile .blurbs {
    margin: 20px 0;
    transform: translate(-80px, -24px);
}

.profile .blurbs .section h4 {
    margin: 0;
    text-align: center;
    font-size: 140%;
}

.section {
    height: 100px;
    overflow-y: scroll;
    width: 73%;
    background: #ffe8ec;
    border: 2px solid pink;
    outline: 2px solid deeppink;
    color: #e9000094;
    text-shadow: none;
}

.profile .friends .person p {
    color: white;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}

.friends {
    color: white;
    margin-top: 23px;
}

.count {
    color: white;
}

.friends .heading a {
    padding-right: 59px;
    color: white;
}

div#comments {
    position: absolute;
    top: 0;
    right: 0;
}

body > div > main > div.row.profile > div.col.right > div:nth-child(4) {
    width: 90%;
}

a {
    color: white;
    text-decoration: none;
}

.contact .icon, .award img {
    display: none;
}

body > div > main > div.row.profile > div.col.right > div:nth-child(4) {
    width: 90%;
}

.profile .friends .person img:not(.icon) {
    max-width: 95px;
    max-height: 95px;
    display: block;
    margin: 0 auto;
    border: 1px solid white;
    border-radius: 8px;
    box-shadow: 0 0 4px #960a0a;
}

footer {
    text-align: center;
    font-size: 70%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background-color: transparent;
}

.edit-info {
    background: linear-gradient(180deg, #e88092, pink);
    border: 1px solid deeppink;
    width: 100%;
    padding: 5px;
    overflow-wrap: break-word;
    word-break: break-word;
    color: white;
    box-shadow: inset 1px 2px 1px #ffffffb8, inset -1px -2px 1px #80064875;
}

.blog-entry .title, .bulletin .title, .blog-entry .content, .bulletin .content, .topic-box .content, .reply-box .content{
    color: white;
    background: linear-gradient(180deg, #ed798d, pink);
    border: 1px solid deeppink;
    box-shadow: inset 1px 2px 2px #ffffffd6, inset -1px -2px 2px #86084c7d;
    padding: 10px;
}

body > div > main > div > div.col.right > p {
    transform: translate(211px, -66px);
    background: linear-gradient(180deg, #ef6c83, pink);
    border: 1px solid deeppink;
    width: 36%;
    padding: 3px;
    color: white;

}

.blog-entry .title, .bulletin .title {
    margin: 3px 0 5px 0;
    overflow-wrap: break-word;
    word-break: break-word;
    width: 60%;
}

.blog-entry .content, .bulletin .content {
    transform: translate(15px, -56px);
    width: 80%;
}

body{ color: white!important; }

.blog-entry .profile-pic img, .bulletin .profile-pic img {
    max-width: 110px;
    max-height: 110px;
    border: 1px solid;
    border-radius: 8px;
    box-shadow: 0 0 4px 1px #7f0303;
}

.inner {
    color: white;
}
</style>

<style>
    /* !! FLOATING IMAGES !! */
</style>

<div style="float:  ; max-height: 800px; position: fixed; left: 350px; bottom: 15px; z-index: 200;"><img src="https://static.wikia.nocookie.net/p__/images/f/f9/MyMelody.png/revision/latest?cb=20210824094453&path-prefix=protagonist" width="200" height="auto"/>
</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 61 comments ( View all | Add Comment )

Gnawzy	1746938773 Using ^_^ Report Comment
∙𝓵𝓲𝓿∙	1745328332 using <3 Report Comment
pashka(* ´ ﹃｀*)	1741965530 usiing Report Comment
Melo-Chan 🐾	1741672477 Maybe i'll use ! Report Comment
jo ★	1741545785 using Report Comment
rawry (o_O) !	1741400025 this is supa cute!! i luv ur patrick pfp eheh Report Comment
poli （｡>‿‿<｡）	1739393462 usingg Report Comment
skividi eve :3	1739078259 (Probably) using Report Comment
niyah	1738551117 using Report Comment
Christi｡･:*:･ﾟ♡	1738389813 Using!!🎀🎀 Report Comment
Maycee!	1734897203 Using!! Report Comment
sara⋆.ೃ࿔*:･	1733164284 usingggg tysm i love this!!!! Report Comment
Tristan	1731593216 Ussinng :D Report Comment
milica	1722356002 using!!!!!!!!!! Report Comment
𓏵 🩸🦈 𝒑𝒊𝒏𝒈𝒈𝒐𝒗𝒈𝒕 ⟢	1721690763 USADO!! ARRASOUXD Report Comment
PR3TTYLUL_MARIE♡	1715993135 cute!!! Report Comment
PR3TTYLUL_MARIE♡	1715993014 cute!!! Report Comment
mimi	1712748236 usíng!! :3 Report Comment
ㅤㅤㅤ	1712248366 using Report Comment
meiou	1710445306 hi! i tried to use the layout but the comments are really long and cover most of the screen, i dunno how to fix this Report Comment