Skip to content
OverviewSolutions
12
Comments
5

Clara Wen

@clarafuwen320 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Clara Wen•320
    @clarafuwen

    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.

    Marked as helpful
  • Clara Wen•320
    @clarafuwen

    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!!

    Marked as helpful
  • Clara Wen•320
    @clarafuwen

    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;
  }
  • Clara Wen•320
    @clarafuwen

    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!

  • Clara Wen•320
    @clarafuwen

    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!

    Marked as helpful