guys if you can give me some suggestion on when i try to zoom the browser the right side product detail box going down , how can i solve that? and on the mobile devise it;s not good
You have set width: 40% in the .container class, so the card can only occupy 40% of the width and when the screen is reduced, it does not fit, so the right side slides down. Remove width: 40% and instead set e.g. max-width: 600px.
In the body you have set height: 100vh, never set a fixed page height, because if something is too big it will be cut off, instead set min-height: 100vh.
When you set position: absolute; on your button, you should set it's parent to position: relative.
Set .action to position: relative, and then in the button instead of left: 500px; set right: 0;. Also remove left: 265px; from media queries.
This should help. Good luck!
To make the hover effect, first add the icon icon-view.svg to the HTML in the section with the hero class. Then replace in your CSS
.hero img {
border-radius: 10px;
}
with:
.hero {
background-color: var(--cyan);
border-radius: 10px;
overflow: hidden;
position: relative;
}
.hero:hover img:first-child {
opacity: 0.5;
cursor: pointer;
}
.hero:hover img:last-child {
display: block;
cursor: pointer;
}
.hero img:first-child {
display: block;
width: 100%;
}
.hero img:last-child {
position: absolute;
display: none;
top: calc(50% - 1.5rem);
left: calc(50% - 1.5rem);
width: 3rem;
height: 3rem;
}
The background behind the image will be cyan and when hover occurs the image will become semi-transparent. You can rename img:first-child and img:last-child to your own class names for better readability.
I think you pasted a wrong link in the HTML, in the head section.
Try replacing your <link href="https... with:
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap" rel="stylesheet ">
and it sould work. Good luck.
Looks good, I like the animation. I would correct a few things: during the hover, the numbers should be white, because the gray color on the orange background is difficult to see. The submit text could be more centered, I would add padding-top: 4px; to it. And finally, in my opinion, the submit button should be inactive if nothing is selected. Good luck.
I don't know why the background image (stripes) is not displayed. If anyone knows how to fix this, please let me know.
