My Melody Pink Layout

Tags: pink, cute, layout, pastel

Description:

Hey

This is my first public layout.

You can edit the code if you want, credit is not needed but do not claim it as your own.

(Though be warned, the code is very messy lol.)

Also inspired by princes css lab go check out their layouts

Preview:

click on the image for a larger preview

Code:

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

<style>



/*background Color Profile Border-Radius*/
.profile {
  background-color: #ffeaf0;
  border-radius:20px;
}

/*root colors*/
:root {
    --logo-blue: #ffeaf0; /*spacehey Logo*/
    --darker-blue: #cf7692; /*Link color*/
    --lighter-blue: #ffeaf0; /*nav bar*/
    --even-lighter-blue: #ffc9da; /*informationBox*/
    --lightest-blue: #ffc9da; /*InformationBox2*/
    --dark-orange: #cf7692; /*aboutmeText*/
    --light-orange: #ffc9da; /*commentboxes*/
    --even-lighter-orange: /*commentBoxesright*/
    --green: black;
    --dark-gray:#cf7692;
}

h1,h2,h3,h4,h5{
    font-family: 'Ubuntu Mono', monospace, bold;
    color: white;

}



/*Banner*/
main:before {
    width: auto;
    margin-bottom: 25px;
    border: 0px solid black;
    height: 250px;
    display: block;
    content: "";
    background-image: url(https://i.pinimg.com/originals/d4/c5/4d/d4c54d6ddbe57c44847145c880c8f06a.gif);
    background-position: center center;
    background-size: cover;
    border-radius: 10px;
    
}

/*Footer*/
footer {
    border-radius: 15px;
    background-image:url(https://i.pinimg.com/564x/8a/37/f5/8a37f5aa82515652984808366ed0df66.jpg);
}

.general-about .profile-pic img {
    border-radius:20px;
}

body {
    background:url(https://imgs.search.brave.com/TNnIc86TqXQlIfMhSJVud6yCAYCPVNm_LJzTgoJXQGA/rs:fit:1200:1080:1/g:ce/aHR0cHM6Ly93d3cu/eG1wbGUuY29tL3dh/bGxwYXBlci9waW5r/LWNoZWNrZXJlZC13/aGl0ZS1zcXVhcmVz/LTE5MjB4MTA4MC1j/Mi1mZmI2YzEtZmZm/ZmZmLWwtODAtYS02/NS1mLTIuc3Zn.svg);
}

/*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 {content: "" url(https://cutekawaiiresources.files.wordpress.com/2016/11/my-melody-bullet-3.gif?w=560);}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {content: "" url(https://cutekawaiiresources.files.wordpress.com/2016/11/melody-51.gif);}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {content: "" url(https://cutekawaiiresources.files.wordpress.com/2016/11/melody-31.gif);}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {content: "" url(https://cutekawaiiresources.files.wordpress.com/2016/11/melody-9.gif);}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {content: "" url(https://cutekawaiiresources.files.wordpress.com/2016/11/my-melody-bullet-110.gif);}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {content: "" url(https://cutekawaiiresources.files.wordpress.com/2016/11/my-melody-bullet-4.gif);}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {content: "" url(https://cutekawaiiresources.files.wordpress.com/2016/11/my-melody-bullet-26.gif);}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {content: "" url(https://cutekawaiiresources.files.wordpress.com/2016/11/my-melody-bullet-28.gif);}

/*NOTIFICATION ICON*/
.icon, .award img {
    content: url(https://cutekawaiiresources.files.wordpress.com/2016/11/my-melody-bullet-45.gif?w=560);
    display: inline-block;
    height: 1.5em;
    width: 1.5em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.3em;
    color: rgba(0,0,0,0);}
    
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
 content: " ♥";
 color: #cf7692;}

/*border-radius+color*/

.contact .inner a {
    color:white;
}

nav .top { /*spacehey top*/
    border-radius:10px;
    margin-bottom: 10px; /*forfloatingeffect*/
}

nav .links {
    margin-bottom:10px;
    border-radius:10px
}

nav .links a {
    color:#cf7692;
    position:center center;
    
}
.profile h1{
    color:#cf7692;
}


.profile h1 { /*profile name*/
    color:#cf7692
}

p {
    color:#cf7692;
}

DIV.blog-preview > H4 {
    color:#cf7692;
}

[id='q']{
    border-radius:10px; /*Searchbar*/
    
}

FORM > BUTTON {
    border-radius: 10px;
    background-color:white /*Search!*/
    
}

.profile .blurbs .heading {
    border-radius:5px; /*profile blurbs color*/
}

.profile .friends .heading {
    border-radius: 5px;/*profiles comments*/
}

.profile .blurbs .section h4 {
    color:transparent; /*about Me*/
}

.profile .mood p {
    border-radius:5px;
    background-color:#ffc9da;
    
}/*mood*/

DIV.mood > P:nth-child(1) >B  { /*mood text color*/
    color:white;
}

P:nth-child(2) > B A {
    color:white;
}

.profile .contact {
    background-color:#ffc9da; /*add to friends etc*/
    border-radius: 10px;
}

.profile .contact .heading {
    background-color:#ffc9da;
    border-radius:10px; /*add to friends top part*/
}

.details-table td{
    border-radius: 10px; /*profiles interests*/
    color:white;
}
    

.profile .table-section .heading h4 {
    color:transparent; /*profiles interests header*/
}

DIV.blog-preview > P > I {
    color:transparent; /*there are no blog entries yet*/
}

.profile .url-info { /*spaceheyurl*/
    background-color:#ffc9da;
    border-radius:10px
    
}

.comments-table td * { /*commentsleft*/
    border-radius:20px;
    
}

.details-table td * {
    color:white; /*music general color*/
}

.profile .url-info p { /*spaceheyurlcolor*/
    color:white;
}

.comments-table td { /*commentsright*/
    border-radius:20px;
}

.profile .friends .person img:not(.icon) {
    border-radius:10px;
    filter: blur(1px)
    opacity(.5)
    brightness(1)
}

LABEL { /*search users*/
    color:#cf7692;
}

nav .top .right {
    color:#cf7692;
}

.profile .friends .person p { /*friend name color*/
    color:#cf7692;
}

.count { /*has ? friends*/
    color: #97e69b;
}

nav .top .left .logo a {
    color:black;
}

nav img.logo{filter: brightness(0) saturate(100%) invert(99%) sepia(100%) saturate(7472%) hue-rotate(290deg) brightness(90%) contrast(100%); !important;}

nav {
    text-align: center;
}

 main { /*Transparent between banner porfile*/
        background: transparent;
        
    }
    
.online {
    content: url(https://www.myspacegens.com/images/online_now/70.gif);}

/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap');
p{font-family: 'Ubuntu Mono', monospace;
color:#cf7692;


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

feni	1708283998 usingg Report Comment
Xx_Sweetie_Pup_xX	1706639464 using :PP Report Comment
helenyourlove⊹ ࣪ ˖🪼🫧	1706091597 usando Report Comment
AngelUwU234	1694750642 I’m using this! Report Comment
Sophie	1688788611 so cute that I'm using it! Report Comment
Kitty Kat	1687744171 using this is so adorbz :3 Report Comment
♡ nadia ♡	1687027726 using and editing this! it’s so cute <33 Report Comment
♡ Killjoy ♡	1684887047 Hi I'm actually only interested in getting the code to be able to have the notification image and the little image by the links. I tried sifting through the code myself but I got lost lol Report Comment
~Rin~	1683197516 Using and editing! (Using and editing (if I learn how toＴ▽Ｔ) Report Comment
vixxy !	1671516105 Aww so cutee!! Using and Editing! :3 Report Comment
blossom ♡	1669696577 using + editing! Report Comment
blossom ♡	1669696577 using + editing! Report Comment
♛⋆ ˚｡⋆୨୧˚ ollie~! ˚୨୧⋆｡˚♛	1669690525 using and edited! Report Comment
𖤐 CJ 𖤐	1666394201 Using +editing !! Report Comment
abigail☆	1663108660 using + editing! :) Report Comment
kat	1661914766 using!!! Report Comment
mariisima	1657622209 i'll be using, its super cute!! >. Report Comment
Tricia O’Reilly	1652082419 Using it’s so cute! 🐰 Report Comment
minmo	1651450153 amazing layout! I used it as a base for my profile! Report Comment