hyperpop!!

Tags: blue, teal, glitch, hyperpop, sae

Description:

blueish teal layout for my glitchy hyper kids

paste code into about me section

credit appreciated but not required :D

music included: desktop!! - corner store kingdom

Code:

<!-- (c) Layout created by saerim's layouts!! (https://layouts.spacehey.com/layout?id=23398) -->

<iframe width="1" height="1" src="https://www.youtube.com/embed/HJV0dkLgRAw/?&;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>
.container {
animation: fadeIn ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
</style>

<style>
* {
    cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur686.cur'), auto;
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Changa&display=swap');
body{font-family: 'Changa', sans-serif;
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
h1, h2, h3, h4{font-family: 'Russo One', sans-serif;
</style>

<style>
nav::before{
top: 65%;
font-size:0;
left: 76%;
position:fixed;
pointer-events: none;
opacity: 0.95;
animation: spin 7s infinite linear;
content:url(https://cdn.discordapp.com/attachments/872064296299937856/987855483966738462/desktop.png);
}
</style>

<style>
:root{
  --logo-blue: #63bcc9;
  --darker-blue: #e3fdff; 
  --lighter-blue: #86d7e3;
  --even-lighter-blue: #1A1A1C;
  --lightest-blue: #1A1A1C;
  --dark-orange: #;
  --light-orange: #86d7e3;
  --even-lighter-orange: red;
  --green: white;
}
 body
        {background: url("https://i.pinimg.com/originals/92/b4/fb/92b4fb57a6dd1de3cc12a8ba10fec686.gif")
        no-repeat fixed; background-size:cover;
}
html:before {
  background: url(https://i.stack.imgur.com/sIIwU.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:0.1;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events: none;
  z-index: -1;
  filter: brightness(100%) contrast(110%);
}
main{
    border-radius: 15px;
    border: 2px solid rgba(227, 253, 255,0.7);
    color: white;
    background-color: rgba(35, 34, 37, 0.8);
    
}
footer{
    background-color: #E5E4E4;
        border-radius: 100px;
}
button{
        
    background-color: #E5E4E4 !important;
    color: black;
}
    .top{
        
    color: white;
}
.contact{
        
    background-color: #1A1A1C !important;
}
.heading{
    padding: 1px 0 !important;
    color: #1A1A1C !important;
    background-color: #1A1A1C;
    border-bottom: 2px dotted;
border-radius: 3px;
    
}
.count{
    color: white;
}
.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions {
    border: 2px solid rgba(0,0,0,0.7);
}
.profile h1 {
    font-size: 30px;
    text-shadow: 2px 3px #63bcc9;
    color: #F9F9F9;
    
}
.comments-table td{
        
    background-color: #1A1A1C;
    color: white;
}
.top input{
        
    background-color: #F9F9F9 !important;
        
}
.friends{
        
    background-color: #1A1A1C !important;
    border: 1px solid black !important;
    color: #39a3b3;
}
.mood{
        
    background-color: #1A1A1C !important;
    border: 1px solid black !important;
    }
        table.details-table{
        
border: 1px solid black !important;   
        
}
.profile .details-table td{

border: 1px solid black !important;   

}
.comments-table td{
        
border: 1px solid black !important;   
}
.profile-info{
        
border: 1px solid black !important;   
        
}
.links{
        
border: 1px solid black !important;   
     
}
    color: white !important;
        
    }
    a:hover{
        
    color: #f5f5f5 !important;
        
    }
    a:visited{
        
    color: #f5f5f5 !important;
        
    }
    .top a{

    color: #f5f5f5 !important;

    }
    .top a:hover{

    color: black !important;

    }
    .top a:visited{

    color: black !important;

    }
    .links a{
    
    color: black !important;
    
    }
    .links a:hover{

    color: black !important;

    }
    .links a:visited{

    color: black !important;

   }
    .friends-grid p{
        
    color: #f5f5f5 !important;
        
    }
    footer .links a{

    color: #f5f5f5 !important;

   }
    footer .links a:hover{

    color: black !important;

   }
    footer .links a:visited{

    color: black !important;

   }
 .url-info{
    background-image: url(https://i.pinimg.com/564x/f4/88/7c/f4887c54468909d4b91322a616629ded.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
background-position: center center;
    height: 200px;
box-shadow: 4px 4px 0 white;
    border: var(--borders)!important;
    border-radius: 10px;
}
.url-info p{
    opacity: 0.0;
}
.profile .profile-info {
	padding: 20px;
	border: none;
	border-radius: 10px;
	box-shadow: 4px 4px 0 white;
	text-align: center;
	border: none;
}
</style>

<style>
.col, main, footer{
animation: float 1.7s;
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>

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

[AUTOPLAY] CHUCK [maybe abandoned]	1703723810 using shortly! Report Comment
zbondyx	1674934312 can i change the photo of that glass girl for something else? Report Comment
suetekh	1663074722 this is fr so cool!! using Report Comment
mint	1662770932 usinnngggG!! i love this!!! Report Comment