All solutions

I couldn't get the Javascript to work for updating the notifications count, so I just bandaided it. But I left the code at the bottom commented out. Would really appreciate some help! It would console log 1, 2, 3, but only display 1 as the count. I think I need it to run every time a notification is clicked, but couldn't make it work.

I feel like I had to write a TON of code for this one. Looking for any feed back to simplify it, in all forms (HTML, CSS and Javascript).

Also looking for feedback on how people go about building out the main site and then mobile site. I feel like I have to totally rewrite everything to structure the mobile version.

Wasn't able to get the social images to change to white when hovering over their container only over the icon itself. halp!

aye,

I feel like my javascript is way too long and could be simplified in some way. Curious how others handled it. Main reason is every input had a different error message.

Also wondering if it's better to use input button or button element in forms.

Had to go back and redo the html for the mobile version since the image is after the header.

Anyone know how to keep the validation on the email input but get rid of the browser message?

I had a lot of trouble getting all the images to align properly especially while having to hide the overflow of two of them while allowing the box to overflow. Also, I couldn't find the shadow on the mobile version. I think it was off screen or behind another object.

Really curious how people handle images on this project and in general.

Had a bit of trouble getting the image working correctly. I wanted to increase the size of the image and also have it scale with the viewport width. Gave up and left it default size.

Does anyone know why the height of the first box becomes a different size than the other three at certain screen sizes? For example, at width 845px.

Struggled with the best way to get everything centered vertically in terms of the stats in their section and the profile info.

I find myself using margin on everything and then having to adjust margin on multiple items if I make one change. What's optimal? Put everything in place by centering and go back to adjust?

Starting to get the hang of it!

Had a bit of trouble at the end with content getting cut off in mobile mode.

I had problems getting all the contents and container to resize and stay within each other when making the window smaller. Ending up adding overflow: hidden to a bunch of stuff, but felt sloppy.

Also I think using margins to space things may have been inefficient as I had to redo them all in the media query. Seemed like I shouldn't have to redo so many classed there.

Got stuck for awhile on the best way to align the music icon, annual plan, price and change link. Ended up using flex box with space between and adding margin. Is that the best way?

Also, couldn't quite get the background to line up exactly as the example.

Overall just wondering if there is a simpler/cleaner way of doing this.

What causes the slight lip from the div.maincard under the image?

Not sure if I implemented the hover effect for the main image in the most efficient way