All solutions

In the design on the desktop version, the image in the Hero section is slightly larger than the content section. I wasn't sure how to do this. Looks like maybe the image should be 60% of the section and the content 40%, but I wasn't sure how to do that with CSS.

Moving from the smaller component projects to the larger landing pages is definitely a set up. Commenting your code becomes very helpful. My spacing is slightly off due to not having the Sigmas files, but it is pretty close.

Two areas where I could use some feedback are:

1. Is there a way to recolor the SVG logo for the footer using CSS? I ended up making a copy of the SVG and changing the fill values.

2. I am not sure about the CSS to make the curve for the second section. I used the background image, but to make it fill the whole section it doesn't look like the design. Any pointers?

One section that I can't seem to figure out is how to perfectly center align the three columns under "Supercharge your workflow". I tried every kind of alignment (content, items, justify, self), but the first column is a couple of pixels lower. Grrr.

I have extra space above the titles of the individual cards that I can't find. I looked at dev tools container layout and I can't figure what is making the space above the titles. I don't see a margin or padding. If somebody could point me in the right direction, that would be great.

I started to experiment with modifier classes with an eye towards best practices on larger scale projects.

For the clock icon before 3 days left, I can't figure out how to align it vertically with the "3 days left" text.

With the just the JPGs to go off of the alignment/space is a little off, but overall I am happy with the layout.

I do have a question regarding the background image. At a certain size/resolution the background image doesn't get bigger and maybe smaller than the viewport. Is there a way to keep the section from growing larger than the image or having the image scale up? If I made the browser window larger, I'd have a gap at the bottom below the bg image showing only the bg color.

This one proved to be trickier than I first anticipated. The mobile design was pretty straightforward. It was when I started styling the desktop version that I hit some hiccups. I have gotten fairly confident with flex box, but I have minimal experience with grids. I tried to use ONE grid for the entire design. I struggled to get that to work for over an hour. I had no problem getting the first row aligned to the columns I wanted, but the "cards" on the second row I couldn't get out of the first column of the grid. I gave the scorn and third "cards" different grid-column-start, but they won't move. After many attempts I had no luck until I made the "cards" container its own grid. Seems like it should work as ONE whole grid for the design, I just couldn't come up with a working solution.

Outside of my issue with the gird, I have one thing I can't figure out. The star ratings not center aligned with the text. The have slightly more space below than above. I tried center-align: items. No luck. I tried vertical-align. No luck. I tried 0 padding. No luck. Any ideas?

I am not sure what is best practice for styling the individual testimonials sections. I chose to use "nth child" to select each and apply individual styles. Another approach could be individual utility classes for each. Which is the more standard approach?

It was my first time using grids for a design. Being able to span content across multiple cells (name?) and being able to rearrange the order of content visually will be very useful.

This one took me awhile. I may have overused flex box, but that is something I have been learning recently so it is what I went with. I need to practice with grids and learn the best practices for when to use either flex box or grid.

For the summary section I wasn't sure if each summary item was supposed to be a div or a list. I went with a UL. My first round of code I had classes for each list item (.reaction, .memory, etc.). It seemed liked a lot of extra classes. Then I remembered nth child, so I reviewed that and updated my code. I thought it made the HTML cleaner.

I was able to practice using CSS Custom Properties and the GitHub workflow. Thanks to initial feedback I was able to improve my HTML semantically and come up with a proper solution to vertically align content.