Various Resources

Various Web Resources!!!

This is just a collection of a buncha shit I think is useful or cool.
I tried my best to sort everything in a way that made sense and is easy to navigate, so have fun sorting through all that lol.

Bullets marked with a pink heart ->

are favorites, and will be in a seperate collumn.

Various HTML goodies.

Things that you can use to help you create a site, or helpful stuff for html in general.

Cursor Library

Fontawesome (Text as images)

Fontmeme

Color picker with transparency

Image Resizer

Gradient text (each text line is a color)

Sugarforbrains coding help

Gooby Resources

Site redirect

W3schools Try it HTML Editor

HTML encoder/decoder

Intro Animations

Animate your text

Animista (css library)

Dither Machine

Responsinator (checking css)

punycoder (text/unicode converter)

Opacity CSS

sadgrl.online coding help

Simple interactivity help

Jsfiddle theme switcher thing

Adding a favicon

Found an audio player someone made

copypaste bulletpoint

Scripted

Custom Cursors

Catbox.moe (Image Hosting)

xobyte.org

Html Escaper

Tartan maker

Custom Scrollbar

decodreams resources

Theme Wizard (changing themes)

Theme Switcher 1101 ( -- the one I was actually able to figure out )

Stuff to put on your site, or just web widgety things.

attabook (guestbook)

Web hit counter 1

Web Hit counter 2

Blog Widget Calendar

SCM Music Player

dimdens Moonwidget

sharpweather widget

Hillhouse iPod code

Webdeck Music Player

Chattable (free chatbox)

Pikidiary

Status cafe

Tamago Panda Web Pet

Sea monkey web pet

Tamanotichi web pet

GifyPet

Piclog.blue

Silly clocks 4 ur site

calendar muryou

Adopt a mushroom

Drawbox

copypastebulletpointttt

RV's Effects

An actual good hit counter but requires an acc

Custom Image Falling in bg

decodreams resources

imood

Moon Widget

pollcode

Cbox

Webneko

TheOtaku quiz results widgets

Petpet

monsierdoll PSP code

Fengyuanchen Gallery Code

Styling for site stuff.
(Borders, text effects, etc.)

CRT Effect

Dither with CSS

copypastebulletpointttt

Bramus Rainbow Animated Border

Falling Stars

copypasteeee

Templates for sites.

Webmastering Templates

repth themes

angelslayouts layouts

Glenthemes

Templaterr

Itinerae Templates

Character Wiki Template

Pomelo.lol Templates

Gooby 500gift Template

Windchime Templates

almostsweet templates

Shenanigans Template

willdotjpg Templates

Fantasy template - Windchime

Ripples template Windchime

Foollovers Templates (and also graphics)

SadGrl.online Templates and Custom Site Builder

eggramen templates

My Templates

//

mist.drr.ac

ishimori

lovespace

allison

codes

sweetie

xyz

eva00

gifc4crds

jellymask

ghost (prev. noodles)

mantis

phonecharm

omelet

Yokai (pixels)

Autism

watermelon

Tchai

twst.ju.mp

enchantments

ikebukuro

pochi

gifcity

Wilardo

Lifted

Rentry.co Knowledge

Rentry.co Lucypix

Rentry.co heartgifs

Rentry.co Rentry

Rentry.co ulzzang

Rentry.co Charm_

Rentry.co roses-resources

rentry.co Butter

Rentry.co res

Rentry.co 20by20pride

Rentry.co Vamptism

Imvu(?) Button collection

Rentry.co rsrcs

Cutewebgraphics tumblr

supplies.ju.mp

DaniisDecor Pixels

Chot F2U Decor

DaniisDecor Stamps

Gaysweaters Tumblr

32rabbit tumblr

Making gif stamps

Cutie Market

King lulu deer

pixeldiary

ichigo directory

keysclubhouse resources

synthetic fruits resources

soahana

Goobys Graphics

PMM transparents

s4dpngs.tumblr

geoblinkies

Rainbow locker graphics

sad themes tumblr

plasticdino blinkies

plasticdino buttons

raining stars stamps

katamari sprites

Prismatic realm graphics

sozaioukoku graphics

pastel hell graphics

bonibells graphics collection

Site archive / resources

gasara free resources

sweetcharm.net

dollz animated gifs

pixel pride flags

Gifcities

sozai.pooftie.me

Imvu(?) Button collection

Fool lovers graphics

Gifcity

blinkies.cafe (blinkies maker)

massive button collection

buttonwall neocities

web badges world

Toyhouse Pride Flag gallery

More imvu buttons

id button makers and database!!!

Random bullshit I think is cool

Ascii art maker

sadgrl button maker

cinnis globe maker

calendar maker for neocities

The Uselessweb

ezgif

Blinkies.cafe

Site Buttons of Cool Sites!!!

A charm of circles with June above it and two hearts below it

codes I snagged & codes I somehow made myself

What it says. I didn't really learn how to properly code since I just mess around with this for fun, but now I've got the itch to actually like, get better at it lol. Usually, I just grab codes that other people make, mess with them until I figure out what does what and maybe I figure out why, and then I somehow try to replicate it myself.

This is also going to have notes (mainly for myself) aside some codes, or otherwise stupidly simple stuff that I want to remember.

the codes I just snag wholesale I'll also link back to where I found them if i can find them again (since usually I just grab em from stackoverflow), but when in doubt, comb stackoverflow after a highly specific google search and it should turn up lol.

Da hoarddd

Monsieurdoll psp -> 3ds Shell

I took monsieurdoll's PSP code and modified it to fit a 3DS shell image I found. I also fit my Cbox chatbox on the bottom half.

