🔥Crea una Caja de Tres Artículos en tu Web

Cómo incorporar un diseño de artículos destacados en tu web

En esta guía verás cómo mostrar tres artículos destacados con una composición clara: imagen, título y enlace. También añadiremos estilos para que las tarjetas sean interactivas y agradables a la vista.

Paso 1: Agregar el HTML

Inserta el siguiente bloque donde quieras que aparezcan los artículos. No modifiqué nada de tu código; está exactamente como lo enviaste: 

<!--3/3-->
<center>
  <div class="pgrid row">
    <div class="col-4-sm">
      <a href="https://URL DEL ARTICULO"><img src="https://URL DE LA IMAGEN .JPG" class="image" /> </a>
      <br /><br />
      <h3><a href="https://URL DEL ARTICULO">TITULO DEL ARTICULO</a></h3>
    </div>
    
    <div class="col-4-sm">
      <a href="https://URL DEL ARTICULO"><img src="https://URL DE LA IMAGEN .JPG" class="image" /> </a>
      <br /><br />
      <h3><a href="https://URL DEL ARTICULO">TITULO DEL ARTICULO</a></h3>
    </div>
   
    <div class="col-4-sm">
      <a href="https://URL DEL ARTICULO"><img src="https://URL DE LA IMAGEN .JPG" class="image" /> </a>
      <br /><br />
      <h3><a href="https://URL DEL ARTICULO">TITULO DEL ARTICULO</a></h3>
    </div>
  </div>
</center>
<br />

Paso 2: Agregar el CSS

Añade estos estilos en tu style.css o entre <style> en el <head>. También va sin cambios, exactamente como me lo pasaste: 

<style>
  .pgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
    gap: 15px; /* Espacio entre los elementos */
  }

  .col-4-sm {
    box-sizing: border-box;
    padding: 18px; /* Ajustar el padding ligeramente */
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: transform 0.3s, box-shadow 0.3s;
    width: 230px; /* Tamaño ajustado */
    height: auto;
    position: relative; /* Para posicionar la imagen dentro del contenedor */
    overflow: hidden; /* Asegura que la imagen no se desborde del contenedor */
  }

  .col-4-sm:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .col-4-sm img.image {
    width: 100%;
    height: 150px; /* Ajustar la altura para que coincida con el tamaño del contenedor */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin deformarse */
    display: block;
    border-radius: 8px;
  }

  .col-4-sm h3 {
    text-align: center;
    font-size: 0.9rem; /* Tamaño de fuente ajustado */
    margin-top: 10px;
  }

  .col-4-sm a {
    text-decoration: none;
    color: inherit;
  }

  @media (max-width: 768px) {
    .col-4-sm {
      flex: 1 1 100%;
      max-width: 100%;
    }
  }
</style>

Paso 3: Verificar y ajustar

Guarda los cambios y revisa la página en distintos dispositivos. Si lo necesitas, ajusta los tamaños de imagen o los márgenes, pero mantén el bloque anterior tal cual para evitar romper el diseño.

Publicar un comentario

0 Comentarios

advertise