@mickyginger
Posted
Hi Berie! 👋
This is really nice. I like that you've used flexbox and CSS grid, well done! 🎉
You've set the body to 100vh and then added 1rem of margin, which means your body is 100vh + 2rem (1rem top and 1rem bottom margin). Given that the component is centered in the middle of the screen with flex, I think you can afford to remove the margin from the body completely.
I think you can make your CSS a little simpler by setting the section padding to be 35px, rather than 35px 46px 0 35px.
You've wrapped a submit button in a link, which is invalid. Since there's no form in the component it probably makes more sense that "Sign up" is a link to a /sign-up page. I think you could apply the input[submit] styles to the a tag but you'd need to also set display: block.
Finally you can add the shadow to the link using box-shadow. Here's a good generator: https://neumorphism.io
Hope that's helpful 🤓
Marked as helpful
@BernardusPH
Posted
@mickyginger thank you very much.
I didn't know about the body's height getting bigger, I will fix that.
The padding I should have simplified but i was playing around with it and forgot about it.
The input was just a stupid mistake that i made because I am still learning.
Thank you for the box shadow generator, it helped
