CODES FOR CRD

welcome to our resource carrd! we are finally active and remaking this carrd!
currently ran by dante and you can find me here!
my carrd! curiouscat twitter & other resource carrd

  • no need to cr unless we state otherwise!

  • theres a cbox in the ? section of this crd! please try to send us your code via w3school!

  • these codes work for you as long as you have the option to add embeds!

notice: i will be remaking this carrd soon so stay tuned ~~ sorry for the mess btw!

Text

images!

text!

wobbly

NEWS-TICKER
moving text
TEXT

gradient

bubble

pop text

by @koiwaprimavera

rainbow text
all marquee texts
wipe out text!
text with hover Tooltip text
blinking text

float

mask

shake

scrollboxes!

double border

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
no border

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
rounded edges

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
simple border

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
change bg

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
lace border by @baeyhkun cr!

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
bow border cr @ciarispop if used

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

pixels & dividers!

animals (scroll)



sanrio (scroll)

misc (scroll)

hearts (scroll)

arrows (scroll)

dividers (scroll)

music!

minimalist music player

circle music player

vinyl music player

playlist music player

(cr) ramdons music player

how to!

download your song and upload it to dropbox.
when you upload ur song, click on share and then settings and change it to 'anyone with link' then copy the link and paste it on the code.
when you add the link, make sure to replace the 'www' with 'dl'.
remove everything after '.mp3' in your link.
make sure your link looks like this: https://dl.dropbox.com/s/vmqhaka48469jp4/Viento%20-%20Caifanes.mp3

cursors!

hearts

bubbles

fireworks

sparkle

question mark

star

extra codes & resources!

link / on hover embeds

other embeds

links with resources!

w3schools ★

30secondsofcode ★

mf2fm ★

javascript ★

img bg remover

peeping body

music themes

chatbox

gifs

resource crds

gael's crd drive

cute symbols

favicons, pixels & dividers

menus by ciarispop (please cr)

flip card

questions!


pls check the tutorial section on this crd before asking a question! your answer might be there!

tutorials!


click any of the links below to see the tutorials! have any more questions? leave them in our cbox!

faqs!

about texts!

about images!

others!

how do i edit my embeded texts? ex add shadow, size..

1. add styling tags at the beginning of your code (only if your code doesn't have them
after </head> add the following: <style> </style>

2. add the #tag (we explain what the tag is here) of your embeded text and open and close keys for example:
#news {

}


3. add whatever you want your text to look like in between { } for example

  • for fonts: font-family: arial;

  • for size: font-size: 100px;

  • for boldness: font-weight: bold; / font-weight: normal;

  • for shadows: text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;

  • for color: color: #000;

how to change the font of my text embed?

1. add this in between <style> and </style>:
font-family: Arial;

2. change the 'Arial' to your desired font!


now for fonts from google fonts:

  • go to google fonts and select the font of your liking

  • click on select this style

  • on the header part of the page, (where it says 'browse fonts, icons', etc) click on the button that looks like this:

  • copy the code that starts like this to the HEAD of your code (in between <head> & </head>: <link rel="preconnect"

  • then on your css of the text you want that font to have (style tags) add the font-family thats supposed to show!


example of code:
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
</head>

<style>
#tag {
font-size: 12px;
font-family: 'Fredoka One', cursive;
}
</style>

<div id="tag"> text </div>

hello

how to add a shaking animation to img?

1. add this code to an embed!

2. change the img link in
<div id="img"><img src="link">

how to add double border to any html text?

1. remove <head> and </head> from you code!

2. use this code and add it at the beginning of your code:

<style>
#tag {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-size:200%;
font-weight:bold;
color: #fff;
</style>

3. for the tag part, go to the <span id="tag"> at the end of your code, copy and paste it in you style tags.

4. an example of the tag may be "wipe", but it depends.

5. the rest of the code is up to you! you can change the text-shadow's color to whichever you want by replacing the html color codes (in this case #000 aka black).

