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

Ayato	1746619217 Using! Report Comment
Ghosted_Han	1746449264 using! Report Comment
Azie	1740081761 using! Report Comment
NEKOSWORL	1736949073 using!! Report Comment
minorin meow ;3	1736861466 using!!! its so cuute Report Comment
jelly!<3	1736748710 using!! tyy :3 Report Comment
lali ✧ * .	1734893112 using it!! thanks!! Report Comment
Aether!!:3	1729392964 gonna use!!!!<3 Report Comment
` ☕︎ : 𝙖𝒌𝒊𝒓𝒂. ` (🫐) 𓃠 '	1729275711 Usandoo!! :] Report Comment
Leri 🥨	1727361770 USING!! thank youu Report Comment
Nexus XD	1726881894 USING ! ! Report Comment
nanaily3	1723397082 using!! Report Comment
⋆˚࿔ evie𝜗𝜚˚⋆	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
SAMIIEEE (･ω･´)	1708115814 how do i make the body bounce... wah. Report Comment