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

Responsive landing site

kirubakk 245

@KIRUBASHANKAR26

Desktop design screenshot for the Interactive pricing component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestions and feedback are welcome.

Community feedback

Account Deleted

Hey @KIRUBASHANKAR26,

Your solution looks great. It actually helped me solve some minor issues that I faced during my own run of this challenge. So thank you for that 😉

Here are some feedback that could help improve your solution

  • Some of your p tags and div tag are nested inside a label tag. Which is causing the HTML issues to appear. That is because block elements aren't allowed to be nested inside inline elements. You can read more about it here
  • The background pattern in your solution is being resized and as a result, a media query was added to make the background cover the whole screen body{background-size: 100% 50%;}. Another approach (My approach ^^) to this would be to use the SVG component inside your index.html as an element and use the ::before / ::after selector to modify the look

Other than that I think you did a fantastic job. Good luck on your next challenge 👊

1

kirubakk 245

@KIRUBASHANKAR26

Posted

@ktra99 Thank you so much :)

1

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