All solutions

I made this a bit more responsive by adding tablet and laptop sizes in the media queries. I plan on adding this one to my portfolio as well! I really enjoyed the challenge!

I had issues with the curved top of the "Stay productive" section. It's obvious where the background there sits even though the color of that and the div are the same color. Not sure how to fix that. So any suggestions there would be much appreciated!

I styled the tablet styling with no design file available and also added a styling for laptops to make the site more responsive. It's a little "off" to me when I exit out of DevTools to just view in the browser alone as my browser window is 1920px, but otherwise I think it looks okay.

I'd like to add this challenge to my portfolio, so if you have any feedback, I'd be happy to hear it! :)

This was a challenging one! I had issues getting the icons to not be kind of squished and creating the tail on the bubble with "185 GB left" was very difficult for me, but I learned how to do it! It's not quite right, but it was a start!

In a screen larger than 1440px, it looks crazy, but in 1440px it looks fine. Any tips on how to fix my code to be more responsive to a larger screen?

Not a bad first try, I enjoyed the challenge!

I couldn't add an alert for when you submit your email address in the form because that apparently requires JS, which I haven't learned yet.

And If the screen is bigger than 1440px for desktop, which my laptop is bigger than that, the curved sections become partially hidden. Would I need to add queries for sizes in the middle of mobile and desktop and bigger than desktop?

this one was a little challenging but I enjoyed it!

I couldn't figure out how to get the logo in the footer to be completely white, just the text is white. positioning the "ready to build your own community" card was also a pain.

I feel like I could've done this with less code, it feels a little messy. feedback and tips are welcome!

I had some issues with the gap between the mockup image and the text and button on desktop view. In DevTools in 1440px view, it looks fine. But when I exit it, it's smooshed together. Not sure where I went wrong in the code, or if I should've maybe used Grid instead.

I have some white space behind the ratings/heading area. Not sure how to remove that? Feedback is welcome. This was a tough one, I'm still getting used to Grid, but had to end up resorting to Flexbox. Will have to continue practicing with Grid.

The only issue I'm having is that this challenge looks different in Chrome versus Firefox. In Firefox, the "content-wrapper" container has all the grid items squished together. Using Dev Tools, it appears the issue may be with grid-template-columns. I don't know if I should add Mozilla-specific code, which I'm not familiar with so I have no idea of where to go with that, or could it be something else in my code that's affecting that? Feedback is welcome as always!

Here's my Code Pen too: https://codepen.io/imtheheppest/pen/oNEajab

I had trouble getting the background image to look like the design file. Not quite sure what was going on there. I got it as close as I could. Any suggestions?

My footer area in mobile view will not stay at the bottom and moves when I scroll. If I remove the stylings to "attribution" class, it will stick to the right of the card div. That's the only issue I had besides the color for the overlay in desktop view. I would like to fix the footer, though.

I found using hover difficult because of the eye icon. I couldn't seem to get it completely opaque like in the design files. I feel like I also maybe could've been more efficient with my code too.

My main question is how could I make the eye icon more opaque when I hover over the main image?