(i will be explaining everything like ur a toddler LOL)</h1> here's a tut on how to make a basic simple profile if you do not know html/css (code): <br><br>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!!<br><br><b>IF YOU CANNOT SEE THE PHOTOS IN THE TUTORIAL, READ THIS BLOG POST FROM THIS HTML VIEWER: (<a href="https://goonlinetools.com/html-viewer/#0buohioqxcprqt0n6pp8jx8" target="_self">LINK</a>)</b><br><br><b>CHAPTERS</b>:<br> <hr> <ul> <li><b>chapter 1</b> - the basics (colors, body, background, banner, and footer).<br><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"><br></span></li> </ul> <span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"> - </span><b style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;">step 1: background image</b><br><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"><br></span> <p><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"> - </span><b style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;">step 2: banner<br><br></b></p> <p><b style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"> - step 3: footer<br><br></b></p> <p><b style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"> - step 4: colors<br><br></b></p> <p><b style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"> + section a: RBG color code<br><br></b></p> <p><b style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"> + section b: color code in wording<br></b></p> <hr style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"> <ul> <li><b style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;">chapter 2</b><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"> - the fun bit (decor, animations, photos and gifs, borders, loading screens, music/playlists, embeds, etc).</span><br></li> </ul> <p><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;">- </span><span style="font-size: 12.8px; -webkit-text-size-adjust: 100%; font-weight: bold; max-width: 100%; text-align: center;">step 5</span><span style="font-size: 12.8px; -webkit-text-size-adjust: 100%; text-align: center;"><b>: animated profile picture</b></span><br></p> <p><span style="-webkit-text-size-adjust: 100%; font-size: 12.8px;">- </span><span style="-webkit-text-size-adjust: 100%; font-size: 12.8px; font-weight: bold; max-width: 100%;">step 6</span><span style="-webkit-text-size-adjust: 100%; font-size: 12.8px;"><b>: loading screen</b></span><br></p> <p><span style="-webkit-text-size-adjust: 100%; font-size: 12.8px;">- </span><span style="-webkit-text-size-adjust: 100%; font-size: 12.8px; font-weight: bold; max-width: 100%;">step 7:</span><span style="-webkit-text-size-adjust: 100%; font-size: 12.8px;"><b> boarders/frames</b></span><br></p> <p><span style="-webkit-text-size-adjust: 100%; font-size: 12.8px;">-</span><span style="-webkit-text-size-adjust: 100%; font-size: 12.8px;"> </span><b style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;">step 8</b><span style="-webkit-text-size-adjust: 100%; font-size: 12.8px;"><b>: embeds</b></span></p> <p></p> <p><span style="-webkit-text-size-adjust: 100%; font-size: 12.8px;">-<b> </b></span><b style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"><span style="max-width: 100%; font-size: 12.8px;">step 9</span><span style="font-size: 12.8px;">: falling objects</span></b></p> <p>- <b style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"><span style="font-size: 12.8px; text-align: center;">step 10</span><span style="font-size: 12.8px; text-align: center;">: custom cursor</span></b><br></p> <p><span style="-webkit-text-size-adjust: 100%; text-align: center; font-size: 12.8px;">- <b>step 11: </b></span><span style="font-weight: bold; text-align: center; font-size: 12.8px; -webkit-text-size-adjust: 100%;">custom contact table icons</span><br></p> <p></p> <p></p> <p></p> <p><span style="-webkit-text-size-adjust: 100%; font-size: 12.8px; text-align: center;"></span></p> <hr> {here are some tools to help you find what you want, and get started with your easy coding:<br><br><a href="https://www.google.com/search?q=rgb+color+picker&oq=rgb+&aqs=chrome.2.69i57j0i10i433i512l3j0i10i131i433i512l3j69i60.3247j0j7&sourceid=chrome&ie=UTF-8">color picker</a><br><br><a href="https://genericprofileeditor.neocities.org/">profile code preview thing</a><br><br><a href="https://fonts.google.com/">fonts</a><br><br><a href="https://www.w3schools.com/">coding help</a><br><br><a href="https://imgur.com/">image hosting service</a><br>}<br><br>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.<br><br> <hr> <br> <div style="max-width: 100%;"> <div style="max-width: 100%;"><style></div> <div style="max-width: 100%;"> <div style="max-width: 100%;"> <div style="max-width: 100%;"> font-size: 150%;</div> <div style="max-width: 100%;">}</div> <div style="max-width: 100%;">h1,h2,h3,h4,h5{</div> <div style="max-width: 100%;"> font-size: 200%; </div> </div> </div> <div style="max-width: 100%;">}</div> <div style="max-width: 100%;"> body {</div> <div style="max-width: 100%;"> background-image: url(insert image link here);</div> <div style="max-width: 100%;"><br></div> <div style="max-width: 100%;">}</div> <div style="max-width: 100%;">.profile {</div> <div style="max-width: 100%;"> background-color: rgb(insert rgb); </div> <div style="max-width: 100%;">}</div> <div style="max-width: 100%;">/* change all headings on page to different colors. */</div> <div style="max-width: 100%;"> .profile .blurbs .heading,</div> <div style="max-width: 100%;"> .profile .friends .heading{</div> <div style="max-width: 100%;"> background-color: rgb(insert rgb);</div> <div style="max-width: 100%;"> color: black;</div> <div style="max-width: 100%;">}</div> <div style="max-width: 100%;">/* change all headings on page to different colors. */</div> <div style="max-width: 100%;"> .profile .contact .heading,</div> <div style="max-width: 100%;"> .profile .table-section .heading{</div> <div style="max-width: 100%;"> background-color: black;</div> <div style="max-width: 100%;"> color: rgb(insert rgb);</div> <div style="max-width: 100%;">}</div> <div style="max-width: 100%;"><br></div> <div style="max-width: 100%;">main:before {</div> <div style="max-width: 100%;"> width: auto;</div> <div style="max-width: 100%;"> margin-bottom: 25px;</div> <div style="max-width: 100%;"> border: 1px solid black;</div> <div style="max-width: 100%;"> height: 120px;</div> <div style="max-width: 100%;"> display: block;</div> <div style="max-width: 100%;"> content: "";</div> <div style="max-width: 100%;"> background-image: url(Insert image link here);</div> <div style="max-width: 100%;"> background-position: center center;</div> <div style="max-width: 100%;"> background-size: cover;</div> <div style="max-width: 100%;">}</div> <div style="max-width: 100%;"><br></div> <div style="max-width: 100%;">footer {</div> <div style="max-width: 100%;"> border-radius: 15px;</div> <div style="max-width: 100%;"> background-image: url(insert image link here);</div> <div style="max-width: 100%;"> color: white;</div> <div style="max-width: 100%;">}</div> <div style="max-width: 100%;"><br></div> <div style="max-width: 100%;">table.comments-table td {</div> <div style="max-width: 100%;"> color: rgb(insert rgb);</div> <div style="max-width: 100%;">}</div> <div style="max-width: 100%;"><br></div> <div style="max-width: 100%;">:root {</div> <div style="max-width: 100%;"> --logo-blue:black;</div> <div style="max-width: 100%;"> --darker-blue: purple;</div> <div style="max-width: 100%;"> --lighter-blue: black;</div> <div style="max-width: 100%;"> --even-lighter-blue: ;</div> <div style="max-width: 100%;"> --lightest-blue: ;</div> <div style="max-width: 100%;"> --dark-orange: black;</div> <div style="max-width: 100%;"> --light-orange: black;</div> <div style="max-width: 100%;"> --even-lighter-orange: black;</div> <div style="max-width: 100%;"> --green: pink;</div> <div style="max-width: 100%;">}</div> <div style="max-width: 100%;"></style></div> </div> <div style="max-width: 100%;"><br></div> <div style="max-width: 100%;"> <hr> <br> </div> <div style="max-width: 100%;">now, lets get to the editing part. </div> <div style="max-width: 100%;"> we want to make this page reflect who you are/what you want. and we will be starting the editing process by editing the main code given above, and after we have that fully personalized, we can move on to the fun bit (animated profile picture, photos, and gifs, borders/glowing borders, floating images, a loading screen/photo, tabs, music/playlists, embeds, fun colors, fonts, and more).<br><br>so we will be starting with photos we want to add first.<br> <br> <hr> <p style="text-align: center;"><b style="font-size: 12.8px;">CHAPTER 1<br>step 1</b>: background image</p> find a background image you want. <br><br> </div> <div style="max-width: 100%;">you can find it by going through google, looking online, or maybe just already having it on your computer. <br><br></div> <div style="max-width: 100%;">now, we want to upload it onto a website called <a href="https://imgur.com/">imgur</a>. <br>the reason we want to do this is that we need a link to upload the image as a background </div> <div style="max-width: 100%;">for your page.<br><br></div> <div style="max-width: 100%;">you may be wondering, "why can't I just copy the image link from google or where I already found it?" the reason we shouldn't do this is that the original uploader of the photo may delete it. and once it's deleted it will be removed from your profile.<br><br></div> <div style="max-width: 100%;">edit: lately though, imgur has been giving me some trouble. so, as an alternative; you could also use <a href="https://www.flickr.com/photos/upload/" target="_self">flickr</a>!! <br><br>alright, here is how to upload your photo. go to <a href="https://imgur.com/">https://imgur.com/</a> and click the button at the top of the page that says; "new post" with a plus sign next to it. it should look like this:</div> <div style="max-width: 100%;"><br></div> <div style="max-width: 100%;"><img src="https://i.imgur.com/dUVQ3zH.png" alt="new post" style="width: 100%; height: auto;"></div> <div style="max-width: 100%;"><br></div> <div style="max-width: 100%;">then, upload your photo/link.<br><br></div> <div style="max-width: 100%;">after that, you are going to copy the address of your photo like so:<br><br></div> <div style="max-width: 100%;"><img src="https://i.imgur.com/VmjrE4X.png" alt="" style="width: 100%; height: auto;><br></div> <div style="> you are going to <b>right-click</b>, then click "<b>copy image address</b>".<br><br>next, we want to add our photo to our code, assuming you are using the example code i provided above, you will paste (ctrl v) the background image link from imgur into the parentheses.<br><br>example: (it should look something like this)<br> <div style="max-width: 100%;"> <hr> } </div> <div style="max-width: 100%;"> body {</div> <div style="max-width: 100%;"> background-image: url(<b>https://i.imgur.com/0R68TCf.png</b>);</div> <div style="max-width: 100%;"><br style="max-width: 100%;"></div> } <br> </div> <hr> <p><b>the link that i used above (<u>https://i.imgur.com/0R68TCf.png</u>) is simply an example link. and you should not copy and paste and use it unless you want the photo i used.<br><br></b></p> <p style="text-align: center; "><span style="font-weight: bolder; font-size: 12.8px;">CHAPTER 1</span><b><br>step 2:</b> banner</p> <p style="text-align: left;">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.<br></p> <p style="text-align: left;"><b>(REFOLLOW THE IMGUR TUTORIAL ABOVE FOR THE BANNER)</b><br></p> <p style="text-align: left;">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. <br><br>like so:<br><br></p> <hr> <div style="font-size: 12.8px; font-weight: 400; text-align: start; max-width: 100%;">main:before {</div> <div style="font-size: 12.8px; font-weight: 400; max-width: 100%;"> width: auto;</div> <div style="font-size: 12.8px; font-weight: 400; text-align: start; max-width: 100%;"> margin-bottom: 25px;</div> <div style="font-size: 12.8px; font-weight: 400; text-align: start; max-width: 100%;"> border: 1px solid black;</div> <div style="font-size: 12.8px; font-weight: 400; text-align: start; max-width: 100%;"> height: 120px;</div> <div style="font-size: 12.8px; font-weight: 400; text-align: start; max-width: 100%;"> display: block;</div> <div style="font-size: 12.8px; font-weight: 400; text-align: start; max-width: 100%;"> content: "";</div> <div style="font-size: 12.8px; text-align: start; max-width: 100%;"> background-image: url(Insert image link here); <b><------ (insert link in parentheses)</b> </div> <div style="font-size: 12.8px; font-weight: 400; text-align: start; max-width: 100%;"> background-position: center center;</div> <div style="font-size: 12.8px; font-weight: 400; text-align: start; max-width: 100%;"> background-size: cover;</div> <div style="font-size: 12.8px; font-weight: 400; text-align: start; max-width: 100%;">}</div> <hr> <p style="text-align: center;"><span style="font-weight: bolder; font-size: 12.8px;"><br>CHAPTER 1</span><b style="font-size: 12.8px;"><br>step 3</b>: footer<br></p> <p style="text-align: left;">after the banner, comes the footer.<br>the footer is a photo at the bottom of your page. the footer contains information on the spacehey website.<br><br>it looks like this:<br><br></p> <p style="text-align: left;"><img src="https://i.imgur.com/0v3bKRq.png" alt="footer" style="width: 100%; height: auto;><br></p> <p style="></p> <p style="text-align: left;"><b style="font-size: 12.8px;">AGAIN. </b>we will be following the imgur image uploading steps. </p> <p style="text-align: left;">(REFOLLOW THE IMGUR TUTORIAL ABOVE FOR THE FOOTER)<br><br>yet again, we will be adding the link into the parentheses in the code.<br><br>like so:<br></p> <hr> <p style="text-align: left;">footer { <br>border-radius: 15px; background-image: url(https://i.imgur.com/0R68TCf.png);<br> color: white; <br>}<br></p> <hr> <p style="text-align: center;"><b><i>YAY!! you did it! your page should have all your photos now!</i></b></p> <p style="text-align: left;">your page should look something like this:<br><br><br><img src="https://i.imgur.com/CBcNB0o.png" alt="profile example" style="width: 100%; height: auto; data-kive-is-processed=" data-kive-processed-with="httpsiimgurcomCBcNB0opng"><br><br></p> <hr> <p style="text-align: center;"><b style="font-size: 12.8px;"><br></b><span style="font-weight: bolder; font-size: 12.8px;">CHAPTER 1</span><b style="font-size: 12.8px;"><br>step 4</b>: colors<br></p> <p style="text-align: left;">this step will be divided into sections.<br><br></p> <ul> <li>section a (RGB color code)</li> <li>section b (color code in wording)<br></li> </ul> <br> <p style="text-align: center;"><b style="font-size: 12.8px;">section a:</b> RBG color code<br></p> <p>first, we are going to go to the online <a href="https://www.google.com/search?q=rgb+color+picker&oq=rgb+&aqs=chrome.2.69i57j0i10i433i512l3j0i10i131i433i512l3j69i60.3247j0j7&sourceid=chrome&ie=UTF-8" style="background-color: rgb(255, 255, 255); color: rgb(204, 0, 0); text-decoration-line: underline;">color picker</a>, and find our rgb colors.</p> <p><br><img src="https://i.imgur.com/OcRZrte.gif" alt="imgur" style="width: 100%; height: auto; data-kive-is-processed=" data-kive-processed-with="httpsiimgurcomOcRZrtegif"></p> <p>then, we are going to add those three numbers to our code:<br></p> <br>in every place in your code that says <b>rgb(insert rgb);</b> add your selected rgb code numbers for each line of code.<br><br>for example: (<font color="#ff0000">RGB</font> <font color="#ff6600">numbers</font> <span style="color: rgb(242, 195, 20);">are</span> <font color="#11ff00">color</font><font color="#00fbff">-coded</font> <font color="#0084ff">to</font> <font color="#002aff">colors</font> <font color="#8000ff">they</font> <font color="#d400ff">represent</font>)<br> <hr> <p>.profile {</p> <p> background-color: rgb(<b><font color="#803e7c">128, 62, 124</font></b>); </p> <p>}</p> <p>/* change all headings on page to different colors. */</p> <p> .profile .blurbs .heading,</p> <p> .profile .friends .heading{</p> <p> background-color: rgb(<font color="#ffc1e9"><b>245, 193, 233</b></font>);</p> <p> color: black;</p> <p>}<br></p> <hr> <br> <p style="text-align: center;"><b style="font-size: 12.8px;">section b</b>: color code in wording<br></p> <p style="text-align: left;">now, you might be wondering. "color coding in wording? what does that mean?" well. i'll show you.<br><br>you might see in your code, that in some of your lines instead of using RGB colors, it just blankly states the colors. <br>for example, in the root at the end of your code:<br></p> <hr style="text-align: left; "> <p style="text-align: left;">:root {</p> <p> --logo-blue:black;</p> <p> --darker-blue: purple;</p> <p> --lighter-blue: black;</p> <p> --even-lighter-blue: ;</p> <p> --lightest-blue: ;</p> <p> --dark-orange: black;</p> <p> --light-orange: black;</p> <p> --even-lighter-orange: black;</p> <p> --green: pink;</p> <p></p> <p>}<br></p> <hr> you can simply change them, and experiment with it however you'd like.<br> <hr> <p style="text-align: center;">YAY!! great job! you have put together a basic profile. <br>now that we have the basics down, let's get to the fun stuff, like decorations!</p> <hr> <br> <p style="text-align: center; "><b>CHAPTER 2<br>step 5</b>: animated profile picture<br></p> <p style="text-align: left;">next, we will be adding an animated picture/gif as your profile picture!! fun, right?<br>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?<br><br>first, you are going to want to copy this code;<br></p> <hr> <p style="text-align: left;"><style></p> <p>.profile-pic > img { display:none; }</p> <p>.profile-pic:after { background-image: URL(" (link for gif here) "); display: inline-block; content:"" }</p> <p>.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */</p> <p>.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ </p> <p></style><br></p> <hr> and paste it into your code. you are gonna want to put it right above your first style tag! (<style>, this one):<br><br> <p><img src="https://i.imgur.com/2C371e0.png" alt="style tag" style="width: 100%; height: auto; data-kive-is-processed=" data-kive-processed-with="httpsiimgurcom2C371e0png"><br>(it's at the top of your code, AND PLS DON'T MIND MY BAD HANDWRITING!!)<br>(REFOLLOW THE IMGUR TUTORIAL ABOVE FOR THE GIF PFP)<br>next, find your gif. and put it in the <b>"</b><b>(link for gif here)" </b>i set in the example code!<br><br>here is what your code should look like so far:<br></p> <hr> <p><style></p> <p>.profile-pic > img { display:none; }</p> <p>.profile-pic:after { background-image: URL("https://media.tenor.com/K_75XqYil5MAAAAM/cat-kitten.gif"); display: inline-block; content:"" }</p> <p>.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */</p> <p>.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ </p> <p></style><br></p> <hr> and here is the result!;<br><img src="blob:https://imgur.com/b744bbbf-bb6e-4084-a38f-30d961e0050c" alt=""> <p><img src="https://i.imgur.com/LL3DJWU.gif" alt="result for pfp!!" style="width: 100%; height: auto; data-kive-is-processed=" data-kive-processed-with="httpsiimgurcomLL3DJWUgif"><br></p> <hr> <b>YAYAYAYYYYY!!! YOU DID IT! great job! i am so proud of you. you're doing so well!<br></b> <hr> <br> <p style="text-align: center; "><b>CHAPTER 2<br>step 6</b>: loading screen<br></p> <p style="text-align: left;"></p> <p style="text-align: center;"><b>(requested by πΏπππππππ)</b><br><b>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</b></p> AHHHHHHH YOUVE COME SO FAR! i feel like a proud mother.<br><br> <p>next step, is a loading screen!! <br><br></p> <p>first, here is our example code, feel free to copy and paste it into your code!;<br></p> <hr> <pre style="overflow-wrap: break-word; white-space: pre-wrap;">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; }</pre> <p style="text-align: center; "></p> <hr> <p style="text-align: left;">this is going to go right above your footer!! <br>here is a photo of where in your code so far, it should be!;</p> <p style="text-align: left;"><img src="https://i.imgur.com/TEiN6La.png" alt="loading screen!" style="width: 100%; height: auto; data-kive-is-processed=" data-kive-processed-with="httpsiimgurcomTEiN6Lapng"><br></p> <p style="text-align: left;">(again, so sorry for my bad handwriting!!)<br><br>now, find your gif! and input it! (REFOLLOW THE IMGUR TUTORIAL ABOVE FOR THE LOADING SCREEN)<br>here is what the finished product should look like!: (example):</p> <p style="text-align: left;"><br><img src="https://cdn.discordapp.com/attachments/1019417878296014899/1068853042792890469/ezgif-1-6d35f937fd.gif" alt="loading screen!" data-kive-is-processed="true" data-kive-processed-with="httpscdndiscordappcomattachments10194178782960148991068853042792890469ezgif16d35f937fdgif"><br></p> <hr> <p><br></p> <p style="text-align: center;"><b>CHAPTER 2<br>step 7:</b> boarders/frames<br></p> <p></p> <p style="text-align: center; "></p> <p></p> <p style="box-sizing: border-box; text-align: center;"><b>(requested by _xXMeganMutilationXx_)</b><br></p> <p style="text-align: left;"></p> <p style="text-align: center;"><b>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 :)</b></p> <p style="text-align: center;"><b>thank you!</b></p> NOW! onto the chapter.<br><br> <p>first! we find the part of our profile that we want our border/frame to be on!<br>for example, our friend megan wanted to learn to put frames around the profile pictures in the friend zone! <br></p> <p>here, is how you would go about doing this!!<br></p> <p>here is our example code! feel free to copy and paste it into your code!;<br></p> <hr> <p style="text-align: left;"><style></p> <p><br></p> <p> .profile .friends .person img:not(.icon){</p> <p> </p> <p>border: 10px solid black !important; </p> <p> </p> <p> }</p> <p></style><br></p> <hr> now, we will be putting this bit of code, directly under our closing style tag.<br>if that doesn't make sense, here is a visual!; <p><br><img src="https://i.imgur.com/l20Dl8r.png" alt="frame code!" style="width: 100%; height: auto; data-kive-is-processed=" data-kive-processed-with="httpsiimgurcoml20Dl8rpng"><br></p> <p>now! here is the <b>IMPORTANT</b> part!<br>we will be editing the size, color, and style of our frame/borders!<br><br>as you can see in the image above, there is a line that says;<br></p> <hr> border: 10px solid black !important; <br> <hr> this line is the <b>only</b> line we will be editing. <br><br><b>size:</b><br>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.<br><br><b>color:</b><br>next, we will be editing the color of our border/frame!!<br>see the part where it says "black"? feel free to switch that up!<br><b><i>(i think I'm going to turn mine pink, to match my pink and purple profile!)</i></b><br><br><b>style:</b><br>now, there are many styles of borders/frames when it comes to borders/frames that wrap around an img in css/html. <br>here are some examples!;<br><img src="https://i.imgur.com/SukuB5f.png" alt="border examples!" style="width: 100%; height: auto; data-kive-is-processed=" data-kive-processed-with="httpsiimgurcomSukuB5fpng"><br><i style="font-weight: bold;"><br></i> <p><i style="font-weight: bold;">(for mine i think i'll do a dashed border!!)</i><br><br>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)<br>now, here is what my code looks like after i customized it!:<br></p> <hr> <p><style></p> <p><br></p> <p> .profile .friends .person img:not(.icon){</p> <p> </p> <p>border: 6px dashed pink !important; </p> <p> </p> <p> }</p> <p></style><br></p> <hr> <p>and here is what it looks like on my profile! <i style="">(yours should also look something similar):</i></p> <p><i style=""><br></i><img src="https://i.imgur.com/uxfprIL.png" alt="pfp border!!" style="width: 100%; height: auto; data-kive-is-processed=" data-kive-processed-with="httpsiimgurcomuxfprILpng"><i style=""><br></i></p> <p><b>YAYAYAYYYY!! WE DID IT! i'm so proud of you guys! specially you megan! great job :)<br></b></p> <hr> <p><br></p> <p style="text-align: center; "><span style="font-weight: bolder;">CHAPTER 2<br>step 8</span>: embeds<br></p> <p style="text-align: left;">hi everyone!! i have been a bit busy with schoolwork, but i thought i at least owe you guys one update :)</p> <p style="text-align: left;">so here is how to add embeds to your page!</p> <p style="text-align: left;">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! </p> <p style="text-align: left;">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)! </p> <p style="text-align: left;">first, let's find your source. </p> <p style="text-align: left;">google your sources name, and "embed". there you will find where the embed link/text is.</p> <p style="text-align: left;">for example, say you wanted to embed a youtube video; you would google "how to find youtube embed".</p> <p style="text-align: left;">then, you would get your emebed, and put it in your code.</p> <p style="text-align: left;">for example; here is my embed;</p> <hr> <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> <hr> i would then put this code, at the top of my code, above my first style tag. ( <b><style></b> ) <p>here is an example of what my youtube embed will look like!;</p> <hr> <p></p> <p><img src="https://i.imgur.com/fkNxXDB_d.webp?maxwidth=760&fidelity=grand" style="width: 100%; height: auto; alt="></p> <hr> <p><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;">you can out embeds all over your page! explore with them, and see what you can do! </span></p> <hr style="text-align: center;"> <p style="text-align: center;"><span style="font-size: 12.8px;"><br></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>CHAPTER 2</b></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>step 9</b>: falling objects</span></p> <p style="text-align: left;"><span style="font-size: 12.8px;">hi everyone!! i'm not taking requests for awhile, because of school work :(</span></p> <p style="text-align: left;"><span style="font-size: 12.8px;">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!!<br><br>alright!! here is how to add floating objects to your profile!<br><br></span></p> <p><span style="font-size: 12.8px;">click this!!; </span><a href="https://www.glitter-graphics.com/generators/falling_objects.php" target="_self" style="font-size: 12.8px; text-align: center; background-color: white;"><b>generator</b></a></p> 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 <p></p> <p>here is an example of what falling objects on a profile may look like:</p> <p><img src="https://ibb.co/PmcP2Xp"></p> <hr> <p style="text-align: center;"><span style="font-size: 12.8px;"><b><br></b></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>CHAPTER 2</b></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>step 10</b>: custom cursor</span></p> <p style="text-align: left;">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</p> <p style="text-align: left;">well, let's get into this chapter!<br></p> <p style="text-align: left;">there is going to be an EASY way, and a HARD way.</p> <p style="text-align: left;">first, here is the difficult way.</p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>OPTION ONE</b></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>HARD WAY</b></span></p> <p style="text-align: left;">alright, first; let's find your cursor!! here is a website that i recommend for finding cursors!!</p> <p style="text-align: left;">(<a href="https://www.cursors-4u.com/" target="_self">CURSORS-4U</a>) (or use the ones i provide)</p> <p style="text-align: left;">there are many great options to pick, and there are so many cute designs!! personally, i like the hello kitty ones :)</p> <p style="text-align: left;">here is some example code (feel free to use):</p> <hr> <div style="max-width: 100%; font-size: 12.8px; -webkit-text-size-adjust: 100%; cursor: url("https://external-media.spacehey.net/media/sDc7KCUaLno3gS-dWck5bZFAxzTi2x-87Afboz17pcjo=/https://cur.cursors-4u.net/mechanics/mec-1/mec5.cur"), auto !important;"> <h4 style="transform: scale(1.05); transition: transform 0.3s ease 0s; animation: 3s ease-in-out 0s infinite normal none running WIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLE2; max-width: 100%; cursor: url("https://external-media.spacehey.net/media/sDc7KCUaLno3gS-dWck5bZFAxzTi2x-87Afboz17pcjo=/https://cur.cursors-4u.net/mechanics/mec-1/mec5.cur"), auto !important; color: var(--headers) !important; font-family: var(--font-family) !important; text-shadow: black 0px 0px !important; text-transform: uppercase !important; padding-left: 5px !important;"><span style="font-weight: normal;">/* START HTTP://WWW.CURSORS-4U.COM */ * {CURSOR: URL( insert your .cur url here ), AUTO !IMPORTANT;} /* END HTTP://WWW.CURSORS-4U.COM */</span></h4> </div> <hr> <p style="text-align: left;">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.</p> <p style="text-align: left;">you are then going to enter your code at the bottom of your code in your about me section (inside your style tag).</p> <p style="text-align: left;">and BAM!! that's the difficult way!!</p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>OPTION TWO</b></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>EASY WAY</b></span></p> <p>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. </p> <p>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; "<span style="font-size: 12.8px; -webkit-text-size-adjust: 100%;">INSERT CURSOR URL".</span></p> <p>here is some example code!! (feel free to use):<br></p> <hr> <style>* {cursor: url(INSERT CURSOR URL), url(INSERT CURSOR URL), auto !important;}</style> <hr> <p> now, as you can tell, this code that is provided already has style tags. </p> <p>( example of style tags: [ <span style="color: rgb(146, 205, 220);"><style></span> <b>/</b> <span style="color: rgb(146, 205, 220);"></style></span> ] )<br></p> <p>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.</p> <p>and bam!! you should have the cursor of your choice!!</p> <p>GREAT JOB!!!! :D</p> <p></p> <hr> <p style="text-align: center;"><span style="font-size: 12.8px;"><br></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>CHAPTER 2</b></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>step 11</b>: </span><span style="font-size: 12.8px; -webkit-text-size-adjust: 100%;">custom contact table icons</span><span style="font-size: 12.8px;"><br></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>(requested by xxjaydem0nxx)</b></span></p> <p style="text-align: left;"><span style="font-size: 12.8px;">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.</span></p> <p style="text-align: left;"><span style="font-size: 12.8px;">now! </span>let's get into this chapter! first, </p> <p style="text-align: left;"><span style="font-size: 12.8px;">here is some example code!! feel free to use it; <a href="https://codepen.io/seaweed0008/pen/WNaZGgQ" target="_self">link</a></span></p> <p style="text-align: left;">the stars are just for example, you can use them , or you can change them to anything you would like!!</p> <p style="text-align: left;"><span style="font-size: 12.8px; -webkit-text-size-adjust: 100%;">you can change them to images by setting the content to url ('yourimageurl') in the quotes!!</span><br></p> <p style="text-align: left;"><span style="font-size: 12.8px; -webkit-text-size-adjust: 100%;">and to change the size of your img icons, you are going to want to add these two atributes to your code:</span></p> <p style="text-align: left;">width: 30px;</p> <p style="text-align: left;">height: 30px;</p> <p>and for example, your code should look like this now:</p> <hr> <p></p> <p></p> <p>child(1) a:before {<br style="max-width: 100%;">/* Add to Friends */<br style="max-width: 100%;">content: "β"<br style="max-width: 100%;">width: 30px;<br style="max-width: 100%;">height: 30px;<br style="max-width: 100%;">}<span style="font-size: 12.8px; -webkit-text-size-adjust: 100%;"><br></span></p> <hr> you are going to want to add this to each and every changed icon. <p>now, you're probably wondering. "wait, where do i put all this code in the first place?" don't worry. i got you. </p> <p>you can easily put this code inside style tags, <span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;">( example of style tags: [ </span><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%; color: rgb(146, 205, 220);"><style></span><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"> </span><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;">/</span><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"> </span><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%; color: rgb(146, 205, 220);"></style></span><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;"> ] ) 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 </span><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;">browsers recognize that what you're trying to do is adjust the style, and not anything else.</span></p> <p><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;">i hope this worked for you!! enjoy your new icons!</span></p> <hr> <br> <p style="text-align: center;"><b>CHAPTER 2</b></p> <p style="text-align: center;"><span style="-webkit-text-size-adjust: 100%; font-size: 12.8px;"><b>step 12</b></span><span style="font-size: max(0.875em, 12px); -webkit-text-size-adjust: 100%;">: putting images in side bar/linking images</span></p> <p style="text-align: center;"><b><span style="font-size: 12.8px;">(requested by </span>Marsh_the_interdimensional<span style="font-size: 12.8px; -webkit-text-size-adjust: 100%;">)</span></b></p> <p><span style="font-size: 12.8px;">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!<br></span></p> <p><span style="font-size: 12.8px;">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!!</span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b><br></b></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>PART ONE</b></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>IMGS IN SIDEBAR</b></span></p> <p style="text-align: left;"><span style="font-size: 12.8px;">to put images in the sidebar, it's actually much easier than you think!!</span></p> <p style="text-align: left;"><span style="font-size: 12.8px;">you just put your html code/css in the area that you would normally put in the about me section! </span></p> <p style="text-align: left;"><span style="font-size: 12.8px;">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!!</span></p> <p style="text-align: left;"><span style="font-size: 12.8px;">if you wanted to add a photo, you would have to open an img tag, like so;</span></p> <p style="text-align: left;"><span style="font-size: 12.8px;">start with <img src="</span></p> <p style="text-align: left;"><span style="font-size: 12.8px;">img, means image </span><span style="-webkit-text-size-adjust: 100%; font-size: 12.8px;">and </span><span style="font-size: 12.8px; -webkit-text-size-adjust: 100%;">src is short for source. </span></p> <p style="text-align: left;"><span style="font-size: 12.8px; -webkit-text-size-adjust: 100%;">after <img src=β you fill in the URL of an image.</span></p> <p style="text-align: left;"><span style="font-size: 12.8px; -webkit-text-size-adjust: 100%;">for example:</span></p> <hr> <img src="<a href="https://i.kym-cdn.com/entries/icons/original/000/041/742/cover3.jpg">https://i.kym-cdn.com/entries/icons/original/000/041/742/cover3.jpg</a>"/> <hr> and at the end of the example, you may see that "/> <p>well, that's easy to explain.</p> <p>the " is to close the first quotation</p> <p>and the /> is to close the tag, which we have seen a lot before!! it's in about almost every tag!</p> <p>like the style tag!! <span style="-webkit-text-size-adjust: 100%;">( example of style tags: [ </span><span style="-webkit-text-size-adjust: 100%; color: rgb(146, 205, 220);"><style></span><span style="-webkit-text-size-adjust: 100%;"> </span><span style="-webkit-text-size-adjust: 100%;">/</span><span style="-webkit-text-size-adjust: 100%;"> </span><span style="-webkit-text-size-adjust: 100%; color: rgb(146, 205, 220);"></style></span><span style="-webkit-text-size-adjust: 100%;"> ] )</span></p> <p><span style="-webkit-text-size-adjust: 100%;">and BAM!! you have a photo now!!</span></p> <p><span style="-webkit-text-size-adjust: 100%;">but you may be wondering, "how do you add a link to that?", well i'm here to explain!!</span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b><br></b></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>PART TWO</b></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>LINKS IN IMAGES</b></span></p> <p style="text-align: left;">alright!!</p> <p style="text-align: left;">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. </p> <p style="text-align: left;">but for now, we are just gonna use it to add links to images!!</p> <p style="text-align: left;">first, you are going to set your anchor tag <a href=β before the image url;</p> <p style="text-align: left;">and then, add your image url!!</p> <p style="text-align: left;">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.</p> <p style="text-align: left;">you may be wondering, "claww, what does 'a href' mean??" well i can explain! </p> <p style="text-align: left;"><span style="-webkit-text-size-adjust: 100%;">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 </span>href attribute indicates the destination of the hyperlink!!</p> <p style="text-align: left;">destination meaning where the image you click would take you!!</p> <p style="text-align: left;"><br></p> <p style="text-align: left;">here is an example of html hyperlink code!!</p> <hr> <a href=βhttps://www.youtube.comβ> <img src=β (insert img here) β width=β100β³ height=β132β³> </a> <hr> you don't have to add the <span style="font-size: 12.8px;">width=β100β³ height=β132β³ bit, but that just controls the size of your img.</span> <p><span style="font-size: 12.8px;">here is a codepen link, so you can play around with hyperlinks: </span></p> <p><span style="font-size: 12.8px;"><a href="https://codepen.io/seaweed0008/pen/PoyOQOw" target="_self">codepen</a><br></span></p> <p>good luck!!</p> <hr style="font-size: 12.8px;"> <p style="text-align: center;"><span style="font-size: 12.8px;"><span style="font-weight: bolder;"><br></span></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><span style="font-weight: bolder;">CHAPTER 3</span></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><span style="font-weight: bolder;">step 13</span>: extra resources (plus an important note)<br><br>hello everyone!!</span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><br>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!<br><br>thank you all for being patient.<br><br>while i am continuing my break, here are some resources to help you. best of luck<br><br>- clwswd<br><br><br></span></p> <p style="text-align: center;"><span style="font-size: 12.8px;"><b>RESOURCE LINKS AND DESC:<br><br><br></b></span></p> <p style="text-align: center;"><a href="https://www.glitter-graphics.com/">GLITTER GRAPHICS</a></p> <p style="text-align: center;"><a href="https://gifcities.org/">GIFCITIES</a></p> <p style="text-align: center;"><a href="https://webneko.net/">WEBNEKO</a></p> <p style="text-align: center;"><a href="https://scripted.neocities.org/#">SCRIPTED (BEST W NEOCITIES)</a></p> <p style="text-align: center;"><a href="https://en.picmix.com/">PICMIX</a></p> <p style="text-align: center; "><a href="https://doodad.dev/dither-me-this/">DITHER ME THIS</a></p> <p style="text-align: center;"><a href="https://shishka.neocities.org/shishka/buttons">SHISHKA</a></p> <p style="text-align: center;"><a href="https://anlucas.neocities.org/88x31Buttons">88x31 BUTTONS</a></p> <p style="text-align: center;"><a href="https://neo-neighborhoods.neocities.org/SiliconValley/chat">SILICON VALLEY CHAT</a></p> <p style="text-align: center;"><a href="https://rvklein.neocities.org/proj/ideogramma/">IDOGRAMMA</a></p> <p style="text-align: center;"><a href="https://phuoc.ng/collection/css-layout/">CSS LAYOUT</a></p> <p style="text-align: center;"><a href="https://getcssscan.com/css-buttons-examples">CSS BUTTONS</a></p> <p style="text-align: center;"><a href="https://ianlunn.github.io/Hover/">HOVER.CSS</a></p> <p style="text-align: center;"><a href="https://animista.net/">CSS ANIMATIONS LIBRARY</a></p> </html>">
←