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

imgayforlink	1736948522 usinggg^_^ Report Comment
mimi!! 🍯	1736911107 Using!! It’s so pretty tysm!! Report Comment
MIMIZKOOL	1736827917 usinggg Report Comment
mariyay:p	1736826960 usingg ! Report Comment
shtanina !!	1736817048 using!! Report Comment
GENI !! ⭐️	1736698039 USING!! Report Comment
GENI !! ⭐️	1736698030 USING!! Report Comment
GENI !! ⭐️	1736698029 USING!! Report Comment
angzz4ever333	1736661231 IM USING IT RN TYY Report Comment
angzz4ever333	1736661231 IM USING IT RN TYY Report Comment
𝒆𝒎𝒂𝒏𝒖𝒆𝒍𝒍𝒂	1736595120 this is so cute! Using !! Report Comment
Sn0resleeper	1736584578 Using! Report Comment
★JadeJups★	1736480675 Using!! Report Comment
⊹˙ . ꒷ Bᴜᴛᴛᴏᴄᴋ-ʜᴇᴀᴛᴇʀ!🍮 ˖ (˶˃ ᵕ ˂˶)	1736474925 Using!!! Report Comment
˖ ֹ🌺 . ੭୧ pixit ⊹ ࣪ 🥥 . ⑅	1736459641 Usingg >:3 Report Comment
Izxb3ll3	1736374967 USINGGGG Report Comment
Cl0wN	1736335223 Using- Report Comment
lissa :3	1736320057 using !! Report Comment
swaggyshart	1736292634 Usinngg Report Comment
swaggyshart	1736292633 Usinngg Report Comment