Pink Cloud Layout

Tags: pink, cloud, pink, cloud, aesthetic, kawaii, cute, pastel, anime, barbie
Description:

A simple version for my other Pink Cloud layout!
(less moving components, softer on the eyes!)
Music player is seperate, let me know if you want me to share the code and make a little tutorial!!
(these are my first layout uploads so let me know if anything is buggy or broken, ill be sure to fix it asap.)
please do not remove my credit!!
Preview:

click on the image for a larger preview
Code:

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

<style>
/* this is the main code, do not edit unless u know what youre doing. might break the code*/

body {
    background-color: #ffc4cc;
    font-family: 'Quicksand', sans-serif !important;
    text-transform: lowercase !important;
}
main {
    background: #ffffff7a;
    color: #fdc7ce;
    padding: 6px 0px;
    font-size: 80%;
    border-left: 2px solid #ffffff6e !important;
    border-right: 2px solid #ffffff6e !important;
    border-bottom: 2px solid #ffffff6e !important;
    border-radius: 0px 0px 10px 10px !important;
    animation-name: floating;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " ♡ ";
    color: white;
}
button, input {
    overflow: visible;
    border: none;
}
button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    color: white;
    background: #fdc7ce;
}
.profile-info {
    border-radius: 30px;
    image-rendering: -webkit-optimize-contrast;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 10px;
    background: url(https://media1.giphy.com/media/spPqo3uyl0eTW2NXwH/giphy.gif);
    background-position-y: 43%;
    background-size: cover;
    border: none;
}
.profile-pic img {
    border-radius: 500px;
    border: #ff828259 solid 2px;
    overflow: hidden;
    margin-top: -10px!important;
    margin-left: 0px!important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ff828259;
}
nav::before {
    content: "";
    background: url(https://i.pinimg.com/originals/11/5b/30/115b30865a57ff7380736ceb3a3c766a.gif) no-repeat;
    background-size: 200px;
    position: fixed;
    float: right;
    display: inline;
    bottom: 0;
    right: 5px;
    height: 200px;
    width: 200px;
    margin-bottom: 10px;
}
nav .links, footer .links {
   margin: 0;
   list-style: none;
   padding: 0px !important;
   padding-bottom: 5px !important;
   border-left: 2px solid #ffffff6e !important;
   border-right: 2px solid #ffffff6e !important;
   animation-name: floating;
   animation-duration: 9s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
   text-align: center;
   margin-bottom: 0px;
}
nav .links {
   background-color: #ffffff6e;
}
nav .top {
    display: flex!important;
    opacity: 1!important;
    padding: 5px !important;
    border-left: 2px solid #ffffff6e !important;
    border-top: 2px solid #ffffff6e !important;
    border-right: 2px solid #ffffff6e !important;
    border-radius: 10px 10px 0 0 !important;
    animation-name: floating;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
nav .top {
   background: #ffffff6e;
}
.general-about .profile-pic img {
    max-width: 160px;
    max-height: 160px;
    border: dotted #fdc7ce 3px;
    border-radius: 5pc;
}
nav, footer, .profile .contact {
    display: inherit!important;
    opacity: 1!important;
    background-color: transparent;
}
@media (min-width: 30em)
.col {
    display: table-cell;
    vertical-align: top;
}
main .left, main .right {
    padding: 10px;
}
.profile .blurbs .heading, .profile .friends .heading {
    background: none;
    color: #fdc7ce;
    padding: 2px 7px;
}
.profile .blurbs .section h4 {
    margin: 0;
    color: #fdc8cf;
}
.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
    margin: 0 0 8px 0;
    color: white;
    text-shadow: -1px -1px 0 #fdc7ce, 1px -1px 0 #fdc7ce, -1px 2px 0 #fdc7ce, 1px 2px 0 #fdc7ce;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    border: none;
}
.online {
    color: #ffffff;
    font-size: 16px;
    text-shadow: 1px 1px 2px #ff8282;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1.0,0,0,1.0);
    animation-duration: 2s;
}
.online img{
display: none;
}
.profile .friends .person img:not(.icon) {
    max-width: 95px;
    max-height: 95px;
    display: block;
    margin: 0 auto;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
.profile .friends .person p {
    color: #fdc7ce;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}
p, ol li, ul:not(nav .links):not(footer .links) li {
    font-size: 0.875em;
    font-size: max(0.875em, 12px);
}
.url-info {
    background: url(https://media1.giphy.com/media/spPqo3uyl0eTW2NXwH/giphy.gif);
    box-shadow: 7px 11px 0px 2px rgb(254 200 206 / 40%);
    background-position: center;
    background-size: cover;
    border: var(--borders)!important;
    border-radius: var(--curve);
    height: 250px;
}
table.details-table {
    background: #fdc7ce;
    margin-top: 10px;
    border-radius: 7px;
    width: 100%;
}
.details-table td:first-child {
    background: none;
    color: white;
    font-weight: bold;
    width: 33%;
}
.details-table td {
    background: #ffffff2e;
    vertical-align: top;
    color: white;
}
nav .links a {
    text-decoration: none;
    color: white;
    text-shadow: 0 0 7px #99999900;
    font-size: 0.98em;
    font-size: max(0.98em, 12px);
}
.profile h1 {
    font-size: 3.5em;
    color: white;
    margin: 0 0 10px 0;
    text-align: center;
    color: white;
    text-shadow: -1px -1px 0 #fdc7ce, 1px -1px 0 #fdc7ce, -1px 2px 0 #fdc7ce, 1px 2px 0 #fdc7ce;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
    background: #fdc7ce;
    border-radius: 10px;
    color: white;
    padding: 1px 7px;
}
.comments-table td:first-child img:not(.icon):hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
.comments-table td:first-child img:not(.icon) {
    width: 82px;
    max-width: 100%;
    max-height: 200px;
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
.comments-table td:first-child, .music-table td:first-child {
    background: none;
    text-align: center;
    font-weight: bold;
    width: 24%;
}
.comments-table td, .music-table td {
    background: #fdc7ce73;
    vertical-align: middle;
    color: white;
    border-radius: 17px;
}
table.comments-table, table.music-table, table.bulletin-table, table.forum-table, table.groups-table {
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    border: none;
}
.comments-table td, .music-table td {
    background: #fdc7ce73;
    vertical-align: middle;
    color: white;
    border-radius: 17px;
    border: none;
}
button, [type="button"], [type="reset"], [type="submit"] {
    vertical-align: bottom;
    -webkit-appearance: button;
    color: white;
    background: none;
}
.count {
    color: #ffa8a8;
}
.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: "✿";
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
    content: "✿";
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
    content: "✿";
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
    content: "✿";
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
    content: "✿";
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
    content: "✿";
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
    content: "✿";
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
    content: "✿";
}
a:hover{color: #ff8282 !important;
}
a {
    color: white;
    text-decoration: none;
}
footer p {
    color: white;
    vertical-align: middle;
    margin: 10px 0 5px 0;
    font-size: 90%;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}
@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); }
}
</style>
<a href="https://spacehey.com/exit" target="_blank"><div style="position:fixed; top:3px; left: 3px; z-index: 9; width: auto; height: auto; font-weight: bold; font-size: 11px; border: 0px solid black; background-color: #ffe0e4; padding: 2px !important; border-radius: 5px; text-align: center;">exit</div></a>
<style>@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap');</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 2 of 2 comments ( View all | Add Comment )
Princess Irina 🎀
1658793354
Oh god it’s so cute idk if I need to start a new era god AHHHH
Report Comment
thank u!!
by exit; 1663022484; Report