Fitzy's Resources!!!

CODE - TUTORIALS- RESOURCES - CBOX - ME

Updated 4/5/22- Changed a lot of things, added an about me section!

CODES!

Text Effects!

NEWS-TICKER

code here

floating text

code here

Popping

code here

Glowing Text

code here

SHAKE

code here

Pulsing

code here

rubberband

code here

Gradient Text

code here

tilting

code here

BLINKING

code here

B

O

U

N

C

Y

code here

bubbling

code here

wobble

code here

code here

Glitch

code here

Marquee Text Marquee Text Marquee Text Marquee Text Marquee Text

code here

home - back

Image Effects/Borders!

.

code here

code here

.

code here

code here

.

code here

code here

.

code here

code here

code here

.

code here

.

code here

code here

home - back

SCROLLBOXES!

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

code here

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

code here

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

code here

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

code here

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

code here

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

code here

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

code here

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

code here

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

code here

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

code here

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

code here

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

code here

home - back

MUSIC PLAYERS!

home - back

Misc Codes!

dropdown menu

dropdown menu 2

menu appear on hover

typing web title

marquee tab title

TV Filter

img that follows cursor

vhs filter

windows buttons

chatbox

ink wipe effect cred teaclub

Website visit counter

peeping image

alert box

blurred link on hover

webneko

absolute positioning + rotating

img slideshow

image clicksplosion

blurred border on container

gif/image scrollbar

home - back

<style>
#elementID {
position: absolute;
top: -0.5em;
left: -0.5em;
z-index: 50;
}
</style>

<style>
#image01 {
transform: rotate(20deg);
}
</style>

back - home

box-shadow: 0 0 20px 20px black inset;

goes in container style

back - home

BACKGROUND CODES!

floating text/symbol in bg

snow

snowflakes

gathering snow

fireworks

rain

bubbles

stars

image falling in bg cr soleilos

back - home

TUTORIALS!

How does absolute positioning work?

How do headers/footers work?

How do music players work?

how to put custom borders on scrollboxes?

How to style embed text?

how to center embeds without absolute postitioning?

How to put an image/gif next to text?

How to put a link in embed text?

how to put custom font in embed text?

How to put a line break in embedded text?

How to add link to embedded image

My personal carrd tips

As we know, the code for absolute positioning is

<style>
#elementID {
position: absolute;
top: -0.5em;
left: -0.5em;
z-index: 50;
}
</style>

So lets break this down into simple terms.

#elementid is the id of your element. You can find the element id by clicking your text, image, container, etc, and going to the settings button. Go to where it says id. This will show you the id of your image. You can leave it as it is, or change it.

Top and left control the way your element is positioned. The lower the number, the farther it will move in that direction. For example: left: -2em; would move your image to the left, while left: 2em; would move your image to the right. You can change left to right and top to bottom if you want.

Z index is how your image appears in relation to the other elements on your page. If the z index is higher, it will appear in front of other elements. If its lower, it will appear behind them.

home - back

How do Headers/Footers work?

Headers and footers are a way to keep certain elements present on every page of your carrd. First, lets discuss how to create them.

To create a header, first go to +, then #control. It should look something like this.

Then click on the control. It will open a menu. Under type, choose either header marker or footer marker.

When making a header, put it under everything you want to stay on every page. When making a footer, put it before.

After this, add two more sections under your header or footer. Leave the first one as it is. Change the name of the second one to whatever section you want it to take you to. For example, if you wanted to go to the about page, make it #abt or whatever.

It should look something like this:

and you're done!

But Fitz, what if I dont want my header to appear on every section of my carrd?

That's a simple fix! Lets say you dont want your header to appear in the about section of your carrd. Click the about section control (in this case, I would select #deeznuts)

Scroll to the bottom. There, you should see an options section.

Check one of these two boxes! It depends on if you are using a header or a footer. Your header/footer will no longer appear on this section of your carrd!

home - back

How do music players work?

Here's how to change some aspects of your music player! Remember- all music players are different. This is a general tutorial. For more specific questions, vistit my cbox.

How do I change the Title?

Find this (or something similar) in your code!

Change the part that says 'Moonlit Night' (or whatever it says in the code) to your title! for no title- just leave it blank!

How do I change the pixel (for music players with pixels)

Find something that looks like this.

Delete the link in between the quotations. Next- go to a graphics carrd and find a gif you like. Right click it, then press "copy image adress" paste the copied link in between the quotation marks.

How do I add music?

Go to youtube and find your song. Copy the link, and paste it into this website. When it's done, press dropbox. Sometimes this doesn't work. If it doesn't, press download mp3, then right click the downloaded mp3 and press view on dropbox.com.

