tropical gyaru layout w music!

Tags: tropical, gyaru, cute, hellokitty, hibiscus, pink, beach, summer

Description:

hihi! sorry this code is so long.. i combined many layouts with some of my own details because i couldn't find a layout that i really liked! i hope the tropical gyarus like me really enjoy this layout :333 make sure to comment if u use this! <3

Preview:

click on the image for a larger preview

Code:

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

<img src="https://64.media.tumblr.com/2a6a4be3e99a0afc62b0233457b2bd42/812d4468134467a5-6f/s640x960/63d5a51b31fa913cfb2f298c9ee805c20d3c003e.gifv"/>

<style>

<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-8/nat793.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/09/20/flower-56.html" target="_blank" title="Frangipani Flower"><img src="https://cur.cursors-4u.net/cursor.png" alt="Frangipani Flower" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>

nav .top .left .logo {
    width: 260px;
    height: 77px;
}
 
  .logo {
content:url("https://files.catbox.moe/faulwi.png");
}
</style>

<style>

   .profile{
        
    direction: rtl;
    
    }
    .blurbs{
    
    direction: ltr;
        
    }
    .blog-preview{
        
    direction: ltr;
        
    }
    .friends{
    
    direction: ltr;
        
    }
    .general-info{
        
    direction: ltr;
        
    }
    .contact{
        
    direction: ltr;
    
    }
    .url-info{
        
    direction: ltr;
        
    }
    .details-table{
        
    direction: ltr;
        
    }
    .profile .table-section .heading{
    
    direction: ltr;
        
    }
    .details p{

    direction: ltr;

   }
   .mood{

       direction: ltr;

   }

.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 0.7em;
    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/c9aa54a82526f2d5aa3f3f8048cf8def/3e2813aae605a8d5-8d/s75x75_c1/55e8feb73226964cc772cce47b65bad7e48a241f.gifv")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content: url("https://64.media.tumblr.com/c9aa54a82526f2d5aa3f3f8048cf8def/3e2813aae605a8d5-8d/s75x75_c1/55e8feb73226964cc772cce47b65bad7e48a241f.gifv")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: url("https://64.media.tumblr.com/5056ab9042eb19461967c39970956ebb/3e2813aae605a8d5-62/s75x75_c1/5b5542fccab49bb911d2529af88725828668ef83.gifv")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: url("https://64.media.tumblr.com/5056ab9042eb19461967c39970956ebb/3e2813aae605a8d5-62/s75x75_c1/5b5542fccab49bb911d2529af88725828668ef83.gifv")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: url("https://64.media.tumblr.com/8871d5d56f27fbd0e580b84cab98e897/3e2813aae605a8d5-f1/s75x75_c1/b25cbcfaa6985e17e731b830eedcc67ea0b040b4.gifv")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: url("https://64.media.tumblr.com/8871d5d56f27fbd0e580b84cab98e897/3e2813aae605a8d5-f1/s75x75_c1/b25cbcfaa6985e17e731b830eedcc67ea0b040b4.gifv")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: url("https://64.media.tumblr.com/eba4bd7aa5509ec3a086399f4fb9d26c/6b10d445ec97d079-1a/s75x75_c1/55f4d1cdf9cc99f09ab68103cb4ad3013dfcb078.gifv")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content: url("https://64.media.tumblr.com/eba4bd7aa5509ec3a086399f4fb9d26c/6b10d445ec97d079-1a/s75x75_c1/55f4d1cdf9cc99f09ab68103cb4ad3013dfcb078.gifv")
}

</style>

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://64.media.tumblr.com/350d61ff42bc44bf9005755f7ceb9c80/75ad41ca8dd03a99-f0/s640x960/e9dff0cb29309e43f7a90e0a4dee5784af262b58.gifv');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 1s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

