All solutions

This challenge was similar to my previous challenges. I wanted to make sure that I was not losing touch on CSS Grid and utilizing best practices for semantic HTML since it's been awhile I've completed a challenge (new job so not a lot of free time!)

The layout is done with Flexbox on mobile and Grid on larger screens.

Thank you and happy coding!

I ended using CSS Grid for the layout of the mobile and desktop designs. Unfortunately I had a hard time lining up the social-media toggle box to line up with the share button (not sure it's because in CSS Grid?) and in order to line it up visually, I increased the padding but that resulted in a thicker-looking box. How did you guys approach this?

I'd love to hear any feedback or suggestions on what I could improve on! Any insight is greatly appreciated!

Thank you! #happycoding

For this challenge, I found the mobile design to be a lot easier than the desktop design. Had a harder time figuring out how to layout the desktop and ended up utilizing grid layout. On the bright side, my understanding of grid layout is getting better and better!

Likewise with the previous challenges, I had a hard time figuring out the best background-size and background-position for the background patterns for desktop.

I did have an issue but wasn't sure if anyone else came across this. When I was trying to offset the bottom 3 user review cards, I could not get the height to stay while I updated their vertical margins. I expected the cards to move relative to the margin values, but ended up "squishing" itself and won't move past a certain point...if that makes sense.

Did not have time to review why it's producing that behavior tonight, but will take another look. If you guys know anything, please comment! If you have any feedback on the challenge, I'd highly appreciate it as well.

Thank you!

#happycoding

This challenge was a bit more difficult compared to the earlier challenges. I had trouble figuring out how to implement the desktop images with the bg-pattern and did not realize I could do this with the help of background-image, background-position etc. (seems like I'm not thinking about the css background property and defaulting to using img element). In addition, I had an issue dealing with the parent height jumping as the child element (accordion) expands and collapses. For now, I used a fixed height on the parent but am curious how this issue can be achieved or fixed.

Tried to make sure the accordion complies with ADA Web Accessibility and is toggleable with a keyboard etc.

Any thoughts or opinions regarding the height issue and 1st try on ADA Web Accessibility is highly appreciated!

Thank you!

#HappyCoding

Hey guys! There were a couple CSS properties I learned more about which were the background position for the two background-patterns that I could manipulate with background-position! Focused more on making sure the HTML semantics is "correct" instead of relying on divs for the layout.

I'd appreciate it if you can give your thoughts or opinions regarding the HTML semantics or CSS I could improve on!

Thank you!

#happycoding

I decided to challenge myself to exclusively use CSS Gridbox to layout the card instead of relying on Flexbox. My understanding of how CSS Gridbox is better, but there are certain properties I'm still confused.

I had a hard time figuring out how to vertically center the cards on larger screens with just CSS GridBox. I ended up relying on using flexbox on the parent element, body, to center it. What is one of the ways to vertically center the .card container on desktop screens?

Any tips, suggestions, and feedback is welcome!

Thank you! #HappyCoding

Tried to make this card as responsive as possible with plain HTML, CSS. Had a hard time figuring out how to add an overlay instead of using position: absolute method but found a solution using mix-blend-mode + opacity instead! What's the most popular or best recommended way to add an overlay on top of an image these days?

Any tips, suggestions, and feedback is welcome!

Thank you #HappyCoding

1st attempt at building this summary card out with just plain HTML, CSS. Quite happy with how it looks on desktop but am having trouble making it mobile friendly. Any tips, suggestions, and feedback is welcome! Planning on improving this later on to address the mobile and accessibility issues!

Thank you! #HappyCoding