This is the code I used on my homepage, if you want a live example. Im linking an img for this one.

.tdsbtn2 {
    position: absolute;
    background-color: transparent;
    top: 400px;
    left: 540px;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    border: 2px dotted lightgrey;
    filter: drop-shadow(0px 0px 2px white);
    z-index: 3
  }

.tdsbtn1 {
    position: absolute;
    background-color: transparent;
    top: 400px;
    left: 479px;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    border: 2px dotted lightgrey;
    filter: drop-shadow(0px 0px 2px white);
    z-index: 3
  }

.tdsbtn1:active {
    filter: brightness(100%) drop-shadow(0px 0px 5px white);
  }

.tdsbtn2:active {
    filter: brightness(100%) drop-shadow(0px 0px 5px white);
  }

.tdsbtn1:hover {
    background: rgba(255, 255, 255, 0.45);
    border: 2px dotted white;
    filter: drop-shadow(0px 0px 20px white);
  }

.tdsbtn2:hover {
    background: rgba(255, 255, 255, 0.45);
    border: 2px dotted white;
    filter: drop-shadow(0px 0px 20px white);
  }

.chatbox {
    position: absolute;
    top: 297px;
    left: 35px;
    width: 312px;
    height: 235px;
  }

.threedsvideo {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 382px;
    height: 230px;
    z-index: 2;
    transition: .5s;
  }

.threedsvideo:hover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 382px;
    height: 230px;
    z-index: 2;
    transition: .5s;
  }

#videocontainer {
    background-color: black;
    position: absolute;
    top: 43px;
    left: 110px;
    width: 382px;
    height: 230px;
    z-index: 1;
    margin-top: 0px;
  }
</style>
<body>
  <div class="dscontainer" style="z-index:2">
    <div class="threeds" loading="lazy">
      <script>
        var slideIndex = 1;
        showSlides(slideIndex); // Next/previous controls 
        function plusSlides(n) { showSlides(slideIndex += n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex - 1].style.display = "block"; } 
      </script>
      <button title="Click for the next video!" class="tdsbtn1" loading="lazy" onclick="plusSlides(-1)"></button>
      <button title="Click for the next video!" class="tdsbtn2" loading="lazy" onclick="plusSlides(1)"></button>
      <div id=&apos;videocontainer&apos; class="modal">
        <div class="modal-content">
          
          <div class="mySlides" display=&apos;block&apos;>
            <iframe loading=&apos;lazy&apos; class="threedsvideo" src="https://www.youtube.com/embed/[video embed code after v= ]" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
          </div>
          
          <div class="mySlides" display=&apos;block&apos;>
            <iframe loading=&apos;lazy&apos; class="threedsvideo" src="https://www.youtube.com/embed/[video embed code after v= ]" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
          </div>
          
          <div class="mySlides" display=&apos;block&apos;>
            <iframe loading=&apos;lazy&apos; class="threedsvideo" src="https://www.youtube.com/embed/[video embed code after v= ]" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
          </div>
          <iframe class="chatbox" src="[but ur catbox chat link here]" width="" height="" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
        </div>
      </div>
    </div>
  </div>
</body>

Theme Swapper Buttons

I took this theme switcher code and simplified it to look a little different, but functionally, its the same.

It doesn't work right on this example cause I copied the empty code

Theme Picker

<style>
            /* bar that holds the theme picker text and the buttons. I just made this so I could move stuff around easier */
            .themebar {
                /* position: absolute;
       left: 200px;
        top: 215px; */
                background: transparent;
                border-radius: 10px;
            }

/* Button default style */
            .theme-btn {
                padding: 5px 10px;
                cursor: pointer;
                border: none;
                outline: none;
                margin: 5px;
                border-radius: 10px;
                background: white;
                color: black;
                border: 1px solid grey;
                transition: background-color 0.3s ease, color 0.3s ease;
            }

/* 
    
    In order to change the themes, put the class or id of whatever you want to change after ".one" or ".two" or whatever you title your theme, and then style it. You're essentially just copying the original style and then putting the theme name infront of it and changing whatever parts of it you want to change for the new theme.
    
    You could also add new elements for only certain elements, honestly you can get pretty creative with it.
    
    */

/* Default - leave this empty, so you can revert the theme changes to nothing and see the original code. */
            .default body {}

/* Mode One  ---------------------------------------------------------*/
            .One body {
                background-color: black;
                color: white;
            }

.One .theme-btn {
                padding: 5px 10px;
                cursor: pointer;
                border: none;
                outline: none;
                margin: 5px;
                border-radius: 10px;
                background: red;
                color: white;
                border: 2px dashed grey;
                transition: background-color 0.3s ease, color 0.3s ease;
            }

/* ----------------------------------------------------------------*/

/* Mode Two */
            .Two body {
                background-image: url("https://sozai.pooftie.me/bg/bg%20(1).png");
                color: black;
            }

.Two .theme-btn {
                padding: 5px 10px;
                cursor: pointer;
                border: none;
                outline: none;
                margin: 5px;
                border-radius: 10px;
                background: gainsboro;
                color: black;
                border: 1px solid grey;
                transition: background-color 0.3s ease, color 0.3s ease;
            }

</style>
        
        <div class="themebar">
            <center>
                Theme Picker
            </center>
            
            <div class="theme-switcher" style="text-align: center;">
                <button class="theme-btn" onclick="setTheme('default')">Default</button>
                <button class="theme-btn" onclick="setTheme('One')">One</button>
                <button class="theme-btn" onclick="setTheme('Two')">Two</button>
            </div>
            
        </div>
        
        <script>
            function setTheme(theme) {
                document.documentElement.className = theme;
            }

