whimsical.crd.co

When upgrading / renewing your pro plan kindly use my refferal code LOSERS
it'll help me keep this carrd alive :')

Small Cute Blue Gray Pointer

Text

Text

Text

Pixels
Animals

Animals 2



Alphabet Letters

words punctuation etc

unsorted

unsorted 2

unsorted 3

Dividers

extra dividers 1 2 3 4

Codes
Text
Image
Tap Effects
Scrollbox
Hover
Others
Text Preview
NEWS-TICKER

Mask

B

O

U

N

C

Y

WOBBLY TEXT
wow
bubble

Scrollbox Preview
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

dashed 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 text text text text text text text text text text text text text text
lace border by @baeyhkun text text text text text text text text text text text text 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 by @ciarispop text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
scrollbox with image in the background

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

skew scrollbox text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

pink lace 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 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

hello~ text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 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
Expand on hover info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
Image Preview

double border

brown lace border

shaking image

spinning

funky border

heartmask

glitching image

wobbly

pink lace

paper mask

floating

sliding element

lace border

popping img

png img glow

multiple borders

Absolute Positioning

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

to rotate it add transform: rotate(20deg);

What is absolute positioning?

absolute positioning takes an element out of its original place in the page and places it on a different positiong like the top bottom left or right. It can be used for different elements. It can take a while to place the things where you want them to be.

copy the code above and change the element ID to what element you want to change the position of. The element ID can be found in the settings. Element ID examples: #image01, #links01, #container01 etc.

You can change the top: -0.5em; left: -0.5em; to left: -0.5; or right: -0.5; adding the negative symbol will place it opposite to where it is when it does not have a - before the number. It takes a while to get it right so mess around with the values.

You can overlap the items by changing the z-index: 50; to a higher number or a lower number depending on what you want above or below a certain item. The higher the number is it will go on top and if it is lower then it will go below

an example of absolute positioning is above, the pixels are overlapping the image and container because I used absolute positioning :D
Image hovers

rotate hover

saturate

zoom + blur

zoom + blur + rotate

desaturate

zoom + rotate + saturate

These are things that float in the background of your carrd usually you would need to make these the first embed in your carrd for them to work.

btw glenthemes music players no longer works with dropboxpress the images to go to the links :D

1. Press the + button
2. Press add embed
3. Paste the code in the embed
4. You are done.

you should be able to add embeds as long as you have pro standard

how do I change the text style?

Changing the style of the text are usually found between the <style> and </style> tags.You can change the font, font size, font weight, color, and etc

Press images to expand them

font: font-family: arial;
font size: font-size: 100px;
boldness: font-weight: bold; / font-weight: normal;
shadow: text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
color: color: #000;

put them between the <style></style> tags btw like this:

<style>
#poop {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-size: 50px;
font-weight: bold;
color: #ffffff;
font-family: arial;
}
</style>
<div id="poop"> TEXT </div>

1. Put an embed in your carrd
2. Paste the image style of your choice you can find em here
3. Change the img url or the tag to your image tag
4. You are done.

other codes need a img urlTo get a image url you need to upload your image into a site and get the url. I personally use gifyu
after you upload it you just have to change the <img src="link yeah">
to the link of your image

A tag is the #word or whatever that you can find in the begining of a code you want to replace that to your image tag which can be found in the settings

To put gifs beside or within text, your text has to be in an embed (not a regular text element) just put
<img src="image.gif">
anywhere you would like a gif or image, but replace the "image.gif" with the link to the image

The show must go on

To get a image link you can upload it in gifyu or you can left click on a pixel and press copy image adress

you can also use this to add images in your scroll box to adjust the size just add width="" and height="" like this<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

1. Press this link
2. Create a Cbox
3. You are done

To customize a cbox just press look and feel and customize it to your liking. once you click plubish it will give you the embed code

Press images to expand them

