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 47 comments ( View all | Add 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
Evelin Miller Fictionkin	1709952659 I might use this, Ty! <3 Report Comment
francella	1709877464 i really like ur layouts, idk if this is a good place to req but have u ever thought of making a victoria secret (pink-white striped) themed layout ? Report Comment
Danny	1709609739 using!! Report Comment
l4in-1waKur4	1708631795 using Report Comment
𝖇umblebee.	1708489869 patrick spotted omg ..!! Report Comment
Stu	1708317451 using Report Comment
Sofx!	1708137510 using! Report Comment
XD	1707765371 Using! Report Comment
GhostuSERGE	1707710222 Usinggg :P Report Comment
strawbsie !!	1707699155 using!! Report Comment
atlas	1707556218 using !! Report Comment
🍄Onyx🍄	1706789172 Using Report Comment
yukihana ദ്ദി ˉ͈̀꒳ˉ͈́ )✧	1706695750 Using!! (≧∇≦)ﾉ Report Comment
MIMA X3	1706650205 USOO Report Comment
yileidi_cccy	1706412392 podrías hacer uno de artic monkeys o lana del rey? Report Comment
SPATGHAST	1706366035 using ^-^ Report Comment