Crowdfunding Page Made with Vanilla JS / Sass / Modular Approach
Design comparison
Solution retrospective
Heeelo everyone!
I've certainly learned a lot from tackling this challenge, even tough it's marked only as a junior level difficulty.
I've got a few questions:
-
How did you change the svg color? I've tried the method with
css: filter;
property, but it didn't work for some reason. -
What do you think about my project structure? I've tried to divide my code into more chunks for better readability. Do you have any tips or good sources on how to structure projects properly?
Have a wonderful day/evening/night and happy coding!
Community feedback
- @clarencejuluPosted about 2 years ago
Hello Kamil, You did well on this project! To answer your question on styling the color of the bookmark button, implement this code below;
.bookmarkIcon{ path{ fill: white; } circle{ fill: $dark-cyan; } }
Goodluck, Feel free to ask me any further questions!
1 - @sahand-masolehPosted about 2 years ago
Hey there!
It's a bit complicated and depends on how your SVG is written, you can open it in your IDE and see, it's just HTML. If the colors are hard-coded in, what I do is that I set the
fill
orstroke
attribute for the element that I want tocurrentColor
, then when I set thecolor
in my CSS, that element will follow.The reason is that in-line styling has a higher specificity and you can't override it in your own code unless you copy-paste the SVG's code directly.
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