1. Paste the code linked here into an embed
2. Find a font you want and download it
3. Upload it in dropbox and copy the link
4. Paste the link into the 'link here' area
5. Change the 'www.' in the dropbox link to 'dl'
6. Add a font name in the 'name here'

To apply the font in your scrollbox or text just place the name of the font in font-family: name;

Example:<style>
@font-face {
font-family: starborn;
src: url(https://dl.dropbox.com/s/5zgb9l9rpahgls7/Starborn.otf);
</style>

Another code for just a text with a specific font link

To put gifs in a scroll box just paste this
<img src="image.gif">
anywhere you would like a gif or image, but replace the "image.gif" with the link to the image

To get a image link you can upload it in gifyu or you can left click on a pixel and press copy image adress

to adjust the size just add width="" and height="" like this<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

Basically just make the settings of the background to position: top the tile: horizontal and then the size make it default or custom depending on your liking.Changing the position to top right or top left will do fine too.

Press images to expand them

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

Use that code and add it to an embed
change the style to what you want it to be and then if you want to apply it put <glub></glub> before and after text that you want to apply it to. like <glub>this</glub>
if you want another one you can change glub to whatever word you want and do the same thing.

I love Switch

Switch is a unit of magicians that strives to be unique led by Natsume Sakasaki. An entertaining group that showcases the unifying power of their worldview through on-stage banter towards their fans.

In terms of their media work, Switch makes the most of their ability to chat by taking on jobs as radio personalities, guests on talk show programs, acting commentators, doing event performances, and by performing on kid-oriented variety shows. Work that utilizes their performance style is their main focus. Their theme color is yellow-green (#A3EA34).

Line break: <br></br> or <p></p>
Italics: <i></i> or <em></em>
Bold: <strong></strong> or <b></b>
Highlight: <mark></mark>
Underline: <u></u>
Line spacing: line-height: 1;
Letter spacing: letter-spacing: 1px;

For things that are not text add
margin: auto;
for text add
text-align: center/left/right;

1. Choose what kind of music player you would like to use
2. Download the song you want you can do this by copying the link and pasting it to ytmp3 and download it or upload it directly to dropbox after.
3. If you downloaded it upload it to dropbox and copy the link
4. Paste the link in the <audio id="audio" src="link here"audio"></audio> that you find in the code and change the 'www' to 'dl' or it will not work.

you can find music players here and in the music section

for music players that don't work with dropbox you can find ways to get links here

1. Make a new embed
2. Paste the code below

<style>
wee {
font-family: Arial;
font-size: 2em;
color: #000000;
}
</style>

3. You can change any of them to your liking!
You can also change the wee and make a bunch more for different text styles

The way you change a text is by adding <wee></wee> and put the text in between it like<wee>Hello!</wee>

These work in scrollboxes

Resource carrds/etc:

DM me if you want your resource carrd added

Coding:
Utility:
Fonts:
Hi my name is Akeru, I'm the owner of this resource carrd. I made this to keep codes etc :D

If you plan on upgrading your carrd plan or renewing it please use my refferal code LOSERS at check out. You could also press this link https://try.carrd.co/losers This costs absolutely nothing and would help me out alot Thank you!

I try my best to check up on this carrd once in a while, so if you have any questions feel free to use the cbox or dm me @harukawanyan

If you want me to add / remove anything feel free to to tell me

I apologize for any links that dont work anymore or any mistakes in this carrd

Thank you for 24k views! <3

update log is in the top right corner

The codes, pixels, and dividers in this carrd are not mine.

update log
created: 11/8/2021

6/13/23 - added new codes and refferal code

5/27/23 - New ish layout + quality of life changes lol + new pixels and dividers

5/28/22 - Theme Change

4/28/22 - added more resource carrds

3/7/22 - Theme change

1/19/22 - Added music players

12/26/21- New layout

12/07/21 - Added dividers

11/29/21 - Added pixels!

11/15/21 - Added tutorials