Untitled

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  <title>Frontend Mentor | Order summary card</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>
    .attribution {
      font-size: 11px;
      text-align: center;
    }

    .attribution a {
      color: hsl(228, 45%, 44%);
    }
  </style>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap" rel="stylesheet">
</head>

<body>
  <main class="card">
    <img src="./images/illustration-hero.svg" alt="illustration hero" class="illustration">
    <h2>Order Summary</h2>

    <p>
      You can now listen to millions of songs, audiobooks, and podcasts on any
      device anywhere you like!
    </p>

    <div class="summary">
      <div class="summary-value">
        Annual Plan
        $59.99/year
      </div>

      <p class="btn-summary-change">Change</p>
    </div>

    <button class="btn-payment">Proceed to Payment</button>
    <button class="btn-cancel">Cancel Order</button>
  </main>


</body>

</html>