Pink Cloud layout (Updated!)

Tags: pink, cloud, pink, cloud, aesthetic, kawaii, cute, pastel, anime, moving

Description:

A pink cloud layout with a lot of moving elements,

if youre not into the moving version i have an alternate copy with less moving components!

(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=23722) -->

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

body {
    background-image: url(https://media1.giphy.com/media/spPqo3uyl0eTW2NXwH/giphy.gif);
background-size: cover;
    backdrop-filter: blur(10px);
    background-color: #ffeafa;
    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;
}
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;
    text-shadow: 0 0 7px #99999900;
    color: white;
    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: #ff8282;
}
.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: #fdc7ce;
    text-decoration: none;
}
.col, main, footer{
}
footer p {
    color: #fdc7ce;
    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 7 of 7 comments ( View all | Add Comment )

Royal knight	1686585440 using!! Report Comment
pearlevrn	1684421035 using ! Report Comment
Mariah Shaleese	1683867375 Using! Thanks Report Comment
Daniela	1675747331 using it Report Comment
vinny ♡	1674882360 using !! but i wanna make the text darker, how do i do that ?? ^^ Report Comment
☁️Spillow☁️	1670306461 using!! thx ^^ Report Comment
HIDE−CHAN (^_−)☆	1662476515 using!! thankies :33 Report Comment