It took me forever to figure out how to do the hover effect with the icon over the main image. I probably did it in a really goofy way. If there's a better way for me to have done it, please let me know!
Also, I know the hover effect isn't showing the same border-radius as the image. It's in my CSS code, but for some reason, GitHub isn't wanting to see it when I deploy the site. Just know that it is there! GitHub just hates me.
Thank you! <3
i havent made this project yet but i made a simular one i also struggled with thomething simular my solution was to put the main image as a background and above you can add the blue box with low opacity and the eye icon and make them display: none; and in the hover proprety i make them display: flex; with a little transition
Any feedback is welcome <3
very good code but my only comment wich is not really a mistake but instead of using the container div use <main></main>
I've found difficult doing the alignement of the shopping cart icon and the "Add to cart" text in the button. During the organization too I should've have made some little class like how @KevinPowell did it, so I won't be lost during some specific styling and proprieties. But overall I understood some of it and googled some that I didn't know how to do it. If you guys have some tips and tricks to share to improve my skills that would be great too, thank you !
You can give the buuton disolay flex/ and align items center / justify contentent center and the margin right about 10px(or however you like)
the use of rem and percentage to design lengths. I will improve on it soon
my advice is you may have started the media to early because in this small projects you can make desktop aspect the same as the tablet one but that is not a mistake in general but the mistake the styles of your website dont work on mobile try use max-width instead of min-width in the media query i think it should fix the problem
Any suggestions for how to improve my code are greatly appreciated! I apologize for not having any specific questions; it's late and my brain worked just long enough to get this finished before shutting down entirely.
the quick advice i can give you is that you made your media query too early about 900px you should but it about max-width : 480px (mobile size) or if you want 780px (tablets size)
please correct my mistake
you dont have mistakes you can just remove the border from the image and i personally prefer that you put the <h1> and the <p> each in it own div and put those tow divs in a section for bigger porjects its better , again its not a mistake it is just my prefrences and you may benifit from them
Only JavaScript ,CSS,HTML5 is used to create this component.
your javascript is good but you clearly need to work on your css, so here is some advices: 1-make a constainer div that is your box and work inside it display flex padding anything and you can make an individual element a div foe example the rating numbers in a rating div so you can give them the same propreties
hello in this project have tow ways you either do it using grid and split your box into 2 div or with flexbox with each div have a width of 50%
for the media query max-width:480px is always enough you dont need more
its really good my only point is that you can make the countainer with 90% and max-width with your original width that way on mobile the box dont stick to the borders
good job but your website is not responsive you have 2 choices you either use media query or you make the container width a percentage and add max-width and min-width in px for it
