Hi everyone!
I feel I got pretty much everything except for the color hover with the social media icons. If anyone is familiar with svg icons and can help me out, I'd really appreciate it. I watched a few youtube videos and tried everything I could but couldn't figure that part out.
Hello Aimee,
Nice job on the project!
I noticed in your flex-icons div there are mixed types of elements(img and svg). If we included those icons as svg, and the fill would be able to do the work and change color on hover. So I've made some modifications on your code and it worked on my computer.
In your index.html footer for social icons
<div class="flex-icons">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<path
d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"
fill="#4C545C"
fill-rule="nonzero"
/>
</svg>
<svg
class="twitter"
width="24"
height="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z"
fill="#4C545C"
fill-rule="nonzero"
/>
</svg>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"
fill="#4C545C"
fill-rule="nonzero"
/>
</svg>
</div>
and in your style.css
.flex-icons svg:hover path {
fill: cyan;
}
These should do the trick to change the colors of social media icon on hover. However, with this change, you might need to style the flex-icons a little bit to spread the icons out.
Let me know if the solution works and happy coding.
Hi Daniel,
I also started to incorporate Sass/SCSS recently into my code and it made huge difference. Sass partials and utility classes help me reduce repeated code and having components in their individual file really made debugging much easier.
I found below two link especially useful.
Coder coder's Sass, BEM, & Responsive Design Coder coder's video introduces basic setup of SCSS folder and how it works
Sass Guidelines Sass guidlines/Archtecture explains why this setup works.
I've also completed this project, but with pure CSS and you can imagine the whole process was bit painful. I tried Sass/SCSS later on with more complicated projects and guess what -- it did not take as much time and the structure more organized, as least in my opinion.
I hope you find the two links helpful and happy coding!!
Hello,
Can someone tell me how to change the color of a SVG (for example, for :hover state).
I've tried fill but it doesn't work, and it's something we need to often do on FEM.
Thanks.
Hello Poukame,
Nice implementation of the project!!
For the svg fill to work, you probably need to add path after svg.
Try this to see if it works on the hover state. It worked for me ;)
Let me know and cheers!
.yourClass svg:hover path {
fill: colorOfYourChoice;
}
Complete new code for this challenge.
I managed to place the backgrounds with calc() functions so, even if the user resizes the windows, the background wont move.
Let me know what you think!
Cheerio!
Hey! Just wanted to thank you because I had trouble finding the correct configurations of CSS filter to change the social icon color on hover. Then I saw your code and it solved everything. But I still don't know how it actually works. Do you mind share some resources on how to set CSS filter to a target hue?
For the background, I treated those background/pattern images just as regular images and positioned them according to the X, Y coordinates that Figma provides and let the screen decide how/when to render them. It worked well overall. I had the same feeling that image sizes are not matched as when looked closely, all the background patterns are more compressed than the original. Just some thought. I probably will try to set background images as background and see how it goes. Hope you get a 100% match on your redo!
As I do these challenges I tend to trim the fat so to speak with regards to poor practices or bloated and unnecessary code. I disregarded the ALT tags here, but I did pay attention to another users suggestion of making text all uppercase in CSS versus inline in the HTML file. The reason being is that the screen reader will read out each letter if its all caps in HTML.
I play around a lot with flexbox on these challenges, and I continue to better understand and develop more 'instinct' as to why things work and dont work as I progress. This time around I tried to use a chrome app called pixel perfect in order to help achieve as close a look to the source material as possible. We will see how it turned out.
Question(s):
In the individual card divs (.sedans, .suvs, .luxury), I achieved the indentation from the left side of each card by simply using padding/margin-left, and adjusting that for each individual element within the card so that they all line up nicely. Moving forward, I imagine it would be a better approach to wrap all the elements inside the card within a new div, then simply adjusting the left padding/margin of that div which holds all the elements to achieve the same effect, rather than padding each element individually. Is this train of thought correct?
Any other pieces of advice or tips are of course welcome and much appreciated.
Thanks!
Hello! I just finished this challenge and was actually using the your proposed structure -- one div to wrap all 3 subcomponents(sedan, suvs, luxury) inside. And it worked very well.
I noticed you have 3 class selectors for sedans, suvs and luxury. And like you proposed, since they share the same style, you could give all 3 of them one shared class (I used 'panel-item') before their current class like this
<div class="panel-item sedans_cards">
</div>
Then if you style this shared class 'panel-item' in your CSS, all 3 subcomponents will have the same styles -- basically, style once, and use 3 times plus easier for debugging. Then all the stylings left for sedans, suvs and luxury are their unique background-color or border-radius, which could be done in their individual styling block.
I hope this helps and let me know if you need further explanations!