All solutions

A question that came while I was starting to build this, is:

• If all sections have the same importance, how do you determine what heading to use since having multiple H1 headings is frowned upon, but in context, it doesn't make sense to have more than one level of heading or have a different type of tag that's styled the same as a heading?

• I felt like using margin at the bottom of the paragraph to create the spacing was a bit of hack. Is there a better way to do that?

• I wanted the buttons to remain in the same place regardless of the space taken up by the paragraph. Is there a way to achieve that without using absolute positioning?

• Any tips to improve the legibility of my code would definitely be helpful.

Please feel free to leave feedback!!

Thank You

Some of the challenges I faced are:

• getting the image overlay to stop overflowing at the smaller sizes

• keeping ".view" that's on the image overlay at opacity:1 while the rest of the overlay becomes more transparent. I tried separating ".view" from the overlay and using absolute positioning and z-index to position it on top of the image overlay, but instead it took a cyan tint, and it didn't fix the opacity issue.

• Is there a better way to create the box shadow layers? I ended up changing the value of the color used for the shadow slightly and it's not quite the same as the expected results in the screenshots provided for the challenge.

Any feedback would be greatly appreciated,

Thank You

Updates*

• Opacity issue on hover has been corrected.