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

✭	1745428264 Using ^_^ Report Comment
dona580	1745344802 Using ^^ Report Comment
Alex!	1745321588 usinggggg Report Comment
P3YT0N	1745254091 USING Report Comment
P3YT0N	1745254090 USING Report Comment
Dashaka	1745179062 Usingg!!! :3 Report Comment
XióngHA !!	1745142593 USING 🫶 Report Comment
kitti	1744786845 usingg Report Comment
cupidzy	1744745902 usinggg!! Report Comment
europaaa	1744693100 using Report Comment
sunny!!★	1744677522 using :> Report Comment
Cabbyiiluvr	1744642936 Using <3 Report Comment
Co0lkIdz_002	1744550107 using :3 Report Comment
frutigerangel	1744518505 used this as a guideline since i have no clue how to code AND IT WORKED SO NICELY!!!!!! Report Comment
isagoat	1744495191 usiiing Report Comment
isagoat	1744495186 usiiing Report Comment
Sumiko	1744392369 Using Report Comment
𝓔𝓵𝓲𝔃𝓪𝓫𝓮𝓽𝓱	1744367365 usingg Report Comment
♥ Assi ♥	1744321521 usinggg Report Comment
bee	1744221404 using ^^ Report Comment