Cherry Blossom Dance

Tags: japan, weeb, kawaii, otaku, anime, sakura
Description:

Adds a Japanese flair to your profile! Watch as the cherry blossoms fall whenever you visit your page. Please be sure to credit me if you decide to use this, and leave the CSS comments crediting me in as well.
Preview:

click on the image for a larger preview
Code:

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

<!-- January 2021. Credit for the layout goes to maxinethepiratequeen! If you want to make your own feel free to study this! -->

<!-- Image goes here in a tag like this, but the link must have an image file extension at the end or it's not going to work. Like so:-->
<img src="https://i.pinimg.com/originals/c9/74/de/c974de9f3c59d047e274db864416bec1.gif"/>

<!-- Cursor from Fillster.com. Meant to compliment the cherry blossom motif. -->
<style>body{cursor: url(http://www.fillster.com/myspace-cursors/39.ani), url(http://www.fillster.com/myspace-cursors/39.gif), pointer !important;}</style>

<!-- Transition effect. WARNING: This might annoy some of your visitors. If you do
decide to use this do it with caution!-->
<style>body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
<!--The image you want to use goes here! Just replace the URL between the ' marks.
	background-image: url('');
	background-size: cover;
	background-repeat: no-repeat;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}</style>
<style>@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } </style> --&gt;;

<style>
/*Within the body tag, the background image is called. This MUST
be placed inside the <style> tag, that includes other code you might have for the most part.*/
    body{
      background-color:  #006994;       
      background-image: 
      url("https://data.whicdn.com/images/162543455/original.gif");
      /*background-size: cover;*/
    }

/*This gives the top banner and the links that go under it their color, as well as transparency. The color code for each value goes as follows: Red, Green, Blue, and then the opacity you want it to have. (R,G,B,A)*/
    .top, .links{
        --logo-blue: rgba(241,156,187,0.5);
        --lighter-blue: rgba(247, 202, 201,0.6);
        border-radius: 25px; /*separates the top from the links with a border.*/
        margin: 10px; /*The margin for the top and the links,*/
    }
    
/*This code affects the footer.*/
    footer{
        background: rgba(247, 202, 201,0.6);
        border-radius: 25px;

/*This code affects the footer. Here you may insert an image, which is followed by making all the font colors be white and bold.*/
        background-image: 
        url(""); 
        background-size: cover;
        color: white;
        font-size: 16px;
        font-weight: bold;

    }

/*This adds the transparent dripping chocolate background to the frames in the foreground.*/
    .profile{
            background: rgba(247, 202, 201,0.6);
            border-radius: 25px;
            font-family: "Lucida Handwriting";
            color: white;
            margin: 10px;
            background-image: url("https://cdn.discordapp.com/attachments/230798569181806602/802399265870708746/image0.png");
          background-repeat: no-repeat;
          background-size: 900px 450px;

    }

/*This code below changes all darker blue category text to white.*/
    p{
           --darker-blue: white;
    }

    .general-about .details{
           --darker-blue: white;
    }

