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 30 comments ( View all | Add 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
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
VIX / VIKTOR！☆	1671516105 Aww so cutee!! Using and Editing! :3 Report Comment
blossom ♡	1669696577 using + editing! Report Comment
blossom ♡	1669696577 using + editing! Report Comment