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

emmii 🎐🪭 .	3 days ago using !! Report Comment
ifni067	6 days ago USINGGG Report Comment
elabaduday	2 weeks ago using Report Comment
LuvelleX	20 days ago using! <3 Report Comment
KariAlitzu	22 days ago using it)) Report Comment
Cooper Bunting	22 days ago Using<3 Report Comment
m-miwa ✧	1 month ago using , xoxo ! Report Comment
Stefania !	1 month ago Soso cutieee Report Comment
𝚍𝚒𝚊ミ★⁂🜸𖦹	1 month ago 𝙻𝙾𝚅𝙴 𝙸𝚃𝚃𝚃!!!! Report Comment
Nea <3	1 month ago Using! Report Comment
ala ˚୨୧⋆｡˚ ⋆	1 month ago using Report Comment
elias	1 month ago Using ! Report Comment
elias	1 month ago Using ! Report Comment
₊ ⊹🌷 ✧ lila ˚. ᵎᵎ 🍓	1 month ago usinggg tysm!! Report Comment
˚₊‧꒰ა ♱ ໒꒱ ‧₊˚ISᗩ	2 months ago using Report Comment usingg by ˚₊‧꒰ა ♱ ໒꒱ ‧₊˚ISᗩ; 2 months ago; Report
Rok⁠ ☆	2 months ago using <3 Report Comment
pixelsin	2 months ago using Report Comment
moonniee	2 months ago using !! Report Comment
ଘ .♡˚evy ੈ ♡‧˚	2 months ago using this !! tysm Report Comment
shimmyy ݁ ˖๋ ࣭ ⭑	2 months ago using !!! Report Comment