Design comparison
Solution retrospective
I have made this design using my knowledge i tried my best i am facing some promblems with responsiveness of the web page inshallah i will do my best
Community feedback
- @annab6Posted about 3 years ago
Hello! Here are some things that you can improve:
- Border-radius on cards
- You are using the wrong font family for the paragraphs. It should be font-family: 'Lexend Deca', sans-serif; and font-family: 'Big Shoulders Display', cursive; for the headings
- Add text-transform: uppercase; on your headings;
- Change text color on buttons according to design
- Add more padding on buttons
- You can try to add hover effect on buttons button:hover{....} Happy Coding!
0 - @Muhammad-Ali-bhattiPosted about 3 years ago
Thanks for a look at my code. I am very happy to see your comment. firstly i box-sizing to border-box to move the content of the box inside without increasing the size of the box without this if u add padding to the box the box size increases to prevent this i use box-sizing to border-box. secondly i will improve my skills thanks :=)
0 - @MojtabaMosaviPosted about 3 years ago
1- Use at leat two level lower heading for titles, its unlikely that you only have this component on a page and in the scenario you need to use you heading in a heirarchial.
<h2> and lower levels </h2> </h1>
2- Use of sections are not necessary because you can set the same style on the div and it would give the same effect if you set the box-sizing to border-box which acounts for things like padding and borders.
Keep 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