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

Maria Lezzyyy	1774182188 usingg Report Comment
Björn	1774005374 using Report Comment
Txuleia	1771471510 Using!! this is so cute omggg Report Comment
Xx_Surf3rGirl_xX	1771362097 using!!!! Report Comment
Xx_KIKI_Xx	1770590950 Using Report Comment
Xx_KIKI_Xx	1770590946 Using Report Comment
Cx.ssidy	1770307886 using!!! Report Comment
Sofiz🌺	1769972613 usinggggg Report Comment
stQRsoul	1769931515 USING I LOVE IT! Report Comment
𓇼 ˖°𝓕𝓪𝓻𝓪𝓱 ❀⋆｡	1769624253 usiiing thanks!!! Report Comment
sstarvingfawn	1767815650 USINGGG Report Comment
Naya	1767287812 Using!!!!!!!1 Report Comment
Natalia	1765549634 using! Report Comment
victoria	1762732281 using!! Report Comment
kim tkm	1757369920 using Report Comment
(っ◔◡◔)っ ♥ V ♥	1757033503 Usinggg Report Comment
meii	1756182690 usingg Report Comment
v1ridity	1753829468 Using Report Comment
Daniella	1753394424 using! Report Comment
⊹ ࣪ ˖Nαʋҽɳ !!꩜.*	1753212762 Using !! Report Comment