life-saving html/css codes

i thought id compile a buncha html/css codes thatll make spaceheying + coding easier 4 u all !!! if u need any coding help or any suggestionz 4 more codez lmk in teh commentz !!!

last updated: may 31 2023

how to add a hyperlink

a hyperlink is a essentially a clickable link. itz super easy !! i see tonz of ppl on here who just paste a raw url into their profile, which is fine, but it meanz that u gotta copy and paste the url into a new tab which is annoying :/

<a href="URL HERE">TEXT THAT WILL APPEAR AS THE LINK</a>

for an underlined link that stands out

<a href="URL HERE"><u>TEXT THAT WILL APPEAR AS THE LINK</u></a>

how to add an image

a lot of peepz also dont know how 2 add an image on their profile !! so here is teh basic code :3 

<img src="URL HERE"/>

BUT U MIGHT B WONDERIN,,,, what url do i even put in there ? how do i do that ???

well theres a couple different methodz ! the easiest (in my opinion) is grabbing the image address from an image. heres how u do that !!!

right click the graphic that u want to use. a little thing that looks like this should pop up !!

click “copy image address”.

then youre gonna go back to our original image code and paste the image address in between the quotation marks !!!

the second method is using a third-party image hosting service. this is good for graphics that dont have a visible url, such as screenshots or images from a camera roll. it is also permanent, which means that even if the original image or the website you got it from goes down/ gets deleted, the graphic will still be safe !!!

the website i use for third-party image hosting is https://imgbb.com/

first, you want to make sure that whatever image you want is downloaded. i think we all know how 2 do that :] 

the website has pretty straight forward instructions. when it comes to copying the code, i usually only copy this part:

now, if ur trying to post this in a blog or bulletin (and this goes for ALL html/css codes), ur gonna wanna put it in this the markdown editor (to get there, press the button that looks like < >)- or else everyone will see ur raw code n it wont work !!!

how to change the contact icons

the contact icons are the lil emoji lookin things that are right in ur contact table. heres how u change the image or emoji that is displayed !

if u want an image instead of an emoji, u need to replace the content: “EMOJI HERE”; text with this:

content: url(URL HERE);

for regular emojis, use this :)

.contact .inner a img {

font-size: 0;

}

.contact .inner a img:before {

font-size: 1em;

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

/* add to friends */

content: "EMOJI HERE";

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* add to favorites */

content: "EMOJI HERE";

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* send message */

content: "EMOJI HERE";

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* forward to friend */

content: "EMOJI HERE";

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/* instant message */

content: "EMOJI HERE";

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/* block */

content: "EMOJI HERE";

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/* add to group */

content: "EMOJI HERE";

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* report */

content: "EMOJI HERE";

} 

how to add autoplaying music (youtube links only)

<iframe width="0" height="0" src="YOUTUBE EMBED LINK GOES HERE?&;amp;;autoplay=1&;loop=1&;controls=1" title="TITLE HERE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>

how to change the online image

.online {content:url('URL HERE'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; 

}

https://glitter-graphics.com/gallery.php?categoryID=112 has a whole buncha pages for online now icons :0

how to add rainbow text - credit to :: trixie toxxic ::

(element u wanna change here) {

background: url(https://cur.glitter-graphics.net/pub/3390/3390323un7ana0wpz.gif);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

how to make your profile float

.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);
}

how to add a heart border to ur pfp - credit to saf3tybby ⋆ ˚｡⋆୨୧˚

.profile-pic {

-webkit-mask-image: url(https://i.bb.co/Yb9Q48R/pngaaa-com-660283.png);

-webkit-mask-size: 100%;

-webkit-mask-repeat: no-repeat;

-webkit-mask-position: center;

width: 165px;

height: auto;

overflow: hidden;

}

how to add a loadscreen

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('YOUR URL HERE');

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>