Design comparison
Solution retrospective
Turning a design into a real website
What challenges did you encounter, and how did you overcome them?Getting website to be just like the design
What specific areas of your project would you like help with?none
Community feedback
- @1lbertPosted 6 months ago
Hi Jordan, as a fellow newbie, here's the following I saw in your layout.
Border - the layout must have a border of black, Class - although it's not necessary, it must be better that our elements must have a certain class name as a distinction, this may also help as we style this in our CSS file. Responsiveness - the layout is not responsive on the Small screen, especially on a 320px device. instead of giving a fixed width to your "main" element, try to replace it with a min-width at wider devices and a maximum width at smaller devices. Height - one thing I learned from our colleague here is that avoid a height of 100vh, instead use min-height: 100vh to avoid overlapping when the smaller device is in the landscape. also, avoid giving fixed px quantity in height and width, it may affect your responsiveness in other devices CSS Reset - add CSS reset when designing in CSS. you can search for it and apply it to your code.
That's it, I hope I can help you on your journey.
1 - @0xabdulkhaliqPosted 6 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
ADDING HOVER STATE 🪄:
- Looks like the component hover state with
box-shadow
has not been set yet. Your solution would be perfectly finished if you add this as a finishing touch!
- Just add the following css rules
main { transition: box-shadow .3s; } main:hover { box-shadow: 12px 13px 0px 1px rgba(0,0,0,0.93); }
- Now your component's hover shadows has been set properly
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
0
Please log in to post a comment
Log in with GitHubJoin 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