Submitted about 3 years ago

Responsive order summary component using media query and flex box

Khaled M. ALaa•20

@Khaled-Alaa

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I will be very happy if you leave me any feedback :)

Community feedback

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 years ago

Use semantic tags main and footer in every web page

  <body>
<main>
    <div class="page">
      <div class="card-container">
        <img
          src="./images/illustration-hero.svg"
          alt="Girl in a jacket"
          class="image"
        />
        <div class="card-data-container">
          <h2>Order Summary</h2>
          <h5 class="gray">
            You can now listen to millions of songs, audiobooks, and podcasts on
            any device anywhere you like!
          </h5>

          <div class="plan-container">
            <div>
              <img
                src="./images/icon-music.svg"
                alt="icon music"
                class="plan-image"
              />
              <div>
                <div class="plan-title">Annual Plan</div>
                <div class="gray">$59.99/year</div>
              </div>
            </div>
            <a href="#">Change</a>
          </div>

          <div class="agree-payment">Proceed to Payment</div>
          <div class="cancel-order gray">Cancel Order</div>
        </div>
      </div>
</div>
</main>

<footer>
      <div class="attribution">
        Challenge by
        <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
          >Frontend Mentor</a
        >. Coded by
        <a href="https://www.frontendmentor.io/profile/Khaled-Alaa"
          >Khaled Alaa</a
        >.
      </div>
</footer>
  </body>

Marked as helpful

Khaled M. ALaa•20

@Khaled-AlaaPosted about 3 years ago

@JuveriaD Okay thank you I will do it.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord