01-Order-Summary-card/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order summary card</title>
</head><link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
</head>
<body>
    <div class="container">
        <div class="Card">
            <img src="./images/illustration-hero.svg" class="hero"> 
        <div class="text-container">
            <h2 class="title">Order Summary</h2>
            <p>You can now listen to millions ofsongs, <br>audiobooks,and podcasts on any device <br>anywhere you like !</p>
        </div>
        <div class="pnan-section">
            <img src="./images/icon-music.svg">
            <p>Annual plan <br><small>$59.99/year</small></p>
            <a href="#">Change</a>
        </div>
        <div class="btn-primary">
            <button type="submit" class="main-btn">Proceed to Payment</button>
            <p class="order-cancel">Cancel Order</p>
        </div>
      
    <div class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
        Coded by <a href="https://t.co/PhXYltGEZb">Nidhi Kumari</a>.
    </div>
    </div>
    </div>
</body>
</html>