<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
    <title>Artwork Product Page</title>
</head>
<body>
    <header class="bg-dark text-white text-center py-3">
        <h1 class="display-4">Art Gallery</h1>
        <p class="lead">Discover and purchase exquisite artworks</p>
    </header>

    <div class="container mt-5">
        <div class="row">
            <!-- Artwork Image -->
            <div class="col-md-6">
                <img src="artwork.jpg" alt="Artwork" class="img-fluid rounded shadow-sm">
            </div>
            <!-- Artwork Details -->
            <div class="col-md-6">
                <h2 class="mt-3 mt-md-0">Artwork Title</h2>
                <p class="text-muted">By Artist Name</p>
                <h4 class="text-primary">$500</h4>
                <p class="mt-4">This is a detailed description of the artwork. It highlights the inspiration, medium, and size of the piece, providing potential buyers with in-depth insight into the artwork.</p>
                
                <!-- Purchase Button -->
                <div class="mt-4">
                    <button type="button" class="btn btn-primary btn-lg">Purchase</button>
                </div>

                <!-- Additional Information -->
                <div class="mt-5">
                    <h5>Additional Information</h5>
                    <ul class="list-unstyled">
                        <li><strong>Dimensions:</strong> 50cm x 70cm</li>
                        <li><strong>Medium:</strong> Oil on canvas</li>
                        <li><strong>Year:</strong> 2023</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Related Artworks Section -->
        <div class="mt-5">
            <h3>Related Artworks</h3>
            <div class="row">
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card">
                        <img src="related-art1.jpg" class="card-img-top" alt="Related Artwork">
                        <div class="card-body">
                            <h5 class="card-title">Related Artwork 1</h5>
                            <p class="card-text">By Another Artist</p>
                            <a href="#" class="btn btn-outline-primary">View Details</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card">
                        <img src="related-art2.jpg" class="card-img-top" alt="Related Artwork">
                        <div class="card-body">
                            <h5 class="card-title">Related Artwork 2</h5>
                            <p class="card-text">By Another Artist</p>
                            <a href="#" class="btn btn-outline-primary">View Details</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card">
                        <img src="related-art3.jpg" class="card-img-top" alt="Related Artwork">
                        <div class="card-body">
                            <h5 class="card-title">Related Artwork 3</h5>
                            <p class="card-text">By Another Artist</p>
                            <a href="#" class="btn btn-outline-primary">View Details</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-white text-center py-4">
        <p class="mb-0">© 2023 Art Gallery. All Rights Reserved.</p>
    </footer>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

can you add placeholders for where imgs are.