+Day30-order-summary-component/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- STYLES -->
    <link rel="stylesheet" href="styles/reset.css" />
    <link rel="stylesheet" href="styles/main.css" />
    <!-- FONTS -->
    <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"
    />
    <!-- FAVICON -->
    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
    <title>Frontend Mentor | Order summary card</title>
  </head>
  <body>
    <main class="card-component">
      <figure><img src="./images/illustration-hero.svg" alt="" /></figure>
      <div>
        <header>
          <h1>Order Summary</h1>
          <p>
            You can now listen to millions of songs, audiobooks, and podcasts on any
            device anywhere you like!
          </p>
        </header>
        <div>
          <div>
            <figure><img src="./images/icon-music.svg" alt="" /></figure>
            <header>
              <h2>Annual Plan</h2>
              <p>$59.99/year</p>
            </header>
          </div>
          <a href="#">Change</a>
        </div>
        <footer>
          <button class="proceed-btn">Proceed to Payment</button
          ><button class="cancel-btn">Cancel Order</button>
        </footer>
      </div>
    </main>
    <footer class="footer-section">
      <a
        href="https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj/hub"
        target="_blank"
        title="Resource Link"
        >Challenge by Frontend Mentor</a
      >
      <a
        href="https://github.com/selimbiber/Vanilla-CSS-Challenges/tree/main/%2BDay30-order-summary-component"
        target="_blank"
        title="GitHub Repository"
        ><img src="./images/github-logo.svg" alt="" />
      </a>
      <a href="https://github.com/selimbiber" target="_blank" title="Profile Link"
        >Coded by Selim Biber</a
      >
    </footer>
  </body>
</html>