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

AnonymouseGeek	1742526719 using X3 Report Comment
birthpack	1740437847 usinn Report Comment
Lin	1740328047 using Report Comment
Laken Uchiha UwU	1739046634 using! Report Comment
syds!de	1736609712 using Report Comment
ᐟᐟ ⟢ yuki! ★ ˚. ᵎᵎ˖	1733964978 Using!! :3 Report Comment
ᐟᐟ ⟢ yuki! ★ ˚. ᵎᵎ˖	1733964973 Using!! :3 Report Comment
AV33N	1730908231 using som parts ^^ Report Comment
Francis4everr	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
Kalista/percy	1702831093 Using as a base!! Ty!! Report Comment
SickPrince	1698696320 thanks <3 Report Comment
chloe ୨୧	1692894931 tyy Report Comment
Raven	1690576439 using! <3 Report Comment
pawnerx	1685807754 sooooo using I luv yuno <3 Report Comment
VROWSA !!	1647581425 super cool! Report Comment
starfrutes!!	1642808035 cute ! Report Comment