Mirai Nikki:･ﾟ✧:･ﾟ✧ Future Diary :･ﾟ✧:･ﾟ✧ Yuno Gasai

Tags: yuno gasai, anime, mirai nikki, future diary

Description:

Made a layout based on one of my favorite animes :) Yuno Gasai is best yandere girl.

Includes an opening animation and gifs throughout the profile.

My first time messing with animations, shout-out to Cory for the code for the opening animation and the banner code!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ꜱʜᴇʟʙᴢ (https://layouts.spacehey.com/layout?id=516) -->

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

@keyframes blur {
    0% {text-shadow: 4px 4px 3px #caa6b9;}
    50% {text-shadow: 4px 4px 3px #976280;}
    100% {text-shadow: 4px 4px 3px #caa6b9;}
}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

@keyframes fade {
    0% {opacity: 100%;}
    25% {opacity: 50%;}
    50% {opacity: 0%;}
    75% {opacity: 50%;}
    100% {opacity: 100%;}
    
}

body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://31.media.tumblr.com/801bd46e408a5ea1c2658fc48eebde25/tumblr_mr0tjzH05B1rgyoe1o1_500.gif');
	background-size: cover;
	background-repeat: no-repeat;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

body {
    background-image: url('https://www.transparenttextures.com/patterns/outlets.png');
background-color: #ed96c7;
font-family: 'IBM Plex Mono', monospace;
}

main:before {
background-image: url('https://64.media.tumblr.com/3a892bff5082b05787a15ea229e233e5/tumblr_inline_nrbk3qT8it1txlwvy_500.gifv');
    background-position: center;
    background-size: cover;
    display: block;
    content: "";
    width: 100%;
    height: 400px;
}

.profile .contact:after {
background-image: url('https://i.gifer.com/8Lf5.gif');
    background-position: center;
    background-size: cover;
    display: block;
    content: "";
    width: 100%;
    height: 200px;
}
.profile .contact {
border-style: none;
}

main {
    background-color: #fbdcec;
}

nav .top, nav .links, footer {
     background-color: #fbdcec;
}
.profile h1 {
    color: black;
    animation-name: blur;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
#comments:before {
    background-image: url('https://pa1.narvii.com/6013/04eb9bbfcf4f202c28335ce52d558f487c8945fb_hq.gif');
    background-position: center;
    background-size: cover;
    display: block;
    content: "";
    width: 100%;
    height: 250px;
    margin: 3px;
}

.profile .contact .heading, .profile .blurbs .heading, .profile .friends .heading, .profile .table-section .heading {
    background-color: #976280;
    border-style: groove;
    border-color: #c17ba3;
}

.profile .table-section, .profile .url-info {
    border-style: none;
}

.details-table td:first-child, .comments-table td:first-child {
    color: white;
    background-color: #976280;
}

.details-table td, .comments-table td {
    color: black;
    background-color: #c17ba3;
    border-style: none;
}

.profile .blurbs .heading h4, .profile .friends .heading h4 {
    color: white;
}

.profile .blurbs .section h4 {
    color: black;
}
.details-table {
    padding: 0px;
    margin: 0px;
}

.comments-table  {
    border-style: none;
}

.count {
    color: #976280;
}

a, .profile .friends .person p{
    color: black
}

a:hover, .profile .friends .person p:hover {
    color: #ffaddf;
}

.profile .contact .inner .icon {
    
        content: url('https://i.imgur.com/ZJsLNJq.png');
        animation-name: fade;
        animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

button {
    color: white;
    background-color: #976280;
    border-style: groove;
border-color: #c17ba3;
font-family: 'IBM Plex Mono', monospace;
}
button:hover {
 background-color: #ffaddf;
 color: black;
border-color: #c17ba3;
font-family: 'IBM Plex Mono', monospace;
}

.comment-replies {
 border-width: 1px;
border-color: #ffaddf;
}
</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 20 of 30 comments ( View all | Add Comment )

Dashme	1766081084 USING _w_ Report Comment
─ ★ ˙ ̟1z4m ۶ৎ !!	1765066068 using!! Report Comment
Liz	1763242692 SO CUTE!^^ USING! Report Comment
cuchillitoquenocorta	1762264665 using Report Comment
Declan [Ralsei's #1 Fan]	1759202928 using only the banner, thanks :D Report Comment (by that i mean with a changed image) by Declan [Ralsei's #1 Fan]; 1759202950; Report
acid_bubbles	1755253145 using as base!! Report Comment
hellsing	1752693669 usingg Report Comment
AnonymouseGeek	1742526719 using X3 Report Comment
birthpack	1740437847 usinn Report Comment
Lin	1740328047 using Report Comment
syds!de	1736609712 using Report Comment
ᐟᐟ ⟢ yuki! ★ ˚. ᵎᵎ˖	1733964978 Using!! :3 Report Comment
ᐟᐟ ⟢ yuki! ★ ˚. ᵎᵎ˖	1733964973 Using!! :3 Report Comment
ASAEL	1730908231 using som parts ^^ Report Comment
Anticristo2008	1728432646 using some Report Comment
vivi @_@	1728144455 using!!♡ Report Comment
▪︎ｓｕｎｓｈｉｎｅ	1727819345 using, in parts Report Comment
MATTIAS!!!!	1719358028 using tysm!!! Report Comment
pau ⋆˚✿˖°	1705711975 usandoo Report Comment
Cinnamon Cookie!	1702831093 Using as a base!! Ty!! Report Comment