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

Bookmark Landing Page -- Flexbox && Pretty Responsive

@gulayyolcu

Desktop design screenshot for the Bookmark landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


any feedbacks are welcome..

Community feedback

@dgdev1024

Posted

Some of the elements in your page are a bit off-center. Try setting a 'width' property with 'margin: 0px auto' on your '.container' class, as well as a 'max-width' property for extra-large screens, like desktops. The 'auto' in the 'margin: 0px auto' property will apply a certain degree of horizontal margin on your block-level elements, such that they will center themselves.

Also, your buttons show a border when you hover over them - you'll want to reduce the button's padding in that case to compensate for that border. For example, for a button with a padding of 16px that shows a 2px border when hovered over, you'll want to set a padding of (16px - 2px = 14px) in that button's ':hover' psuedo-class, in order to compensate for the border size.

Very good work, nonetheless. Keep it up!

0

@gulayyolcu

Posted

@dgdev1024 thank you, you're right, i think so,buttons behave weird in hover...i will care about this:)

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