Kokomi / Jellyfish Layout!!

Tags: frankie ☆ iero, genshin, kokomi, jellyfish, softcore, pastel, kawaii, pink, sangonomiya kokomi, genshin impact

Description:

a pastel layout inspire by Kokomi includes: floting page animation, heart pfp, custom cursor, autoplayer with genshin impact ost, spotify embeds, bonus header + image box, custom pixel icons + so much more !! please keep my credits in the code!! <3

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by frankie ☆ iero (https://layouts.spacehey.com/layout?id=89275) -->

<style>main:before {width: 100%;height: 200px;display: block;content: "";background-image: url(https://i.pinimg.com/originals/d1/75/8e/d1758e9842d503520da7575b7429d0d5.gif);background-position: center center;background-size: cover;}@media only screen and (max-width: 600px) {main:before{height: 200px;}}</style>



<style>
.general-about img {-webkit-mask-image: url(https://uvassociates.in/sites/default/files/images/clip-arts/3d-Peach-Love-Heart-Transparent-Background.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: top;}
</style>



<style>
 .logo {
 
 content:url("https://cdn.discordapp.com/attachments/920463473199153162/1174111624966185040/Spacehey_Logo.png?ex=656667a9&is=6553f2a9&hm=c82181588968d82ee0b088865c1053f2916f2819fd87929a300e47963a85d2b2&");
    }
</style>


<div class="about"> 
Made by Frankie ☆ Iero
about me goes here!!

</div>

<div>
<h3>music keeps me sane…:</h3>
<!-- spotify embed here -->

<!-- put a yt id here for autoplay music -->

<iframe width="0" height="0" src="https://www.youtube.com/embed/g-isCXcY974//?&;amp;;autoplay=1&;loop=infinite&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>
</div>
  
  
<style>
        .online{content:url(https://64.media.tumblr.com/f5e6cc3836f236ff337e9f3bc3002d1d/fc195eab02d4bd0d-82/s75x75_c1/d6125c7bbc3d27dbd687c7c7f9916c611496aa2f.gifv) }
    </style>


<style>
    body {
          background-image:url(https://i.pinimg.com/564x/23/9c/46/239c46476d67a66143e70730c44fa51e.jpg)
   }

body { cursor: url(https://64.media.tumblr.com/3a4062a9e9c1d2bbb795f044813e72c9/eb7088c9bc9a98b3-7c/s75x75_c1/8571491f34d15c79324789f17fef14034d2d6c52.gifv), auto; }
</style>

<style>
.profile-info{
background: url(https://i.pinimg.com/564x/0d/6e/11/0d6e11c2cb88d437752008bacecda4c4.jpg);
no-repeat fixed;
    background-size: cover;
    height: 155px;
    border: white;
    font-size: 0;
    background-size: cover;
    height: 152px;
    border: white;
    font-size: 0;
    background-position-y: center;
  border-radius: 25px;
}

    .profile {
       
 color: white;
background:url(https://i.pinimg.com/564x/bf/aa/95/bfaa954f8db3a73593b3f6365c629316.jpg);
color:white;
text-shadow: 0 0 9px #FF48A6;
 </style> 

<style>
.profile .contact, .profile .table-section, .profile .url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview { 
  border-style:Double; 
 border-width:6px; 
 border-color:=white; 
  border-radius: 25px;
background: #D5E4FF;
color: white;
}

/* contact icons */
.contact .inner a img {
font-size: 0;
color: white;
}
.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:url(https://64.media.tumblr.com/3a4062a9e9c1d2bbb795f044813e72c9/989650c73fe07925-ec/s75x75_c1/9e5f3c2ab9ab9133a444c6447bd72b224ef1508d.gifv);
color:White;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content:url(https://64.media.tumblr.com/fd3767da89018e662889933474b29432/989650c73fe07925-5f/s75x75_c1/cb727de69e867628c3522557c8f72e9313244c05.gifv);

}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content:url(https://64.media.tumblr.com/f05783bd5a2e5d7f0c89617e2d972cad/989650c73fe07925-f7/s75x75_c1/38417def3f66a72136284145f82ba595288ce5ad.gifv);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content:url(https://64.media.tumblr.com/1c5809f562f11cd0ecb5aa84ed25a13d/5f59c42bf1a95f15-b8/s75x75_c1/ebe31b08f28dab8d9a52608327777b3910830947.gifv);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content:url(https://64.media.tumblr.com/6e9493935ea7e8cbd86766c5ff648701/989650c73fe07925-50/s75x75_c1/7af20805b1ff264cb64f2faac49c595fcdaa80cf.gifv);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content:url(https://64.media.tumblr.com/dce6cbb6da955120f96d6a34a930712a/08c39938cd58adf9-0c/s75x75_c1/ccc28fa1933ba1be0b484d852711a95a85f260ee.gifv);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content:url(https://64.media.tumblr.com/05d5c2d5eb6764f9d0f80a073ff20a91/fc195eab02d4bd0d-68/s75x75_c1/62fde2c68339f57870e12a5156cdfff7ecb9832a.gifv);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content:url(https://64.media.tumblr.com/db55b028950ccc02443c58705d88068d/fc195eab02d4bd0d-02/s75x75_c1/c728940ed45911d4fd9a04d1301137454b177199.gifv);

}
footer {
border-radius: 15px;
background-image: 
url(https://i.pinimg.com/564x/55/55/22/555522946360ebeae3fafabc5d6b060a.jpg);
color:White; 
}
  

nav .top {
        background: url(https://i.pinimg.com/564x/f3/b8/e4/f3b8e49eed8490ec0badd61aa77bfb46.jpg);
    }
    
    nav { background: black url(""); }

:root {
--logo-blue:#FFFFFF;
--darker-blue: #FFFFFF;
--lighter-blue: #D5E4FF;
--even-lighter-blue: url(https://i.pinimg.com/564x/77/06/68/77066819d70a4aae824e8f9005176d80.jpg);
--lightest-blue:#D5E4FF;
--dark-orange:#FFFFFF;
--light-orange:#D5E4FF;
--even-lighter-orange:#D5E4FF;
--green: #FF48A6;
}
</style>

<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "fellow undead "; font-size:.8rem; font-weight:bold; 
color:black; }
}
</style>
<style>
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: ""; font-size:.8rem; font-weight:bold;
color:White; } 
</style>
<style>
 .profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "more!!"; font-size:.8rem; font-weight:bold; 
color:White; }
 </style>
<style>
    .contact .heading{ font-size:0; }
.contact .heading:before{ content: "i don't bite!! (mostly)"; font-size:.8rem; font-weight:bold; 
color:White; }
}</style>
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "me!!"; font-size:.8rem; font-weight:bold; color:White; }

  
<style>
h1{
animation: type 3s steps(27);
  color: transparent;
  font-size: 7px;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 6px);
}
100% {
transform: translate(0, -0px);
}

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

yuki X3	1715192962 using Report Comment
toothpasteater🌈🍖	1714661529 using!!! Report Comment
uselessflesh<3	1711106129 using :3 Report Comment
uselessflesh<3	1711106128 using :3 Report Comment
mimi	1710737281 using ^_^ Report Comment
Deviiii(n)	1710444760 usinggg! its so gorgeouss Report Comment
Absinthe	1710345613 using Report Comment
Kalif	1708233818 usandooooop Report Comment
ElizieDolls	1706243157 This is like... the most beautiful layout I've ever seen... I'll be using it! Report Comment
୨୧ hitorii ! ʚ 🏹	1706144303 TYSM, I LOVE KOKOMI AND I'LL USE IT<33 Report Comment
୨୧ hitorii ! ʚ 🏹	1706144300 TYSM, I LOVE KOKOMI AND I'LL USE IT<33 Report Comment
⟢ : αℓℓєη !?★.ᐟ	1705910738 Using! Report Comment
♪ maxdowm !!	1705710520 using!!!! Report Comment
making a new account ...	1705700158 using!! Report Comment
˚₊‧꒰ა Lukyya ໒꒱ ‧₊˚	1704997459 Using ໒꒰ྀི´ ˘ ` ꒱ྀིა Report Comment
griffix_	1703038272 that looks beautiful!! can you make a ganyu one pls? Report Comment yess starting work on it now! by frankie ☆ iero; 1710367730; Report
DEMON SLAYER RAHHHHHHHHH	1703002586 Frankie im so sorry about ruby. This is the most beautiful layout I’ve seen and im using. Im sorry they dissed your work like that. Sincerely, Eveline Report Comment
RAHHHHH!!!	1702595042 Using! Report Comment
luluby	1702156822 this looks beautiful !! :D Report Comment
Sharky/Ena!! 🎀💉	1702084528 uzing!!! >_< Report Comment