I'm not using Angular so I can't answer you on that however an advise that I can give you is to not use a such framework for simple/small project like this challenge. Even if it is for train, it's more cumbersome than anything else. Those frameworks were mainly created in order to built big projects.
Used positioning (absolute etc.) still learning about those though. Mainly picked it to see if I could put what I have been studying via JS into practice and glad to say I have.
As for CSS - I had been told using rem would be better and I did use it for a bit of the project, but it was done over the course of several days, so my method changed and I forgot, will refactor with time.
Any critique and tips appreciated.
Hi, about the icons you can change the SVG's color with a css property. However it's only if you use SVG elements. Instead of using a <img> element with the src of the SVG, you have to copy and paste the <svg> element.
.iconsContainer svg { fill: blue; }
.iconsContainer:hover { background-color: blue; }
.iconContainer:hover svg { fill: white; }
Animated images using SVG images are really powerful, so I advice you to follow a SVG tutorial in order to learn the basics of SVG's handling. You can find a lot of tutorials on Youtube. Keep it up!
Is there any way to make the blur box shadow blur more? I see it in layers, but I want it to be a smoother transition. Here is the code I used for the CSS:
box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.1)
Hmm, I don't quite understand what you're talking about and I'm not sure however If you want to increase the blur's size I think that you can try to increase the spread radius value (the fourth param of box-shadow). Roughly it increases the size of the shadow.
box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.1);
Be carefully to not use spread-radius too high values. I'm thinking of values between 1 and 20.
Animated Pictures With only CSS :D Mobile Version is animated too.
Check it on: https://wisemunk.github.io/FAQ-Accordion-Animated-with-PureCSS/
I would like to have some feedback on this one ;)
That's pretty cool however I think that shouldn't make you lose sight of the original model. You forgot to center the element in the middle of the page and less important whether you don't have the Figma model but on click the question should be in bold. (You can see it on design folder : "active-states.jpg"). Otherwise I find the mobile version fine.
