Layout published by 🎧 : ̗̀➛ ykkeio

published 1657409240
updated 1676743241

Add to Favorites

View Layouts

View Profile

Report Layout

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

Evan (Son of Apollo)	1751306177 Using =) Report Comment
lynt	1743597925 gonna use this !! ty for making it Report Comment
luka .ᐟ	1735525131 Using <3 Report Comment
ASAEL	1730838210 using ^^ Report Comment
xiaoscinnamoroll	1726801905 using (i love you thanks) Report Comment
Bunsuki	1725724872 Using! Report Comment
☆ᴍs.ᴄʜᴀɴɢxɪ☆	1722737261 using :3! Report Comment
Elliott	1712252082 using Report Comment
azell	1709230586 usinggggg<3 Report Comment
IDonnuT	1708576631 Using <3 Report Comment
fazeyy07	1707486039 using !! Report Comment
vampiric	1705093962 using :) Report Comment
Gold	1704495395 using :O Report Comment
Piko✮(Autoplay ^_^) OSC and PRECURE ver	1704077980 Question, I know you have a lot of different character layouts but are we allowed to change it to a character of out choice?? Report Comment
savi	1702184822 usimg Report Comment
Sarage :)	1700779707 using! :> Report Comment
xiao irl fr	1698328197 using <3 Report Comment
(ᴗ _ ᴗ｡ ) ⠀ ‎ ‎ 𓈒	1696519751 using ! Report Comment
shae ♡	1695442296 using!! ty Report Comment
KATIE	1687676430 Using Report Comment