nav .links {
 background: linear-gradient(#0479ae 15%, #2599c5, #1edee5); 
 box-shadow: white 0 1px 1px 1px inset;
 padding: 0;
 text-align: center;
}

nav .links a {
  color: #0479ae;
  text-shadow: white 0px 2px 4px;
  padding: 1px
}

nav .links a:hover {
  color: #1edee5;
  background: linear-gradient(white, lightblue);
  text-decoration: none;
  padding-top: 0;
}

nav .links li.active a {
  color: #0479ae; 
  font-weight: normal;
}

nav .links li:not(:last-child)::after {
  color: white;
  text-shadow: lightblue 1px 0px 1px;
}

nav .top {
 background: linear-gradient(#00cad2 , #2599c5 40%, #0479ae); 
 box-shadow: #fff6 0px 0px 2px 3px inset;
} 
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/URL//?&;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>

<style>

nav .links a {
    text-decoration: none;
    color: #ffffff;
    font-size: 0.98em;
    font-size: max(0.98em, 12px);
    text-shadow: 0 0 7px white;
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: "  ✿";
    color: white;
}
.online{
content: url(https://i10.glitter-graphics.org/pub/1681/1681910cknba4d3n3.gif);

}

main:before {
width: 100%;
height: 100px;
display: block;
content: "";
background-image: url('https://i.pinimg.com/474x/37/3b/1f/373b1ff40a0897ef58e6d767d2bbd34c.jpg');
background-position: center;
background-size: 400px;
border: dashed white 3px;

}

.blog-preview:before{
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 41px;
  background-image: url(https://64.media.tumblr.com/59a1685fefa418742e122e7151e1f8be/6b10d445ec97d079-b3/s400x600/7d00cb4183aae49584525a80958d0f48af21e3a3.gifv);
  background-repeat: no-repeat;
  background-size: 100%;
}
.general-about{
  position: relative;
  margin-top: 30px;
}

</style>

<style>

main .left{
        animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, -7px); }
    100%   { transform: translate(0, -0px); }   
    
}
    }
</style>

<style>
    main .right{
        animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 7px); }
    100%   { transform: translate(0, -0px); }   
    
}
    }
</style>

<style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
body{font-family: "Libre Baskerville" ;
   font-size: 17.5px;
   font-style: normal;
   background: linear-gradient(to right, #FF0064, orange, yellow, green, blue, indigo, violet);
}

</style>

<style>body {background-image: url(https://64.media.tumblr.com/3ab43aab4762f98dd5ffcc81b2b40ed6/2944c4a08c0ec8d6-56/s1280x1920/4520efd7b35d07cd8080f7d40971aa0cc6176cba.jpg); background-repeat:repeat; background-attachment: fixed;}</style><a href="https://www.dazzlejunction.net/layouts/"></a><br/>

<style>

li.active .icon { content:url('https://i.pinimg.com/originals/e6/61/56/e661567496eb971ef140351349fd4399.gif'); width: 20PX;height: 20px;}

main{
   background-image:url('https://img.freepik.com/free-vector/pastel-rainbow-gradient-background_78370-2169.jpg?w=1380&t=st=1716743264~exp=1716743864~hmac=5992347e208a22368a05f28a4e3063571dd4b26b97a1c800799e35b48619ccd0')
}
</style>

<div class="snowflakes">
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
</div>

<style>
    @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-
delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}


</style>

<style>
.comment-reply:not(:first-child) {
    border: 1px solid white;
   box-shadow: 0px 0px 10px black!important;
}
.comment-replies {
    border: 1px solid white;
   box-shadow: 0px 0px 10px black!important;
}

main, footer {
  background-color: transparent!important;
}
footer{
  font-size: 0px;
}
.friends:not(#comments) {
  margin-bottom: 10px;
}
.comments-table {
  border: 1px solid rgb(255, 255, 255);
  border-spacing: 5px;
   box-shadow: 0px 0px 10px black!important;
}
.general-about {
   overflow: auto;
}
.profile-pic {
   object-fit: contain;
   overflow: hidden;
   border: none;
   border-radius: 90px;
   box-shadow: 0px 0px 10px black !important;
}

.heading {
  background-color: transparent !important;
}
td {
  background-color: transparent !important;
  border: none !important;
}

(bounce animation) .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, 8px);
}
100% {
transform: translate(0, -0px);
}
</style>

