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 ^^
MUSIC!
draggable ramdons music player
(as seen in this carrd)
kill bill music player
(as seen in this carrd)
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
old crd
old crd
old crd
shy.crd.co
chicana.crd.co
ꨄ.crd.co
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!
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
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
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
lace border (works for containers and imgs!)
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
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!
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)
thank u alice for showing me how to do this! ♥♥♥