webspace layout [includes music player]

Tags: green, black, hacker, animated, gif, music, webcore, internetcore

Description:

quick layout bc i felt like coding. sorry if its not as good as my other layouts... ;w;

contains:

✪ music player [follow this tutorial on how to get it to work]

✪ a floatie [change size upon changing the link!]

▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

𓆩♡𓆪 credit if u use

𓆩♡𓆪 change if up if u want

𓆩♡𓆪 if you need help, i'll try my best but ultimately, im not an expert

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');

@font-face {
font-family: 'hackedregular';
src: url('https://dl.dropbox.com/scl/fi/jp74wur1amsxjar2cu47u/hacked-kerx-webfont.woff?rlkey=blotyb07h5cmqaw18rytw24qv&');
}

.w-40 h1{
font-family: hackedregular;
font-size: 30px;
text-align: center;
color: #bfbfbf;}

p{
  font-family: 'PT Mono', monospace;
  font-size: 90%;
  color: #bfbfbf;
}
h1,h2,h3,h4,h5{
  font-family: 'PT Mono', monospace;
  font-size: 70%;  
  color: #bfbfbf;
}


    .top{
    background-image: url('https://iili.io/JBg6kQV.gif') !important;
    border: 1px dotted #0bd877;
    
    }
    
  body {
   background-image: url(https://iili.io/JBgrtNR.gif);

}
    nav .links{
    border: 1px dotted #0bd877;
}
    
    .top input{
        
    background-color: #bfbfbf !important;
    }
    button{
    background-color: #bfbfbf !important;
    }
    main{
      background-color: transparent;
  }

    main .right,
    main .left{
      background-image: url('https://iili.io/JBg4HKX.jpg');
      border: 1px dotted #0bd877;
      height: 60px;
}


/* change all headings on page to different colors. */
  .profile .blurbs .heading,
  .profile .friends .heading{
   background-color: black;

}
/* change all headings on page to different colors. */
  .profile .contact .heading,
  .profile .table-section .heading{
   background-color: black;

}

.blog-preview h4{
    height: 20px !important;
    background-color: black;
    font-size: 60%;
    padding: 7px;
}

.blog-preview h4 a{
    font-size: 90%;
    color: #bfbfbf;
}

table.comments-table{
display: block;
height: 200px!important;
overflow-y: scroll;}



.friends th, tr, th, .comments-table{
border: 0px dotted gray !important;
outline: none !important;
}

footer {
    background-color: black;
    border: 1px dotted #0bd877;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{

content: URL("https://iili.io/JamAFn9.gif") !important;

padding-left: 4px !important;

}

 

table.comments-table{
    color: ;
        border: 1px dotted #0bd877;
        }

a:hover, .top a:hover, .links a:hover, .friends-grid p:hover, .comments-table p:hover, footer .links a:hover{
    color: #08a159 !important;
}

    a{
        
    color: #bfbfbf !important;
    font-family: 'Courier Prime', monospace;
        
    }

    a:visited{
        
    color: COLOR !important;
        
    }
    .top a{

    color: #bfbfbf !important;

    }

    .links a{
    
    color: #bfbfbf !important;
    
    }

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

    color: #bfbfbf !important;

   }

h1, .count{
     color: #08a159;
} 

:root {
    --lighter-blue: black;
    --even-lighter-blue: transparent;
    --lightest-blue: transparent;
    --dark-orange: #bfbfbf;
    --light-orange: transparent;
    --even-lighter-orange: transparent;
    --green: ;
}

/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "︎🔋"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "︎🔋"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "︎🔋"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forward to friend*/
content: "︎🔋"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "︎🔋"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "︎🔋"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "︎🔋"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "︎🔋"
}


</style>

<style>/*music player [style tags here to make this text invisible]*/</style>
<iframe width="0" height="0" src="https://www.youtube.com/embed/cLItUnkPOH0?playlist=cLItUnkPOH0&loop=1&controls=1&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy" class="hideobj">
</iframe>

<div class="floatie"></div>
<style>/*floater [change link and size!]*/
.floatie {

background: url(https://iili.io/Jap29Nj.gif) no-repeat;

background-size: 40%;

position: fixed;

right: -370px;

bottom: -330px;

height: 490px;

width: 590px;

z-index: 1000;
}
</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 7 of 7 comments ( View all | Add Comment )

zombeh	1710029034 Using Report Comment
vreenluvr	1709716247 Using !! Report Comment
ginaaa	1708300677 using :D Report Comment
ginaaa	1708300675 using :D Report Comment
partyy poison ✮	1708137617 Using!! tysm , it's super cool :3 Report Comment
skullbatz	1707527322 Using Report Comment
Bodoo	1706133833 Hi! im using it, but i changed the song, If there is any problem with that please let me know, your layout is very pretty! Report Comment it’s totally fine!!! deeply encouraged to change the song :D by avenue4strangerz; 1706140906; Report and ty! by avenue4strangerz; 1706140920; Report