Hi, nice job! You can try to use opacity property for the overlay element instead of z-index, then you can add transition property for a smooth effect π If you have any difficulties, you can find this solution on my account :) Keep it up π
Good work! I see youβre having trouble centering <main> element, try to add Flex Box properties for body { height: 100vh; display: flex; justify-content: center; margin: 0; padding: 0; }, so for <main> block you donβt have to use margin-top property, and itβs beautifully centered!π You can also use Flex Box properties to place elements inside 'container' block (without using position: absolute). You can learn about flexboxes here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ or anywhere else π
Hope it was helpful! π€
Nice work! I see small design inconsistencies in the fonts, try this styles: body {font-family: "Montserrat", sans-serif;} and h1, .prices {font-family: "Fraunces", serif;}, and also font-weight:1500 is not working (900 is a max π). And you can put another image for small screen (it's in the archive). Hope it was helpful, keep it up! π
Nice work! Just noticed small fixes you can do: "--h-font" and "--p-font" are the same, so you can delete one. And if you use variables for font-family, then you can do it for colors too ;) Also instead of "padding: 10px 15px 15px 15px;" you can use "padding: 10px 15px 15px;" (top, left&right, bottom). Good job, keep it up π