All solutions

Third newbie project. I tried to learn and apply BEM naming convention (mostly). Would appreciate any commentary on that. I thought this would be pretty easy but spent a lot of time getting the positioning and sizing correct. I realize the shadow around the button is bit dark and can fix that. The Font for the title seems heavier on mine than the designs. Not sure how to fix that.

Not perfect or the most elegant but I think I figured it out. Tried doing this with not grids and that was not going to happen so I used a display: grid; (not a flexgrid). Fiddly on the positioning.

I never did get the "per month" to center align vertically. /* update */ Applied the feedback I had received (Big Thanks!) and corrected some issues.

• Dropped unnecessary Div's
• Changed how I switched sizing and padding based on screen size. Mobile looks right I think.
• Got the Pricing line to vertically align
• Changed the Why Us list to a UL/LI
• General clean up
• Did not change to BEM naming convention but am looking at how it works

This was my first project. I was much harder than I expected. I had a hard time thinking through the proper way to use DIV's. I have some unnecessary ones in the html file still. Probably ended up with more than I needed that I did use.

Problems:

• I think I generally got the right answer but I struggled on positioning the card. Not sure I did it most efficiently.

• Had a hard time mimicking the spacing of the font.

• I used percentages to place the background images. They behave kind of weird when I resize the screen.

  background-image: url("../images/bg-pattern-top.svg"), url("../images/bg-pattern-bottom.svg"); /* background-position: -500px -600px, 500px 300px; */ background-position: -130% -200%, 200% 150%; background-repeat: no-repeat; background-attachment: fixed;