</script>

Tabs Within Tabs

This but theres two of em.

I did this one myself, its pathetically simple and took me way too long to figure out, but all you need to do is change all the values for the script and stuff so its not calling on the same thing if theres more than one on there. infinte tabs goooo

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      * {
        box-sizing: border-box
      }

body {
        font-family: "Lato", sans-serif;
      }

/* Style the tab */
      .tab {
        float: left;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
        width: 30%;
        height: 300px;
      }

/* Style the buttons inside the tab */
      .tab button {
        display: block;
        background-color: inherit;
        color: black;
        padding: 22px 16px;
        width: 100%;
        border: none;
        outline: none;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
        font-size: 17px;
      }

/* Change background color of buttons on hover */
      .tab button:hover {
        background-color: #ddd;
      }

/* Create an active/current "tab button" class */
      .tab button.active {
        background-color: #ccc;
      }

/* Style the tab content */
      .tabcontent {
        float: left;
        padding: 0px 12px;
        border: 1px solid #ccc;
        width: 70%;
        border-left: none;
        height: 300px;
      }

/* Style the tab */
      .tab2 {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
      }

/* Style the buttons inside the tab */
      .tab2 button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
      }

/* Change background color of buttons on hover */
      .tab2 button:hover {
        background-color: #ddd;
      }

/* Create an active/current tablink class */
      .tab2 button.active {
        background-color: #ccc;
      }

/* Style the tab content */
      .tabcontent2 {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
      }

/*          fade effect for all tabs */
      .tabcontent,
      .tabcontent2 {
        animation: fadeEffect 1s;
        /* Fading effect takes 1 second */
      }

/* Go from zero to full opacity */
      @keyframes fadeEffect {
        from {
          opacity: 0;
        }

to {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <h2>Vertical Tabs</h2>
    <p>Click on the buttons inside the tabbed menu:</p>
    <p>grabbed this from wschools btw lol</p>
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
      <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    </div>
    <div id="London" class="tabcontent">
      <h3>London</h3>
      <p>London is the capital city of England.</p> 2nd tabbuhhh <div class="tab2">
        <button class="tablinks2" onclick="openCity2(event, 'London2')">London</button>
        <button class="tablinks2" onclick="openCity2(event, 'Paris2')">Paris</button>
        <button class="tablinks2" onclick="openCity2(event, 'Tokyo2')">Tokyo</button>
      </div>
      <div id="London2" class="tabcontent2">
        <h3>London</h3>
        <p>London is the capital city of England.</p>
      </div>
      <div id="Paris2" class="tabcontent2">
        <h3>Paris</h3>
        <p>Paris is the capital of France.</p>
      </div>
      <div id="Tokyo2" class="tabcontent2">
        <h3>Tokyo</h3>
        <p>Tokyo is the capital of Japan.</p>
      </div>
    </div>
    <div id="Paris" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p>
    </div>
    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>
    
    <script>
      function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
      }
      // Get the element with id="defaultOpen" and click on it
      document.getElementById("defaultOpen").click();
    </script>
    
    <script>
      function openCity2(evt, cityName2) {
        var i, tabcontent2, tablinks2;
        tabcontent2 = document.getElementsByClassName("tabcontent2");
        for (i = 0; i < tabcontent2.length; i++) {
          tabcontent2[i].style.display = "none";
        }
        tablinks2 = document.getElementsByClassName("tablinks2");
        for (i = 0; i < tablinks2.length; i++) {
          tablinks2[i].className = tablinks2[i].className.replace(" active", "");
        }
        document.getElementById(cityName2).style.display = "block";
        evt.currentTarget.className += " active";
      }
    </script>
  </body>
</html>

Tooltip

I THINK, empahsis on THINK, this was from scripted...? I grabbed this code foreeever ago on the old version of the site im pretty sure, but then they updated it and I havent been able to find it since. This is why I save the codes themselves and not links lol.

hover meeeeeee

color: #ad99ff;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 16px;
        border: 2px solid #3807fc;
        /* Initially hidden */
        z-index: 1000;
    }
</style>

<body>

<p title="tooltip or something, im pretty sure i grabbed this from scripted forever ago but im not sure..."> wiiwiwiwi wahwhahw  WEEHHH WEHHH WAAHHH sobbing</p>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://static.tumblr.com/lspzyz3/xloqk6cgp/jquery.style-my-tooltips.js"></script>
<script>
    (function($) {
        $(document).ready(function() {
            $("[title]").style_my_tooltips({
                tip_follows_cursor: true,
                tip_delay_time: 10,
                tip_fade_speed: 30,
                attribute: "title"
            });
        });
    })(jQuery);

</script>

Auto click something on load

Im gonna be real I lost the source. But I know its somehwere on stackoverflow, I dont have the direct link since i just searched, grabbed it and then continued coding behjshfjd.

Stupied Gallery Code

another goated code, I use this thing everywhere.
made by stupied
Here is the jslightbox they linked I only grabbed this one but they got more! go look at their big brain stuff!

.gallery img { height: 250px; }

#lightbox {
    --time: 0.4s;
    --lb-height: 100vh;
    --lb-color:rgba(0, 0, 0, 0.9);
    --img-height: calc(100vh - 4rem);
    top:0;
    position: fixed;
    width: 100vw;
    height: 0;
    overflow: hidden;
    ;
    transition: var(--time);
    z-index: 100;
}

#lightbox-content {
    margin-top: 1rem;
    position: relative;
    display: inline-block;
    padding: 0.5rem;
    background-color: white;
    top: 50%;
    transform: translateY(calc(-50% - 1.5rem));

