Create Luxury Business Card Template with HTML, CSS, and JavaScript

Faraz

By Faraz -

Learn to create a modern, luxury business card using HTML, CSS, and JavaScript. Perfect for company branding.

Join us on Telegram
create-luxury-business-card-template-with-html-css-and-javascript.webp
Read Alsocreate-meme-generator-using-html-css-and-javascript.webpCreate Meme Generator Using HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

A well-designed business card gives a great first impression. Whether you’re a startup, a personal brand, or an established company, a digital business card can boost your online presence. In this guide, we will show you how to create a luxury company business card template using HTML, CSS, and JavaScript.

This digital card design looks modern, includes flip animations, and has a floating particle background—perfect for creating an elegant feel for any premium brand.

Prerequisites

Before you begin, make sure you have the following:

  • A basic understanding of HTML, CSS, and JavaScript
  • A code editor (like VS Code)
  • A web browser (like Chrome) to test your design
  • Internet connection to load external fonts and icons

Source Code

Step 1 (HTML Code):

To get started, we first need to create a basic HTML file. In this file, we will include the main structure for our luxury company business card template. Lets break down the HTML code step by step:

1. HTML Boilerplate and Metadata

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luxury Company Business Card Template</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;900&family=Cinzel:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
  • Declares the HTML5 document type.
  • Sets the language to English.
  • Uses UTF-8 character encoding for broad compatibility.
  • Makes the site responsive on all devices.
  • Sets the page title.
  • Includes:
    • Font Awesome for icons.
    • Google Fonts (Montserrat & Cinzel) for styling text.
    • External CSS stylesheet (styles.css) for custom design.

2. Body Content Structure

<body>
    <!-- Animated Background Particles -->
    <div class="particles" id="particles"></div>
  • A div with ID particles is placed at the top, used for an animated background effect.
  • This will be styled or animated using JS or CSS.

3. Business Card Container

<div class="card-container">
    <div class="card" id="business-card">
  • Container for the business card.
  • Card is uniquely identified with the ID business-card.

4. Front Side of the Business Card

<div class="card-front">
    <div class="front-content">
        <div>
            <div class="logo-container">
                <div class="logo-placeholder">
                    <i class="fas fa-crown"></i>
                </div>
                <div class="company-info">
                    <div class="company-name">ELYSIUM CAPITAL</div>
                    <div class="tagline">Wealth Beyond Measure</div>
                </div>
            </div>
        </div>
        <div class="card-footer">Private Client Services</div>
    </div>
    <!-- Decorative Corners -->
    <div class="corner-decoration corner-tl"></div>
    <div class="corner-decoration corner-tr"></div>
    <div class="corner-decoration corner-bl"></div>
    <div class="corner-decoration corner-br"></div>
</div>
  • Represents the front side of the business card.
  • Includes:
    • A logo icon (crown) using Font Awesome.
    • Company name and tagline.
    • Footer text: "Private Client Services".
    • Decorative corner elements for a luxurious aesthetic.

5. Back Side of the Business Card

<div class="card-back">
    <div class="back-content">
        <div class="contact-section">
            <div class="contact-info">
                <div class="contact-item"><i class="fas fa-phone-alt"></i> +1 (212) 555-8899</div>
                <div class="contact-item"><i class="fas fa-envelope"></i> [email protected]</div>
                <div class="contact-item"><i class="fas fa-globe"></i> www.elysiumcapital.com</div>
                <div class="contact-item"><i class="fas fa-map-marker-alt"></i> 650 Fifth Ave, 32nd Floor, NYC</div>
            </div>
        </div>
        <div class="social-section">
            <div class="social-icons">
                <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
                <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
                <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
                <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
            </div>
        </div>
    </div>
</div>
  • Represents the back side of the business card.
  • Contains:
    • Contact info: Phone, email, website, and address.
    • Social media icons using Font Awesome (LinkedIn, Twitter, Instagram, Facebook).
    • All elements are styled and linked accordingly.

6. JS Scripts for Animation

