whimsical.crd.co Open in urlscan Pro
172.64.150.187  Public Scan

Form analysis
0 forms found in the DOM

Text Content

whimsical.crd.co

--------------------------------------------------------------------------------

 * Pixels
 * Dividers
 * Codes
 * Tutorials
 * Resources
 * Admin

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





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
Pop text by @koiwaprimavera

Wobbly

marquee

News ticker

Gradient

Bubble

Text with hover

Bouncy text

Rubberband

Floating

Shake

Text mask

gradient 2

stroke

light up text

blinking

sideways bounce

tilting text

pulsing text

text with link

glitching text

color changing flickering text
Image
Double Border

Funky Border

Pink Lace Border

Lace Border by @baeyhkun

Brown lace border

Transparent image glow

Paper mask

Heart mask

Popping Image

Shaking image

Glitch

Floating

Spinning

Wobbling

Sliding in element

Mutiple colors border

3d effect

twitching image

image preview allows you to get the links as well just press the text
Tap Effects
Hearts

Bubbles

Fireworks

Sparkle

Question mark

Star

Image Clicksplosion

Cursors
Scrollbox
Double Border

No border

Rounded borders

Simple Border

Background

Lace border by @baeyhkun

Bow border by @ciarispop

Scrollbox with image as the background

skew scrollbox

Expanding scrollbox

Scrollbox with mark / buttons

pink lace border

dashed border

scrollbox with box shadow inset
Hover
Hover spacing

Rainbow Hover

Italic Hover

Wipedown

Blur

Enlarge

Saturate

custom selection
Others
Absolute positioning

Image hovers

Menus

Things in the background

Alert box when page open

Peeping image / body

typing tab title

Scrolling page title

Music

old web scrollbar

draggable elements

7.css scrollbar
 * Text Preview
 * Scrollbox Preview
 * Image Preview


Text Preview
Pop text
NEWS-TICKER


MASK

B

O

U

N

C

Y

WOBBLY TEXT
wow
text with hover Tooltip text
Gradient
rubber band
Shake
marquee text
bubble
Gradient 2
floating


LIGHT-UP



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.

Blobs

Snowflakes

Bubbles

Rain

Fireworks

Blobs in a jar

Star space

Falling hearts like snowflakes

 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 

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


Basic tutorials

 * how to add embeded text

 * links to embedded text

 * change font size, color etc of embedded texts

 * how to add embedded images

 * links to embedded images

 * image next to text

 * how to add and customize cbox

 * custom fonts

 * image in scrollbox

 * links in scrollboxes

Other tutorials

 * divider on top of page (like in this carrd)

 * two fonts in scrollbox

 * scrollbox functions

 * how to add music player

 * aligning things

 * text styling

 * make a container scrollable

 * make one column of a container scrollable

 * dotted links



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

Links to other Websites

<div id=”tag”><a href=link target="_blank">text with link</a></div>

Links to other pages in carrd

<div id=”tag”><a href=link>text with link</a></div>

replace the link with the link you want for a link to a page in carrd you must
only put #info do not put the actual link or it won't work

you can also use them for links in scrollboxes just remove <div ID="tag"> and
</div>



what is a tag?
in the image you can see #fuck and in that embed it is the tag so you want to
replace the tag with whatever your tag isfor scrollboxes you can remove the
whole <div id="tag" thing and just have <a href=link>text with link</a>

 * 

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

Links to other Websites

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

Links to other Websites

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

--------------------------------------------------------------------------------

Pretty self explanitory but yeah add ur link in the "link" and your image url in
the img link and your donealso for the link to page in carrd you must only use
#section not the actual link to the page.



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">




LINK TO OTHER WEBSITES

<a href=link target="_blank">text with link</a>


LINK TO PAGE IN CARRD

<a href=link>text with link</a>

replace the link with the link you want for a link to a page in carrd you must
only put #info do not put the actual link or it won't work


 * 

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

Code



pochi   gnome   sweetie   bubblegum   fitz   watermelon  hauntedmansion  
marigold  ishimori  floras   lifted  scripted  lovespace  noodles  almond   
wesource   html   noviecita   archivos   allison   mist   fyodor   swan   galaxy
  gardenia   riti   limonysal   html basics   frogpop   hypeboy   mantis  

Graphics



xyz   autism   pixelbank   literature   supplies  terror  vermillion  yokai  
phone charm   warabi   barbara   graphic   fruitbat   tomomi   twst  

Rentry



butter   grime   resources  
Coding:
w3schools   DHTML   Javascript   CSS   HTML   30secondsofcode   HTML scrollbox  
custom scrollbar maker
Utility:
ytmp3   bg remover   website counter 1   website counter 2   img upload  
waifu2x   img color picker   html color codes   pixel masterpost   pokemon
pixels   cbox   enstars instrumentals
Fonts:
Dafont   1001 fonts   font space   google fonts   japanese font   cool text (for
non pro users)

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
Back Index
chatbox
Feel free to ask any questions you may have! I'll try my best to respond.