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

VOID!!	1739930561 Usin Report Comment
shravya	1738306689 Usinggg Report Comment
reyna	1737491275 USING AND EDITTT :3!!!11!11!11! Report Comment
Mimi	1735961364 Using it ;> Report Comment
aya	1735927131 onegai my melody mentioned and i love it ! Report Comment
천사	1734835475 Using! Report Comment
Cryptid	1734661642 Using! Report Comment
Oreo	1734658969 Using! :3 (Contact Icons) Report Comment
⊹ ׁ݂ ꒰꒰🦢 ˸ aceeee >< ⋅꒷	1734641392 usingg Report Comment
Artie	1731134186 Using! Report Comment
⦻4SYURA_AGONY⦻	1729438009 Using Report Comment
Karoll =)	1728326555 usandoo Report Comment
blupp	1726183290 Using Report Comment
Dazi <3	1723681225 using :DD Report Comment
chocoberrypuff	1722854977 using ty :3 Report Comment
░﹒nautinkier ୭ ˚. ᵎᵎ 💟	1720926321 usering Report Comment
・〜｀Sam＾．✩ゝ	1719749818 Using >⁠.⁠<! Report Comment
kitty!	1719120878 using!!! <3 Report Comment
Dum Dum	1714898916 imma use it ^^ Report Comment
Dum Dum	1714898915 imma use it ^^ Report Comment