Took a while to get the color overlay for the image, At first I tried gradients for ages on it but could not get the right color for the overlay before I finally found out about mix-blend-mode.
Still new to this so any feedback on what I could of done better would be great!
When you use a grid you don't need to center elements with align-items and justify-content. You can just put place-content: center. Less line code and the same result. Also always use max-width for containers instead of width, try and you will see different. Cheers!
constructive criticism is appreciated! let me know best practices that i maybe should have used and if i did the media queries right (first time using them). also if you change the <h2> in section 1 to <h1> or the others to different <h> tags then it throws off the whole section a little in terms of sizing relative to the other sections. i dont know why this happens as i styled it with the class "headers" so isnt it supposed to override it and the <h1> shouldnt matter whatever number it is? (you can try yourself in chrome devtools to see what i mean)
Thanks!
Check out how to use rem units instead of px units. You should start out using CSS grid - less code than with flexbox. For example this layout you can set like this:
display:grid;
place-items: center; -- on "main-container"
@media screen and (min-width: 376px){ grit-template-columns: 1fr 1fr 1fr; } So, in this way you have 3 equal columns without flexbox percentage with more precision.
