Index

 <div class="products">
                <!-- Example product items. In a real-world scenario, these would be dynamically loaded. -->
                <div class="product">
                    <img src="images/image1.jpeg" alt="Jewelry Item 1" width="100%">
                    <button class="add-to-cart-btn">Add to Cart</button>
                </div>
            
                <div class="product">
                    <img src="images/image2.jpeg" alt="Jewelry Item 2" width="100%">
                    <button class="add-to-cart-btn">Add to Cart</button>
                </div>
            
                <div class="product">
                    <img src="images/image2.jpeg" alt="Jewelry Item 2" width="100%">
                    <button class="add-to-cart-btn">Add to Cart</button>
                </div>
            
                <div class="product">
                    <img src="images/image1.jpeg" alt="Jewelry Item 2" width="100%">
                    <button class="add-to-cart-btn">Add to Cart</button>
                </div>
                
                <!-- Add more product items as needed -->
            </div>
        </div>
        <div id="footerContainer"></div>

        <script>
            fetch('footer.html')
                .then(response => response.text())
                .then(data => {
                    document.getElementById('footerContainer').innerHTML = data;
                });
        </script>
    </div>