Cómo empezar a crear una tarjeta personalizada con HTML y CSS

Aquí aprenderás a como crear tu propia tarjeta de lo que quieras aprovechando las etiquetas de HTML y las propiedades de CSS.

Pasos

1. Busca una plantilla que tomarás como referencia

2. Crea un contenedor (main) donde añadiras un div (la tarjeta) y un img (la plantilla), pero antes de empezar a añadir elementos dentro de tu div deberás establecer ciertas propiedades con selectores en tu hoja de estilos.

Aquí te dejo los tipos de selectores con sus propiedades y el porqué de cada uno.
• Margin y padding en 0 por defecto para evitar márgenes y espaciados internos problemáticos mientras que box-sizing: border-box; nos ayudará a que las medidas de nuestra tarjeta no aumenten por el borde, espaciado interno o el propio contenido.


• Contenedor con display tipo flex para tomar medidas de la plantilla en nuestra tarjeta tanto en vertical como en horizontal.





• Overflow con valor hidden para evitar que los elementos contenidos sobresalgan de nuestra tarjeta.


• Establecemos en posición absoluta nuestros elementos contenidos (En mi caso utilice img, p y span) para gestionar mejor su posición.

3. Ahora vas a establecer tanto el alto como el ancho de la tarjeta y para ello comprueba las dimensiones de la plantilla(en mi caso un width de 640px y un height de 478px). Si la imagen ocupa demasiado puedes cambiar también su tamaño.

4. A partir de aquí te toca a tí ir ajustando los elementos según lo que quieras hacer. Si quieres una foto tuya que esté en la misma posición, con el mismo tamaño y border radius que la que tiene tu plantilla, utiliza un selector con propiedades de posición(top, right, bottom, left), de radio de borde(border-radius) y ancho y alto(width y height) y ve probando valores.