<!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"> <link rel="stylesheet" href="css/style.css"> <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> </head> <body> <div class="card"> <div class="hero-image"></div> <h1>Order Summary</h1> <p> You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like! </p> <div class="price-plan"> <div class="icon"></div> <div class="plan-type-area"> <div class="plan-type">Annual Plan</div> <div class="plan-price">$59.99/year</div> </div> <div class="change-button">Change</div> </div> <div class="payment-button">Proceed to Payment</div> <div class="cancel-button">Cancel Order</div> </div> <!-- <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>. </div> --> </body> </html>