{"id":61668,"date":"2023-11-09T18:07:24","date_gmt":"2023-11-09T17:07:24","guid":{"rendered":"https:\/\/www.aulatina.com\/creacion-de-tarjetas-de-presentacion-interactivas-con-html-y-css\/"},"modified":"2025-09-29T12:29:54","modified_gmt":"2025-09-29T10:29:54","slug":"creating-interactive-business-cards-with-html-and-css","status":"publish","type":"post","link":"https:\/\/www.aulatina.com\/en\/creacion-de-tarjetas-de-presentacion-interactivas-con-html-y-css\/","title":{"rendered":"Creating interactive business cards with HTML and CSS"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Tabla de contenido<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #303030;color:#303030\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #303030;color:#303030\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.aulatina.com\/en\/creacion-de-tarjetas-de-presentacion-interactivas-con-html-y-css\/#Creacion_de_tarjetas_de_presentacion_interactivas_con_HTML_y_CSS\" >Creaci\u00f3n de tarjetas de presentaci\u00f3n interactivas con HTML y CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.aulatina.com\/en\/creacion-de-tarjetas-de-presentacion-interactivas-con-html-y-css\/#HTML_basico_para_la_estructura_de_la_tarjeta\" >HTML b\u00e1sico para la estructura de la tarjeta<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.aulatina.com\/en\/creacion-de-tarjetas-de-presentacion-interactivas-con-html-y-css\/#Estilizar_la_tarjeta_con_CSS\" >Estilizar la tarjeta con CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.aulatina.com\/en\/creacion-de-tarjetas-de-presentacion-interactivas-con-html-y-css\/#Agregar_interactividad_con_CSS_y_JavaScript\" >Agregar interactividad con CSS y JavaScript<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Creacion_de_tarjetas_de_presentacion_interactivas_con_HTML_y_CSS\"><\/span>Creaci\u00f3n de tarjetas de presentaci\u00f3n interactivas con HTML y CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>En este tutorial, aprender\u00e1s c\u00f3mo crear tarjetas de presentaci\u00f3n interactivas utilizando HTML y CSS. Las tarjetas de presentaci\u00f3n son una forma efectiva de mostrar informaci\u00f3n sobre ti o tu negocio de manera concisa y atractiva. Al agregar interactividad, puedes agregar a\u00fan m\u00e1s atractivo y hacer que tus tarjetas sean m\u00e1s memorables.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"HTML_basico_para_la_estructura_de_la_tarjeta\"><\/span>HTML b\u00e1sico para la estructura de la tarjeta<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Comenzaremos creando la estructura b\u00e1sica de la tarjeta utilizando HTML. Utilizaremos divs para representar diferentes secciones de la tarjeta, como el encabezado, la imagen, la informaci\u00f3n de contacto, etc. Aqu\u00ed tienes un ejemplo b\u00e1sico de c\u00f3mo podr\u00eda verse:<\/p>\n<p>[html]<\/p>\n<div class=\"card\">\n<div class=\"header\">\n    <!-- Aqu\u00ed puedes agregar tu logotipo o nombre -->\n  <\/div>\n<div class=\"image\">\n    <!-- Aqu\u00ed puedes agregar una imagen representativa -->\n  <\/div>\n<div class=\"contact-info\">\n    <!-- Aqu\u00ed puedes agregar informaci\u00f3n de contacto como tel\u00e9fono y correo electr\u00f3nico -->\n  <\/div>\n<\/div>\n<p>[\/html]<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Estilizar_la_tarjeta_con_CSS\"><\/span>Estilizar la tarjeta con CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ahora que tenemos la estructura b\u00e1sica 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\u00ed tienes un ejemplo de c\u00f3mo podr\u00eda ser el CSS para estilizar la tarjeta:<\/p>\n<p>[css]<br \/>\n.card {<br \/>\n  border: 1px solid #ccc;<br \/>\n  border-radius: 10px;<br \/>\n  padding: 20px;<br \/>\n  background-color: #f8f8f8;<br \/>\n  width: 300px;<br \/>\n  margin: 20px auto;<br \/>\n}<\/p>\n<p>.header {<br \/>\n  text-align: center;<br \/>\n  font-size: 24px;<br \/>\n  font-weight: bold;<br \/>\n  margin-bottom: 10px;<br \/>\n}<\/p>\n<p>.image {<br \/>\n  width: 100%;<br \/>\n  height: 200px;<br \/>\n  background-image: url(&#8216;imagen.jpg&#8217;);<br \/>\n  background-size: cover;<br \/>\n  background-position: center;<br \/>\n  border-radius: 10px;<br \/>\n  margin-bottom: 10px;<br \/>\n}<\/p>\n<p>.contact-info {<br \/>\n  font-size: 16px;<br \/>\n  text-align: center;<br \/>\n}<br \/>\n[\/css]<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Agregar_interactividad_con_CSS_y_JavaScript\"><\/span>Agregar interactividad con CSS y JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Para hacer que tus tarjetas de presentaci\u00f3n sean interactivas, puedes utilizar CSS y JavaScript. Puedes agregar efectos de transici\u00f3n, como desvanecimiento o deslizamiento, cuando el usuario pasa el cursor sobre la tarjeta. Tambi\u00e9n puedes hacer que la tarjeta se expanda o revele informaci\u00f3n adicional al hacer clic en ella. Aqu\u00ed tienes un ejemplo de c\u00f3mo podr\u00edas lograr esto:<\/p>\n<p>[css]<br \/>\n.card:hover {<br \/>\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);<br \/>\n  transform: scale(1.05);<br \/>\n  transition: box-shadow 0.3s ease, transform 0.3s ease;<br \/>\n}<\/p>\n<p>.card.expanded {<br \/>\n  height: auto;<br \/>\n}<\/p>\n<p>.card.expanded .details {<br \/>\n  display: block;<br \/>\n}<\/p>\n<p>.details {<br \/>\n  display: none;<br \/>\n  margin-top: 10px;<br \/>\n}<br \/>\n[\/css]<br \/>\n[html]<\/p>\n<div class=\"card\">\n<div class=\"header\">\n    <!-- Aqu\u00ed puedes agregar tu logotipo o nombre -->\n  <\/div>\n<div class=\"image\">\n    <!-- Aqu\u00ed puedes agregar una imagen representativa -->\n  <\/div>\n<div class=\"contact-info\">\n    <!-- Aqu\u00ed puedes agregar informaci\u00f3n de contacto como tel\u00e9fono y correo electr\u00f3nico -->\n  <\/div>\n<div class=\"details\">\n    <!-- Aqu\u00ed puedes agregar m\u00e1s informaci\u00f3n sobre ti o tu negocio -->\n  <\/div>\n<\/div>\n<p>  function expandCard(card) {<br \/>\n    card.classList.toggle(&#8216;expanded&#8217;);<br \/>\n  }<\/p>\n<p>[\/html]<\/p>\n<p>\u00a1Y eso es! Ahora tienes las bases para crear tus propias tarjetas de presentaci\u00f3n interactivas con HTML y CSS. Puedes personalizar el dise\u00f1o, los estilos y la interactividad para adaptarlas a tus necesidades. No dudes en experimentar y explorar diferentes ideas para hacer que tus tarjetas sean \u00fanicas y llamativas. \u00a1Buena suerte!<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3schools.com\/html\/\" target=\"_blank\" rel=\"noopener\">W3Schools &#8211; HTML Tutorial<\/a><\/li>\n<li><a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" rel=\"noopener\">W3Schools &#8211; CSS Tutorial<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>En este tutorial aprender\u00e1s a crear tarjetas de presentaci\u00f3n interactivas con HTML y CSS. Descubre c\u00f3mo destacar tu informaci\u00f3n de manera atractiva y concisa. \u00a1Potencia tu presencia online!<\/p>","protected":false},"author":1,"featured_media":61669,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[532],"tags":[534,535,536],"class_list":["post-61668","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","tag-css","tag-html","tag-javascript","category-532","description-off"],"_links":{"self":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts\/61668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/comments?post=61668"}],"version-history":[{"count":0,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts\/61668\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/media\/61669"}],"wp:attachment":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/media?parent=61668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/categories?post=61668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/tags?post=61668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}