(i will be explaining everything like ur a toddler LOL)

here's a tut on how to make a basic simple profile if you do not know html/css (code): 

in this tutorial, my goal is to easily describe how to add; a background, a banner, an animated profile picture, photos and gifs, borders/glowing borders, floating images, a loading screen/photo, tabs, music/playlists, embeds, fun colors, fonts, and more to your profile!!

IF YOU CANNOT SEE THE PHOTOS IN THE TUTORIAL, READ THIS BLOG POST FROM THIS HTML VIEWER: (LINK)

CHAPTERS:

---

• chapter 1 - the basics (colors, body, background, banner, and footer).
  
  

 - step 1: background image

 - step 2: banner

 - step 3: footer

 - step 4: colors

   + section a: RBG color code

   + section b: color code in wording

---

• chapter 2 - the fun bit (decor, animations, photos and gifs, borders, loading screens, music/playlists, embeds, etc).
  

- step 5: animated profile picture

- step 6: loading screen

- step 7: boarders/frames

- step 8: embeds

- step 9: falling objects

- step 10: custom cursor

- step 11: custom contact table icons

---

{here are some tools to help you find what you want, and get started with your easy coding:

color picker

profile code preview thing

fonts

coding help

image hosting service
}

ur gonna wanna start w a style tag to open ur HTML, but if u just wanna copy and paste what i have here, feel free.

---

---

