soft spacehey (ash blue)

Tags: soft, spacehey, simple, retro, 2000s, blue, cute, kawaii, layout

Description:

no credit needed but it is appreciated:) pls comment if used !

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ray ☆ 🍉 (https://layouts.spacehey.com/layout?id=82119) -->

<style>

nav .top {
    background: #95acca;
    padding: 15px 10px 14px 10px;
    display: flex;
    position: relative;
    margin-top: 10px;
}

nav .links {
    background-color: lightsteelblue;
    padding: 3.5px 16px 5.5px 16px;
    text-align: center;
    text-transform: lowercase;
}

nav .links a {
    text-decoration: none;
    color: white;
    text-shadow: 0 0 7px aliceblue;
    font-size: max(0.98em, 12px);
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " ♡ ";
    color: white;
}

nav .links a:hover {
    text-decoration: none;
    color: #95acca;
}

nav .links .special a {
    color: white;
}

button, input {
    overflow: visible;
    border: 1px solid #738db0;
    background: white;
    color: #95acca;
}

body {
    background-color: #eff2ff;
    text-transform: lowercase;
}

main {
    background: white;
    color: #95acca;
    padding: 6px 0px;
    font-size: 80%;
}

a {
    color: #4e596e;
    text-decoration: none;
    font-style: italic;
}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    color: #738db0;
    text-decoration: none;
    font-variant: all-small-caps;
    transition: 0.5s;
    transition-timing-function: ease-out;
    filter: blur(1px);
}

.online{
    filter: hue-rotate(106deg) opacity(0.4);
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: #95acca;
    color: white;
    padding: 2px 7px;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: 3px solid #95acca;
    margin: 10px 0;
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: radial-gradient(#e9f0fd, #95acca);
    color: white;
    text-shadow: 0px 0px 6px aliceblue;
    border-radius: 8px 8px 0px 0px;
    padding: 2px 7px;
}

.heading:after {
    content: " ♡ ";
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: 3px solid #95acca;
    border-radius: 14px 14px 0px 0px;
    margin: 10px 0;
}

.details-table td:first-child {
    background: #95acca;
    color: #4e596e;
    font-weight: bold;
    width: 33%;
}

.details-table td {
    background: lightsteelblue;
    vertical-align: top;
    color: white;
}

.details-table td a {
    color: #4e596e;
}

.profile-info {
    border: 2px solid #95acca;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 10px;
}

.blog-preview p {
    border-bottom: 1px solid #95acca;
    padding-bottom: 2px;
}

.profile .blurbs .heading, .profile .friends .heading {
    background: radial-gradient(#e9f0fd, #95acca);
    color: white;
    padding: 2px 7px;
    text-shadow: 0 0 6px aliceblue;
    border-radius: 8px 8px 0px 0px;
}

.blurbs {
    border: 3px solid #95acca;
    border-radius: 14px 14px 0px 0px;
}

.profile .blurbs .section h4 {
    margin: 0;
    color: #95acca;
}

.friends {
    border: 3px solid #95acca;
    border-radius: 14px 14px 0px 0px;
}

div#comments {
    margin-top: 20px;
}

.count {
    color: lightsteelblue;
}

.profile .friends .person p {
    color: #95acca;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}

.profile .friends .person img:not(.icon) {
    max-width: 95px;
    max-height: 95px;
    display: block;
    margin: 0 auto;
    filter: opacity(0.5);
    border: 5px dashed #95acca;
}

.comments-table td:first-child, .music-table td:first-child {
    background: #95acca;
    text-align: center;
    font-weight: bold;
    width: 38%;
}

.comments-table td, .music-table td {
    background: lightsteelblue;
    vertical-align: top;
    color: white;
}

.comment-replies {
    padding: 0px 4px;
    border: 1px solid white;
    margin-top: 10px;
}

footer {
    text-align: center;
    font-size: 70%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: transparent;
    color: #95acca;
}

span {
    color: lightsteelblue;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
BACKGROUND-COLOR: white;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 2px;
    border: 1px dotted #95acca;
}
::-webkit-scrollbar-thumb {
    background: lightsteelblue;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #95acca;  
}

.general-about .profile-pic img {
    max-width: 160px;
    max-height: 160px;
    filter: opacity(0.8);
}

.profile .friends .person img:not(.icon):hover {
    filter: opacity(0.5) drop-shadow(2px 4px 6px #95acca);
    transition: 0.5s;
    transition-timing-function: ease-out;
}

.general-about .profile-pic img:hover {
    filter: opacity(0.5) drop-shadow(2px 4px 6px #95acca);
    transition: 0.5s;
    transition-timing-function: ease-out;
}

.icon, .award img {
    display: inline-block;
    height: 1.4em;
    width: 1.4em;
    aspect-ratio: 1/1;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.3em;
    color: rgba(0,0,0,0);
    font-size: 0;
}

.online:after {
    content: " ♡ ";
}

.contact a:before {
    content: " ♡ ";
}

.profile .friends .person p:before {
    content: " ♡ ";
}

.profile .friends .person p:after {
    content: " ♡ ";
}

.details-table td p:after {
    content: " ♡ ";
}

/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur816.cur), auto !important;} /* End https://www.cursors-4u.com */
</style>

<div class="snowflakes">


  <div class="snowflake">


   🤍


  </div>


  <div class="snowflake">


  🤍


  </div>


  <div class="snowflake">


  🤍


  </div>


  <div class="snowflake">


  🤍


  </div>


  <div class="snowflake">


  🤍


  </div>


  <div class="snowflake">


  🤍


  </div>


  <div class="snowflake">


    🤍


  </div>


  <div class="snowflake">

    🤍


  </div>


  <div class="snowflake">


    🤍


  </div>


  <div class="snowflake">


    🤍


  </div>


  <div class="snowflake">


    🤍


  </div>


  <div class="snowflake">


    🤍


  </div>


</div>


<style>


/* customizable snowflake styling */


.snowflake {


  color: white;


  font-size: 1em;


  font-family: Arial, sans-serif;


  text-shadow: 0 0 5px lightsteelblue;


}





@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}


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

୨୧ RIRI (editing profile)	1715371014 using!! Report Comment
delta	1715163491 using :D Report Comment
likiona	1715015617 using! ^^ Report Comment
ιкєℓᝰ.ᐟ	1714860666 Usando! Report Comment
рыжая псина	1714505111 using! Report Comment
⋮🧸ྀི 𝓀𝒾𝓂𝒾 .ᐟˎˊ˗	1714260300 usiing :3 Report Comment
★ : RIA !	1712562407 Using! Report Comment
Andrew	1712456048 using thank you !! Report Comment
✮ mei !!	1712418784 using!! Report Comment
Candi	1712199108 Using!! Report Comment
luna	1711535396 using! Report Comment
Len	1711400497 using Report Comment
Doninik	1711336551 Usando Report Comment
doomkerr	1710298442 using Report Comment
theweepkid	1709924909 usingg akjdas Report Comment
juanda.glez	1709827151 I'm gonna use it! I wish there was something like this but in pink Report Comment
juanda.glez	1709827151 I'm gonna use it! I wish there was something like this but in pink Report Comment
Maxx ><	1709323590 using :33 Report Comment
— 𝙏𝘰𝘯𝘺 ›	1709260488 using! Report Comment
-ˋ h3athen .ᐟ	1709066448 usinggg Report Comment