Desktop first landing page and develop with Bootstrap 5 & SCSS
Design comparison
Solution retrospective
-Issue I tried a lot. But page is not responsive all of the device. But I tried but to better UI at normal & large desktops and normal phone screen size. Some of the radio have more space have existed or some images is not looking good at some kind of device size.
- Openly welcome all of your feedback and suggestion.
-Thanks.................
Community feedback
- @AbNassifPosted over 3 years ago
1- In the Egg Image section, you can actually just add a width of 50% without a height property. These images are specifically designed to take up the spaces in the design. So giving it a width of 50%, would mean "assign the height of the image meanwhile respect the width of 50% of the image",.
2- Really loved the initiative you took with the fixed nav header, but the background should activate faster as the link text is overlapping with the main header.
3- The background of the footer is grey instead of the greenish color displayed in the design, and it's not your fault as it wasn't displayed in the "Style-Guide", but in these cases (and real-world as well), you could just use a website like "https://imagecolorpicker.com/en" to get the color displayed in the design.
4-You forgot to add a hover effect to the button in the nav using :hover in css and including a transition for it to smoothly change.
5-The nav bar is opening on it's own when the viewport get's small enough.
Remark: You should practice responsive units to reduce code, and get comfortable with flexbox and css grid offered by CSS. Learning a Css framework without mastering it first will really frustrate you and prolong the journey ( Don't ask me how I know that).
Last but not least, great job! You did quite well, don't forget to keep on practicing and hit me up if you have any questions(Would love to have a coding buddy!).
Marked as helpful1@developedBySwanPosted over 3 years ago@AbNassif Thank those help me a lot. without your comment I can't know what need to learn. Thank for interesting my work and giving suggestion. see you again in another challenge buddy.
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