My first layout! :333

Tags:
Description:

DESCRIPTION IS STILL A W.I.P! i'll time how long it took me this layout includes: ○ color changing navigation/footer background ○ autoplay music (useless child - kikuo) ○ falling stars ○ floating animation on pfp, user, and online icon ○ crumb (cuptoast) animation as a loading screen feel free to change and/or add anything!! let me know if it doesnt work! enjoy ♡
Code:

<!-- (c) Layout created by LUNAS LAYOUT TESTER! (https://layouts.spacehey.com/layout?id=37843) -->

<style>
 .comments-table td:first-child img {
        border-radius: 500px;
    }
</style>
<!-- (c) Layout created by Faith 🍓 (https://layouts.spacehey.com/layout?id=36885) -->

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

</iframe><style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://images-ext-2.discordapp.net/external/_D4X3kUCnW-Ib7rs8w9r1wj78997TIGVaaO1SDn0zF0/https/media.tenor.com/RSq_THvhx0gAAAPo/cuptoast-heart.mp4');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 2s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>


.friends{

border: solid #ffa1d1 2px;
outline: groove #ff309b 3px;
}

.friends .heading{

background: -webkit-linear-gradient(#faf2f6,#fffcfe)!important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
border-bottom: dashed #ffc7e4 2.5px;
}
.contact .heading{

background: -webkit-linear-gradient(#faf2f6,#fffcfe)!important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
border-bottom: dashed #ffc7e4 2.5px;
}
.col.left:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 34px;
  width: px;
  background-image: url(https://64.media.tumblr.com/fffdc8c4163df9d99f005fb2096849f3/eaec3bdf26d1fdfd-bb/s640x960/72ee911cb06e1591791d123624cb0d7f3ccbc392.pnj);
  background-repeat: no-repeat;
  background-size: 300px;
  background-position-x: center;
}
.col.right:before {
  content: "";
  white-space: pre-wrap;
border-radius: 55px;
  display: block;
  height: 130px;
  width: px;
  background-image: url(https://64.media.tumblr.com/a7a9e5dbafe7b7422e945ba70c788cc0/0f4e8ea94a154f89-37/s250x400/45695b0ff942900ed3b2f6be187fbd0a5584948e.jpg);
  background-repeat: no-repeat;
  background-size: 130px;
  background-position-x: center;

}
.contact{
border: solid #ffa1d1 2px;
outline: groove #ff309b 3px;
}

.table-section{
border: solid #ffa1d1 2px;
outline: groove #ff309b 3px;
}
.table-section .heading{
background: -webkit-linear-gradient(#faf2f6,#fffcfe)!important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
border-bottom: dashed #ffc7e4 2.5px;
}
:root {
    --logo-blue: none; 
    --darker-blue: #c42778; 
    --lighter-blue: none; 
    --even-lighter-blue: none;
    --lightest-blue: none;
    --dark-orange: red; 
    --light-orange: none; 
    --even-lighter-orange: none; 
    --green: white;
}
footer{
background: -webkit-linear-gradient(#ffbade, #ff309b)!important;
  -webkit-background-clip: text;
color: white;
border-radius: 100px;
outline: groove #ff309b 3px;
}
table.comments-table{

display: block;
height: 250px!important;
overflow-y: scroll;

}

.table-section{

display: block;
height: 250px!important;
overflow-y: scroll;
}
.online{
content: url(https://cdn.discordapp.com/attachments/1002765210932744333/1099330885255434250/glorormr.png);
}

.blurbs:after{
  content: "";
  white-space: pre-wrap;
border-radius: 55px;
  display: block;
  height: 50px;
  width: px;
  background-image: url(https://64.media.tumblr.com/9a5b6aa5ac419d06ead14c27c94ded79/e4ed25d8fb0ed184-dd/s400x600/2467713aafc8766fcbc06c306059b53c9694f660.gifv);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position-x: center;
}
.friends .heading:before{
content: url(https://cdn.discordapp.com/attachments/1002765210932744333/1099501247410733117/sonico_icon_1_1_55.png);


}
.blurbs .heading:before{
content: url(https://cdn.discordapp.com/attachments/1002765210932744333/1099501089847529482/sonico_icon_2_1_55.png);
}
.friends:after{
  content: "";
  white-space: pre-wrap;
border-radius: 55px;
  display: block;
  height: 50px;
  width: px;
  background-image: url(https://64.media.tumblr.com/9a5b6aa5ac419d06ead14c27c94ded79/e4ed25d8fb0ed184-dd/s400x600/2467713aafc8766fcbc06c306059b53c9694f660.gifv);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position-x: center;

}
<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; }

@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); }
}
.comments-table img,
.person img{

filter: grayscale(100%) blur(1px);
-webkit-mask-image: url(https://cdn.discordapp.com/attachments/1002765210932744333/1093413057243381800/hart.png);

-webkit-mask-size: 100%;

-webkit-mask-repeat: no-repeat;

-webkit-mask-position: center;

transform:scale(1.025,1.025);

position:relative;

top:-0.25em;

}
.general-about .profile-pic img{

-webkit-mask-image: url(https://cdn.discordapp.com/attachments/1002765210932744333/1093413057243381800/hart.png);

-webkit-mask-size: 100%;

-webkit-mask-repeat: no-repeat;

-webkit-mask-position: center;

transform:scale(1.025,1.025);

position:relative;

top:-0.25em;

}
  .profile{
        
    direction: rtl;
    
    }
    .blurbs{
    
    direction: ltr;
        
    }
    .blog-preview{
        
    direction: ltr;
        
    }
    .friends{
    
    direction: ltr;
        
    }
    .general-info{
        
    direction: ltr;
        
    }
    .contact{
        
    direction: ltr;
    
    }
    .url-info{
        
    direction: ltr;
        
    }
    .details-table{
        
    direction: ltr;
        
    }
    .profile .table-section .heading{
    
    direction: ltr;
        
    }
    .details p{

    direction: ltr;

   }
   .mood{

       direction: ltr;

   
}
.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://pixelbank.neocities.org/decome/hearts/2e2814da.gif")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content: url("https://pixelbank.neocities.org/decome/hearts/2e2814da.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: url("https://pixelbank.neocities.org/decome/swirlys/3d21ef26.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: url("https://pixelbank.neocities.org/decome/swirlys/3d21ef26.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: url("https://pixelbank.neocities.org/decome/sweets/f163080.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: url("https://pixelbank.neocities.org/decome/sweets/f163080.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: url("https://pixelbank.neocities.org/decome/clothing/c25d7d10.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content:  url("https://pixelbank.neocities.org/decome/clothing/c25d7d10.gif")
}

img:hover, .friends:hover{
      animation:shake 10s;
      animation-iteration-count:infinite;
filter: none;
}
@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%
   
}
 .col, main, footer, nav::before, .online, nav .links, nav .top {
    animation: float 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 .col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}

<style>
</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 1 of 1 comments ( View all | Add Comment )
: luna !? ੈ✩‧₊˚
1691517336
doesnt work, i already tested this so dont try rn!
Report Comment