CSS/HTML Codes for spacehey

In the about me section*

<style> & </style> should be at the beginning or end of your programming respectively

use this format import fonts css fonts from google**

@import url('import direct url');

headers can be changed individually to different fonts or in group like shown below***

h5{

        font-family: 'font name as written in google', font type i.e. cursive/italicized ;

        font-size: font size measured in pixels px;

        color: color used through css color picker

}

h1,h2,h3,h4{

        font-family: 'same as above', same as above ;

        font-size: same as above px;

        color: same as above

}

cursor can be customized for all who access you page

body {

        cursor: url(import .cur link), default;

}

this background is the one shown as "THE PRETTIEST GIRL IN THE MORGUE"

body{

        background: url(color used through css color picker or direct url to image as .jpg if url before is deleted);

}

this background is the one shown as "NIGHT MAGIC"

.profile {

        background: url(color used through css color picker or direct url to image as .jpg if url before is deleted);

 }

this is the banner shown above my page reading "THIS IS GARBAGE"****

main:before {

         width: 100%;

         height: size in pixels px;

         display: block;

         content: "";

        background-image: url('insert direct link as .jpg');

         background-position: center center;

         background-size: cover;

}

this is the banner shown at the bottom of my page reading "THE END"

footer{

        border-radius: size in pixels px;

        background-image: color used through css color picker or direct url to image;

        color: same as above;

}

or you can format like below

footer {

        border-radius: same as abovepx;

        background: url(same as above) !important;

        display: block !important;

}

to change "ONLINE" logo

.online { visibility: hidden; } .online img { content: url("insert direct url to gif"); animation-name: ("here"); visibility: visible; height: 40px; width: 40px; 

}

this is used to make the blurbs and friends sections different colors***

.profile .blurbs .heading, .profile .friends .heading {

          background-color: color used through css color picker;

          color: same as above;

}

or to change background into an image

.blurbs {

          background: url(direct url to image as .jpg);

          border-radius: size in pixels px;

}

this is to make the contact section a different color

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {

          background-color: color used through css color picker;

          color: same as above;

          padding: size in pixels px size in pixels px;

}

this is to change the color of the table section on the left

body{

          --lighter-blue: color used through css color picker;

          --lightest-blue: same as above;

}

url info section color

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {

          width: 100%;

          border: size in pixels px line type i.e. solid followed by  color used through css color picker;

          margin: size in pixels px 0;

}

used to modify details table   

.details-table td:first-child {

          background: color used through css color picker;

          color:  same as above;

          font-weight: bold or italicized;

          width: 33%;

}

 use to align the details table

 .details-table td {

          background: color used through css color picker;

          vertical-align: top;

}

used to change the "SPACEHEY" logo at the top

.logo {

          background: color used through css color picker;   

}

used to change friend section background

.friends:not(#comments) {

          grid-area: friends;

          background: url(direct url to image as .jpg);  

          border-radius: size in pixels px

} 

*everything that is italicized and/or underlined is not part of the codes and should be either replaced or altogether deleted it is intended to be a note

**repeat for all fonts you want included

***h5 is header 5, h4 is header etc.

****to make transparent use the following in place of color: rgba(red, green, blue, transparency)

Resources:

• Imgur is a good resource for uploading images and getting their direct links to insert.
• Animation of elements
• GIFs
• CSS Color Picker
• Google Fonts
• Cursors
• aliraluna blog
• missodessa blog
• Bela blog
• Electra blog
• ˣ¥ˣ•ᴹʳˢ.ᴷ•ˣ¥ˣ blog

Disclaimer: This is not the ultimate guide, I am just trying to make it easier than it was for me. Links I used can be accessed through the blue underlined words, I am not sponsored, affiliatiated, nor supported by any.