Creation of interactive business cards with HTML and CSS ★ Digital marketing agency

Table of contents

Creating interactive business cards with HTML and CSS

In this tutorial, you will learn how to create interactive business cards using HTML and CSS. Business cards are an effective way to display information about you or your business in a concise and engaging way. By adding interactivity, you can add even more appeal and make your cards more memorable.

Basic HTML for the card structure

We will start by creating the basic structure of the card using HTML. We'll use divs to represent different sections of the card, such as the header, image, contact information, etc. Here's a basic example of what it might look like:


<div class="card">
<div class="header">
    <!-- Aquí puedes agregar tu logotipo o nombre -->
  </div>
<div class="image">
    <!-- Aquí puedes agregar una imagen representativa -->
  </div>
<div class="contact-info">
    <!-- Aquí puedes agregar información de contacto como teléfono y correo electrónico -->
  </div>
</div>

Styling the card with CSS

Now that we have the basic structure of the card, it's time to style it with CSS. You can add colours, backgrounds, fonts and other styles to make the card look attractive and represent your personal or business brand. Here's an example of what the CSS could look like to style the card:


.card {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  background-color: #f8f8f8;
  width: 300px;
  margin: 20px auto;
}
.header {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}
.image {
  width: 100%;
  height: 200px;
  background-image: url('imagen.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  margin-bottom: 10px;
}
.contact-info {
  font-size: 16px;
  text-align: center;
}

Adding interactivity with CSS and JavaScript

To make your business cards interactive, you can use CSS and JavaScript. You can add transition effects, such as fading or sliding, when the user hovers over the card. You can also make the card expand or reveal additional information when clicked on. Here is an example of how you could achieve this:


.card:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card.expanded {
  height: auto;
}
.card.expanded .details {
  display: block;
}
.details {
  display: none;
  margin-top: 10px;
}


<div class="card">
<div class="header">
    <!-- Aquí puedes agregar tu logotipo o nombre -->
  </div>
<div class="image">
    <!-- Aquí puedes agregar una imagen representativa -->
  </div>
<div class="contact-info">
    <!-- Aquí puedes agregar información de contacto como teléfono y correo electrónico -->
  </div>
<div class="details">
    <!-- Aquí puedes agregar más información sobre ti o tu negocio -->
  </div>
</div>
  function expandCard(card) {
    card.classList.toggle('expanded');
  }

And that's it! You now have the basics to create your own interactive business cards with HTML and CSS. You can customise the design, styles and interactivity to suit your needs. Feel free to experiment and explore different ideas to make your cards unique and eye-catching - good luck!