Please instruct how to add a colour in hover state ? I am not able to do it
Yash
@yashviradiaAll comments
- @SonuKr95Submitted almost 2 years ago@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 emptydiv
to create overlay effect,view-icon
being on top ofcard-image
. -
For this concept of css-positioning and z-index will be useful.
-
In your case, make
view-icon
as newimg
element and also an emptydiv
which will give background color effect toview-icon
. -
Give
view-icon
and emptydiv
absolute positioning withcard-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 helpful0 -
- @Mar1362Submitted almost 2 years ago
quick order summary component, hope you enjoy it, feel free for feedback
@yashviradiaPosted almost 2 years agoHi 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:
- Include your html body code other that of
footer
in<main>
Tag. - Try to add hover effect for buttons and links in this project.
- 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 helpful1 - Include your html body code other that of
- @VaporDuskSubmitted about 2 years ago
How can i improve this project?
@yashviradiaPosted about 2 years agoHi VaporDusk!
Kudos for completing this project! 🥳
Some points to be considered:
- Try to avoid all the warnings that you are getting in accessibility report in order to make the webpage more accessible.
- Subtle details like shadowing and slightly lightening font color will help you enhancing user experience.
Wish you good luck and have fun!
Marked as helpful1 - @Sh0lexSubmitted over 2 years ago
An huge improvement in retrospect to my first challenge. Reviews are appreciated.
@yashviradiaPosted over 2 years agoHi!
Great work on this project! :)
Here might be some points to consider:
- better to write CSS and HTML codes in separate files, HTML generally in index.html and CSS in styles.css
<p>
instead of<P>
for paragraph tag- for CSS selectors use new names to avoid confusion with HTML tags
cursor: pointer;
can be used for focusing image, heading, and creator's name
Hope that helps and happy coding!
Marked as helpful0