Simplistic Miku Layout (With snow, floating, music, and a tiny glitchy effect)

Tags: cute, simple, basic, blue, pastel, miku, snow

Description:

Thanks to MANY people who made the animations <3

Preview:

click on the image for a larger preview

Code:

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

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


/*PASTE SCROLLBAR CODE HERE*/

body{
background-color: #6295e7;
}

main{
background-color: #66abff;
border: 3px Outset #007bff;
}

.contact, .url-info, .table-section, .blurbs, .friends, .comments {
background-color: #757eff;
}

span[itemprop='name'] {
color: #00fffb;
font-family: 'Comic Neue', 'Comic Sans', Sans-Serif;
}

h4 {
color: #00e1ff;
font-family: 'Comic Neue', 'Comic Sans', Sans-Serif;
}

.section h4, .details-table td:first-child {
color: #00eeff!important;
font-family: 'Comic Neue', 'Comic Sans', Sans-Serif;
}

a, .count {
color: #00fbff;
font-family: 'Comic Neue', 'Comic Sans', Sans-Serif;
}

a:hover {
color: #00ff91;
font-family: 'Comic Neue', 'Comic Sans', Sans-Serif;
}

body,main {
color: #00fffb;
font-family: 'Comic Neue', 'Comic Sans', Sans-Serif;
}

.details-table td, .details-table td:first-child{
background: none!important;
}
.heading{
background: none!important;
}
.comments-table td{
background: none!important;
}
</style>

<style>
.floating { 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 700px); }
    100%   { transform: translate(0, -350px); }
}
</style>

<style>
html:before {
  content: " ";
  display: block; position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.16) 50%);
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/anime/ani-12/ani1137.ani), url(https://cur.cursors-4u.net/anime/ani-12/ani1137.gif), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/14/hatsune-miku.html" target="_blank" title="Hatsune Miku"><img src="https://cur.cursors-4u.net/cursor.png" alt="Hatsune Miku" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
/* customizable snowflake styling */
.snowflake {
  color: white;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px black;
}
@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;user-select:none;cursor:default;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%;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;animation-delay:4s,2.5s}
</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>

<img src="https://img1.picmix.com/output/stamp/normal/9/2/4/3/1773429_22fd8.gif"/>

<iframe width="300" height="50" src="https://www.youtube.com/embed/06d8SwcSm_Q//?&;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>

<style>
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.imgur.com/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}
</style>

<style>

main:before {
	width: 100%;
	height: 300px;
	display: block;
	content: "";
	background-image: url('https://i.ibb.co/F0ZntcF/wwwwwwwwwooowwowowoow.png');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}
</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 6 of 6 comments ( View all | Add Comment )

james	1705089792 usingggg =D Report Comment
nesdobrym	1686903854 Спасибо! Thanks! Report Comment
˚⁀➷Darling ★	1686526512 using this layout :3 Report Comment
wareti	1686323936 thx for the layout <3 Report Comment
Latte (´•̥﹏•̥`)	1685298039 Usingg Report Comment