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

Web page with responsive desing and flexbox

Moises2710 190

@Moises2710

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


What are you most proud of, and what would you do differently next time?

I proud of my HTML because I feel that I am improve my knowledge in this topic.

What challenges did you encounter, and how did you overcome them?

I didn't have any problem in this challenge.

What specific areas of your project would you like help with?

I would like to receive help in my responsive design.

Community feedback

John 410

@MiyaoCat

Posted

Nice work! Not much to add, just a couple things I quickly noticed.

  • It looks like your box-shadow around the Payment button is off. Here's a handy article that explains the numbers. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
  • An even easier tool is Chrome's inspect too. If you inspect the Payment element then click on the little purple box next to the box-shadow declaration, you can drap and pull the box shadow and it'll automatically update the numbers.
  • I see you used main as the container. However this is a component. I like to think of components as a piece of the page that can be placed anywhere on the page. I would add a secondary container to the main, I typically just make a div and give it the class name of whatever the component is I'm building.
  • When I pull the window wider than 1440px, the background wave cuts off. Also, it looks like the button half is white when it should be blue. I went back and looked at my solution and I didn't even add the wave. Oops!

Otherwise, looks great! Keep it up!

Marked as helpful

0
John 410

@MiyaoCat

Posted

Nice work! Not much to add, just a couple things I quickly noticed.

  • It looks like your box-shadow around the Payment button is off. Here's a handy article that explains the numbers. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
  • An even easier tool is Chrome's inspect too. If you inspect the Payment element then click on the little purple box next to the box-shadow declaration, you can drap and pull the box shadow and it'll automatically update the numbers.
  • I see you used main as the container. However this is a component. I like to think of components as a piece of the page that can be placed anywhere on the page. I would add a secondary container to the main, I typically just make a div and give it the class name of whatever the component is I'm building.
  • When I pull the window wider than 1440px, the background wave cuts off. Also, it looks like the button half is white when it should be blue. I went back and looked at my solution and I didn't even add the wave. Oops!

Otherwise, looks great! Keep it up!

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