@Mouradis
@KoiHast
Submitted
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
@Mouradis
Posted
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
Marked as helpful
@nhilt38
Submitted
Any feedback is welcome <3
@Mouradis
Posted
very good code but my only comment wich is not really a mistake but instead of using the container div use <main></main>
Marked as helpful
@DMikaia
Submitted
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 !
@Mouradis
Posted
You can give the buuton disolay flex/ and align items center / justify contentent center and the margin right about 10px(or however you like)
Marked as helpful
@MichaelAgyebeng
Submitted
the use of rem and percentage to design lengths. I will improve on it soon
@Mouradis
Posted
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
Marked as helpful
@KoiHast
Submitted
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.
@Mouradis
Posted
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)
@Arbaz-79
Submitted
please correct my mistake
@Mouradis
Posted
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
Marked as helpful
@czechoslovakia36
Submitted
Only JavaScript ,CSS,HTML5 is used to create this component.
@Mouradis
Posted
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
@spacelordhector
Submitted
@Mouradis
Posted
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
@jrleijnse
Submitted
@Mouradis
Posted
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
@Abn0Masr
Submitted
@Mouradis
Posted
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
Marked as helpful
