2025-04-01 09:26:52 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2025-04-01 11:39:14 +08:00
|
|
|
<title>Brand Identity Business Card</title>
|
2025-04-01 09:26:52 +08:00
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
2025-04-01 11:39:14 +08:00
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
|
2025-04-01 09:26:52 +08:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2025-04-01 11:39:14 +08:00
|
|
|
<div class="container">
|
|
|
|
|
<div class="card-container">
|
|
|
|
|
<div class="card front">
|
|
|
|
|
<div class="logo">
|
|
|
|
|
<div class="logo-symbol">A</div>
|
|
|
|
|
<div class="logo-text">ACME</div>
|
2025-04-01 09:26:52 +08:00
|
|
|
</div>
|
2025-04-01 11:39:14 +08:00
|
|
|
<div class="tagline">Creative Solutions</div>
|
|
|
|
|
<div class="pattern"></div>
|
2025-04-01 09:26:52 +08:00
|
|
|
</div>
|
2025-04-01 11:39:14 +08:00
|
|
|
<div class="card back">
|
|
|
|
|
<div class="info">
|
|
|
|
|
<h2 class="name">ALEX JOHNSON</h2>
|
|
|
|
|
<p class="title">Creative Director</p>
|
|
|
|
|
<div class="divider"></div>
|
|
|
|
|
<div class="contact">
|
|
|
|
|
<p><i class="fas fa-phone"></i> (555) 123-4567</p>
|
|
|
|
|
<p><i class="fas fa-envelope"></i> alex@acmecreative.com</p>
|
|
|
|
|
<p><i class="fas fa-map-marker-alt"></i> 123 Design Street, Creative City</p>
|
|
|
|
|
<p><i class="fas fa-globe"></i> www.acmecreative.com</p>
|
2025-04-01 09:26:52 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-04-01 11:39:14 +08:00
|
|
|
<div class="social-icons">
|
|
|
|
|
<i class="fab fa-linkedin"></i>
|
|
|
|
|
<i class="fab fa-twitter"></i>
|
|
|
|
|
<i class="fab fa-instagram"></i>
|
|
|
|
|
<i class="fab fa-behance"></i>
|
2025-04-01 09:26:52 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-04-01 11:39:14 +08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="controls">
|
|
|
|
|
<button id="flip-btn">Flip Card</button>
|
|
|
|
|
<div class="color-options">
|
|
|
|
|
<div class="color-option" data-color="#1a237e" style="background-color: #1a237e;"></div>
|
|
|
|
|
<div class="color-option" data-color="#006064" style="background-color: #006064;"></div>
|
|
|
|
|
<div class="color-option" data-color="#4a148c" style="background-color: #4a148c;"></div>
|
|
|
|
|
<div class="color-option" data-color="#880e4f" style="background-color: #880e4f;"></div>
|
|
|
|
|
<div class="color-option" data-color="#bf360c" style="background-color: #bf360c;"></div>
|
2025-04-01 09:26:52 +08:00
|
|
|
</div>
|
2025-04-01 10:36:26 +08:00
|
|
|
</div>
|
2025-04-01 11:39:14 +08:00
|
|
|
</div>
|
2025-04-01 09:26:52 +08:00
|
|
|
|
2025-04-01 10:36:26 +08:00
|
|
|
<script src="script.js"></script>
|
2025-04-01 09:26:52 +08:00
|
|
|
</body>
|
|
|
|
|
</html>
|
