➜ Productos en la portada

   <!-- productos-->
    <div class="container">
        <div class="row mt-5 mb-5">
            <div class="col-sm-4">
                <div class="card border-0 rounded-0">
                    <a href="producto.html"><img src="img/2.jpg" class="card-img-top"></a>
                    <div class="card-body">
                        <h2 class="text-center"> <a href="producto.html" class="text-decoration-none">Producto A</a></h2>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="card border-0 rounded-0">
                    <a href="producto.html"><img src="img/2.jpg" class="card-img-top"></a>
                    <div class="card-body">
                        <h2 class="text-center"> <a href="producto.html" class="text-decoration-none">Producto A</a></h2>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="card border-0 rounded-0">
                    <a href="producto.html"><img src="img/2.jpg" class="card-img-top"></a>
                    <div class="card-body">
                        <h2 class="text-center"> <a href="producto.html" class="text-decoration-none">Producto A</a></h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- productos/-->

Descripción del Código:

Este código HTML utiliza Bootstrap 4.5 para crear una sección de productos en una página web. La estructura está organizada dentro de un contenedor (<div class="container">) que contiene una fila (<div class="row">) con tres columnas de productos. Cada columna utiliza las clases de Bootstrap para garantizar que el diseño sea responsive, ajustándose automáticamente en diferentes tamaños de pantalla. Aquí te explico cada parte:

1. Contenedor Principal (<div class="container">):

   • Este contenedor agrupa todos los elementos de la sección de productos, asegurando que el contenido esté centrado y tenga un margen de espacio alrededor.

2. Fila de Productos (<div class="row">):

   • La fila (row) contiene tres columnas (col-sm-4), cada una ocupando un tercio del ancho de la pantalla en dispositivos pequeños y superiores.

3. Tarjetas de Productos (<div class="card">):

   • Cada producto se presenta dentro de una tarjeta (card) de Bootstrap, que incluye una imagen (<img src="img/2.jpg" class="card-img-top">) y un título (<h2 class="text-center">Producto A</h2>).
   • Las tarjetas tienen bordes eliminados (border-0) y esquinas no redondeadas (rounded-0) para un diseño más limpio.
   • La imagen del producto es un enlace (<a href="producto.html">) que redirige a la página del producto individual.

4. Cuerpo de la Tarjeta (<div class="card-body">):

   • Dentro del cuerpo de la tarjeta, se incluye un título centrado (text-center) y un enlace al producto (<a href="producto.html" class="text-decoration-none">Producto A</a>). El enlace tiene la clase text-decoration-none para eliminar el subrayado predeterminado.

Esta sección es ideal para mostrar productos en una tienda en línea, permitiendo a los usuarios explorar diferentes artículos con facilidad.