All of these will work for carrd pro standard (19$)! If you have any questions, you can dm me here!

what to know about embed , text half outside container , bordered container , other text + tap effects , scroll box , scroll box 2 , typing tab title , zoom in and out text , image shake , floating text bg , bordered images , bordered text , music player , blurred link

(Most of these codes are long so you may need to scroll for some)

(scroll) for most of these codes you’ll need to be able to find the element ID #, for this you’d just go to the element’s settings and it’ll show something like “#image01”, “#text01”, etc. to change font , color , size via an embed you’d make a separate embed with this code. then tag the other embed’s text you want with the font etc changed with <ktty>your text</ktty>. if you want to make your text into a site title for outlined text via embed you would just tag it with <h1> </h1> and to make your text bold you could tag with <strong> </strong> for italic you could use <em> </em> and for underline <u> </u> (not sure for underlining). for having links in your embed youd do <a href="https://link.com">link text</a>. if you want to combine your codes (ex. having typing text and it zooming in and out) you can dm me

<style>
ktty {
font-family: Arial;
font-size: 40px;
color: #ff00a9;
}
</style>

Adjust the number at “top: 2.5em;” if needed & change “#text01” to whatever the id of the the desired text is.

<style>
#text01 {
position: absolute;
left: 0;
width: 100%;
top: 2.5em;
z-index: 1000;
}
</style>

This will make the text go halfway outside of your container like shown! You can also make “top” into bottom if you want.

Change “#container01” to what the desired container’s id is & change the color of the border at “#000” and border width at “border: 4px;” to whatever you’d like!

<style>
#container01 {
border: 4px double #000;
border-radius: 5px;
}
</style>

You can also change what type of outline by making “double” into solid , dashed , or dotted. If you want all containers outlined, you could change the “#container01” to “container”

There are two ways that I use to make scroll boxes, the one I usually use is

<style>
#text05 {
height: 160px;
border: 1px solid #FFFFFF00;
overflow:auto;
padding: 0.5px;
width: 100%;
}
</style>

You would change the border exactly how you would when changing a bordered container. If you want it to be a different height just increase or decrease the number at “height: 160px;”.

<div style="height:100px;
border:1px solid #000
;overflow:auto;">text
</div>

You would edit this the same way you would for the other scroll box

Paste the code from here & change each “message here” to what you want , you can also switch speed & delay by changing the numbers at “tb8_speed = 100;” and “tb8_delay = 2000;” & make the embed hidden + head instead of inline

<style>
#text01 {
animation: pop 1s ease-in-out infinite alternate;
}
@keyframes pop {
from {
transform:scale(0.95)
}
50% {
transform:scale(1)
}
to {
transform:scale(0.95)
}
}
</style>

Just change “#text01” to what the desired text’s ID is

<style>
#image01 {
animation: shake 0.5s;
animation-iteration-count: infinite;
}

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>

Just change the image ID and it’ll make the image shake when hovered over. If you want all images to do this just change “#image01” into “img”

Paste the code from here and replace the heart at “var charc='♡';” to change what is floating and color at “var colour="#ffffff";” to whatever u want & make the embed hidden + head instead of inline

<head>
<style>
#image01 {
border: 4px double #000;
margin: auto;
border-radius: 5px;
}
</style>
</head>

You would edit this the same way you would for bordered containers

Make the text(s) you want outlined into site titles (click on the big text that says “text” above where you normally type your text) & it’ll make the text outlined.

<head>
<style>
h1 {
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
}
</style>
</head>

If you want this through an embed just tag with <h1> </h1>. You can change the colors to whatever you want like always

<style>
a:hover {
webkit-filter: blur(1px); /* Chrome, Safari, Opera */
filter: blur(1px);
}
</style>

Just put this in an embed and itll make the link text blurred when you click on it

these are my carrds.. feel free to use them as inspiration or remake, creds would be cool but idm !

crd 1 crd 2 crd 3

My instagram is ilovehyuka34, if you have any questions just dm me there