img {
        display: block;
        transition: 1s;
        max-height: 0;
        width: 100%;
        object-fit: cover;
    }

svg {
        height: 15%;
        position: absolute;
        padding: 1rem;
        top: 50%;
        transform: translateY(-50%);
            --color:rgba(255, 255, 255, 0.5);
        --width:2px;
        filter:drop-shadow(var(--width)0 0 var(--color))drop-shadow(calc(-1*var(--width))0 0 var(--color))drop-shadow(0 var(--width)0 var(--color))drop-shadow(0 calc(-1*var(--width)) 0 var(--color))
    }
}

#lightbox-content > a {
    display: block;
    position: absolute;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: var(--time);

&:hover { opacity:1; }
    &#lightbox-prev {
        width: 40%;
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5), #0000);
        left: 0;
        > svg { left: 1rem; }
    }

&#lightbox-next {
        width: 40%;
        background-image: linear-gradient(90deg, #0000, rgba(255, 255, 255, 0.5));
        right: 0;
        > svg { right: 1rem; }
    }
}

#lightbox-info {
    padding-left: 0.5rem;
    color: white;
    position: absolute;
    bottom: -1.5rem; left:0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    width: 95%;
    
    > a {
        white-space: nowrap;
        font-family: var(--display-font);
    }

> a:hover { font-style: italic; }
}
</style>

<body>

<div id="lightbox" onclick="closeLightBox()">
  <div id="lightbox-content">
    <a href="#" id="lightbox-prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="#000000" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg></a>

<p style="padding:1rem;">ripped out <a href="https://codepen.io/Stupiedidiot/pen/ByoamxX">my lightbox code</a> so that other people can use it ^_^</p>
<ol>
  <li>Make sure to have the lightbox above</li>
  <li>Set the 'lb_container' to your gallery</li>
  <li>Add your images! the alt tag will be the title</li>
</ol>

<p style="padding:1rem;">Truthfully this is a very barebones version of it. I highly recommend you tweaking it to fit whatever the hell you're doing!</p>

</body>

// grabs all images from lb_container
lb_images = document.querySelectorAll(lb_container + " img")

// wraps all the images with anchor tags
for (i = 0 ; i < lb_images.length ; i++) {
  linkHTML = document.createElement("a")
  linkHTML.setAttribute("onclick",'openImg('+i+')')
  linkHTML.href="#"
  
  // grabs the images alt and sets it as a title variable
  // you could change it to "data-" attribute instead,,
  linkHTML.style.setProperty("--title", lb_images[i].alt)
  
  wrap(lb_images[i],linkHTML)
}

// grabs all the elements in lightbox
lb_open = false
lb_e = document.getElementById("lightbox")
lb_e_prop = getComputedStyle(lb_e)
lb_c = document.getElementById("lightbox-content")
lb_i = document.getElementById("lightbox-info")

// gets the variables set in the css
lb_height = lb_e_prop.getPropertyValue("--lb-height")
lb_color = lb_e_prop.getPropertyValue("--lb-color")
lb_img = lb_e_prop.getPropertyValue("--img-height")

function openImg(i){
  lb_open = true

lb_e.style.background = lb_color
  lb_e.style.height = lb_height
  lb_e.querySelector("img").style.maxHeight = lb_img

lb_e.querySelector("img").src = lb_images[i].src

// set's the buttons on side, will loop around
  if(lb_images[i-1]){prev=i-1}else{prev=lb_images.length-1}
  if(lb_images[i+1]){next=i+1}else{next=0}
  document.getElementById("lightbox-prev").setAttribute("onclick",'openImg('+prev+')')
  document.getElementById("lightbox-next").setAttribute("onclick",'openImg('+next+')')
  
  lb_item = document.querySelectorAll(lb_container + " a")[i]
  console.log(lb_item)
  lb_item_prop = getComputedStyle(lb_item)
  
  lb_i.querySelector("span").innerHTML = lb_item_prop.getPropertyValue("--title")
}

// this fires everytime user touches the lightbox
function closeLightBox() {
  //ignores clicks if touching lightbox content
  if (lb_c.contains(event.target) === false) {
    lb_open = false
    lb_e.style.background = "unset"
    lb_e.style.height = "0vh"
    lb_e.querySelector("img").style.maxHeight = "0"
  }
}

// keyboard navigation
document.onkeydown = function(event) {
  if( lb_open == true ){
    switch (event.keyCode) {
        case 37:
          document.getElementById("lightbox-prev").click()
        break;
        case 39:
          document.getElementById("lightbox-next").click()
        break;
        case 27:
          lb_e.click()
        break;
      }
  }
}

function wrap(el, wrapper) {el.parentNode.insertBefore(wrapper, el);wrapper.appendChild(el);}
</script>

Sadgrl.online random thing displayed from list on click

When u click the button a random thing is displayed out of a list of things. Used this for the dd fun fact section.
Code grabbed from Sadgrl.online
source thingy

*** note mainly for me
NOTE: this is the same thing as the tabs, if using multiple of these, change the names of the stuff the script is trying to grab so its not getting the same thing multiple times.
                    
<body>
<p>Click the button to display a new item at random from the list.</p>
<button id="aboutBtn">Click to learn something about me!</button>
<div id="aboutOutput"></div>
</body>

// define our list of items
// you can add as many as you like, no need to keep track!
var itemsArr = ["I have never been on a plane.", 
                "I grew up in a house with six cats.", 
                "I used to be really good at DDR.",
                "I can type really fast.",
                "I really enjoy sushi."];

aboutBtn.addEventListener('click', displayItem);

function displayItem() {
  // generates a random index
  var rand = Math.floor(Math.random() * itemsArr.length);
  aboutOutput.innerText = itemsArr[rand];
  
}
</script>

Sadgrl.online click tooltip

Tooltip that u click on to display, instead of hovering. Sadgrl.online
Direct code thing

.tooltip {
      border-bottom: 2px dotted #ca82ff;
      /* this is the purple dots underline */
      cursor: pointer;
      text-decoration: none;
    }

.tooltip a {
      color: #ca82ff;
      /* color of tooltip link text */
    }

.tooltip-content {
      position: absolute;
      display: none;
      padding: 10px 20px 10px 20px;
      font-size: 14px;
      line-height: 1.3em;
      z-index: 999;
      margin-top: 20px;
      max-width: 400px;
      /* tooltip content width */
      border: 1px solid gray;
      /* tooltip content border */
      z-index: 9999;
      background-color: white;
      /* tooltip background color */
}
</style>

<body>

<p>You can add as many tooltips as you <a href="#" class="tooltip">want</a>. <span class="tooltip-content"><strong>They can be <em>styled</em> too</strong> It's just a div! To close it, you can click on the word <em>or</em> the tooltip.</span>

<p>These play nice even when a tooltip is used in the middle of a paragraph, just like <span class="tooltip-container"><a href="#" class="tooltip">this one</a>! <span class="tooltip-content">It always goes right below the word that is clicked.</span></span> That's pretty convenient for having extra sidenotes on your website and stuff.</p>

</body>

More Sadgrl.online code links

ill be here all day pasting the codes for them all, heres to hoping the code hosting thing doesnt evaporate one day lol (which is why i grab the codes themselves as text for myself, look what happened with the tooltip LOL)

Again, everything listed here is from Sadgirl.online

Pure CSS blog entries hide/show
Drag and drop
Filter tags on button click
Falling images
Change src of iframe on click
Flexbox Image Gallery
load random image on refresh
Count how many things r in a list
Download image as a div on click

Tabs I'm using for all of these

Also found this on stackoverflow... I didnt save the source grvdjvfsh a hyper specific google search may turn it up?

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Select ALL elements with the class 'boxes'
    const boxes = document.querySelectorAll('.boxes');
    // Iterate over each box and attach the event listener
    boxes.forEach(box => {
      box.addEventListener('click', () => {
        // Toggle the 'expanded' class on click for the *specific* box that was clicked
        box.classList.toggle('expanded');
      });
    });
  });
</script>
<body>
  <div class="boxes"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
  <body>
    
    <style>
      .boxes {
        border: 1px solid;
        background-color: blue;
        color: red;
        border-radius: 0px;
        width: 700px;
        padding: 10px;
        padding-left: 30px;
        padding-right: 30px;
        margin-top: 0px;
        margin-bottom: 0px;
        /* New Styling for Expansion */
        max-height: 20px;
        /* Initial collapsed height. Adjust based on your content */
        overflow: hidden;
        /* Hide content beyond the max-height */
        transition: max-height 0.5s ease-out;
        /* Smooth transition for height changes */
        cursor: pointer;
        /* Indicate that the box is clickable */
      }

/* Hover effect: expands halfway */
      .boxes:hover {
        max-height: 55px;
        /* "Halfway" height. Adjust as needed */
        color: yellow;
      }

/* Expanded state (active after click) */
      .boxes.expanded {
        max-height: 2000px;
        /* "Full length" height (a large enough value to show all content) */
        overflow: auto;
        /* Allow scrolling if content truly exceeds this large max-height */
        cursor: zoom-out;
        /* Change cursor when expanded */
        transition: 1s ease-in-out;
      }
    </style>

Gooby's 500 Follower Template Calendar

yoinked goobys calendar from their 500 follower template.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://file.garden/ZRW6VPKULjLI59VM/500gift/cal.js"></script>
    <title>your title here</title>
  </head>
  <body>
    <script type="text/javascript">
      calendar();
    </script>
    <div class="calendar"></div>
  </body>
</html>

<style>
  .cal_calendar {
    border: 1px solid #8f657a;
    padding: 1px;
    background: linear-gradient(#fffff1, #ffdceb);
    width: 100%;
    margin: 0.6rem auto 0 auto;
    height: 191px;
    color: #83586e;
    border-radius: 5px;
  }

.cal_calendar th {
    border: 1px solid #874a17c9;
    background: linear-gradient(50deg, #FFFFF2, #ffe0f2);
    width: 36px;
    font-size: 0.69em;
    border-radius: 3px;
    color: #83586e;
    box-shadow: inset #ffcee8 0 0 4px 1px;
  }

.cal_calendar td {
    border: 1px solid #fa94c785;
    background: linear-gradient(#fffff1, #ffdceb);
    text-align: center;
    font-size: 0.8em;
    border-radius: 3px;
    box-shadow: inset white 0 3px 3px, inset #ff7cb945 0 0 2px 1px;
  }

.cal_today {
    color: #ff7cb9;
    font-weight: bold;
  }

.cal_days_bef_aft {
    color: #5a779e;
  }
</style>

Cellphone Chatbox on Hover

A chatbox cellphone code that is fixed to the corner of the screen and floats up when you hover on it. I nabbed this from scripted. I dont wanna lose the code if the jsfiddle goes away.

blablah<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300|Roboto' rel='stylesheet' type='text/css'> <style> #cbox { left: 40px; bottom: -354px; z-index: 9999; position: fixed; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; border: 5px solid #fff; border-top-left-radius: 10px; border-top-right-radius: 10px; box-shadow: 0px 0px 0px 1px #fedbdb; } #cbox:hover { bottom: 0px; } #cboxtitle { width: 180px; height: 15px; background-color: #ffffff; background-image: url('https://41.media.tumblr.com/3827df8cb33c8426b76e87c2e5888822/tumblr_inline_npdg23RZcL1rnjuep_540.png'); padding: 8px 5px 5px 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; text-align: center; font-size: 14px; font-family: 'Josefin Sans', sans-serif; font-weight: 300; letter-spacing: 10px; color: #db9494; text-shadow: 1px 1px 1px #ffffff; text-transform: uppercase; } #cboxdesc { width: 180px; height: 40px; padding: 5px; background-color: #ffffff; overflow: auto; font-family: 'Roboto', sans-serif; font-size: 9px; text-align: justify; letter-spacing: 1px; color: #a19090; } </style> <div id="cbox"> <div id="cboxtitle">chatbox</div> <div id="cboxdesc"> YOUR CHATBOX DESCRIPTION HERE </div>  <iframe src="[chatboxsrc]&boxtag=p9XmKU" width="190" height="300" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe> </div>

Windchime's Time Clock

yoinked this from one of their templates.
This is where I found it

<html>
  <head>
    <meta charset="utf-8" />
    
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <link rel="shortcut icon" href="/">
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  </head>
   <div id="MyClockDisplay" class="clock" onload="showTime()" style="font-size: 20px;letter-spacing: 2px;text-align:center;"></div>

if (h == 0) {
                        h = 12;
                    }

if (h > 12) {
                        h = h - 12;
                        session = "PM";
                    }

h = (h < 10) ? "0" + h : h;
                    m = (m < 10) ? "0" + m : m;
                    s = (s < 10) ? "0" + s : s;

var time = h + ":" + m + ":" + s + " " + session;
                    document.getElementById("MyClockDisplay").innerText = time;
                    document.getElementById("MyClockDisplay").textContent = time;

setTimeout(showTime, 1000);

}

showTime();

</script>
</html>

Rainbow Text Effect

I accidentally made a sick ass rainbow thing that looks kinda trippy.

Example text thats black

Example text thats white

Example text thats colored

Example text with "pink" background and "red" text color.

Another calendar code

Found it here! JavaScript Best Codes

Tab Scroll Down Animation

My dumb ass finally figured out the pathetically simple solution to wanting the tabs to scroll... its just.. this. This is mainly for myself BEJDHFSJHV

Infinite Marquee

Another thing I yoinked from stupied, though they also wrote that they grabbed it from somewhere they cant remember, so who knows lol. My guess is maybe sadgrl.online?

How did we end up here? You said happenstance. The cruelest lies are often told without a word. The kindest truths are often spoke but never heard. The creatures outside looked from pig to man, and from man to pig, and from pig to man again; but already it was impossible to say which was which. A poem is a song that no one cares about. I'm not the boogeyman but I am the boogey man. Fight for the fact that you're worth more than a decimal. WOAH! THAT SNAIL IS FAST!! Well here we are again. It's always such a pleasure :). Oooh you've come so far! The dynamic pose with the vibrant colours and lineless touches is much prettier, the clothes flow nicely (that bow detail is lovely) and more carefully constructed hands are very noticeable, a definite improvement from the squiggly on on the right How did we end up here? You said happenstance. The cruelest lies are often told without a word. The kindest truths are often spoke but never heard. The creatures outside looked from pig to man, and from man to pig, and from pig to man again; but already it was impossible to say which was which. A poem is a song that no one cares about. I'm not the boogeyman but I am the boogey man. Fight for the fact that you're worth more than a decimal. WOAH! THAT SNAIL IS FAST!! Well here we are again. It's always such a pleasure :). Oooh you've come so far! The dynamic pose with the vibrant colours and lineless touches is much prettier, the clothes flow nicely (that bow detail is lovely) and more carefully constructed hands are very noticeable, a definite improvement from the squiggly on on the right

.marquee span::after {
  content: "|";
  padding: 0 1.5rem;
}

.track {
    position: absolute;
    top:50%;
    white-space: nowrap;
    animation: marquee 150s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0%) translateY(-50%); }
  100% { transform: translateX(-50%) translateY(-50%); }
}
</style>

<body>
<div class="marquee">
  <div class='track'>
    
    How did we end up here? You said happenstance. The cruelest lies are often told without a word. The kindest truths are often spoke but never heard. The creatures outside looked from pig to man, and from man to pig, and from pig to man again; but already it was impossible to say which was which. A poem is a song that no one cares about. I'm not the boogeyman but I am the <i>boogey man</i>. Fight for the fact that you're worth more than a decimal. WOAH! THAT SNAIL IS FAST!! Well here we are again. It's always such a pleasure :). Oooh you've come so far! The dynamic pose with the vibrant colours and lineless touches is much prettier, the clothes flow nicely (that bow detail is lovely) and more carefully constructed hands are very noticeable, a definite improvement from the squiggly on on the right

How did we end up here? You said happenstance. The cruelest lies are often told without a word. The kindest truths are often spoke but never heard. The creatures outside looked from pig to man, and from man to pig, and from pig to man again; but already it was impossible to say which was which. A poem is a song that no one cares about. I'm not the boogeyman but I am the <i>boogey man</i>. Fight for the fact that you're worth more than a decimal. WOAH! THAT SNAIL IS FAST!! Well here we are again. It's always such a pleasure :). Oooh you've come so far! The dynamic pose with the vibrant colours and lineless touches is much prettier, the clothes flow nicely (that bow detail is lovely) and more carefully constructed hands are very noticeable, a definite improvement from the squiggly on on the right
  </div>
</div>

