Submitted 6 months ago
Implementing Preview card component with Flexbox and Pseudo-classes
@hinn1411
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
- I reviewed and used CSS pseudo-classes to solve the challenge!
- I will learn about BEM convention and SCSS
- Firstly, I stuck with the SVG image. in the mobile version, I applied border-radius but it did not work. it turned out that the height of the SVG image scales automatically to the width. Then I removed the height attribute of the image, and it finally worked.
- Secondly, I did not know how to change the default appearance of the cursor to look like the design, so I researched some blogs. Luckily, i found the solution.
- In my
styles.css
file, I wrote hardcode values a lot. I know that SASS/SCSS can help me deal with that. Can you recommend good websites or YouTube channels for learning SASS/SCSS?
Community feedback
- @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 🪄:
- Wow your solution is perfectly crafted and resembles the actual design perfectly, but you forget to add hover state for blog card 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: 15px 16px 0px 1px #000; }
- 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!
Marked as helpful1@hinn1411Posted 6 months ago@0xabdulkhalid Thank you for your suggestion! It is very helpful for me.
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