Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

semantic HTML, CSS

@KristaCalleja

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I am having a hard time finding the correct color for the primary-button hover. And also how to arrange the elements in the middle text box (including image). Any tips appreciated.

Community feedback

@Nova988

Posted

Hello,

For the background color on hover: did you try opacity? And you need to reduce the width of the image in the middle text box. It is set to 100%

Hope it helps

Marked as helpful

0

@KristaCalleja

Posted

@Nova988 Sorted! Thanks a lot!

0
P
Ken 4,915

@kens-visuals

Posted

Hey @KristaCalleja 👋🏻

I have some quick tips on how to fix the accessibility issues and some minor design ones as well.

  • In your markup <div class="card">...</div> should be <main class="card">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix most of your accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • For Annual Plan you used <h3> tag, however in HTML heading tags must decrease gradually, like <h1>, <h2>, <h3>, and so on. So in order to fix that issue you can swap <h3> with <h2>.
  • What comes to design, I have a couple of suggestions. First, you should add these two lines of styles to the button,
.primary-btn {
   width: 80%;
   padding: 1em 0;
}
  • And then you should also change the width of .options to width: 70%;, so it matches the width of the button.

I hope this was helpful 👨🏻‍💻 you did a superb job. Cheers 👾

2

@KristaCalleja

Posted

@kens-visuals Precious advice! Really appreciate it thank you!

0
P
Ken 4,915

@kens-visuals

Posted

@KristaCalleja always happy to help!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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