Mobile-first solution using just pure css
Design comparison
Solution retrospective
-
Please, how do i use this SVG (file: <svg width="11" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M11 10.216 5.5 18 0 10.216l5.5 3.263 5.5-3.262ZM5.5 0l5.496 9.169L5.5 12.43 0 9.17 5.5 0Z" fill="#00FFF8"/></svg>) on the NFT preview card.
-
Please tell me how I can improve my CSS codes here or how I can write this better.
Community feedback
- @skyv26Posted almost 3 years ago
Hi! Ebobo, I saw you work. Man, you did according to what you have (as a knowledge) and I know you put your all efforts while working on this. I appreciate your work and I am happy that you are really concerned about your work and you seems a passionate learner too.
My friend below are some suggestions to improve your CSS skills.
-
Floats are now old and use rare by someone, work on flexbox and understand its property.
-
In order to add your svg, i. use direct svg into your code ii. use svg file name with svg path into img tag
-
Try to learn position property, it will help you to add eye svg into your NFT card in the middle of the equillibrium image.
-
Try to not use the height property, by doing this you loose your control over design (too some extent). Let the content inside decides it height automatically and it will help you in mobile design too, to make your work easy.
I hope you understand, if have any doubt feel free to comment by mentioning me or contact me on slack. Slack community members would love to help you.
Good Luck
Marked as helpful2@ogheneCodesPosted almost 3 years ago@skyv26 wow, thanks for your loving feedback. I appreciate it. Please, can you tell me how to use the SVG with the img tag, tried googling it but then didn't get it. Thanks for your loving and kind words.
1 -
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