WELCOME!

here are some really cool codes i haven't seen anywhere else, so i wanted to share them here! credit isn't necessary, since these codes were inspired by other people's sites and carrds, but please share these codes ^^

TEXT!

ib android.crd.co


B

o

u

n

c

y

T

e

x

t


Gradient Border

Floating Text

Image Border

HOVER!

Rubber Band

Expand

ib new.ju.mp


Rainbow #1

Image Mask

ib teaclub.crd.co
(does not work in this carrd)

Wipe Sideways

more to be added

about & more!

hello! my name is ximena (aka fondant, gael, & blanca) and this is my resource carrd, to beautify your websites and carrds! you may know me as an admin in codes.crd.co but this carrd is more of a bookmark for things i like ~

my dnfi criteria in my personal carrd doesn't apply to this carrd so go nuts

also note i am in high school and community college so i won't always be able to help 24/7 BUT the quickest way to reach me is through tumblr! @jellysites

other ways to reach me:

here are some carrds ive made that i like u can use as inspo or remake them just cr me

more carrds

1. copy the code to your website
2. use ctrl+f and search for "stars[j]=createDiv('*', 13);"
3. replace the * symbol with your desired symbol or text
4. done!

video tutorial

pro standard
1. copy this code
2. add ur img link where it says src="link-here"
3. adjust -webkit-mask-size if needed
4. done!

pro plus
1. copy this code
2. add the code on a crd emebed and remove the <img> tags
3. go to ur pics settings and add "kitty" to classes
4. adjust -webkit-mask-size if needed
5. done!

faq
how do get an img link on mobile? ~ its best if you use imgur or dropbox! on imgur, ur link format should be https://i.imgurlink.png

pro standard
1. copy this code
2. add ur img link where it says src="link"
3. done!

pro plus
1. copy this code
2. add the code on a crd emebed and remove the <img> tags
3. go to ur pics settings and add "lace" to classes and "id=lace" to attributes
4. done!

faq
how do get an img link on mobile? ~ its best if you use imgur or dropbox! on imgur, ur link format should be https://i.imgurlink.png

when i put the lace border, it doesn't go around the img/container right, why? if you changed the width of the img/container on carrd, you have to put the same width in the code. for example, if my container's width is 20, then i have to put 20em where it says .lace

how do i add the lace border to containers? it's a tedious process, but here's how you do it. copy this code:

<style>
#container01 {
border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
}
</style>

and basically thats it but note whatever number your container is u need to label the tag that...so if you want it to apply to ur 2nd container the tag has to be #container02 and so on


end result

.

pro standard
1. copy this code
2. add ur img link where it says src="link"
3. done!

pro plus
1. copy this code
2. add the code on a crd embed and remove the <img> & <figure> tags
3. go to ur pics settings and add "pp" to classes and "id=pp" to attributes
4. done!

faq
how do get an img link on mobile? ~ its best if you use imgur or dropbox! on imgur, ur link format should be https://i.imgurlink.png

how do i change the amount the picture is zoomed in? where it says transform: scale(1.3) rotate(12deg); you can change the zoom where it says scale and the amount its rotated where it says rotate


end result (hover)

u might need to refresh ur page saury

pro standard
1. copy this code
2. follow the instructions given in the code
3. done!

pro plus
1. copy this code:
a:hover, a:active {
transition: 0.5s;
webkit-filter: blur(1px);
filter: blur(1px);
}
2. put it in a carrd embed element
3. edit ur text to ur liking
4. done!

faq
how do i add my carrd sections? ~ add ur carrd sections between the quotation marks it says href

end result

I. II.

since this code uses pure css, it doesn't really matter what crd pro you have! however i dont recommend using this for mobile

1. copy this code
2. follow the instructions given in the code
3. done!

end result (hover)

I.II.III.
0 50%, 100% 50%, 100% 100%, 0 100%

pro standard
1. copy this code
2. follow the instructions given in the code
3. done!

pro plus
1. copy this code
2. add the code on a crd emebed and remove the <div> tags
3. go to ur text/container settings and add "scroll" to classes and "id=scroll" to attributes
4. done!

faq
how do i center my scrollbox? ~ simply add margin:auto;

end result

custom gif scrollbar! text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text

FONTS!


my personal fav carrd/standard fonts
u can also get these from google fonts!

Georgia

Arimo

Fredoka One

Times New Roman

Grandstander

Gaegu

Baloo

Inter

Gamja Flower

Rammetto One

Heebo

Mali

Didact Gothic

Shirkhand

HOW-TO'S!

to see the tutorials, click any of the links below!
if you have any other questions, ask them here or here!

