Build a customizable Valentine's Day card using HTML, CSS, and JavaScript! :)
- Open index.html in a browser.
- Edit the text inside the card ("To", "From", and the message).
- Try different theme/background classes on the .
- Add shapes, images, or rearrange the layout.
| 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 |
- Replace the text in index.html.
- Pick a theme and background class.
- Add your own shapes or images.
- Change colors in styles.css.
The heart button increases the like count. Take a look at scripts.js & use it as a template for your own interactions!
- 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!