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

SmurfCupcakePrincess	1776266403 yes Report Comment
gamerboat	1775821049 using Report Comment
RAINBOWDASH	1775798479 USINGGG Report Comment
Gabriel	1775729553 us1ng! Report Comment
rinrinxxx	1775218805 Using!!! Thankiee Report Comment
susurrus	1774908181 using!! Report Comment
Chewy4Matsu	1774492927 using!! Report Comment
noodles with cheese and cold cuts	1774134596 using! Report Comment
⋆˚࿔ 𝐌ahy 𝜗𝜚˚⋆	1773702383 usandoo!! Report Comment
‧₊ ᵎᵎ 🍥 ⋅ ˚✮ S_phiee	1773670951 Usando!! Report Comment
iz	1773342126 usingg Report Comment
SrhXtr3me	1773224386 Using!! Report Comment
Rosey ♡	1773170088 using! Report Comment
scarlett 🪽💌🧸🕯	1772895598 using Report Comment
BONEEATERCOM	1772861006 using!! Report Comment
𝓙𝓸𝔂𝓬𝓲𝓽𝓪( ＾ω＾ )	1772773020 using! Report Comment
( ´ཀ` )	1772736019 I LOVE YOU SO MUCH IM USING THIS AHHHH Report Comment
( ´ཀ` )	1772736019 I LOVE YOU SO MUCH IM USING THIS AHHHH Report Comment
♯ 🍮 ⸝⸝ @AMBY ─ ✿	1772560153 using!! ty for the layout it's so cute :3 Report Comment
Cafetaza	1772383993 using!! your layout is soo pretty! Report Comment