2025-04-01 11:39:14 +08:00
|
|
|
# Brand Identity Business Card
|
2025-04-01 10:36:26 +08:00
|
|
|
|
2025-04-01 11:39:14 +08:00
|
|
|
This is a modern, interactive business card design implemented with HTML, CSS, and JavaScript.
|
2025-04-01 10:36:26 +08:00
|
|
|
|
|
|
|
|
## Features
|
|
|
|
|
|
2025-04-01 11:39:14 +08:00
|
|
|
- Interactive flip animation to show front and back of the card
|
|
|
|
|
- Color theme customization with predefined color options
|
|
|
|
|
- Responsive design that works on different screen sizes
|
|
|
|
|
- Modern, clean aesthetic with attention to typography and spacing
|
|
|
|
|
- Social media icons and contact information
|
2025-04-01 10:36:26 +08:00
|
|
|
|
2025-04-01 11:39:14 +08:00
|
|
|
## Usage
|
2025-04-01 10:36:26 +08:00
|
|
|
|
2025-04-01 11:39:14 +08:00
|
|
|
1. Open `index.html` in any modern web browser
|
|
|
|
|
2. Click the "Flip Card" button to see both sides of the business card
|
|
|
|
|
3. Use the color dots below to change the card's color theme
|
|
|
|
|
4. You can also double-click on the card to flip it
|
2025-04-01 10:36:26 +08:00
|
|
|
|
|
|
|
|
## Customization
|
|
|
|
|
|
2025-04-01 11:39:14 +08:00
|
|
|
To customize this business card for your own use:
|
2025-04-01 10:36:26 +08:00
|
|
|
|
2025-04-01 11:39:14 +08:00
|
|
|
1. Edit the HTML to change the name, title, and contact information
|
|
|
|
|
2. Modify the logo and branding elements in the CSS
|
|
|
|
|
3. Add or remove social media icons as needed
|
|
|
|
|
4. Adjust the color palette by changing the color option values
|
2025-04-01 10:36:26 +08:00
|
|
|
|
2025-04-01 11:39:14 +08:00
|
|
|
## Technologies Used
|
2025-04-01 10:36:26 +08:00
|
|
|
|
2025-04-01 11:39:14 +08:00
|
|
|
- HTML5
|
|
|
|
|
- CSS3 (with variables, flexbox, and transitions)
|
|
|
|
|
- JavaScript
|
|
|
|
|
- Font Awesome for icons
|
|
|
|
|
- Google Fonts (Montserrat and Playfair Display)
|