/*This code below affects the round look of the profile picture, and it will change depending on the size of the picture. This is the border...*/
    .general-about .profile-pic {
  /* profile pic container */
     height: 50%;
     width: 50%;
     background-color: var(--#4d000055);
     border-radius: 500px;
     padding-top: 4px;
  }

/*...and this is the code for the profile picture itself.*/
  .general-about .profile-pic img {
  /* profile pic */
    max-width: 100%;
    max-height: 100%;
    margin-right: auto;
    margin-left: auto;
    border-radius: 500px;
    display: block;
  }

/*All profile info in this part has the border radius set to 12 pixels, the border color is cyan, and darker blue category text is set to white.*/
    .profile .profile-info{
             --darker-blue: white;
             border-radius: 12px;
             border-color: cyan;
    }

/*This changes the edit link in this section to be white.*/
    .profile .mood{

            --darker-blue: white;

    }

/*This makes the contacts, interests, and links sections of the profile have transparent headers, and the normal text is all set to white.*/
    .profile .contact .heading,
    .profile .table-section .heading{
             background-color: transparent;
             color: white;

    }

/*This changes all text in the darker blue and logo blue categories in the interests table to be white, makes the border radius 12 pixels, and changes the border color to be cyan.*/
    .profile .contact,
    .profile .table-section{
    --darker-blue: white;
    --logo-blue: white;
    border-radius: 12px;
    border-color: cyan;
    }

/*This adds the dripping chocolate background, tells it don't repeat, and sets the background size for it,*/
    .profile .table-section{
background-image: url("https://cdn.discordapp.com/attachments/230798569181806602/802399265870708746/image0.png");
          background-repeat: no-repeat;
          background-size: 500px 770px;


    }

/*This changes the left boxes in the interests section table to be transparent, and in the right the boxes are made pink,*/
    .profile .table-section .inner .details-table{

            --even-lighter-blue: transparent;
            --lightest-blue: rgba(241,156,187,0.6);    

    }

/*This sets the width and margins for the interests section table.*/
    .profile .table-section{
             width: 300px;
             margin-left: auto;
             margin-right: auto;
    }

/*This sets the inner table for the interests section to a margin of 5 pixels.*/
    .profile .table-section .inner td{
             margin: 5px;
    }

/*Code for the Page URL section. This changes text in the darker blue category to be white, sets the border radius to be 12 pixels, and makes the border cyan.*/
    .profile .url-info{
           --darker-blue: white;
           border-radius: 12px;
           border-color: cyan;
    
    }

/*Code for the profile info. This sets all darker blue category text to be white.*/
    .profile .profile-info{

            --darker-blue: white;

    }

/*Code for the blog section. This sets the font size to 18 and makes all the darker blue category text white.*/
    .profile .blog-preview{

            --darker-blue: white;
            font-size: 18px;

    }

/*Code for the Blurbs and friends heading. This makes them pink, rounds off the corners, and sets the font to being Times New Roman, Size 15. The border radius is set to 12 pixels wide here.*/
    .profile .blurbs .heading,
    .profile .friends .heading{
            --darker-blue: white;
            background: rgba(241,156,187,0.5);
            font-family: "Times New Roman";
            font-size: 15px;
            color: white;
            border-radius: 12px;
    }

/*This controls the blurbs section itself, and makes all dark orange text be white and sets it to size 24.*/
    .profile .blurbs{
            --dark-orange: white;
            font-size: 24px;


    }

/*This code rounds out the images found in the friends grid.*/
    .profile .friends .friends-grid img{

            max-width: 50%;
            max-height: 50%;
            margin-right: auto;
            margin-left: auto;
            border-radius: 500px;
            display: block;

    }

/*This code completely removes the border in the comments table, makes its radius and spacing 12 and 5 pixels, and makes the comment tables be a darker shade of pink.*/
    .profile .friends .inner .comments-table{
            --light-orange: rgba(241,156,187,0.3);
            --even-lighter-orange: rgba(241,156,187,0.3);
            border-radius: 12px;
            border-spacing: 5px;
            border: none !important;
    }

/*This makes any and all user comments have a rounded image for their profile picture.*/
    .profile .friends .inner .comments-table img{

            max-width: 50%;
            max-height: 50%;
            margin-right: auto;
            margin-left: auto;
            border-radius: 500px;
            display: block;

    }

/*This set all darker blue category text in the comments section to be white, and changes the border radius to be 12 pixels.*/
    .profile .friends .inner .comments-table tbody td{
            --darker-blue: white;
            border-radius: 12px;

    }

/*This gives your comment section a scroll bar! Try it out.*/
    .comments-table {
            display: block;
            height: 300px;
            overflow-y: scroll;
            border: 0;
    }

/*This rounds the border radius corners of the entire main foreground panel out to be 25 pixels, and makes the panel behind it completely transparent.*/
    main{
            background-color: transparent;
            border-radius: 25px;
    }

</style>

<!-- raining emoji and picture code. Put whatever you want here, but it MUST go at the bottom and before the  tag ends or you WILL ruin your profile! I chose cherry blossom emoji for mine! -->
<div class="heart">

   <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/274/cherry-blossom_1f338.png"/>

  </div>

  <div class="heart">

     <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/274/cherry-blossom_1f338.png"/>

  </div>

  <div class="heart">

   <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/274/cherry-blossom_1f338.png"/>

  </div>

  <div class="heart">

     <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/274/cherry-blossom_1f338.png"/>

  </div>

  <div class="heart">

     <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/274/cherry-blossom_1f338.png"/>

  </div>

  <div class="heart">

     <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/274/cherry-blossom_1f338.png"/>

  </div>

  <div class="heart">

     <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/274/cherry-blossom_1f338.png"/>

  </div>

  <div class="heart">

     <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/274/cherry-blossom_1f338.png"/>

  </div>

  <div class="heart">

     <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/274/cherry-blossom_1f338.png"/>

  </div>

  <div class="heart">

     <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/274/cherry-blossom_1f338.png"/>

  </div>

  <div class="heart">

     <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/274/cherry-blossom_1f338.png"/>

  </div>

  <div class="heart">

     <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/274/cherry-blossom_1f338.png"/>

  </div>

  <div class="heart">

     <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/274/cherry-blossom_1f338.png"/>

  </div>

<style>

/* customizable heart styling */

.heart {

  color: #pink;

  Percentage: 10;

  font-family: Arial, sans-serif;

  text-shadow: 0 0 5px rgba(0,0,0,0.7);

}

@-webkit-keyframes heart-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes hearts-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes hearts-fall{0%{top:-10%}100%{top:100%}}@keyframes hearts-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.heart{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:hearts-fall,hearts-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:hearts-fall,hearts-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.heart:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.heart:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.heart:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.heart:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.heart:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.heart:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.heart:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.heart:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.heart:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.heart:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.heart:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.heart: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.