Gyaru Layout

Tags: loading screen, cursor, gyaru, pink

Description:

Please apply the code at the top / Put ur description at the bottom or it will look a little odd COMMENT IF USING!

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap');

:root {
    --logo-blue:  #ff6eaf;
    --darker-blue: #ff6eaf;
    --lighter-blue: #ffffff;
    --even-lighter-blue: #ff6eaf;
    --lightest-blue: #ffffff;
    --dark-orange: #ffffff;
    --light-orange: #ff6eaf;
    --even-lighter-orange: #ffffff;
    --green:  #ffffff;
}
    
    body {
        background-image: url(https://i.pinimg.com/236x/95/d1/57/95d157a5c01fa079c0ad951d65b39238.jpg);
        background-size: cover;
        background-attachment: fixed;
    }
    
  nav .top {
        background-image: url(https://i.pinimg.com/736x/bb/59/b1/bb59b1d32d0da5bd6b3c4612c5381b49.jpg);
        background-size: 820px;
        background-position: center;
        padding: 70px;
        border-radius: 0px;
        border-color: white;
        box-shadow: 0px 0px 10px;
    }  

    
    .profile {
        font-family: 'Kalam', cursive;
        background-image: 
        background-size: cover;
        background-attachment: fixed;
        border-radius: 20px;
        border-color: #fe57c5;
        -webkit-text-stroke: 0.9px #ffafe3;
}
    
    main {
        background-color: #ffffff;
        color: white;
    }
    
    nav .links {
font-family: 'Kalam', cursive;
        background-color: transparent;
    <img src="https://i5.glitter-graphics.org/pub/725/725325v80m0346dj.gif"/>
 nav .links {
        background-color: transparent;
    }
    
    .profile-pic {
font-family: 'Kalam', cursive;
        border-color: white;
        box-shadow: 0px 0px 10px;
        border-radius: 7px;
        overflow: hidden;
    }
    
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border-color: white;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0px 0px 5px;
    }
    
    table.details-table td {
font-family: 'Kalam', cursive;
        box-shadow: 0px 0px 3px white;
        border-radius: 6px;
          background-color: #ffffff;
}
    
    .heading {
        margin-top: 3px;
        margin-bottom: 4px;
        background-color: transparent !important;
        color: white !important;
    }
    

    
    footer {
        border-radius: 5px;
        border-color: white;
        box-shadow: 0px 0px 10px white;
        background-image: url(https://i.pinimg.com/236x/6f/09/a4/6f09a4c784258670f217dd259dee0246.jpg);
        background-size: 800px;
        display: block !important;
    }
   table.comments-table td {
font-family: 'Kalam', cursive;
        background-color:  #ffffff;
        box-shadow: 0px 0px 10px;
        overflow: hidden;
        padding: 5px;
    }
    }
    
    .comments-table td:first-child img {
font-family: 'Kalam', cursive;
        width: 80px;
        border-radius: 8px;
        border-color: white;
        overflow: hidden;
        box-shadow: 0px 0px 10px white;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 1.4s;
        background-color: #ffffff;
}
    
    .profile .friends .person img {
font-family: 'Kalam', cursive;
        border-radius: 8px;
        border-color: white;
        box-shadow: 0px 0px 10px white;
    }
    
    .blog-preview p {
font-family: 'Kalam', cursive;
        font-size: 1.3rem;
        background-color: transparent;
        box-shadow: 0px 0px 5px;
        padding: 10px;
         background-color: #ffafe3;
}
    
    .online {
font-family: 'Kalam', cursive;
        color: pink;
        font-size: 95%;
    }
    
    .online img {
        );
        height: 2.5em;
        margin-right: 5px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 2s;
    }
    
    .icon, .award img {
        content: url(https://media.tenor.com/GUhu3AIYYEEAAAAj/kawaii-pixel.gif);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: pink;
    }
    
    .profile .blurbs .section h4 {
font-family: 'Kalam', cursive;
        margin: 0;
        color: #ffffff;
      background-color: ffafe3;
}
    
    a {
        color: ffafe3;
        text-decoration: none;
    }
    
    a:hover {
        animation:blinkingText 1.2s infinite;
    }
    


     
    }
    
    .count {
        color: #ffffff;
    }
    
    .details-table td:first-child {
font-family: 'Kalam', cursive;
        background: var(--even-lighter-blue);
        color: #ffffff;
        width: 33%;
    }

.container{
margin: 2em auto;
width: 960px;
border: 10px dashed #ff6eaf;
border-radius: 10px;
}
    
    .profile .friends .person p {
        color: white;
        width: 100%;
        word-break: break-word;
        font-size: 100%;
        text-align: center;
    }




<style>

h1{
  animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  font-family: 'Kalam', cursive;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
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>
/* this is the online img*/
.online {content:url('https://i9.glitter-graphics.org/pub/1946/1946619jixjh94v8w.gif'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; 
}
</style>


<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 1s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

<style>

.logo {

content:url("https://64.media.tumblr.com/636e5f2e6511ece9da79befa3e2f03ab/be1128c5c16cdf09-1d/s540x810/05bd8e87265ea8e4fcabd3e5ce489666439bf79c.pnj");

}

</style>

<style>* {cursor: url(https://cur.cursors-4u.net/food/foo-6/foo522.cur), auto;}</style><a href="https://www.cursors-4u.com/cursor/2012/01/02/pink-strawberry.html" target="_blank" title="Pink Strawberry"><img src="https://cur.cursors-4u.net/cursor.png" alt="Pink Strawberry" style="position:absolute; top: 0px; right: 0px;"/></a>

<img src="https://glitter-graphics.com/images/text/sc/w.gif"/>
<img src="https://glitter-graphics.com/images/text/sc/e.gif"/>
<img src="https://glitter-graphics.com/images/text/sc/l.gif"/>
<img src="https://glitter-graphics.com/images/text/sc/c.gif"/>
<img src="https://glitter-graphics.com/images/text/sc/o.gif"/>
<img src="https://glitter-graphics.com/images/text/sc/m.gif"/>
<img src="https://glitter-graphics.com/images/text/sc/e.gif"/>
<img src="https://i6.glitter-graphics.org/pub/988/988876c9gyprkdya.gif"/>
<img src="https://cdn.discordapp.com/attachments/1147980111413530847/1159547168399556628/th_50.jpg?ex=65316b74&is=651ef674&hm=6cee2c3c13c819d002580cf3bd6189f5e81e80aa41466210090b56c0ef91ca9a&"/>

<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://media.tenor.com/9cy5kwiCg6YAAAAC/angai313-pink-hearts.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 2s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

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

🩷n☆bi🩷	1752267081 usingg!! Report Comment
Jujulie_Blondie	1752156491 Usandoo:3 Report Comment
ami	1752130180 using Report Comment
TAHLlA	1751175210 cutee gonn use it Report Comment
mars ⋆ ˚｡⋆୨୧˚	1749718991 using ^_^ Report Comment
★→・。、𝒦amii !	1749282649 usingg !! :3 Report Comment
sun888heart🪽🇧🇷	1746998428 using!! :3 Report Comment
starfrutes!!	1746779422 Usinggggg Report Comment
daya !! <3	1746722496 using !!! Report Comment
𝓓ollaerie ૮ ྀི◞ ⸝⸝ ◟ ྀིა	1746683705 USING :3 Report Comment
ghost(ˊᗜˋ*)	1746383602 SO CUTEE DEF USING Report Comment
ℇ⠀🍭⠀⠀janey!	1746288932 using! Report Comment
Ellayny Andreyna	1746226398 usando, obrigada Report Comment
Choi ✧˚.최!▪	1746130278 using just the banner!! Report Comment
☆Lucifur☆	1745908332 Usingg <3 Report Comment
Emma―୨୧⋆ ˚	1745854660 using :33 Report Comment
roel	1745627432 usingg <3 Report Comment
lilly ˚ ༘ ೀ⋆｡˚	1745596811 usinggg Report Comment
⋆｡𖦹°‧★	1745511631 using!! Report Comment