<style>
.blurbs .heading, .friends .heading, .contact .heading, .table-section .heading{
font-family: 'Bagel Fat One', cursive;
border-top: 2px solid hotpink!important;
background: hotpink!important;
color: white!important;
margin: 2px;
letter-spacing: 1px;
}
.links, button, .logout-btn{
background-image: linear-gradient(hotpink, gold, deepskyblue) !important;
border-radius: 10px;
border: 2px solid white !important;
padding: 7px;
color:white;
font-family: 'Comfortaa', cursive;
}
links a{ 
color: white!important;
text-shadow: none;
font-family: 'Comfortaa', cursive;
}
main{
background-color: transparent;
}
a, span.count{
color: #ffb5da;
font-family: 'Comfortaa', cursive;
}
p,b, .blog-preview h4, i, .url-info b, .profile .blurbs .section h4{
color: hotpink!important;
font-family: 'Comfortaa', cursive;
}
.table-section td{
background: white!important;
color: hotpink!important;
font-family: 'Comfortaa', cursive;
}
a:hover {
  color: gold;
}
.blog-preview, footer, .url-info{
background-color: rgba(255, 255, 255, 0.85)!important;
border-radius: 15px;
border: 2px solid white!important;
}
.blog-preview{
padding: 10px;
border-radius: 15px;
margin-bottom:5px!important;
}
</style>



<iframe width="0" height="0" src="https://www.youtube.com/embed/kkkp5vPAx8Q//?&;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>

<img src="https://media.everskies.com/wxyeZj7HiN7l1oDYe1xW.gif"/>
<div style="float:  ; max-height: 200px; position: fixed; right: 1px; bottom: 0px; z-index: 350;">
<img src="https://i.pinimg.com/originals/cd/d6/5b/cdd65b2ccd73a14a19e9a8fe681c6f48.gif" height="200"/></div>
<img src="https://i.ibb.co/4Pv0MNs/ipod.gif"/>
<img src="https://i.ibb.co/P4k5bjb/dhco6tu-a4ac802a-2d3c-4aa4-9d4b-5845943cff2b.gif"/>
 <img src="https://i.ibb.co/qgknzZ7/d5dikpa-3055b6ad-7745-4251-913f-dc87b231e9b1.png"/>
<img src="https://64.media.tumblr.com/b4a0c210d84769882d998d500e4a7e0d/aea6dbf9464ce704-a9/s100x200/a890911db1c8198dbcfc5a5d85a0bc4ad115386a.gifv"/>
<img src="https://64.media.tumblr.com/316a709efaede1f454b7ce8bdcd11357/aea6dbf9464ce704-2a/s100x200/528ab7ba3cd912df8dcb4d9fef42ca217bca950e.png"/>
<img src="https://i.ibb.co/sJgDXd9/princesspeach03.gif"/>
<img src="http://dl3.glitter-graphics.net/pub/1563/1563183dv7m2jhsv2.gif"/>
<a href="https://imgbb.com/"><img src="https://i.ibb.co/6BT4m00/blinkies-Cafe-uk.gif" alt="blinkies-Cafe-uk"/></a>
<a href="https://imgbb.com/"><img src="https://i.ibb.co/BGt7RpT/blinkies-Cafe-US.gif" alt="blinkies-Cafe-US"/></a>
<a href="https://imgbb.com/"><img src="https://i.ibb.co/Wt4qF0d/blinkies-Cafe-98.gif" alt="blinkies-Cafe-98"/></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 379 comments ( View all | Add Comment )

MARCIE ⦻	1747667106 using ^_^ Report Comment
lemon3000	1747638458 using Report Comment
koko	1747537100 using it!! ur so talented :3 ଘ(੭ˊᵕˋ)੭ ̀ˋ Report Comment
yoko ⋆˚꩜｡	1747420737 deffo usinggg!! Report Comment
Dollscent	1747260077 SO CUTEEEE IM USING Report Comment
Lovely_dove	1747230078 Using Report Comment
Yaraa	1747228772 USINGG >< I love it!! Report Comment
twinkdestroyer	1746929967 using Report Comment
roro	1746662587 using :3 Report Comment
Raine	1746634376 Usingg! Report Comment
wonderbunny🧚🏾‍♀️🐰	1746615177 USING!! its so cute Report Comment
Moodysuvi	1746482874 using! Report Comment
arj?	1746439626 using! thank you :3 Report Comment
irumikumikid	1746297278 USING Report Comment
asia	1746293197 using ! thank you Report Comment
m4rsxx	1746072293 OMGG this is so cute!! Im totally using ittt!!! Report Comment
m4rsxx	1746072292 OMGG this is so cute!! Im totally using ittt!!! Report Comment
Batman!	1745976560 USING THIS IS SOOO CUTENESS! Report Comment
Kvycore	1745956109 usinggg <3 Report Comment
Emaan	1745873519 usinggg Report Comment