the link that i used above (https://i.imgur.com/0R68TCf.png) is simply an example link. and you should not copy and paste and use it unless you want the photo i used.

CHAPTER 1
step 2: banner

next, we are going to find a banner image. again, assuming you are following the example code above, we are going to be inserting another imgur image.

(REFOLLOW THE IMGUR TUTORIAL ABOVE FOR THE BANNER)

next, we will be adding in the photo for the banner. just like we added the link for the background image, do the same for the banner. 

like so:

---

---

CHAPTER 1
step 3: footer

after the banner, comes the footer.
the footer is a photo at the bottom of your page. the footer contains information on the spacehey website.

it looks like this:

AGAIN. we will be following the imgur image uploading steps. 

(REFOLLOW THE IMGUR TUTORIAL ABOVE FOR THE FOOTER)

yet again, we will be adding the link into the parentheses in the code.

like so:

---

footer {
border-radius: 15px; background-image: url(https://i.imgur.com/0R68TCf.png);
 color: white;
}

---

YAY!! you did it! your page should have all your photos now!

your page should look something like this:

---

CHAPTER 1
step 4: colors

this step will be divided into sections.

• section a (RGB color code)
• section b (color code in wording)
  

section a: RBG color code

first, we are going to go to the online color picker, and find our rgb colors.

then, we are going to add those three numbers to our code:

in every place in your code that says rgb(insert rgb); add your selected rgb code numbers for each line of code.

for example: (RGB numbers are color-coded to colors they represent)

---

.profile {

   background-color: rgb(128, 62, 124); 

}

/* change all headings on page to different colors. */

  .profile .blurbs .heading,

  .profile .friends .heading{

   background-color: rgb(245, 193, 233);

   color: black;

}

---

section b: color code in wording

now, you might be wondering. "color coding in wording? what does that mean?" well. i'll show you.

you might see in your code, that in some of your lines instead of using RGB colors, it just blankly states the colors.
for example, in the root at the end of your code:

---

:root {

    --logo-blue:black;

    --darker-blue: purple;

    --lighter-blue: black;

    --even-lighter-blue: ;

    --lightest-blue: ;

    --dark-orange: black;

    --light-orange: black;

    --even-lighter-orange: black;

    --green: pink;

}

---

you can simply change them, and experiment with it however you'd like.

---

YAY!! great job! you have put together a basic profile. 
now that we have the basics down, let's get to the fun stuff, like decorations!

---

CHAPTER 2
step 5: animated profile picture

next, we will be adding an animated picture/gif as your profile picture!! fun, right?
for context, your animated pfp will only show up on your profile, but in places like the comments section on forum posts/other places etc, you will have the pfp you set in settings! it's like two pfps, fun right?

first, you are going to want to copy this code;

---

<style>

.profile-pic > img { display:none; }

.profile-pic:after { background-image: URL(" (link for gif here) "); display: inline-block; content:"" }

.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */

.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 

</style>

---

 and paste it into your code. you are gonna want to put it right above your first style tag! (<style>, this one):

(it's at the top of your code, AND PLS DON'T MIND MY BAD HANDWRITING!!)
(REFOLLOW THE IMGUR TUTORIAL ABOVE FOR THE GIF PFP)
next, find your gif. and put it in the "(link for gif here)" i set in the example code!

here is what your code should look like so far:

---

<style>

.profile-pic > img { display:none; }

.profile-pic:after { background-image: URL("https://media.tenor.com/K_75XqYil5MAAAAM/cat-kitten.gif"); display: inline-block; content:"" }

.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */

.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 

</style>

---

and here is the result!;

---

YAYAYAYYYYY!!! YOU DID IT! great job! i am so proud of you. you're doing so well!

---

CHAPTER 2
step 6: loading screen

(requested by 𝙿𝚛𝚒𝚗𝚌𝚎𝚜𝚜)
hi princess! thank you so much for commenting! loading screens are very difficult, so I'm glad to help out! let me know how this works for you, i wish you nothing but the best of luck! you got this! xx

AHHHHHHH YOUVE COME SO FAR! i feel like a proud mother.

next step, is a loading screen!!

first, here is our example code, feel free to copy and paste it into your code!;

---

body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-image: url(' (insert gif link here) ');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
nav, footer {
	margin: 1em;
	position: relative;
	box-shadow: 5px 8px 10px #0006;
}

---

this is going to go right above your footer!! 
here is a photo of where in your code so far, it should be!;

(again, so sorry for my bad handwriting!!)

now, find your gif! and input it! (REFOLLOW THE IMGUR TUTORIAL ABOVE FOR THE LOADING SCREEN)
here is what the finished product should look like!: (example):

---

CHAPTER 2
step 7: boarders/frames

(requested by _xXMeganMutilationXx_)

hi megan (and everyone else xx)!! thank u sm for commenting, i really appreciate the feedback! i just want to make html/css easy for everyone, and when people let me know that I'm doing well, it really makes me day :)

thank you!

NOW! onto the chapter.

first! we find the part of our profile that we want our border/frame to be on!
for example, our friend megan wanted to learn to put frames around the profile pictures in the friend zone! 

here, is how you would go about doing this!!

here is our example code! feel free to copy and paste it into your code!;

---

<style>

    .profile .friends .person img:not(.icon){

        

border: 10px solid black !important;   

        

    }

</style>

---

now, we will be putting this bit of code, directly under our closing style tag.
if that doesn't make sense, here is a visual!;

now! here is the IMPORTANT part!
we will be editing the size, color, and style of our frame/borders!

as you can see in the image above, there is a line that says;

---

border: 10px solid black !important;  

---

this line is the only line we will be editing. 

size:
now, I'm sure you can see the part where it says; "10px", "px" stands for pixels, which means that the number 10 right there, is the size. so, test around with that number, and change it up, but i'd say keep your number in between 2-10.

color:
next, we will be editing the color of our border/frame!!
see the part where it says "black"? feel free to switch that up!
(i think I'm going to turn mine pink, to match my pink and purple profile!)

style:
now, there are many styles of borders/frames when it comes to borders/frames that wrap around an img in css/html. 
here are some examples!;

(for mine i think i'll do a dashed border!!)

NOW!! to edit the style, do you see the part fo your code that says "solid"? in our example code it came right before the word "black"! (just a reminder)
now, here is what my code looks like after i customized it!:

---

<style>

    .profile .friends .person img:not(.icon){

        

border: 6px dashed pink !important;   

        

    }

</style>

---

and here is what it looks like on my profile! (yours should also look something similar):

YAYAYAYYYY!! WE DID IT! i'm so proud of you guys! specially you megan! great job :)

---

CHAPTER 2
step 8: embeds

hi everyone!! i have been a bit busy with schoolwork, but i thought i at least owe you guys one update :)

so here is how to add embeds to your page!

alright, lets get started! an embed is an intergration; (which means to form something) of a link, image, video, gif, etc!! an example of an embed would be, say; a playlist on your profile. with a playlist on your profile, you can set autoplaying music, and show people what music you like! another example would be maybe embedding something from twitter, like a tweet. an embed, would display said tweet on your profile! 

and luckily; most websites supply us with these embeds, (mostly because if you display it on your profile it's there for people to see, attracting others to their website)! 

first, let's find your source. 

google your sources name, and "embed". there you will find where the embed link/text is.

for example, say you wanted to embed a youtube video; you would google "how to find youtube embed".

then, you would get your emebed, and put it in your code.

for example; here is my embed;

---

<iframe width="560" height="315" src="https://www.youtube.com/embed/iecL-ZXYuuM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

---

i would then put this code, at the top of my code, above my first style tag. ( <style> )

here is an example of what my youtube embed will look like!;

---

---

you can out embeds all over your page! explore with them, and see what you can do! 

---

CHAPTER 2

step 9: falling objects

hi everyone!! i'm not taking requests for awhile, because of school work :(

but every-so often; i will update!! if you need any coding help, i will set up a blog post for questions on how to set up/ fix problems on your profile!!

alright!! here is how to add floating objects to your profile!

click this!!; generator

it should take your to a generator website!! here you can make your code easily, then; add it to the very top of your code!! YAYY

here is an example of what falling objects on a profile may look like:

---

CHAPTER 2

step 10: custom cursor

hey friends!! it's been awhile. lately i've been sort of struggling with my mental health and have been attending therapy so i've been a bit budy, but i haven't forgotten about you all!! time to time i find myself reading your comments as a little pick me up hehe

well, let's get into this chapter!

there is going to be an EASY way, and a HARD way.

first, here is the difficult way.

OPTION ONE

HARD WAY

alright, first; let's find your cursor!! here is a website that i recommend for finding cursors!!

(CURSORS-4U) (or use the ones i provide)

there are many great options to pick, and there are so many cute designs!! personally, i like the hello kitty ones :)

here is some example code (feel free to use):

---

---

where it says "INSERT YOUR. CUR URL HERE" you are going to want to find your .cur url for your cursor, and insert it. you can find this url by scrolling to the bottom of your page with your cursor and finding a small text box that might say; "INSERT THIS CURSOR ON YOUR WEBSITE", where if you look around for iy, you will find the url.

you are then going to enter your code at the bottom of your code in your about me section (inside your style tag).

and BAM!! that's the difficult way!!

OPTION TWO

EASY WAY

alright, first; let's find your cursor!! to make this easy, i'm going to teach your a beginners way to add a custom cursor. 

you are going to want to right click on the img of your cursor, and copy the img address, then paste it into where it says; "INSERT CURSOR URL".

here is some example code!! (feel free to use):

---

<style>* {cursor: url(INSERT CURSOR URL), url(INSERT CURSOR URL), auto !important;}</style>

---

 now, as you can tell, this code that is provided already has style tags. 

( example of style tags: [ <style> / </style> ] )

so, that means that we should put our cursor code below our closing style tag ( </style> ), at the bottom of the rest of our code.

and bam!! you should have the cursor of your choice!!

GREAT JOB!!!! :D

---

CHAPTER 2

step 11: custom contact table icons

(requested by xxjaydem0nxx)

hi everyone!! i am taking requests again! except not custom requests on how to fix certain problems on peoples profiles for awhile. it's difficult to go through everyone's source code, and find the exact problem. so i'd like to focus on the creative bit of css/coding for awhile.

now! let's get into this chapter! first, 

here is some example code!! feel free to use it; link

the stars are just for example, you can use them , or you can change them to anything you would like!!

you can change them to images by setting the content to url ('yourimageurl') in the quotes!!

and to change the size of your img icons, you are going to want to add these two atributes to your code:

width: 30px;

height: 30px;

and for example, your code should look like this now:

---

child(1) a:before {
/* Add to Friends */
content: "☆"
width: 30px;
height: 30px;
}

---

you are going to want to add this to each and every changed icon.

now, you're probably wondering. "wait, where do i put all this code in the first place?" don't worry. i got you. 

you can easily put this code inside style tags, ( example of style tags: [ <style> / </style> ] ) either at the bottom (or top) of your profile!! i don't know if i have said this before; but we use style tags so browsers recognize that what you're trying to do is adjust the style, and not anything else.

i hope this worked for you!! enjoy your new icons!

---

CHAPTER 2

step 12: putting images in side bar/linking images

(requested by Marsh_the_interdimensional)

hi everyone!! today, i am going to teach you all how to add images in the sections beside your about me area, and how to add links to those images!

for example, if you were adding a link to an image; when someone clicks on the photo on your profile, it would redirect you to another site, just like clicking on a link would!!

PART ONE

IMGS IN SIDEBAR

to put images in the sidebar, it's actually much easier than you think!!

you just put your html code/css in the area that you would normally put in the about me section! 

for example; when you click "edit profile" when you coding on spacehey, there are going to be other textboxes below the "about me" textbox as well!! such as, who i'd like to meet, general, music, etc. just put your code right in there!!

if you wanted to add a photo, you would have to open an img tag, like so;

start with <img src="

img, means image and src is short for source. 

after <img src=” you fill in the URL of an image.

for example:

---

<img src="https://i.kym-cdn.com/entries/icons/original/000/041/742/cover3.jpg"/>

---

and at the end of the example, you may see that "/>

well, that's easy to explain.

the " is to close the first quotation

and the /> is to close the tag, which we have seen a lot before!! it's in about almost every tag!

like the style tag!! ( example of style tags: [ <style> / </style> ] )

and BAM!! you have a photo now!!

but you may be wondering, "how do you add a link to that?", well i'm here to explain!!

PART TWO

LINKS IN IMAGES

alright!!

this, (professionally) is called a hyperlink! a hyperlink is a clickable link and it means linking a word, a phrase, an icon, pdf files, a logo, and even an image file to another new web page. 

but for now, we are just gonna use it to add links to images!!

first, you are going to set your anchor tag <a href=” before the image url;

and then, add your image url!!

then just like before, you are going to close it!! you are going to want to put </a> after. paste the link/url you want to be able to open when you click the image.

you may be wondering, "claww, what does 'a href' mean??" well i can explain! 

the <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, locations in the same page, or anything else a URL can address. content within each <a> should indicate the link's destination. and the href attribute indicates the destination of the hyperlink!!

destination meaning where the image you click would take you!!

here is an example of html hyperlink code!!

---

<a href=”https://www.youtube.com“> <img src=” (insert img here) ” width=”100″ height=”132″> </a>

---

you don't have to add the width=”100″ height=”132″ bit, but that just controls the size of your img.

here is a codepen link, so you can play around with hyperlinks: 

codepen

good luck!!

---

CHAPTER 3

step 13: extra resources (plus an important note)

hello everyone!!

it's been a minute for sure. i'm sorry for being offline for so long; but my life has been a complete mess lately. firstly, i moved completely out of nowhere, destroying my life and mental health, and a bunch of other shit that i do not want to ruin your guys' day with!

thank you all for being patient.

while i am continuing my break, here are some resources to help you. best of luck

- clwswd

RESOURCE LINKS AND DESC:

GLITTER GRAPHICS

GIFCITIES

WEBNEKO

SCRIPTED (BEST W NEOCITIES)

PICMIX

DITHER ME THIS

SHISHKA

88x31 BUTTONS

SILICON VALLEY CHAT

IDOGRAMMA

CSS LAYOUT

CSS BUTTONS

HOVER.CSS

CSS ANIMATIONS LIBRARY