i would appreciate it if you give me credit for my codes or if you repost any of the pastebins, but it isnt necessary

RESOURCES!

♡ = fav

fonts

dafont ♡ where i get most of my fonts
cooltext cool text for non carrd pro users
google fonts easy to use and simple fonts
asterism-m.com cute fonts cr asterism if used though


coding

w3schools ♡ holy grail of tutorials
html & css tutorials videos that really helped me w basic coding
cute cursors use them all the time
html basics teaches the basics of html in a simple way


carrds

codes.crd.co ♡ ofc i like the one im an admin in
xyz.crd.co very good pixels and admins are so nice
swaggy.crd.co really good tips for beginners
yokai.crd.co probably the first resource carrd ever made
teaclub.crd.co ♡ very unique and cool codes
gnome.crd.co ♡♡♡ probably my fav resource carrd
callie.crd.co best tutorials any resource carrd has
wonderhoi.crd.co ♡ admin is so nice and has good tutorials
lili.crd.co very cute pixels and codes


pixels, dividers, etc

keep it cute ♡ where most of my dividers come from
a bunch of theme stuff masterpost ♡ provides other stuff as well
Dividers, Banners, Border, Headers, & Bottoms basically everything
dividers masterpost a huge list of dividers from almost everywhere
dividers/banners really cute and unique ones
engram pixel ♡♡♡ where i get most of my stuff
angelnet.velvet super cute bgs but website is in japanese
decome.lolipop.jp ♡♡ super cute pixels


etc

premade css animation codes ♡♡♡ so good
gradient for backgrounds
fondant's doll media ♡♡♡♡
doll maker ♡♡
blur image edges w out css
ed's carrd folder
backgrounds
kawaii materials eyestrain warning
eris gifs eyestrain warning
glitter-graphics.com
punycoder
cute kpop icons
jasminnie.weebly.com
cute kpop gifs/pixels
neko cat
secatur (blocklist app)
monster high gifs archive

(also works for neocities)

1. click on any font you want to add here
2. copy paste ur code
3. put ur text between the <div> tags
4. done! you can also edit the color, size, etc

if you want to add a custom font from another website,
check out this tutorial

heres an example! (click to expand)

method one
1. click on any font you want to add here (im using lovely)
2. remove everything EXCEPT everything inside @font-face
3. insert your code inside a carrd embed element
4. go to your text settings and click on styles and add the font-family in your properties
5. done!

method two (recommended)
1. click on any font you want to add here (im using lovely)
2. remove the <div> tags
3. insert your code inside a carrd embed element
4. go to your text settings and click on embed and add whatever you named ur font code
5. done!

if you want to add a custom font from another website,
check out this tutorial

heres some examples! (click to expand)

method one

method two

instead of using @font-face, google does all the work for you!

1. go to google fonts and select the font you want (im using limelight)
2. click on "select this style"
3. where it says "use on font" select the <link> one
4. copy paste inside the <head> tags
5. copy paste the font-family provied into the id (or if you have pro plus, follow this tutorial and remove the @font-face and add the <link> before the <style> tags)
6. done!

heres some examples! (click to expand)

pro standard

pro plus

video tutorial

example: xochi.crd.co

1. go to the background settings of ur carrd
2. make ur divider the background of the entire carrd
3. set it to top left (or wherever you want it)
4. set the size to default and the tile to horizontal
5. change the transparency color to whatever you want
6. done!

heres an example! (click to expand)

note, it's best if you have a computer or laptop to do this

1. choose the font you want (im using hanging letters)
2. unzip the file on your computer (theres many tutorials on youtube!)
3. upload the .otf or .ttf font onto dropbox
4. copy paste the link
5. remove www. from the front and replace it with dl, then remove the ?dl=0 on the back
6. follow either this tutorial or this tutorial on how to add custom fonts to ur site but heres an outline on how to do it

<style>
@font-face {
src: url(dropbox url here);
font-family: what you want the font to be called here;
}
</style>

heres an example! (click to expand)


note, it's best if you have a computer or laptop to do this

1. use this website to search for the html-code of the symbols you want (for example, if i want my bg to contain ♥ & ♡, the codes i would be 9825 & 9829)
2. use ctrl+f and search for "var snowflakes=new Array"
3. replace the number inside the parenthesis with ur html codes (for all of them)
4. done!

video tutorial

note, it's best if you have a computer or laptop to do this

1. use this website to search for the html-code of the symbol you want (for example, i want to have a cursor, so the code will be 9733)
2. use ctrl+f and search for "charcode"
3. replace the number inside the parenthesis with ur html code (for all of them)
4. done!

heres an example! (click to expand)

video tutorial

thank u alice for showing me how to do this! ♥♥♥