@correlucas
Posted
👾Hello რეზი კარანაძე, congratulations for your solution!
I've looked your code and I think you can use a simple way around it, creating a cleaner html structure and use less css to reach the challenge goals, you've used a lots of position: relative; and its kinda tricky to manage all content using this kind of approach. My tip for you is use flexbox to manage the container elements.
The basic structure for this challenge is:
<body><main> (to wrapp all content) <div><div> (for the card image)<div></div>(for the content)</main></body>
My recommendation is that you use grid for this challenge, to have a simple container with two columns the same size each with display: grid; and grid-template-column: 1fr 1fr; (for the media query mobile you need only to change the grid-template-column: 1fr;.
I've used this same approach in my solution and I'll let you the solution link below if you want to use it as a reference, not that if you refactor your code you'll gain time instead of fixing it now, trust me:
My solution: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1
If you're not familiar to GRID, here's the documentation: https://css-tricks.com/snippets/css/complete-guide-grid/
Hope it helps you რეზი კარანაძე, happy coding!
Marked as helpful