<!-- GSAP for Advanced Animations -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
  • Includes GSAP (GreenSock Animation Platform) for advanced animations.
  • script.js is a custom JS file to control animations or interactions on the card.
Read Alsocreate-id-card-generator-using-html-css-and-javascript.webpCreate ID Card Generator Using HTML, CSS, and JavaScript

Step 2 (CSS Code):

Once the basic HTML structure of the luxury company business card is in place, the next step is to add styling to the card using CSS. Lets break down the CSS code step by step:

1. Root Variables

:root {
  --primary-color: #1a1a2e;
  --secondary-color: #16213e;
  --accent-color: #e94560;
  --gold-light: #f5d7a1;
  --gold-dark: #c4a35a;
  --text-light: #f8f8f8;
  --text-dark: #222222;
  --card-width: 380px;
  --card-height: 220px;
  --border-radius: 16px;
  --transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
  • Defines CSS variables for colors, sizes, and transitions.
  • Makes it easier to update styles in one place.
  • Used throughout the card for consistent design.

2. Reset and Base Styling

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  • Removes default spacing and padding.
  • Applies box-sizing: border-box to simplify layout calculations.
body {
  font-family: 'Montserrat', sans-serif;
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  color: var(--text-light);
  overflow-x: hidden;
}
  • Uses gradient background and centers content.
  • Sets up full-screen layout with elegant font and color scheme.

3. Anchor Tag Style

a {
  text-decoration: none;
}
  • Removes underlines from links.

4. Particle Background

.particles { /* and .particle class */ }
  • Covers full screen with fixed position.
  • .particle has blur, opacity, and floating animation.
  • @keyframes float animates particles from bottom to top while rotating.

5. Card Container

.card-container {
  perspective: 2000px;
  width: var(--card-width);
  height: var(--card-height);
  position: relative;
}
  • Creates 3D space for card flipping.
  • Uses perspective for depth.

6. Flip Animation (Card)

.card {
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(...);
  cursor: pointer;
}
.card.flipped {
  transform: rotateY(180deg);
}
  • Enables flipping effect on click using rotateY.
  • Smooth transition with cubic-bezier for bounce feel.

7. Card Sides (Front & Back)

.card-front,
.card-back {
  backface-visibility: hidden;
  border-radius: var(--border-radius);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
  padding: 25px;
}
  • Applies same style to both sides.
  • Uses shadows and padding for a luxury look.
  • Hidden backface makes flipping clean.

8. Card Front Design

.card-front {
  background: linear-gradient(...);
  position: relative;
}
.card-front::before {
  background: radial-gradient(...);
  animation: rotate 20s infinite;
}
.card-front::after {
  creates inner glossy layer.
}
  • Gradient background with animated shine effect.
  • Uses ::before & ::after for layered luxury effects.

9. Front Content Styling

.logo-placeholder {
  background: linear-gradient(...gold);
  box-shadow: golden glow.
}
.company-name {
  text gradient + shadow.
}
.tagline {
  light gold text, uppercase, letter spacing.
}
.card-footer {
  fancy underline using ::after.
}
  • Stylish company name and tagline.
  • Logo area uses golden gradient and shadow.
  • Footer adds branding detail.

10. Card Back Design

.card-back {
  background: dark blue gradient;
  transform: rotateY(180deg);
}
.card-back::before {
  background image (encoded SVG pattern);
  adds subtle texture.
}
  • Matches luxury theme with dark texture.
  • Background pattern enhances visual richness.

11. Contact Section Styling

.contact-info {
  gap between items.
}
.contact-item {
  flex row layout, blur background, hover effect.
}
.contact-item:hover {
  highlights with border and movement.
}
.contact-item i {
  golden icon style.
}
  • Professional layout for phone, email, website, location.
  • Hover animation gives interactive feel.

12. Social Media Icons

.social-icons {
  gap between icons.
}
.social-icon {
  gold-themed circle with shadows.
}
.social-icon:hover {
  accent color glow + transform scale.
}
  • Well-designed icons for LinkedIn, Twitter, etc.
  • On hover: red-pink glow with slight lift animation.

13. Corner Decorations

.corner-decoration {
  placed on card corners using classes: corner-tl, corner-tr, etc.
  gold border touches.
}
  • Adds luxurious border effects to each card corner.

14. Responsive Design

@media (max-width: 480px) {
  :root {
    --card-width: 320px;
    --card-height: 200px;
  }
  .card, .card-front, .card-back {
    position: relative;
    transform: none;
  }
  .social-section {
    flex-direction: row;
    align-items: center;
  }
}
  • Optimizes layout for mobile.
  • Disables 3D flip for smaller screens.
  • Social icons switch to horizontal layout.
/* Base Styles */
:root {
  --primary-color: #1a1a2e;
  --secondary-color: #16213e;
  --accent-color: #e94560;
  --gold-light: #f5d7a1;
  --gold-dark: #c4a35a;
  --text-light: #f8f8f8;
  --text-dark: #222222;
  --card-width: 380px;
  --card-height: 220px;
  --border-radius: 16px;
  --transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  color: var(--text-light);
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

/* Floating Particles Background */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  background: rgba(233, 69, 96, 0.3);
  border-radius: 50%;
  filter: blur(1px);
  animation: float linear infinite;
}

@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) rotate(720deg);
    opacity: 0;
  }
}

