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

꒰୨୧◞ 。Chii ⠀.ᐟ	1759759890 using Report Comment
꒰ 𓏲 ๋࣭ ࣪ ˖🍈🎵 fosfleur ! ۶ৎ ꒱	1759714331 using ^_^ Report Comment
Keston/finn（〃｀ 3′〃）	1759462447 usinggg! Report Comment
⋆˚࿔ 𝕷𝖎𝖑𝖆 𝜗𝜚˚⋆	1759102938 using it :3 Report Comment
chippiez	1759048175 using!! Report Comment
Suika🍉	1759039766 I wanna use it (˶˃ ᵕ ˂˶) Report Comment
Suika🍉	1759039766 I wanna use it (˶˃ ᵕ ˂˶) Report Comment
AbElsaster	1758830255 gonna use itt Report Comment
🎀! Kidneys	1758684323 Gonna Use ^_^ Report Comment
🎀! Kidneys	1758684318 Gonna Use ^_^ Report Comment
🎀! Kidneys	1758684312 Gonna Use ^_^ Report Comment
loaa 🥥🌴🌺	1758664193 using !! Report Comment
。bidibamba 。	1758664058 Using!! Report Comment
Ko'ko	1758616531 using! Report Comment
小兔子 ♡	1758567825 using Report Comment
ｆｕｗａ - ｃｈａｎ☆	1758471042 using! :3 Report Comment
♡🍓Sevvy 🍓♡	1758425250 SO XUTE DEFFO USING !! 💗 Report Comment
♡🍓Sevvy 🍓♡	1758425248 SO XUTE DEFFO USING !! 💗 Report Comment
rebzynkaa	1758365717 using+changing:3 tysm Report Comment
Anna💌 (zoey's version)	1758275322 using but changing a biiiit Report Comment