Creación de tarjetas de presentación interactivas con HTML y CSS ★ Agencia marketing digital

Tabla de contenido

Creación de tarjetas de presentación interactivas con HTML y CSS

En este tutorial, aprenderás cómo crear tarjetas de presentación interactivas utilizando HTML y CSS. Las tarjetas de presentación son una forma efectiva de mostrar información sobre ti o tu negocio de manera concisa y atractiva. Al agregar interactividad, puedes agregar aún más atractivo y hacer que tus tarjetas sean más memorables.

HTML básico para la estructura de la tarjeta

Comenzaremos creando la estructura básica de la tarjeta utilizando HTML. Utilizaremos divs para representar diferentes secciones de la tarjeta, como el encabezado, la imagen, la información de contacto, etc. Aquí tienes un ejemplo básico de cómo podría verse:


<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>

Estilizar la tarjeta con CSS

Ahora que tenemos la estructura básica de la tarjeta, es hora de estilizarla con CSS. Puedes agregar colores, fondos, fuentes y otros estilos para que la tarjeta se vea atractiva y represente tu marca personal o de negocios. Aquí tienes un ejemplo de cómo podría ser el CSS para estilizar la tarjeta:


.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;
}

Agregar interactividad con CSS y JavaScript

Para hacer que tus tarjetas de presentación sean interactivas, puedes utilizar CSS y JavaScript. Puedes agregar efectos de transición, como desvanecimiento o deslizamiento, cuando el usuario pasa el cursor sobre la tarjeta. También puedes hacer que la tarjeta se expanda o revele información adicional al hacer clic en ella. Aquí tienes un ejemplo de cómo podrías lograr esto:


.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');
  }

¡Y eso es! Ahora tienes las bases para crear tus propias tarjetas de presentación interactivas con HTML y CSS. Puedes personalizar el diseño, los estilos y la interactividad para adaptarlas a tus necesidades. No dudes en experimentar y explorar diferentes ideas para hacer que tus tarjetas sean únicas y llamativas. ¡Buena suerte!