HTML
<div class=“card”>
<img src=“imagen.jpg” alt=“Avatar” style=“width:100%”>
<div class=“container”>
<h4><b>imagen 1</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
Este código HTML representa una estructura básica para una tarjeta. Vamos a analizarlo por partes:
<div class=“card”>: Aquí se define el contenedor principal de la tarjeta. Es una división que actúa como el contenedor para el contenido de la tarjeta.
<img src=“imagen.jpg” alt=“Avatar” style=“width:100%”>: Este es un elemento de imagen (<img>) que muestra la imagen en la tarjeta. El atributo src indica la URL o la ruta de la imagen que se mostrará en la tarjeta. El atributo alt proporciona un texto alternativo en caso de que la imagen no se pueda cargar, y el estilo width:100% hace que la imagen ocupe todo el ancho del contenedor.
<div class=“container”>: Aquí se define otro contenedor dentro de la tarjeta que contendrá el título y la descripción de la tarjeta.
<h4><b>imagen 1</b></h4>: Esta etiqueta de encabezado (<h4>) muestra el título de la tarjeta. El texto “imagen 1” se muestra en negrita (<b>) para resaltarlo.
<p>Architect & Engineer</p>: Esta etiqueta de párrafo (<p>) muestra una descripción para la tarjeta. En este caso, muestra “Architect & Engineer”.
CSS
.card {
/* Add shadows to create the “card” effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.966);
transition: 0.3s;
width: 200px;
height: 370px;
margin: 55px;
}
El código CSS contiene estilos que se aplicarán a la tarjeta (<div class=“card”>). Explicaremos cada propiedad:
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.966);: Esto crea una sombra alrededor de la tarjeta, lo que da el efecto visual de una “tarjeta elevada” sobre el fondo. Los valores dentro del box-shadow controlan la posición y la intensidad de la sombra. Puedes ajustar estos valores para personalizar el efecto de sombreado.
transition: 0.3s;: Esta propiedad agrega una transición suave de 0.3 segundos a la tarjeta. Esto significa que cualquier cambio en el contenido o el estilo de la tarjeta (por ejemplo, un cambio en el tamaño o el color) se animará durante 0.3 segundos.
width: 200px;: Esta propiedad establece el ancho de la tarjeta en 200 píxeles. Puedes ajustar este valor para cambiar el tamaño de la tarjeta según tus necesidades.
height: 370px;: Esta propiedad establece la altura de la tarjeta en 370 píxeles. Al igual que el ancho, puedes modificar este valor para ajustar la altura de la tarjeta.
margin: 55px;: Esta propiedad crea un margen de 55 píxeles alrededor de la tarjeta. Esto asegura que haya un espacio entre esta tarjeta y otros elementos en la página.
Con esta base, puedes crear una tarjeta personalizada utilizando tus propias imágenes, títulos y descripciones. Puedes modificar los estilos CSS para adaptar el diseño según tus preferencias. Además, puedes agregar más contenido y elementos dentro de la tarjeta para enriquecerla aún más. ¡Espero que este tutorial te haya sido útil! Si tienes más preguntas o necesitas más ayuda, no dudes en preguntar.
