Virtual Valentine Workshop

Build a customizable Valentine's Day card using HTML, CSS, and JavaScript! :)

Getting Started

1. Open index.html in a browser.
2. Edit the text inside the card ("To", "From", and the message).
3. Try different theme/background classes on the .
4. Add shapes, images, or rearrange the layout.

Style Cheat Sheet (Classes You Can Mix & Match)

Category	Class	What it does
Theme	theme-rose	Classic pink theme
Theme	theme-plum	Purple/plum theme
Theme	theme-mint	Mint theme
Background	bg-gradient	Soft gradient background
Background	bg-confetti	Confetti dot background
Text	headline	Large title text
Text	message	Body text style
Text	label	Small label style
Highlight	highlight	Accent color for names
Buttons	btn-primary	Solid accent button
Buttons	btn-outline	Outlined button
Shapes	shape-circle	Circle shape
Shapes	shape-square	Square shape
Spacing	gap-sm / gap-md / gap-lg	Adds gaps between items
Spacing	pad-sm / pad-md / pad-lg	Adds padding to a container
Layout	row	Horizontal layout with wrap
Card	card	Basic card container

Beginner Steps

• Replace the text in index.html.
• Pick a theme and background class.
• Add your own shapes or images.
• Change colors in styles.css.

JavaScript Example

The heart button increases the like count. Take a look at scripts.js & use it as a template for your own interactions!

Some more ideas

• Animate shapes or text.
• Create your own theme.
• Swap in your own images.
• Customize the Dark Theme in styles.css, or add your own theme buttons!