AYATO LAYOUT!!!

Tags: ayato, genshin impact, genshin, video game, anime, blue, water, light blue, cute

Description:

ANYONE IS FREE TO USE!! JUST CREDIT ME!!

This layout features...

-Floating Ayato emote png

-Ayato intro gif

-Ayato banner

-Customized cursor

-Customized URL box

-Bouncing body

Please friend me if possible :)))

<333

If there are any issues with the coding just DM or comment the issue!!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 🎧 : ̗̀➛ ykkeio (https://layouts.spacehey.com/layout?id=23544) -->

<style>
body{ background-image:url(https://i.pinimg.com/originals/1f/1e/6f/1f1e6f6e7c70a5bb21fc475d8dbe699f.gif);

}

.comments-table {
    display: block;
    border-radius: 3px;
    border-spacing: 6px;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    width: 100%;
    border: 2px solid #e2e2e27d;
}


a{color:#5a93f4;}

nav .links {
    background-color: #184273c2;
}

.comments-table td:first-child, .music-table td:first-child {
    background-image: url(https://i.pinimg.com/originals/f9/5f/58/f95f58a1fd8b7044c8b81adecba35312.gif);
    text-align: center;
    font-weight: bold;
    width: 38%;
background-size: inherit;
}

nav .top {
    background: #082152cf;
    color: white;
}

main {
    background: #00339991;
    color: #ffffff;
border: 9px double #FFFFFF;
}

.profile .blurbs .section h4 {
    color: #d8e3f0;
}

nav{
    font-size: 100%;
    font-family: Perpetua;}

.profile .blurbs .heading, .profile .friends .heading{
    background: #4dabcda8;
    color: #ffffff;
}

.details-table td {
    background: #ebf0fe;
    vertical-align: top;
    color: black;
}

.details-table td:first-child {
    background: #1a5592b8;
    color: #ffffff;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    margin-top: 20px;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
    background: #4dabcda8;
    color: white;
    padding: 2px 7px;
}



.profile-pic img {
    border-radius: 30%;
}

 .mood {
    margin-bottom: 20px;
}

main {
    font-size: 108%;
    font-family: Perpetua;
}

main:before {
      background-image: url('https://64.media.tumblr.com/0737c699c961aeb2ca70fd2fca52f54a/fc97c9ba88f87a8e-5f/s540x810/d5ce154c73b9c69518366e28e4dd1e202d2261ba.gifv');
      background-position: center center;
      background-size: cover;
display: block;
content: "";
    width: 98%;
    height: 150px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-left: 8px;
  }


.url-info{
    background: url(https://64.media.tumblr.com/788f8adca7f927d60105dce555c56e0e/b27de86376b8c41d-4f/s540x810/a120a21d256161f939e42b6c74fe72bbf3c645e7.gifv);
    background-position: center;
    background-size: cover;
    border: var(--borders)!important;
    border-radius: var(--curve);
    height: 250px;
color: White;
}


.comments-table td {
    color: black;
background-image: url(https://64.media.tumblr.com/a4d0d176b250fd2235236e2af115be33/f6b5801e967cf87a-11/s500x750/34bc747c3c79d8986ddb62215b1fe0789bf1b547.gif);
background-size: cover;
}


<style>

.friends
{display:none;
    }


 

    .online {
        content: url("https://pbs.twimg.com/media/FOluiPUWQAI5pl2.png");
    height: 120px;
  content-position: center;}

.icon, .award img {
    visibility: hidden;
}

/* contact icons */
.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: "💧";
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "🚰"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "💦"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "⛲"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "🚿"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "💎"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "🌊"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "💙"
}

.count {
    color: #687afa;
}

main {
    border-radius: 10px;
    margin-top: 8px;
}

footer {
    background: #b6c6e29c;
    border-radius: 8px;
}


nav::before {
   content: "";
   background:  url(https://pbs.twimg.com/media/FOlug5LWYAACnZm.png);
   background-size: 200px;
   position: fixed;
   float: right;
   display: inline;
   bottom: 0;
   right: 5px;
   height: 200px;
   width: 200px;
margin-bottom: 10px;
}


.col, main, footer, nav::before{
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>
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-image: url('https://64.media.tumblr.com/2020150014342d29297092a778168270/904644b686bdf96c-e5/s540x810/ad8248ad29c36d9c15276793fcd04b056176ff16.gifv');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: yourAnimation 4s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } </style>


<p id="p0">This Layout was made by <a href="https://spacehey.com/junpei"> https://spacehey.com/junpei</a></p>


<style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-11/nat1028.ani), url(https://cur.cursors-4u.net/nature/nat-11/nat1028.gif), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2012/01/29/sky-blue-bobblehead-bunny.html" target="_blank" title="Sky Blue Bobblehead Bunny"></a>

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

Kai	1699856764 I'll use this, tysm!!!! Report Comment
Symphony Collective	1661785715 I will 100% use this layout! as I adore ayato :) Report Comment
Lex ༉‧₊˚.	1659622053 Could you do an Itto layout if you get the time? There’s none I can find xd Report Comment
Oliver	1657788550 do you think a Thoma layout would be possible? btw your layouts are amazing!!!! Report Comment I have officially posted my Thoma layout :) (Its actually been done for a long time now but I just got around to posting it) by 🎧 : ̗̀➛ ykkeio; 1659214438; Report