CssToolBox

Layouts

Product Showcase Grid

Product 1

This is a brief description of Product 1. It’s a great item for your needs.

$29.99

Product 2

This is a brief description of Product 2. It’s an amazing item to consider.

$49.99

Product 3

This is a brief description of Product 3. A must-have for everyone.

$69.99

Product 4

This is a brief description of Product 4. Perfect for your needs.

$89.99

Product 5

This is a brief description of Product 5. A high-quality item you can rely on.

$99.99

Product 6

This is a brief description of Product 6. Don’t miss out on this amazing product.

$19.99

HTML Code

Below is the HTML code:

                    <!-- Sample HTML code -->
                    <div class="product-grid">
                        <div class="product-card">
                        <img src="indexStyle/img/image4.jfif" alt="Product 1" class="product-image">
                        <div class="product-details">
                            <h3 class="product-title">Product 1</h3>
                            <p class="product-description">This is a brief description of Product 1. It’s a great item for your needs.</p>
                            <span class="product-price">$29.99</span>
                        </div>
                        </div>

                        <div class="product-card">
                        <img src="indexStyle/img/image5.jfif" alt="Product 2" class="product-image">
                        <div class="product-details">
                            <h3 class="product-title">Product 2</h3>
                            <p class="product-description">This is a brief description of Product 2. It’s an amazing item to consider.</p>
                            <span class="product-price">$49.99</span>
                        </div>
                        </div>

                        <div class="product-card">
                        <img src="indexStyle/img/image2.jfif" alt="Product 3" class="product-image">
                        <div class="product-details">
                            <h3 class="product-title">Product 3</h3>
                            <p class="product-description">This is a brief description of Product 3. A must-have for everyone.</p>
                            <span class="product-price">$69.99</span>
                        </div>
                        </div>

                        <div class="product-card">
                        <img src="indexStyle/img/image9.jfif" alt="Product 4" class="product-image">
                        <div class="product-details">
                            <h3 class="product-title">Product 4</h3>
                            <p class="product-description">This is a brief description of Product 4. Perfect for your needs.</p>
                            <span class="product-price">$89.99</span>
                        </div>
                        </div>

                        <div class="product-card">
                        <img src="indexStyle/img/image12.jfif" alt="Product 5" class="product-image">
                        <div class="product-details">
                            <h3 class="product-title">Product 5</h3>
                            <p class="product-description">This is a brief description of Product 5. A high-quality item you can rely on.</p>
                            <span class="product-price">$99.99</span>
                        </div>
                        </div>

                        <div class="product-card">
                        <img src="indexStyle/img/image14.jfif" alt="Product 6" class="product-image">
                        <div class="product-details">
                            <h3 class="product-title">Product 6</h3>
                            <p class="product-description">This is a brief description of Product 6. Don’t miss out on this amazing product.</p>
                            <span class="product-price">$19.99</span>
                        </div>
                        </div>
                    </div>