<div style='padding: 1rem;'>
  <p>Henlo this is an infinite marquee!! For this to work you need to have a duplicated of whatever you have inside it. Pretty sure I stole this somewhere but I can't remember uhh..</p>
  <p>You can either add in the content yourself or use Javascript to add it in </p>
</div>

<div id="marquee" class="marquee"></div>
</body>

const MARQUEE_TARGET = document.getElementById('marquee');
var marqueeContent = document.createElement('div');
marqueeContent.classList.add('track');
marqueeContent.innerHTML = `${MARQUEE_INPUT} ${MARQUEE_INPUT}`;
MARQUEE_TARGET.append(marqueeContent);
</script>

CRT effect

Alec Lownes CRT CSS effect

Adeline.net Music Player

This thing is fucking goated dude. Grabbed it from Adeline.net (VirtualDiva), but they took their site down, so im linking the webarchive version on the page where the music player is. It's a shame. that site was super cool.

im just gonna dump everything in one giant html file below in the code box, but i suggest downloading the file they gave out since its all clean and working as intended.

This live example is from my homepage!

00:00

0:00

skip_previous

play_arrow

skip_next

volume_up

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href="style.css" rel="stylesheet">
    </head>
    <style>
    #musicplayer{
    font-family:'Arial'; /* default font */
    background:white; /* background color of player */
    border:4px solid #4cd4de; /* border around player */
    width:200px; /* width of the player - make it 100% if you want it to fill your container */
    padding:10px;
    text-align:center; 
    display:flex;
    flex-direction:column;
    gap:10px;
}

.songtitle, .track-info, .now-playing{
    padding:5px;
}

.controls{
    display:flex; 
    flex-direction:column; 
}

.buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}

.buttons div{
    width:33.3%;
}

.seeking, .volume{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:5px;
}

.now-playing, .track-info{
    background-color:#c9eff2; /* background color of top two boxes */
}

.now-playing{
    font-weight:bold;
}

.material-icons{
    color:#e74492;
}

input[type=range]{
    -webkit-appearance:none; /* removes default appearance of the tracks */
    appearance:none;
    width:100%;
    background-color:inherit;
}

input[type=range]:focus{
    outline:none; /* removes outline around tracks when focusing */
}

input[type=range]::-webkit-slider-runnable-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    background:#e74492; /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0; /* change to 5px if you want a circle seeker */
    background:#e74492; /* color of seeker square */
    -webkit-appearance:none;
    margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
}

input[type=range]::-moz-range-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    background:#e74492; /* color of seeking track */
}

input[type=range]::-moz-range-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0; /* change to 5px if you want a circle seeker */
    background:#e74492; /* color of seeker square */
    border:none; /* removes weird border around seeker square in firefox */
}
    
    </style>
    <body>
    
    <p>Note from inside the download file... </p>
    <br>
    <div> 
    multiple song music player by adilene @ adilene.net. free to use and edit as you like! credit is not necessary, but it is appreciated! <3

if you need any help feel free to reach out to me at adilene.net!

javascript source code: https://github.com/sayantanm19/js-music-player

lasted updated: 13 feb 2025 
    </div>
    
    
        <div id="musicplayer">
            <div class="now-playing"></div>
            
            <div class="track-info">
                <div class="track-name"></div>
                <div class="track-artist"></div>
            </div>

<div class="buttons">
                    <div class="prev-track" onclick="prevTrack()"><span class="material-icons">skip_previous</span></div>

<div class="playpause-track" onclick="playpauseTrack()"><span class="material-icons" style="font-size:40px;">play_arrow</span></div>

<div class="volume">
                    <span class="material-icons" style="color:black;">volume_up</span>
                    <input type="range" min="1" max="100" value="25" class="volume_slider" onchange="setVolume()"> 
                </div>
            </div>

<audio id="music" src=""></audio>
        </div>
        
        <script src="musicplayer.js"></script>
    </body>
    <script>
    // initiate variables
let now_playing = document.querySelector(".now-playing");
let track_name = document.querySelector(".track-name");
let track_artist = document.querySelector(".track-artist");

let playpause_btn = document.querySelector(".playpause-track");
let next_btn = document.querySelector(".next-track");
let prev_btn = document.querySelector(".prev-track");

let seek_slider = document.querySelector(".seek_slider");
let volume_slider = document.querySelector(".volume_slider");
let curr_time = document.querySelector(".current-time");
let total_duration = document.querySelector(".total-duration");

let track_index = 0;
let isPlaying = false;
let updateTimer;

// create new audio element
let curr_track = document.getElementById("music");

//
// DEFINE YOUR SONGS HERE!!!!!
// MORE THAN FOUR SONGS CAN BE ADDED!!
// JUST ADD ANOTHER BRACKET WITH NAME ARTIST AND PATH
// CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES IF YOU DON'T HAVE NEOCITIES SUPPORTER
let track_list = [
    {
        name:"title of song",
        artist:"authorrrr",
        path:"catbox.moe... for as much as it goes down, is a damn good service LOL use catbox or smth"
    }, 
    // keep the [ , ] at the end of the track, even if its the last one. Also this is me not adeline thats editing this part, they actually had songs in there lol. im guessing you can tell whose who. 
];
//
//
//
//
//

function loadTrack(track_index){
    clearInterval(updateTimer);
    resetValues();

// load a new track
    curr_track.src = track_list[track_index].path;
    curr_track.load();

// update details of the track
    track_name.textContent = track_list[track_index].name;
    track_artist.textContent = track_list[track_index].artist;
    now_playing.textContent = "Playing " + (track_index + 1) + " of " + track_list.length;

// set an interval of 1000 milliseconds for updating the seek slider
    updateTimer = setInterval(seekUpdate, 1000);

// move to the next track if the current one finishes playing 
    curr_track.addEventListener("ended", nextTrack);

}

