index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frontend Mentor | Product preview card component</title>

    <!-- Favicon Link -->
    <link rel="shortcut icon" href="./images/favicon-32x32.png" type="image/x-icon">
    
    <!-- CSS Link -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="img-side">
                <picture>
                    <source media="(min-width:650px)" srcset="./images/image-product-desktop.jpg">
                    <source media="(min-width:500px)" srcset="./images/image-product-mobile.jpg">
                    <img src="./images/image-product-desktop.jpg" alt="...">
                  </picture>
            </div>
            <div class="details-side">
                <span>Preview</span>
                <h2>Gabrielle Essence Eau De Parfum</h2>
                <p> A floral, solar and voluptuous interpretation composed by Olivier Polge, 
                    Perfumer-Creator for the House of CHANEL.</p>
                <div class="price-container">
                    <p>$149.99</p>
                    <p>$169.99</p>
                </div>
                <button class="card-btn">
                    <img src="./images/icon-cart.svg" alt="">
                    <p>Add to Cart</p>
                </button>
            </div>
        </div>
    </div>

    <div class="box">
        <div class="attribution">
            Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
            Coded by <a href="https://www.frontendmentor.io/profile/rushabh57">rushabh</a>.
        </div> 
    <div class="img-container">
        <img src="./images/profile.png" alt="">
    </div>

    </div>
</body>
</html>