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

Cómo Incorporar un Diseño de Artículos Destacados en tu Página Web
En este artículo, aprenderás cómo incorporar un diseño atractivo para mostrar tres artículos destacados en tu página web. Vamos a crear un diseño con cajas de contenido que contienen una imagen, un título, y un enlace. Además, aplicaremos algunos efectos de estilo para hacer que estos cuadros sean interactivos y estéticamente agradables.



Paso 1: Agregar el HTML

El primer paso es agregar el código HTML que contendrá nuestros artículos destacados. Copia y pega el siguiente código en la sección de tu página donde deseas que aparezcan estos artículos:


HTML
<!--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 />  
<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

Después de haber agregado el HTML y CSS, guarda los cambios y abre tu página web en un navegador para verificar que todo se muestra correctamente. Ajusta los tamaños de los elementos si es necesario.

0 Comentarios