/* Card Container */
.card-container {
  perspective: 2000px;
  width: var(--card-width);
  height: var(--card-height);
  position: relative;
  margin: 20px;
  transform-style: preserve-3d;
}

/* Card Flip Animation */
.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.4, 0.2, 0.2, 1);
  cursor: pointer;
  transform-origin: center center;
}

.card.flipped {
  transform: rotateY(180deg);
}

/* Card Sides */
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  top: 0;
  left: 0;
}

/* Front Side - Luxury Design */
.card-front {
  background: linear-gradient(
    145deg,
    var(--primary-color),
    var(--secondary-color)
  );
  transform: rotateY(0deg);
  border: 1px solid rgba(245, 215, 161, 0.1);
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.card-front::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(245, 215, 161, 0.1) 0%,
    transparent 70%
  );
  animation: rotate 20s linear infinite;
  z-index: 0;
}

.card-front::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--border-radius) - 1px);
  background: linear-gradient(
    145deg,
    rgba(26, 26, 46, 0.8),
    rgba(22, 33, 62, 0.9)
  );
  z-index: 1;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.front-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.logo-container {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.logo-placeholder {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: var(--primary-color);
  font-size: 22px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(245, 215, 161, 0.3);
}

.company-info {
  border-left: 2px solid var(--gold-dark);
  padding-left: 12px;
}

.company-name {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(to right, var(--gold-light), var(--gold-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tagline {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: 5px;
}

.card-footer {
  align-self: flex-end;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(245, 215, 161, 0.6);
  text-transform: uppercase;
  position: relative;
}

.card-footer::after {
  content: '';
  position: absolute;
  top: -10px;
  right: 0;
  width: 40px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-dark));
}

/* Back Side - Luxury Design */
.card-back {
  background: linear-gradient(145deg, #0a0a1a, #101a3a);
  transform: rotateY(180deg);
  border: 1px solid rgba(245, 215, 161, 0.1);
  position: absolute;
  overflow: hidden;
  z-index: 1;
}

.card-back::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyMzMsMTk2LDEwNiwwLjAzKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==');
  opacity: 0.3;
}

.back-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
}

.contact-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-item {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: var(--text-light);
  transition: var(--transition);
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(10, 10, 26, 0.4);
  backdrop-filter: blur(2px);
  border-left: 2px solid transparent;
}

.contact-item:hover {
  border-left: 2px solid var(--accent-color);
  background: rgba(233, 69, 96, 0.1);
  transform: translateX(5px);
}

.contact-item i {
  width: 20px;
  color: var(--gold-light);
  margin-right: 10px;
  text-align: center;
  font-size: 12px;
}

.social-section {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.social-icons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(245, 215, 161, 0.1),
    rgba(196, 163, 90, 0.2)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  font-size: 12px;
  transition: var(--transition);
  border: 1px solid rgba(245, 215, 161, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.social-icon:hover {
  background: linear-gradient(135deg, var(--accent-color), #ff6b81);
  color: var(--text-light);
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 6px 20px rgba(233, 69, 96, 0.4);
  border-color: transparent;
}

/* Decorative Elements */
.corner-decoration {
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: var(--gold-dark);
  border-style: solid;
  border-width: 0;
  opacity: 0.6;
}

.corner-tl {
  top: 10px;
  left: 10px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.corner-tr {
  top: 10px;
  right: 10px;
  border-top-width: 2px;
  border-right-width: 2px;
}

.corner-bl {
  bottom: 10px;
  left: 10px;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.corner-br {
  bottom: 10px;
  right: 10px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

/* Responsive Design */
@media (max-width: 480px) {
  :root {
    --card-width: 320px;
    --card-height: 200px;
  }

  .card-container {
    height: auto;
  }

  .card {
    transform: none;
    height: auto;
  }

  .card-front,
  .card-back {
    position: relative;
    transform: none;
    backface-visibility: visible;
    margin-bottom: 25px;
  }

  .card.flipped {
    transform: none;
  }

  .back-content {
    flex-direction: column;
  }

  .social-section {
    width: 100%;
    flex-direction: row;
    align-items: center;
    margin-top: 15px;
  }

  .social-icons {
    flex-direction: row;
  }
}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript. Lets break down the JavaScript code step by step:

1. Particle Animation Generator

function createParticles() {
  const particleCount = 40;
  for (let i = 0; i < particleCount; i++) {
    const particle = document.createElement('div');
    particle.classList.add('particle');
    ...
    particlesContainer.appendChild(particle);
  }
}
  • Dynamically creates 40 floating particles using <div> elements.
  • Each particle has:
    • Random size (2px–8px)
    • Random horizontal position (0–100%)
    • Random delay (0–15s)
    • Random animation duration (10–25s)
    • Random opacity (0.1–0.5)
  • Sets animation name float (defined in CSS)
  • Appends them to the particle container.

2. Initialize Particles

createParticles();
  • Calls the function to render and animate all particles when the page loads.

3. Card Flip Control Variables

let isFlipped = false;
let isAnimating = false;
  • isFlipped: tracks if the card is showing its back.
  • isAnimating: prevents multiple animations at once.

4. Card Flip on Click

card.addEventListener('click', toggleFlip);
  • Attaches a click event listener to flip the card.

5. Swipe Support (Touch Devices)

let touchStartX = 0;
let touchEndX = 0;

card.addEventListener('touchstart', ...);
card.addEventListener('touchend', ...);
  • Detects swipe left/right on mobile:
    • Swipe left ➝ flip the card
    • Swipe right ➝ unflip the card

6. Swipe Handler

function handleSwipe() {
  if (touchEndX < touchStartX - 50 && !isFlipped && !isAnimating) {
    toggleFlip(); // Swipe left
  } else if (touchEndX > touchStartX + 50 && isFlipped && !isAnimating) {
    toggleFlip(); // Swipe right
  }
}
  • Checks swipe direction and flip status.
  • Prevents flipping during ongoing animations.

7. Flip Animation with GSAP

function toggleFlip() {
  if (isAnimating) return;
  isAnimating = true;
  isFlipped = !isFlipped;

  if (isFlipped) {
    card.classList.add('flipped');
  } else {
    card.classList.remove('flipped');
  }

  gsap.to(card, {
    duration: 0.8,
    rotateY: isFlipped ? 180 : 0,
    ease: 'power3.out',
    onComplete: () => {
      isAnimating = false;
    },
  });
}
  • Prevents animation overlap using isAnimating.
  • Toggles the card’s flipped class.
  • Uses GSAP animation to smoothly rotate the card on the Y-axis.
  • Animation duration: 0.8 seconds, with power3.out easing.

8. Logo Floating Animation

gsap.to('.logo-placeholder', {
  y: -5,
  duration: 2,
  repeat: -1,
  yoyo: true,
  ease: 'sine.inOut',
});
  • Makes the logo icon float up and down smoothly in a loop.
  • Uses GSAP:
    • y: -5 ➝ moves it upward 5px
    • repeat: -1 ➝ infinite loop
    • yoyo: true ➝ moves back to original position
    • ease: 'sine.inOut' ➝ natural smooth motion
document.addEventListener('DOMContentLoaded', () => {
  const card = document.getElementById('business-card');
  const particlesContainer = document.getElementById('particles');

  function createParticles() {
    const particleCount = 40;
    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement('div');
      particle.classList.add('particle');

      // Random properties with better distribution
      const size = Math.random() * 6 + 2;
      const posX = Math.random() * 100;
      const delay = Math.random() * 15;
      const duration = Math.random() * 15 + 10;
      const opacity = Math.random() * 0.4 + 0.1;

      // Apply styles
      particle.style.width = `${size}px`;
      particle.style.height = `${size}px`;
      particle.style.left = `${posX}%`;
      particle.style.animationDelay = `${delay}s`;
      particle.style.animationDuration = `${duration}s`;
      particle.style.opacity = opacity;
      particle.style.background = `rgba(233, 69, 96, ${opacity})`;

      // Set individual animation name
      particle.style.animationName = 'float';

      particlesContainer.appendChild(particle);
    }
  }

  // Initialize particles
  createParticles();

  // Card flip state
  let isFlipped = false;
  let isAnimating = false;

  // Click/tap to flip
  card.addEventListener('click', toggleFlip);

  // Swipe detection for mobile
  let touchStartX = 0;
  let touchEndX = 0;

  card.addEventListener(
    'touchstart',
    (e) => {
      touchStartX = e.changedTouches[0].screenX;
    },
    { passive: true }
  );

  card.addEventListener(
    'touchend',
    (e) => {
      touchEndX = e.changedTouches[0].screenX;
      handleSwipe();
    },
    { passive: true }
  );

  function handleSwipe() {
    if (touchEndX < touchStartX - 50 && !isFlipped && !isAnimating) {
      // Swipe left - flip card
      toggleFlip();
    } else if (touchEndX > touchStartX + 50 && isFlipped && !isAnimating) {
      // Swipe right - unflip card
      toggleFlip();
    }
  }

  function toggleFlip() {
    if (isAnimating) return;

    isAnimating = true;
    isFlipped = !isFlipped;

    if (isFlipped) {
      card.classList.add('flipped');
    } else {
      card.classList.remove('flipped');
    }

    // Animate with GSAP
    gsap.to(card, {
      duration: 0.8,
      rotateY: isFlipped ? 180 : 0,
      ease: 'power3.out',
      onComplete: () => {
        isAnimating = false;
      },
    });
  }

  // Floating animation for logo
  gsap.to('.logo-placeholder', {
    y: -5,
    duration: 2,
    repeat: -1,
    yoyo: true,
    ease: 'sine.inOut',
  });
});

Final Output:

create-luxury-business-card-template-with-html-css-and-javascript.gif
Read AlsoCreating a Notes App with HTML, Bootstrap, and JavaScript.jpgCreating a Notes App with HTML, Bootstrap, and JavaScript

Conclusion:

You’ve just learned how to create a luxury company business card template using HTML, CSS, and JavaScript. This project helps you combine visual design with modern code techniques, giving your brand a sleek and professional online identity.

You can now customize it for your company, add real links, and even integrate it with QR codes or contact sharing tools. Don’t forget to test it on mobile and desktop for the best user experience.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: business card, html css card, luxury card design, company card template, create luxury company business card using html and css, animated business card template for company, how to design a modern business card with javascript, responsive business card layout using css
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