Latest solutions
Responsive landing page with Grid, Flex and SASS (+ Vanilla JS)
#sass/scss#accessibilitySubmitted almost 3 years ago
Latest comments
- @K-Muzslay@joana-trots
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 👍
- @ilyasazer@joana-trots
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! 🤘
Marked as helpful - @ristoranteQF@joana-trots
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! 👍
Marked as helpful - @felipec583@joana-trots
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 👍