Skip to content
OverviewSolutions
5
Comments
4
Yash
@yashviradia

All comments

  • Yash•130
    @yashviradiaPosted almost 2 years ago

    Hi @SonuKr95!

    Firstly, great work on this project!

    • To create hover effect with view-icon and in your case adding color to hover, I used one more empty div to create overlay effect, view-icon being on top of card-image.

    • For this concept of css-positioning and z-index will be useful.

    • In your case, make view-icon as new img element and also an empty div which will give background color effect to view-icon.

    • Give view-icon and empty div absolute positioning with card-image having relative positioning. Also give first two elements z-index of 1 and 2 respectively.

    Hope that helps. Give it a try and let me know!

    Marked as helpful
    0
  • Yash•130
    @yashviradiaPosted about 2 years ago

    Hi Mar1362!

    Firstly kudos for completing this project! 🥳

    I find it remarkable that you only used css combinators to complete the project! 👀

    Here are some points that might help:

    1. Include your html body code other that of footer in <main> Tag.
    2. Try to add hover effect for buttons and links in this project.
    3. Font styling - This one depends on your taste, but its an important factor to consider. I would rather stick to font-style given in styles-guide.md. You can use Google Fonts to include those fonts.

    Let me know if you have further questions. Have fun coding!

    Marked as helpful
    1
  • Yash•130
    @yashviradiaPosted about 2 years ago

    Hi VaporDusk!

    Kudos for completing this project! 🥳

    Some points to be considered:

    1. Try to avoid all the warnings that you are getting in accessibility report in order to make the webpage more accessible.
    2. Subtle details like shadowing and slightly lightening font color will help you enhancing user experience.

    Wish you good luck and have fun!

    Marked as helpful
    1
  • Yash•130
    @yashviradiaPosted over 2 years ago

    Hi!

    Great work on this project! :)

    Here might be some points to consider:

    1. better to write CSS and HTML codes in separate files, HTML generally in index.html and CSS in styles.css
    2. <p> instead of <P> for paragraph tag
    3. for CSS selectors use new names to avoid confusion with HTML tags
    4. cursor: pointer; can be used for focusing image, heading, and creator's name

    Hope that helps and happy coding!

    Marked as helpful
    0