Skip to content
Submitted over 2 years ago

Challenge order summary card V2

Yous•170
@yousra10
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello friends!

It's the second time I do this challenge to improve my skills. I have difficult to put correctly my website on Github, when I write it on Atom, the website run but didn't run on Github. What I learned :

  • the background images background: url (../images/xxxxxxxx) *display (I have to entertain again)

Thank you guys for your comments and advice !! happy coding !!

Community feedback

  • Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hey! Congrats on completing the challenge.

    Here are some tips-

    • Put background image in images folder. then use body:{background:url(./images/pattern-background-desktop.svg),hsl(225, 100%, 94%); background-repeat: no-repeat;}

    • Use <a href=""><a/> tag or <button></button> tag for cancel order button.

    Hope this helps. :)

    Marked as helpful
    0
  • Abdul•8,540
    @SamadeenPosted over 2 years ago

    Hey!! Cheers 🥂 on completing this challenge.. .

    Here are my suggestions..

    • You should use <main class="bg-img"> instead of <div class="bg-img">.
    • Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.
    • You can wrap your attribution section in a footer tag to avoid accessibility issues.

    This should fix most of your accessibility issues

    . Regardless you did amazing... hope you find this useful... Happy coding!!!

    0

Please log in to post a comment

Log in with GitHub

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