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 38 comments ( View all | Add 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
# yakult ! ⛧	1706214112 using !! Report Comment
Choss :3	1705945422 ussing Report Comment
Zzzz.cooki3s	1705700471 Ussing!! Report Comment
xeno / vyn 𐂯	1705700422 using :3 Report Comment
Monroey	1705588195 using ! Report Comment
Fefi 🎀	1705463086 usando! Report Comment
Kokomi !!! ^^	1704229549 Using !!! ^^ Report Comment
🕯️Moonlight🩸	1703213235 USING!!!!!!! Report Comment
Shino	1699378451 Will you ever make a furina one? Report Comment
AmberStann<333	1698523101 USING!! Report Comment
rhea ☆	1695919651 using! Report Comment
! ajax	1691479974 using:3 Report Comment
aaaaannnaaa	1689264155 usingg tyy <3 Report Comment
aaaaannnaaa	1689264155 usingg tyy <3 Report Comment
elena 🌺🌴	1689076445 using !! <3 Report Comment
_whiimsicalrage.	1687317387 DEF USING!!:D Report Comment