When you are in dropbox, press copy link/get link or something along those lines on your downloaded music file. It should look something like this.

https://www.dropbox.com/s/hjfvrnterdwca40/Pokemon%20Sun%20%26%20Moon%20-%20Lillie%20Encounter%20Music%20(HQ).mp3?dl=0

If it doesn't, just try copying it a few more times.

Remove the ?dl=0. Replace www with dl.

Find this.

Replace the link in the quotations with the one you made. You're done!

home - back

How to put custom borders on scrollboxes

First, lets find a scrollbox that already has an image border. Lets use our pink bow border from my scrollbox section.

Open the code. Now, find an image border you like. It can be from my images section, or really anywhere you like. Im going to be chosing the pink lace border!

Open both codes. Find border img url in both.

Replace the url from the scrollbox with the border url from the img. And you're done! But you might have to mess around with some settings to make it look good.

home - back

How to style embed text

Add any of these under the style tags of your embedded text.

font-family: Arial;
font-size: 40px;
color: #ff00a9;
font-weight: bold; / font-weight: normal;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;

home - back

How to center embeds

Add margin: auto; under style tags :)

home - back

How to add an image/gif next to text

When using embed text, simply put <img src= "imglink"> next to your embed text!

Tutorial on how to put a gif next to normal text here!

home - back

How to put a link in embedded Text

<div id=”tag”><a href=link target="_blank">text</a></div>

Replace link with either your section name or link outside of page
Replace text with what you want it to be called. for example, if I wanted it to lead to my lovemail page, link would be #lovemail and text would be 'boyfriend' or 'lovemail' or whatever!

home - back

PRO PLUS

Let's start off using this code.

<style>
@font-face {
font-family: cutie;
src: url(https://dl.dropbox.com/s/xo075bh6tbd4f7d/CP.ttf);
}
#cutie {
font-family: cutie;
}
</style>

Now, you can get fonts from a resource carrd, but I personally love dafont's fonts!

When you pick a font you like, press download.

Open the zip file! Find the file ending in .otf or .tff and right click, then transfer to dropbox.

Right click again, then view on dropbox.com

Press share, then create then copy link. Your link should look like this.

https://www.dropbox.com/s/ajfhuqrifa9qxh1/Halloween%20Morning.ttf?dl=0

remove the ?dl=0 and replace www with dl.

Replace the link in red with your new link! Change the font family to whatever you want it to be called.

change #cutie to the id of your text!

PRO STANDARD

repeat the process above, but now use this code.

<style>
@font-face {
font-family: cutie;
src: url(https://dl.dropbox.com/s/xo075bh6tbd4f7d/CP.ttf);
}
#cutie {
font-family: cutie;
}
</style>
<div id="cutie">TEXT HERE></div>

Same process as above, but instead of changing #cutie to the id of your text, put your text in TEXT HERE.

home - back

How to put your custom font in embedded text

Put font-family: YOUR FONT NAME HERE; in the style tags!

Whatever you named your embedded font, thats what it would be called!

home - back

How to create a line break in embedded text

To create
this effect

put <p></p> in between your lines

to create
a space

Put <br> before your new paragraph

home - back

How to add a link to an embedded image

Add this code to the <div> section!

<a href="link" target="_blank">
<img src=image link>
</a>

Replace link with the site/section you want it to take you to, and image link with the link to your image.

home - back

Try not to clutter your carrd with unnescecary elements! As fun as they are, too many elements are hard on the eyes

Adding too many animations can make your carrd very hard on the eyes. Try to limit the amount of animations in your carrd!

Keep your text at a readable size. Especially if you are using a complicated font!

When making a pastel themed carrd, make sure your text isn't too light! It makes it very hard to read. If it is light, keep it on a darker background.

Try to avoid eyestrain carrds. It's a cool aesthetic, but those types of carrds are very rarely reader friendly.

and now for my most important tip...

USE W3SCHOOLS OR LIVEWEAVE.

Both are really great to help you view your code so you dont have to publish and refresh your page a million times. :)

home - back

RESOURCES!

RESOURCE CARRDS

ishimori - resource - cakepop - jellymask - floras - pochi - allison - callie - gnome

GRAPHICS CARRDS

gifs - pixel - barbara

More to be added later!

home

CHATBOX!

home

ABOUT ME!

I'm FITZ! Also known as Jade or fip! I use he/pup/she pronouns and I love carrding. Below are my links! Ill be adding my portfolio soon. Please consider commissioning me! I recently got kicked out and am trying to raise money :)

insta - commission carrd - discord server