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

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
⚘ Chee Chee (Atsushi) 🍰♡🍮	1711285223 using!!! Report Comment
jecka ✧˖°.	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 jecka ✧˖°.; 1710553234; Report thanks!! by nara; 1710561088; Report
❀* ❥ ;selene! ☆	1710491657 using :P Report Comment
Noah	1706136573 Hi, sorry for bothering but could you give me the code of the stars falling? Of course, if it's not a bother Report Comment it’s the “snowflake” near the bottom of the code. spacehey won’t let me post codes in comments, so sorry :( but if you still need help, there should be many blogs out there providing the code too! by nara; 1706161831; Report
aliqrss	1705870717 hi! Sorry to bother but which part of the code would it be where the pfp has a star ? I apologise if I worded it wrong, I dont know what it's called. Report Comment it's no bother at all!! in the code, look for where it says " .general-about .profile-pic img { ". underneath this is the "polygon-path", and that's where the code says to make the pfp a star. i hope this helps you <3 by nara; 1705872254; Report sorry, i meant "clip-path" by nara; 1705872393; Report
Tokyooo	1705807193 usando:3 Report Comment
lucoa !	1705726875 using !! Report Comment
mich ★	1705031830 usandooo:3 Report Comment
cheri lulu :3	1704140926 using!! Report Comment
cosmia	1703789258 using !! Report Comment
tanner o(≧∀≦)o	1703362197 using !!! Report Comment
meekmooks	1701212711 using!! Report Comment
Alayna	1699150226 using :3 Report Comment
Ander	1699049687 Using!! Thxxx Report Comment
rabies ౨ৎ	1698774545 using Report Comment
₍𐙚ᐢ..ᐢ₎ vivianne	1698486962 using !! Report Comment
cat :3	1697567379 using :3 Report Comment
cheri lulu :3	1697403140 using :p Report Comment