Blinking text in top corner near “sign in” “sign out”

span#hUp::before {
content: " your text ";
font-size: 13px;
animation-duration: 0.8s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: blinkingTextYellow;
font-family: monospace;
}

^you can replace yellow with green, red, blue, and prolly more but idk i didnt try :/

To add photos to blurbs literally just select the image and “open image in new tab” then paste the link in either “about me” or “who id like to meet”

To get mp3s i use https://yt1s.com/youtube-to-mp3/en2

Ill prolly add more cos i have a ton more in my css i could share but.. honestly im tired

Lmk if any of this is like stupid incorrect cos ill try to help and lmk if theres anything else u wanna know. Im not an expert but i couldnt find any of this stuff for a good minuete when i first got my acount so i figured it might be slightly helpfull

ahh and srsly lmk if this was actually helpfull it would make my day 😩

~Set Image background

body
{
background: url(" your url ");
}

~Puts a box thing around all your stuff on the right side

.topRight {
margin-top: 20px;
background: #000;
border: 2.5px solid #000;
margin-bottom: 20px;
max-width: 550px;
border-radius: 10px;
}

^replace "#000" with whatever color you want the box to be. Look up color picker on google for color codes.
"2.5px" for the border is changable and you can change the color for that aswell

border radius can be deleted if u dont want round edges and border can be set as 0px for no border
add box-shadow: 2px 2px 5px #000; before "}" for a shadow

~Same thing as top right but like, left.

.topLeft {
margin-top: 20px;
background-color: #000;
box-shadow: 2px 2px 5px #000;
}
.topLeft {
float: left;
border: 2.5px solid #ebbbd8;
border-radius: 10px;
width: calc( 40% - 20px );
padding: 6px;
}

^same things as right can be done to customize it

Puts box around friends thing.

div.box.fwiends {
background-color: #000;
border: 2.5px solid #ebbbd8;
border-image-slice: 100%;
border-image-slice: 1;
border-radius: 10px;
padding: 10px 10px;
box-shadow: 2px 2px 5px #ffc0cb;
margin-bottom: 25px;
box-shadow: 2px 2px 5px #000;
}
.box {
border: none;
overflow: hidden;
}

^again same thing can be done to customize this as the ones above

Changes background color for around "y/n blurb"

.rightHead {
text-color:#ffffff;
margin-bottom: 0px;
background: #000;
padding-left: 4px;
text-align: center;
}

Change “text color” to y’know, change text color, same with background just change color code and you can set text-align to “right” “center” or “left” i believe

Name says it all tbh-

.fwiendCount {
Color: #000;
}

Changes font, size, and color of non-header/title text (the stuff in the blurb or whatever)

body {
font-family: Arial;
padding-top: 45px;
font-size: 15px;
color: #000;
}

Changes color of “leave a comment”

.boxHead {
background: #000;
Color: #000;
padding: 3px;
padding-bottom: 4px;
padding-left: 6px;
}

Changes color of “about me”

h4 {
color: #000;
margin-bottom: 0px;
}

h4 {
display: block;
margin-block-start: 1.33em;
margin-block-end: 1.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}

Color ect, of box around mp3 audio

div.player.box {
padding: 4px;
margin-top: 20px;
margin-bottom: 20px;
background: #000;
color: #000;
width: 379.6px;
border: 1.5px solid #000;
box-shadow: 2px 2px 5px #232a5d;
border-radius: 15px;
}

“Edit ur profile” or “in your network” box

h3 {
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
.extended {
border: 2.5px solid #000;
text-align: center;
margin-bottom: 20px;
margin-top: 15px;
border-radius: 10px;
background-color: #000;
box-shadow: 2px 2px 5px #000;
}

Pfp Border

.avatar {
width: 200px;
margin-right: 20px;
cursor: zoom-in;
image-orientation: from-image;
box-shadow: 2px 2px 5px #232a5d;
border: 2.5px solid #000;
border-radius: 10px;
}

Box around comments

div.box.comments {
background-color: #000;
border: 2.5px solid #000;
border-image-slice: 100%;
border-image-slice: 1;
border-radius: 15px;
padding: 10px 10px;
box-shadow: 2px 2px 5px #121d35;
margin-bottom: 25px;
}

Color and border and stuff of the actual typing comment box

textarea, textarea:focus {
outline: none;
border: 2.5px solid #000;
box-shadow: 2px 2px 5px #000;
border-radius: 10px;
}

border/size of pfp of friends

.fwiendFace img {
border: 2px solid black;
border-radius: 10%;
background-position: center;
display: absolute;
object-fit: cover;
height: 100px;
width: 100px;
}

PArt 2-----