index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Order Summary Component</title>
    <link rel="stylesheet" href="challenge.css">
    <link rel="icon" href="images/favicon-32x32.png">
    <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&display=swap" rel="stylesheet">
</head>

<body>

    <div class="background">

        <div>
            <img class="background-img" src="images/pattern-background-desktop.svg" alt="background-img">
        </div>

        <div>
            <img class="illustration-hero" class="bhavya" src="images/illustration-hero.svg" alt="illustration-hero">
        </div>

        <div class="white">
            <div class="annual-plan" >
                <img class="music-img" src="images/icon-music.svg" alt="music-img">
                <h4>Annual Plan</h4>
                <p class="cost">$59.99/year</p>
                <a class="cost-anchor" href="">change</a>
                <a class="btn" href="">Proceed To Payment</a>
                <a class="cancel" href="">Cancel Order</a>
            </div>

            <h2><center> Order Summary</center></h2>
            <p>You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!</p>
        </div>
    </div>
    
</body>


</html>