6. you can also change the color of the text (in this case #fff aka white).

make sure to copy the entire <style> tag! or else it won't work!


visual explanation! click images to expand!

how to add an image/pixel next to the text?

this only works if your text is in embed!

1. add <img src="image.gif"> anywhere next to your text.

2. replace the "image.gif" with the link of your desired image!

example of code

<div id="fuck">The show must go on. <img src= "https://yokai.crd.co/assets/images/gallery13/0c977ae6.gif?v=152c9d35"> </div>

The show must go on.

how to change the animation of tab title?

typing tab title

1. copy this code to an embed HIDDEN + HEAD

2. replace every "message here" with whatever you want your tab to type.

3. change tb8_speed = 100; to change the typing speed!

4. change the "tb8_makearray (3)" to a different number (1-5!!)

5. change "tb8_delay" to change how long it takes for the message to switch


marquee tab title

1. copy this code to an embed HIDDEN + HEAD

2. replace "This Is My Marquee Text " with the text you want your tab to have.

3. change the '300' to adjust the scrolling speed!

4. remember to add a space after your text or else it will be placed together

how to have a gradient html text?

1. copy this code:

<style>
#grad {
background: linear-gradient(to top, #fff 1%, #FF78B1 100%);
font-style:bold;
font-size:5em;
font-weight:bold;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #FF4593;
}

</style>
<div id="grad">Hello!</div>

2. replace the html color codes in background to change the colors of your gradient!

3. change the size of your text by replacing the "5" with any other number!

4. if you don't want your text to have a border remove both of the orange lines!

THIS TEXT DOES NOT WORK WITH DOUBLE-BORDERS!! IT ONLY WORKS AS A NORMAL HTML TEXT CODE!

example of code above:

Hello!

how to add a zooming in & out animation / pop effect?

1. copy this code to an embed

2. replace the <img src="https://yokai.crd.co/assets/images/gallery13/0c977ae6.gif?v=152c9d35"> with the image of your choice!

3. this works with both images and texts!!

how to add a scrolling box with images & text?

1. copy this code to an embed

2. use <strong> and </strong> for text in bold

3. use <em> and </em> for text in italics

4. where it says border:3px double #FE94C2; change the #FE94C2 to the color of your choice! (make sure its in html)

5. to have a paragraph break use <p> </p> (copy it like that)

6. if you want a line break use <br> </br> (copy it like that)

7. make sure your width is in 100% so it occupies the entire container (this also works for containers with 2-4 divisions)

8. to add an image add:
<img src="image.jpg"> but replace the 'image.jpg' with the link of the image of your choice!

you can use the code here as an example!

how to add a link to an embeded text?

- for a link outside your page (not a section in crd)

1. use this code:
<div id=”tag”><a href=link target="_blank">text with link</a></div>

2. replace link with your link

3. replace text with link with the text!

4. the tag can be replaced with the tag on your 'style' which is explained here

5. example of code above:
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Visit W3Schools!

- for a link inside your page (a section in crd)

1. use this code:
<div id=”tag”><a href=link>text with link</a></div>

2. replace link with your link but just add the #section rather than all the link (carrd.crd.co/#section)

3. replace text with link with the text!

4. the tag can be replaced with the tag on your 'style' which is explained here

5. example of code above:
<div id="fuck"><a href=#tutorials>tutorials!</a> </div>

how to add any embeded text to my crd?

click to expand

how to add a link to an embeded image?

- for a link to open oon another tab (preferably not a section in crd)

1. copy this code on the html (<div> section):

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

2. replace link with the link you want your image to redirect you!

3. replace image link with the link of your image!


- for a link inside your page (a section in crd)

1. copy this code on the html (<div> section):

<a href=“link”>
<img src=image link>
</a>

2. replace link with the link yoy want your image to redirect you (a section inside your carrd)

3. replace image link with the link of your image


NOTE: to add the link of your section, make sure you ONLY add the section. for example: #section01 RATHER than carrd.crd.co/#section01 OR ELSE IT WONT WORK!


example of the code!

<style>
.ji {
width: 100px;
height: auto;
}

</style>

<a href="#tutorials"> <img class=ji src="https://codes.crd.co/assets/images/image11.jpg?v=be1c86da">

how to add text above/under images?

1. select the code for your text and paste it onto your embed on carrd.

2. add this: in between <style> and </style>
position:relative;
bottom:35px;
z-index:1;

you can adjust the 'bottom' depending on your picture.
negative numbers work best for text above image

you can also just copy the same code on the link down below!


example of code

<style>

#hellaur {
position: relative;
bottom: -10px;
z-index: 1;
font-family: times;
font-size: 20px;
font-weight: bold;
color: white;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}

</style>

<div id="hellaur"> hello </div>

hello

how to add things floating in the background?

1. copy this link and paste it onto an embed HIDDEN + HEAD

2. replace the in var charc='♡' with the text/symbol you want!

3. replace the #ffffff in var colour="#ffffff"; with the color of your choice!

4. make sure to add this embed in your page and NOT IN A CONTAINER!

how to add double border to my images?

1. copy this code:
<style>
.doble {
border: 3px double #000;
border-radius: 10px;
width: 100px;
height: auto;
}
</style>
<img class=doble src="img link">

2. change the color of the border in the blue part! remember to use a html color code like #000000

3. replace img link with the link of your choice!

4. you can add or delete the border-radius which makes your image have a round border! modify the 'px'.

5. the width and height is up to you BUT i recommend to change the width to 100% so it will fit your container perfectly!

example of the code: