my melody ?? my melody.

Tags: pink, sanrio, cute

Description:

hi !!

i made this and then forgot about it so . consider it a gift from me. idrc what you do with it, but please don't reupload it . thank youuuuuuuuuu love you

also, just so you're aware, the scalloped edges are done with a mask around the text boxes, so any images in the boxes will not be visible if you position them outside your blurlbs. sorry bout that, there's probably a better way to do it that i'm not aware of so . if any fo you are please tell me . please .

i've tried to update the attached image like 2348 times i promise the background is NOT that blurry im GOING to cry

anyway thanks for looking at this this webpage will now self destruct

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by boyfailure (https://layouts.spacehey.com/layout?id=82358) -->

 <style>
* { 
 cursor: url(https://external-media.spacehey.net/media/sGZbFm9r3Y_fj1YW9qm1RDCLRCP1r4HHFFt4brhMNQlQ=/https://media.discordapp.net/attachments/1031774239730180186/1136099156776190122/tumblr_lrbza4PDe21qf72le.png?width=30&height=35), auto !important; 
 font-family: Courier New;
}

:root {
  --text: rgba(209, 93, 151);  
  --links: rgba(243, 99, 153);
  --shift: rgba(232,130,235,255);
  --borders: rgba(243, 99, 153);
  --cloud: rgba(249,193,226,255);
  --background: rgba(245, 224, 241);
}

body {
 margin:0;
 background-image: url(https://external-media.spacehey.net/media/seHqeCL-MeGhX_KABqGK7RZw9YfHtaO5wM85LTDrNjKo=/https://64.media.tumblr.com/6df3e0b87f8aaed62e28a53f4074a9b8/9f3d302217acc34f-a0/s2048x3072/7af3f8a969e471e7de2c33aae994212cf6691c92.jpg);
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 font-weight: bold;
 }
p {
 color: var(--text);
 font-weight: bold;
}
.container {
  background: var(--background) !important;
  border: dotted var(--borders);
  border-radius: 14px;
}
main {
  background: none !important;
  border-top: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(55%) sepia(12%) saturate(4292%) hue-rotate(300deg) brightness(101%) contrast(91%) !important; 
}
button {
  background: white;
  color: var(--text);
  font-weight: bold;
  border: 1px solid var(--text);
}
button:hover {
  border: solid 2px var(--shift);
  transition: 0.2s;
}
input {
  color: var(--text);
  font-weight: bold;
  border: var(--text) solid 1px;
}
input:hover {
  border: solid 2px var(--shift);
  transition: 0.2s;
}
nav .top , nav .links{
  background: transparent;
  text-align: center;
}
nav .links li:not(:last-child)::after {
  content: " ♥";
  color: var(--text);
}
nav .links .active img{
content: url(https://external-media.spacehey.net/media/s_AtI8zbpGcPIed80I-AyoEABGBzZTyePobBw3uMoN2w=/https://64.media.tumblr.com/95ebc3e7182faf7e95644c84c4742a88/82c6d5c24024357d-7c/s75x75_c1/e836310be276bee664b4cb6d472e06d37ca73d43.gifv);
}
.col.left h1:before{
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 120px;
  background-image: url(https://external-media.spacehey.net/media/sxFrGMYqm8L8COG3OM9OpIfjssen4QHMcwRkNQm4KByg=/https://64.media.tumblr.com/9368d5b1210f0025d34c8e5aa70b85cb/29406972bd2600b2-51/s500x750/1c9b60066f56fc3e748f72d11369dd5cd9f4e068.gifv);
  background-repeat: no-repeat;
  background-size: 125px;
}
.col.right:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 170px;
  background-image: url(https://external-media.spacehey.net/media/s0B07vv0Mbhy5ZRbsSXbAjzdMXKbDYe3TS4SNGZmlyuw=/https://64.media.tumblr.com/10494e4e4f37c418ccc3849fa780cdcd/6f2a5ca08afdb479-26/s1280x1920/0c791b9f6fead29e63445866089b3e5e4333faf1.pnj);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 300px;
}
.blurbs .inner{
  text-align: center !important;
}
h1 {
  color: var(--links);
}
.profile-pic img {
  border: solid var(--borders) 1px;
  border-radius: 180px;
}
.profile-pic img:hover{
  animation: rotation 0.3s infinite linear;
  /*makes your pfp spin when you hover. put your avatar in the blender, for absolutely no cost !!*/
}
.online{
  content: url(https://external-media.spacehey.net/media/sx7N7Yhm-yFktKqazylylfJy7VEHHHI6pM09onX3W1T0=/https://i.imgur.com/oHBt3Mc.gif);
} 
.mood {
  padding-top: 3px;
}
.mood:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 50px;
  background-image: url(https://external-media.spacehey.net/media/sBhU35MKO-bKtBCoP8nlAL7HXa-DPlGZ_to2KmU5TN-o=/https://64.media.tumblr.com/b6917c3b3743d6c009258be1a171c29c/68a04789e9870f14-8a/s250x400/68c621d664918f0ead372689a4c2a4055344a599.gifv);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 300px;
}
.url-info {
  display: none;
}
.profile .blurbs .section, .friends, 
.profile .contact, .profile .table-section {
  --mask: 
    linear-gradient(#000 0 0) 50%/calc(100% - 18.50px) calc(100% - 18.50px) no-repeat,
    radial-gradient(farthest-side,#000 98%,#0000) 0 0/20px 20px round;
  -webkit-mask: var(--mask);
          mask: var(--mask);

  background: var(--cloud);
  border: none;
}
nav {
  color: var(--links);
}
footer {
  background: var(--background);
}
.comments-table, .comment-replies {
  border: none;
}
.profile-info, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td {
  background-color: transparent;
  border: none;
}
#comments {
  height: 300px;
  overflow-y: scroll;
}
.comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon){
  border: 1px solid black;
  border-radius: 180px;
}
.comments-table td:first-child img:not(.icon):hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
a, nav .links a {
  color: var(--links);
  text-shadow: none;
}
a:hover, nav .links a:hover {
  color: var(--shift);
  text-decoration: none !important;
  transition: 0.2s;
}
.logout-btn {
  color: var(--links);
  box-shadow: none;
}
.logout-btn:hover {
  color: var(--headers);
  box-shadow: none;
  border: none;
  text-decoration: none;
  transition: 0.2s;
}
.contact .inner a img {
  font-size: 0;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before,
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before,
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before,
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
  /*changes the icons
     if you want you can divide this up and make each one different. */
content: url(https://external-media.spacehey.net/media/sGEXk18WhABnc1kadVIo56T2liVc83rmIVTBzmFBZn9w=/https://64.media.tumblr.com/284001e639c0754e3c72919455fced9e/a76230fe2344e354-a2/s75x75_c1/31ec20e396006378f3058b6adff1832b86af9918.gifv);
}
.profile .table-section .details-table td {
  background-color: transparent;
}
.profile .blurbs .heading {
  font-size: 15px;
  font-weight: bolder;
  background: transparent;
  color: var(--links);
}
.col.right h4 {
  color: var(--links);
  text-align: left;
}
.profile .blurbs .section h4, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading {
  background: none;
  color: var(--links);
  background-size: 9px;
  padding-top: 10px;
  padding-left: 15px;
  padding-bottom: 5px;
}
.person p {
  color: var(--links) !important;
}
.person img{ 
  border: 1px solid black;
  border-radius: 180px;
  display: absolute;
  height: 100px;
  object-fit: cover;
  width:100px;
}
.person:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
.count {
  color: var(--links);
}
/* 
  main:before {
  top: 0;
  left: 0.2%;
  position: fixed;
  pointer-events: none;
  content: url(https://media.discordapp.net/attachments/1031774239730180186/1136124564682842193/tumblr_16a813328fa303ea34b3065beffb5a6d_bcea30e0_640.png?width=678&height=525);
}
*/
footer:after{
  bottom: 0;
  font-size:0;
  left: 79%;
  position:fixed;
  pointer-events: none;
  content:url(https://64.media.tumblr.com/1c885d63f21b7fffe2931e51c6383a58/303c61c5cbff57ec-33/s250x400/4c398eaa754b482d0b5f188ef282e2e7a776f598.pnj);
  animation: slideIn 2s forwards;
}

.bottomLeft {
  bottom: 0;
  left: 5%;
  position: fixed;
  pointer-events: none;

  content: url(https://media.discordapp.net/attachments/1031774239730180186/1136124564682842193/tumblr_16a813328fa303ea34b3065beffb5a6d_bcea30e0_640.png?width=678&height=525);
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(900px);
  }
  100% {
    transform: translateX(0);
  }
}

@media screen and (min-width: 0px) and (max-width: 720px) {
  footer:after { display: none; }
  .col.left:after { display: none; }
  main:before { display: none; }
}

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

≧◡≦ dio / antarc !!	1706164498 USING! ^_^ so so cute Report Comment
sesili.grr	1705665136 its so cute +using Report Comment
Melody🍉	1698711515 using ! ! :3 Report Comment
mars ★︎	1697972722 using for blog ty!! <33 Report Comment i don’t think ! that’s really gonna work brother, this isn’t really meant for blogs lol . there’s classes in the blog pages this doesn’t even have so . by boyfailure; 1697984571; Report ah i see,,, it was working though tbh :p by mars ★︎; 1697986249; Report if it works then it works . follow your heart 🫶 by boyfailure; 1697986454; Report
¡OwO Elisa Sky!	1697284098 Using! <3 Report Comment
Bella	1696794111 using Report Comment
Pops	1696732673 using ! cool layout Report Comment