tropical hello kitty layout

Tags: tropical, summer, 2000s, animations, music, hello kitty

Description:

★ Includes animations and autoplaying music. If you use this layout please comment or add me. I been really into this kind of 2000s summer/tropical "aesthetic" lately so I decided to make a layout based on it. Feel free to customize this layout, or use as a base. If you have questions, please leave a comment, I'll try my best to respond.★

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by pAiSlEy★ (https://layouts.spacehey.com/layout?id=31170) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Ruslan+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');


h2,h3,h4,h5{
font-family: 'Ruslan Display', cursive;
font-size: 120%;
color: white;
text-shadow: 0px 0px 7px #fa5ccb;
}
h1{
font-family: 'Ruslan Display', cursive;
color: white;
text-shadow: 0px 0px 7px #fa5ccb;
}
p {
 color: #fc1eab; 
 font-family: 'Permanent Marker', cursive;
}
  body{
  background: url(https://i.postimg.cc/L50N9xn4/47f53d51a0b02875cd9477bd2760fce4.jpg);
}

  .profile{
 background: white;
 box-shadow: 0px 0px 5px 5px #fa5ccb;
}
:root {
    --logo-blue: transparent;
    --darker-blue: #fa5ccb;
    --lighter-blue:  #fa5ccb;
    --even-lighter-blue: white;
    --lightest-blue: white;
    --dark-orange: white;
    --light-orange: #fa5ccb;
    --even-lighter-orange: white;
    --green: blue;
}
.count {
    color: #fa5ccb;
}
.profile-info {
    border: 2px solid #fa5ccb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 10px;
}

.online {
    visibility: hidden;
}

.online img {
    content: url('http://dl6.glitter-graphics.net/pub/121/121896n9dppf5kxv.gif');
    animation-name: none;
    visibility: visible;
    height: 15px;
    width: 60px;
}
.online {
   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: url(https://i.postimg.cc/PJmYSXjG/ezgif-1-0ac5234d7c.png);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url(https://i.postimg.cc/PJmYSXjG/ezgif-1-0ac5234d7c.png);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content:url(https://i.postimg.cc/PJmYSXjG/ezgif-1-0ac5234d7c.png);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forward to friend*/
content: url(https://i.postimg.cc/PJmYSXjG/ezgif-1-0ac5234d7c.png);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url(https://i.postimg.cc/PJmYSXjG/ezgif-1-0ac5234d7c.png);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url(https://i.postimg.cc/PJmYSXjG/ezgif-1-0ac5234d7c.png);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url(https://i.postimg.cc/PJmYSXjG/ezgif-1-0ac5234d7c.png);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://i.postimg.cc/PJmYSXjG/ezgif-1-0ac5234d7c.png);
}  
 footer {
    border-radius: 15px;
    background-image: url(https://i.pinimg.com/564x/bb/58/5e/bb585ea159cc296cb403b62401513cfb.jpg);
    color: white;
    box-shadow: 0px 0px 5px 5px #fa5ccb;

}
 main{
 background: transparent;
}
.url-info {
    background: url(https://i.postimg.cc/YCzDzXT0/ezgif-5-d2226a8176.jpg);
    background-position: center;
    border: var(--borders)!important;
    height: 200px;
}
.profile .url-info p {
    font-size: 100%;
    margin: 0;
    word-break: break-all;
    color: transparent
}
     HTML,BODY{cursor: url("https://downloads.totallyfreecursors.com/cursor_files/flower25-4.ani"), 
     url("https://downloads.totallyfreecursors.com/thumbnails/flower25-4.gif"), auto;}



img:hover , .url-info:hover , .online:hover {
  animation: shake 1s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }

}
.mood:after {
    content: " ";
    display: block;
    background-image: url(https://i.postimg.cc/YqzkFKBV/ezgif-4-2adbbf099a.jpg);
    height: 130px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 130px;
    margin-bottom: 10px;
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: "★";
    color: white;

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

.col, main, footer, nav::before, .online, nav .links, nav .top {
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>

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

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

Monsterine	1721086527 using Report Comment
Caspz	1720378220 usin Report Comment
Angel	1719824420 gonna use this for summer :3 Report Comment
Fever	1719702867 definitely using this for summer!!! Report Comment
S1LLYAYYAYAYA	1719636780 using!1!1!! Report Comment
S1LLYAYYAYAYA	1719636777 using!1!1!! Report Comment
juneau🌴🐠🌺🪼🥭	1719618166 using!! Report Comment
Meree	1718644392 using! i've been obsessed with this 2000s beach aesthetic too! Report Comment
ililyopuppy	1718543262 using!! Report Comment
mimistar05	1718397244 using!! Report Comment
sam	1718376703 using as base! Report Comment
via 🎀	1717490520 usinggg Report Comment
⸝⸝ ꒰ Angel Food 🍉ㆍ₊⊹	1717255126 usingg Report Comment
Judo🐾	1715866103 Using! Report Comment
angelily.2	1715264849 using! Report Comment
june !!	1715261890 using!! this is awesome brah Report Comment
ali / jane doe	1715261093 using! Report Comment
TropicalPrincess	1715036409 Using! Report Comment
Shar!	1714587938 using1!!!! Report Comment
strwbrry ๑˘♡˘๑	1714404633 using! Report Comment