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

Keith	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
♡ᗢAstral!♡ᶻz	1687317387 DEF USING!!:D Report Comment
Kazen	1686371104 USING!! Report Comment
CATZ !?	1682459636 SO CUTE !!! deffo using ^w^ Report Comment
Marzlvstwce	1682445779 USING! I love it :3 Report Comment
Crepe Suzette	1681117259 Thank you so much for making this!! ✧˖*°࿐ I'm using it and I love it (๑˃ᴗ˂)ﻭ Report Comment
bonnie	1681067133 using !! tyy :D Report Comment
bonnie	1681067132 using !! tyy :D Report Comment
siren	1681015690 using this, thank u sm <3 Report Comment
siren	1681015690 using this, thank u sm <3 Report Comment
Jaz ♡*˖°	1673552053 I'm trying this one out, ty ♡ Report Comment
Elvira	1661973832 using Report Comment
ash	1657769910 using ^^ Report Comment
roslyn ♡	1656455721 using, thank you so much ! this is perfect ! Report Comment