nap of a star 💫. *. ⋆ (made for @lalalicey★)

Tags: twin stars, pink, blue, cute, colorful, sanrio

Description:

layout inspired by "little twin stars" layouts linked below ! !

★ https://layouts.spacehey.com/layout?id=24614
★ https://layouts.spacehey.com/layout?id=29263

this layout includes:
○ color changing navigation/footer background
○ autoplay music (nap of a star - txt)
○ falling stars
○ floating animation on pfp, user, and online icon

feel free to change and/or add anything!! let me know if something does not work. enjoy ♡

Preview:

click on the image for a larger preview

Code:

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

<style> 
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); 
</style>

<style>

.profile-pic, .profile h1, .online, .floating{
animation-name: floating;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out; }
 
@keyframes floating {
0% { transform: translate(0,  0px); }
50%  { transform: translate(0, 15px); }
100%   { transform: translate(0, -0px); }
}

.general-about .profile-pic img{
clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%); }

.profile-pic, .comments-table td:first-child img:not(.icon), .profile .friends .person img:not(.icon) {
background: transparent;
border-radius: 25px; 
box-shadow: 3px 3px #faf9c7; }

div.mood {
margin-top: 7px; }

body {
background: url(https://i.pinimg.com/564x/8a/2e/f5/8a2ef5ab00f198b0738cf72eb2d1998e.jpg); }

nav, main, footer {
border: 1px dashed gray;
border-radius: 2px;
margin: 5px; }

nav .top, nav .links, footer {
animation: colorchange 6s linear infinite; }

li.active .icon {
display: block;
content: url(https://64.media.tumblr.com/tumblr_lwzkrfYqfV1qhwcy0.gif); }

@keyframes colorchange {
0% {background-color: #ffb7cf; }
20% {background-color: #e8d8f0; }
80% {background-color: #cce1f7; }
100% {background-color: #ffb7cf; } 
}

nav .top, nav .links {
font-size: 15px;
font-family: 'itim', curisve; 
text-transform: lowercase; }

button.logout-btn {
font-family: 'itim', cursive; 
font-size: 15px;  }

nav .links {
font-weight: bold;
text-align: center; }

nav .links a {
text-shadow: 0 0 3px #faf9c7; }

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

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
content: " ✦ ";
font-size: 10px;
color: white;
text-shadow: 0 0 3px #faf9c7; }

[id='q'] {
border: 1px solid gray;
border-radius: 2px; }

button {
font-family: 'itim', cursive;
text-transform: lowercase;
color: gray;
background: #fff;
border: 1px solid gray;
border-radius: 10px; }

a {
color: black; }

main, main p, .count {
font-family: 'itim', cursive;
font-size: 15px;
text-transform: lowercase;
color: gray; }

.profile .contact .heading, .profile .table-section .heading {
background: #e8d8f0;
text-align: center;
color: black;
border-radius: 3px 3px 0px 0px; }

.profile .contact, .profile .table-section {
border: 1px solid #e8d8f0;
border-radius: 5px; }

.profile .url-info {
text-align: center;
border: 1px solid #e8d8f0;
border-radius: 5px; }

.details-table td:first-child {
text-align: center;
background: transparent; }

.profile .table-section td {
background: #fbf7fc;
border: 1px solid gray;
border-radius: 3px; }

.profile .blurbs .heading {
text-align: center;
background: #ffb7cf;
color: black;
border-radius: 3px 3px 0px 0px; }

div.blog-preview h4 {
text-align: center;
background: #ffb7cf; 
color: black;
border-radius: 3px; }

div.blog-preview {
border-radius: 3px; }

.profile .blurbs, .profile .friends, div#comments.friends {
border: 1px solid #e8d8f0;
border-radius: 5px }

.profile .blurbs .section h4 {
color: gray;
font-weight: bold;
text-align: center; }

p#aboutgoeshere, p#meetgoeshere{
background: #feedf5; }

.profile .friends .heading {
background: #cce1f7; 
text-align: center;
color: black; }

.profile .friends {
margin-bottom: 20px; }

.profile .friends .person p {
color: gray; }

.friends .heading a.more {
color: black; 
font-family: 'itim', cursive; }

table { 
border-spacing: 3px; }

.comments-table td:first-child, .comments-table td {
background: #f0f6fc; 
border: 1px solid gray;
border-radius: 5px; }

table.comments-table {
display: block; 
height: 400px; 
overflow-y: scroll; }

a:hover {
color: #ffb7cf;
text-decoration: initial; }

nav .top a:hover, nav .links a:hover, footer .links a:hover, p.copyright a:hover{
color: #faf9c7;
text-decoration: initial; }

.online {
content: url(https://i3.glitter-graphics.org/pub/1917/1917323pkyxb66sla.gif); }

footer, footer .links a{
font-family: 'itim', cursive;
font-size: 16px;
text-transform: lowercase;
color: white; }

.profile h1 {
font-size: 30px; }

.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 {
/* Add to Friends */
content: url(https://64.media.tumblr.com/tumblr_m230q68lJ71qfamg6.gif); }

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content: url(https://64.media.tumblr.com/tumblr_m230q9R9jj1qfamg6.gif); }

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: url(https://64.media.tumblr.com/tumblr_m230qf7gnc1qfamg6.gif); }

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: url(https://64.media.tumblr.com/tumblr_m230qkCRe91qfamg6.gif); }

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: url(https://64.media.tumblr.com/tumblr_m230q68lJ71qfamg6.gif); }

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: url(https://64.media.tumblr.com/tumblr_m230q9R9jj1qfamg6.gif); }

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: url(https://64.media.tumblr.com/tumblr_m230qf7gnc1qfamg6.gif); }

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content: url(https://64.media.tumblr.com/tumblr_m230qkCRe91qfamg6.gif); }

div.comment-replies {
border: 1px solid gray;
border-radius: 5px; }

.report .icon {
visibility: hidden; }

p.report {
background-image: url(https://static.tumblr.com/rltvkjt/9lnlmr41u/th_k_atencao.gif); 
background-repeat: no-repeat; 
display: inline-block;
font-weight: bold; }

</style>

<style>* {cursor: url(https://cur.cursors-4u.net/symbols/sym-6/sym599.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/01/26/transparent-yellow-star.html" target="_blank" title="Transparent Yellow Star"><img src="https://cur.cursors-4u.net/cursor.png" alt="Transparent Yellow Star" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>

.friends img:hover {
animation: floating 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out; }

@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>

<div class="snowflakes">
  <div class="snowflake">
   <img src="https://64.media.tumblr.com/tumblr_lqwdhxlJTP1qcfn0j.gif"/>
  </div>
  <div class="snowflake">
  <img src="https://64.media.tumblr.com/tumblr_lqwdhxlJTP1qcfn0j.gif"/>
  </div>
  <div class="snowflake">
  <img src="https://64.media.tumblr.com/tumblr_lqwdhxlJTP1qcfn0j.gif"/>
  </div>
  <div class="snowflake">
  <img src="https://64.media.tumblr.com/tumblr_lqwdhxlJTP1qcfn0j.gif"/>
  </div>
  <div class="snowflake">
  <img src="https://64.media.tumblr.com/tumblr_lqwdhxlJTP1qcfn0j.gif"/>
  </div>
  <div class="snowflake">
  <img src="https://64.media.tumblr.com/tumblr_lqwdhxlJTP1qcfn0j.gif"/>
  </div>
  <div class="snowflake">
    <img src="https://64.media.tumblr.com/tumblr_lqwdhxlJTP1qcfn0j.gif"/>
  </div>
  <div class="snowflake">
    <img src="https://64.media.tumblr.com/tumblr_lqwdhxlJTP1qcfn0j.gif"/>
  </div>
  <div class="snowflake">
     <img src="https://64.media.tumblr.com/tumblr_lqwdhxlJTP1qcfn0j.gif"/>
  </div>
  <div class="snowflake">
    <img src="https://64.media.tumblr.com/tumblr_lqwdhxlJTP1qcfn0j.gif"/>
  </div>
  <div class="snowflake">
    <img src="https://64.media.tumblr.com/tumblr_lqwdhxlJTP1qcfn0j.gif"/>
  </div>
  <div class="snowflake">
    <img src="https://64.media.tumblr.com/tumblr_lqwdhxlJTP1qcfn0j.gif"/>
  </div>
</div>

<style>

.snowflake {
font-size: 2em;}

@-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>

<iframe width="0" height="0" src="https://www.youtube.com/embed/ZbIs7AOZ8Ls//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

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

Havenn	1736760743 using !! Report Comment
Inu-chan	1735679335 Using(⁠｡⁠･⁠ω⁠･⁠｡⁠) Report Comment
🦴xXluca >_<Xx🌕	1735459404 Using Report Comment
stinkbug⋆˚࿔	1735284750 might use !! Report Comment
Matthew	1728369926 using !! Report Comment
strwberry	1728202476 using !! (omg this is adorable, love love ! ) Report Comment
☆𝒜𝓃𝒾𝓈𝒶☆	1727230339 Using!!! Report Comment
anika!1! :3	1725316733 using!!! Report Comment
Lyra Melodia	1725266520 using :3 Report Comment
yeon	1725072111 usinggg :) Report Comment
angie	1722819864 using! Report Comment
KENNO!	1721774919 using!! Report Comment
chlo / espe ✩•̩̩͙*˚＊	1719174214 using Report Comment
aria [she/her]	1716571706 using Report Comment
Daisyyyy !! ♥	1716410031 Using !! Report Comment
Lys(·•᷄‎ࡇ•᷅ )	1715735489 How do i change the song? Report Comment i’m sorry if u already figured it out, but scroll down to the very bottom of the code and change the "ZbIs7AOZ8Ls" to the video ID of the song you want. by nara; 1715771806; Report
⑅ ‎ ‎ ‎ ‎🔪 ‎ ‎ ۫ ‎ ‎ ‎ ‎ ‎melody ‎ ‎ ‎ ׅ ೀ	1711679180 how do I change the star in PFP? Report Comment look for “ .general-about .profile-pic img{ ” in the code and delete that whole section to get rid of the star shape. by nara; 1711683338; Report
ang1e	1711509795 usinggg :3 Report Comment
ꪆৎ Fuyu (Atsushi) 🍰♡🍮	1711285223 using!!! Report Comment
ren :3	1710513158 using ^^ btw is it possible to put another style of the shape of my pfp? like changing the star shape to something else? Report Comment yes, it's possible! i'm so sorry for the late reply, but it looks like you figured it out already :) by nara; 1710548794; Report ITS OKK yeah it was kinda hard to figure which part but the layout is so cute!!! by ren :3; 1710553234; Report thanks!! by nara; 1710561088; Report