// reset values
function resetValues(){
    curr_time.textContent = "0:00";
    total_duration.textContent = "0:00";
    seek_slider.value = 0;
}

// load the first track in the tracklist
loadTrack(track_index);

// checks if song is playing
function playpauseTrack(){
    if (!isPlaying) playTrack();
    else pauseTrack();
}

// plays track when play button is pressed
function playTrack(){
    curr_track.play();
    isPlaying = true;

// replace icon with the pause icon
    playpause_btn.innerHTML = '<span class="material-icons" style="font-size:40px;">pause</span>';
}

// pauses track when pause button is pressed
function pauseTrack(){
    curr_track.pause();
    isPlaying = false;

playpause_btn.innerHTML = '<span class="material-icons" style="font-size:40px;">play_arrow</span>';
}

// moves to the next track
function nextTrack(){
    if (track_index < track_list.length - 1)
        track_index += 1;
    else track_index = 0;
    loadTrack(track_index);
    playTrack();
}

// moves to the previous track
function prevTrack(){
    if (track_index > 0)
        track_index -= 1;
    else track_index = track_list.length;
    loadTrack(track_index);
    playTrack();
}

// seeker slider
function seekTo(){
    seekto = curr_track.duration * (seek_slider.value / 100);
    curr_track.currentTime = seekto;
}

// volume slider
function setVolume(){
    curr_track.volume = volume_slider.value / 100;
}

setVolume();

function seekUpdate(){
    let seekPosition = 0;

// check if the current track duration is a legible number
    if (!isNaN(curr_track.duration)){
        seekPosition = curr_track.currentTime * (100 / curr_track.duration);
        seek_slider.value = seekPosition;

// calculate the time left and the total duration
        let currentMinutes = Math.floor(curr_track.currentTime / 60);
        let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
        let durationMinutes = Math.floor(curr_track.duration / 60);
        let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);

// adding a zero to the single digit time values
        if (currentSeconds < 10){ currentSeconds = "0" + currentSeconds; }
        if (durationSeconds < 10){ durationSeconds = "0" + durationSeconds; }
        if (currentMinutes < 10){ currentMinutes = currentMinutes; }
        if (durationMinutes < 10){ durationMinutes = durationMinutes; }

curr_time.textContent = currentMinutes + ":" + currentSeconds;
        total_duration.textContent = durationMinutes + ":" + durationSeconds;
    }
}
    </script>
</html>

Glenthemes Music Player

found this off scripted, plugged the song from my journal on it just so it plays and i can see it works. I also swapped the mute and volume icon since it doesnt make sense to show its muted when its playing.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
<head>
  <script src="https://kit.fontawesome.com/610c820504.js" crossorigin="anonymous"></script>
  <style type="text/css">
    /*-------MUSIC PLAYER BY GLENTHEMES-------*/
    #glenplayer02 {
      position: relative;
    }

#glenplayer02 a {
      text-decoration: none;
    }

#glenplayer02>div {
      align-self: center;
      -webkit-align-self: center;
    }

.music-controls {
      user-select: none;
      -webkit-user-select: none;
      width: 22px;
      font-size: 16px;
      cursor: pointer;
    }

.playy,
    .pausee {
      -webkit-background-clip: text;
      -webkit-text-fill-color: #color;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #color;
      font-size: 22px;
    }

.pausee {
      display: none;
    }
  </style>
<body>
  
  <div id="glenplayer02">
    <div class="music-controls" onclick="songstart();">
      <div class="playy" style="display: block;">
        <span>
          <i class="fa-solid fa-volume-xmark fa-xl" aria-hidden="true"></i>
        </span>
      </div>
      <div class="pausee" style="display: none;">
        <span>
          <i class="fa-solid fa-volume-high fa-xl" aria-hidden="true"></i>
        </span>
      </div>
    </div>
  </div>
  <audio id="tune" src="https://files.catbox.moe/jnjrbk.mp3"></audio>
</body>

titleeee

desc

titleeee

desc

titleeee

desc

titleeee

desc

NOTES 4 me cause I got nowhere else to put em

Im horrifically stupid and forget everything, even the basics. So Im keeping all this here for me.
But it might be useful to someone else, so i thought id share whatever little notes i have.

Now make your choice....

Changing Cursors

You can change the cursor for certain classes / ID's, from cursors 4 u.
CLASS OR ID { cursor: url("https://cur.cursors-4u.net/others/oth-6/oth651.cur"), auto !important; }

Background Stacking

You can stack multiple background elements by putting a comma after whatever you're trying to stack.
background: linear-gradient(to top, transparent, red), url("IMG_SRC")

Using a stylesheet

You can use this to call a stylesheet to use for the CSS of whatever page you want.
[ link href="style.css" rel="stylesheet" type="text/css" media="all" ]

Fontawesome icons

You can put fontawesome's free icons by putting this in the head. Put the triangle brackets wherever the [] are.
[ link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/fontawesome.min.css" ]
[ link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/brands.min.css" ]
[ link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/solid.min.css" ]

Sizing

I know / use
rem = font-size of the root element
% = parent element
px = pixels is just pixels
vw = 1% of the width of the viewport
vh = 1% of the height of the viewport

IDK what any of this is
vmin = 1% of viewport's* smaller dimension
vmax = 1% of viewport's* larger dimension
ex = x-height of the current font (rarely used)
ch = width of the "0" (zero)
em = font-size of the element (2em means 2 times the size of the current font)

Pseudo Classes I know

:active = Selects active link
:focus = Selects the element that gets focus
:hover = Stuff u hover over
:root = Selects the docs root element