Sangonomiya Kokomi - Genshin Impact themed layout >:)

Tags: kokomi, genshin impact, genshin, genshin layout, cute, pink, themed, pastel, purple, blue

Description:

Anyone is free to use this layout, Just pls give credit, And friend me too !!

This Sangonomiya Kokomi themed layout has a gif banner, A clear floating png of Kokomi in the bottom right corner, Body floating (Bouncing) animation, A Kokomi emote to replace the "Online now" gif, and a cute cursor (but I can't claim that piece). It has a cute pink/blue/purple theme to match Kokomi's clothing and Kokomi gif's sprinkled in.

If you do edit or make changes to the layout, Make sure you're not breaking SpaceHey rules as I will not be taking responsibility.

This Sangonomiya Kokomi themed layout was made by yours truly, Me!! So don't go on out into the world claiming you made this pls, My sanity cannot handle it, seriously, It's midnight as I'm typing this layout description </3

And please excuse my terrible organization in all my code, the way I code is quite confusing, it's really a "Oops, I forgot to change that" situation every 5 minutes.

If you have any further questions or clarifications needed just DM me !!! Or obviously comment under this lolololol

Preview:

click on the image for a larger preview

Code:

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

<style>
body{ background-image:url("https://data.whicdn.com/images/307331900/original.gif");
}

nav .top {
    background: #1d4ed8ab;
}

main {
    background: #a6d5ff94;
    color: #ffffff;
}

.profile-info{-webkit-box-shadow: 7px 11px 0px 2px rgba(70,94,181,0.78); 
box-shadow: 7px 11px 0px 2px rgba(70,94,181,0.78);
}

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

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


.mood, .blog-preview, .contact, .url-info {
margin-top: 30px;
-webkit-box-shadow: 7px 11px 0px 2px rgba(70,94,181,0.78); 
box-shadow: 7px 11px 0px 2px rgba(70,94,181,0.78);
}


.table-section, .blurbs, .friends {-webkit-box-shadow: 7px 11px 0px 2px rgba(70,94,181,0.78); 
box-shadow: 7px 11px 0px 2px rgba(70,94,181,0.78);}

.profile-info  {-webkit-box-shadow: 7px 11px 0px 2px rgba(70,94,181,0.78); 
box-shadow: 7px 11px 0px 2px rgba(70,94,181,0.78);
}

.profile-pic img {-webkit-box-shadow: 7px 11px 0px 2px rgba(70,94,181,0.78); 
box-shadow: 7px 11px 0px 2px rgba(70,94,181,0.78);
}



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

 .mood {
    margin-bottom: 20px;
}

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

main:before {
      background-image: url('https://64.media.tumblr.com/27f251841ae3f36f2d0fa0e1aa444527/0217a154994c14a3-c8/s540x810/8e1d7fad7396e1401ddbb8fd4c706a2689ce6ab1.gifv');
      background-position: center center;
      background-size: cover;
display: block;
content: "";
width: 100%;
height: 150px;
border-radius: 10px;
    margin-bottom: 10px;
  }


.url-info{
    background: url('https://64.media.tumblr.com/bf2e033fb7c21b8ae6fb9a8435752cb2/be73464eac2e48dc-60/s500x750/5c42b1a2f7034577ff09618972fb7b5fa91ebb70.gifv');
    background-position: center;
    background-size: cover;
    border: var(--borders)!important;
    border-radius: var(--curve);
    height: 250px;
}


.comments-table td, .music-table td {
    color: white;
background-image: url(https://i.pinimg.com/originals/37/1f/23/371f2378738bfba2b3b175bb4759f9cd.gif);
background-size: cover;
}


<style>

.friends
{display:none;
    }

 

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

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


.comments-table td:first-child, .music-table td:first-child {
    background: #6378d8b5;
    text-align: center;
    font-weight: bold;
    width: 38%;
}

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

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


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


.col, main, footer{
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>


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


<style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat993.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/29/heart-chat-bubble.html" target="_blank" title="Heart Chat Bubble"><img src="https://cur.cursors-4u.net/cursor.png" alt="Heart Chat Bubble" style="position:absolute; top: 0px; right: 0px;"/></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 20 of 48 comments ( View all | Add Comment )

Aether!!:3	1729392964 gonna use!!!!<3 Report Comment
` ☕︎ : 𝙖𝒌𝒊𝒓𝒂. ` (🫐) 𓃠 '	1729275711 Usandoo!! :] Report Comment
꒰ঌRija໒꒱	1727361770 USING!! thank youu Report Comment
Nexus XD	1726881894 USING ! ! Report Comment
nanaily3	1723397082 using!! Report Comment
Venus:3	1721425623 Using Report Comment
coquette megumi fushiguro	1721009666 using!! <3 Report Comment
Dazi <3	1720805582 using Report Comment
edolon	1720142217 using!!! <3 Report Comment
yuki X3	1715192796 using :D Report Comment
Mei	1711610582 usinggg tysmm Report Comment
Mei	1711610581 usinggg tysmm Report Comment
S S S A,,MM. <3	1708115814 how do i make the body bounce... wah. Report Comment
Dan	1706920444 using. Report Comment
ravvvi \| br	1706214112 using !! Report Comment
Choss :3	1705945422 ussing Report Comment
Zzzz.cooki3s	1705700471 Ussing!! Report Comment
making a new account ...	1705700422 using :3 Report Comment
Monroey	1705588195 using ! Report Comment
Fefi 🎀	1705463086 usando! Report Comment