Submitted about 3 years ago

Order summury card Component

Saaqlainn•55

@Saaqlainn

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

This Is My first challenge From Frontend Mentor. Hope You Guys Like It.. Suggest For Any Improvement!

Community feedback

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 years ago

Use semantic tag main

<body>
<main>
    <div class="card__container">
      <div class="card">
        <div class="card__image">
        </div>
        <div class="card-data__container">
          <div id="card__title" class="card__content" >
            <h1>Order Summary</h1>
          </div>
          <div id="card__discription" class="card__content" >
            <p>You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!</p>
          </div>
          <div id="card__plan">
          <div id="annual__plan__container" class="card__content" >
            <div id="card__plan__image" class="card__content"> 
              <img src="images/icon-music.svg" alt="error loading image">           
            </div>
              <div id="card__price">
                <div id="annual_plan"><p>Annual Plan</p></div>
                <div id="price"><p>$59.99/year</p></div>
              </div>
              <div id="change"><a href="change">change</a></div>
            </div>
          </div>
          <div id="card__button" class="card__content" >
            <button>Proceed to Payment</button>
          </div>
          <div id="cancel" class="card__content" >
            <p>Cancel order</p>
          </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="#">Saqlain patel</a>.
          </div>
        </footer>
  </body>

Marked as helpful

Saaqlainn•55

@SaaqlainnPosted about 3 years ago

Thank you, @JuveriaD

Account deleted
Your solution looks pretty good, & in your document you must have a main tag wrapping to main content.
Marked as helpful
1
Saaqlainn•55
@SaaqlainnPosted about 3 years ago
@thulanigamtee Yes, I fixed that. Thank you, Tee
0

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