XIAO LAYOUT

Tags: xiao, genshin, dark, green, anime, manga, cool, emo, video game, pretty

Description:

XIAO LAYOUT!!!!

Anyone is free to use!! Pls just credit me and Friend me/comment !!!

DO NOT DELETE MY CREDIT/URL

!!!be like other people and just move it to a more convenient spot for you!!!

This layout features an intro screen!!!

Just like all my other layouts, there's a bouncing animation, a floating png in the bottom right corner, Gif banner, An img to replace "ONLINE!!", and a decorated comments/url box

I apologize for my lack of code organization

You may have to fix/edit some things to fit certain things (Like your pfp)

THANK YOU FOR YOUR TIME !!!!

If there are any issues with the code please comment the issue and I'll see what I can do!!!

All my layouts are made on PC and for PC, Sorry if they don't look right on mobile :(

Preview:

click on the image for a larger preview

Code:

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

<style>
body{ background-image: );
background-image:url(https://64.media.tumblr.com/578ed7dbe9e1ab2f938d1cdb789a9de2/9aad0ce247ef6597-d9/s500x750/a03e154c2760904535590144a7a421ac056cf636.gifv);
Background-size: 70%;
}

main:before {
      background-image: url(https://i.pinimg.com/originals/46/08/26/460826bb0487bc00011acc510cfeccc7.gif);
      background-position: center center;
      background-size: cover;
display: block;
content: "";
    width: 98%;
    height: 185px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-left: 8px;
  }

.row {
    width: 100%;
    display: table;
    table-layout: fixed;
    background-color: #243a369c;
}

.general-about .details {
width: 300px;}

.profile .table-section, .profile .contact{
    margin-top: 20px;
}

nav, footer {
	margin: 1em;
	position: relative;
}

main .right {
    width: 300px;
    background-color: #white;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    margin-top: 20px;
    border: 2px solid #ffffff00;
}

a{color: #38ad96;}

.col.w-40 {
    width: 43%;
}

nav .links {
    background-color: #3378719e;
}

.comments-table td:first-child, .music-table td:first-child {
    background-image: url(https://64.media.tumblr.com/da64a66f667b869396cda0669a32bdd1/b6f3685247c52bec-9e/s540x810/3ecb6aca2d643c937ac289f63acaaf45c57a150a.gifv);
    text-align: center;
    font-weight: bold;
    width: 38%;
    background-size: cover;
}

nav .top {
    background: #a8a8a89e;
    color: black;
}

main {
    background:#ffffff00;
    color: white;
}

.profile .blurbs .section h4 {
    color: #74b183;
}

.count {
    color: #4bb797;}

nav{
    font-size: 100%;
  font-family: 'Splash';}

.profile .blurbs .heading, .profile .friends .heading {
    background: #6ebec294;
    color: black;
}

.details-table td {
    background: #26596cb8;
    vertical-align: top;
    color: white;
}

.details-table td:first-child {
    background: #396b6ccf;
    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: #58a570ad;
    color: white;
    padding: 2px 7px;
}

.profile .mood {
    margin-top: 20px;
}

div. mood{     border: 2px solid #ffffff00;}

.profile-pic img {
    border-radius: 100%;
    margin-top: 20px;
    margin-left: 10px;
outline: 2px dashed white;
outline-offset: 4px;
}

 .mood {
    margin-bottom: 20px;
}

main {
    font-size: 95%;
   font-family: 'Roboto Condensed';
}


.url-info{
    background: url(https://i.pinimg.com/originals/69/10/b0/6910b0114d9c89fd1dd034c5a10bf660.gif);
    background-position: center;
    background-size: cover;
    border: var(--borders)!important;
    border-radius: var(--curve);
    height: 250px;
color: White;
}


.comments-table td {
    color: White;
background-image: url(https://thumbs.gfycat.com/AcidicHandyCygnet-size_restricted.gif);
background-size: cover;
}

.comments-table td:first-child img:not(.icon) {
    visibility: hidden;
}

<style>

.friends
{display:none;
    }

 

    .online {
        content: url("https://static.wikia.nocookie.net/gensin-impact/images/c/cd/Icon_Emoji_075_Xiao_Have_a_seat.png/revision/latest/scale-to-width-down/250?cb=20210906044121");
  content-position: center;
   width: 95px; }

.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: "⚡"
}


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

footer {
    background: #ffffff00;
color:White;
}


nav::before {
   content: "";
   background:  url(https://static.wikia.nocookie.net/gensin-impact/images/8/8d/Icon_Emoji_078_Xiao_Dazed.png/revision/latest/scale-to-width-down/250?cb=20210906044128);
background-size: 200px;
    position: fixed;
    float: right;
    display: inline;
    bottom: 0;
    right: 5px;
    height: 196px;
    width: 195px;
    margin-bottom: 10px;
    margin-right: 5px;
}


.col, main, footer, nav::before, .online, nav .links, nav .top {
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>


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


<style>
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-image: url(https://i.pinimg.com/originals/4a/3b/bd/4a3bbdc968d054b4a9bd3ee4fd126f2d.gif);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } </style>


<style>/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/sports/spo-1/spo34.ani), url(https://cur.cursors-4u.net/sports/spo-1/spo34.png), auto !important;} /* End https://www.cursors-4u.com */</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 16 of 16 comments ( View all | Add Comment )

Sarage :)	1700779707 using! :> Report Comment
Em	1700348486 Usin Report Comment
xiao irl fr	1698328197 using <3 Report Comment
⠀ ✚ ₊ ⠀ 𝜗ϱ Ryu	1696519751 using ! Report Comment
shae ♡	1695442296 using!! ty Report Comment
KATIE	1687676430 Using Report Comment
Karma	1686402007 I'm new rn and i'm in love with this, def using!! Report Comment
Liliwyn	1683151425 using, thank you! Report Comment
lilzz	1679966453 yippee hii imma use it!! <3 Report Comment
gamz	1673803135 so cute! def usin!! Report Comment
MizzyMiz	1671426116 definitely using! Report Comment
kade	1671157825 i’m using this!! Report Comment
voxxane	1670983466 using !!!!!!!!!!!!!! Report Comment
Mia	1665257939 Love this layout Report Comment
zandik	1662494622 DEFO USING IT Report Comment
asterith	1660058709 I love Xiao! plan to use this Report Comment