All solutions

How can I better approach putting the colored borders on the cards? I made an individual class for each card's border to change the color, but I'm sure there's a better way to do that without making separate classes or using inline.

What else can I improve on?

I felt pretty confident about the project, although I could have reduced the amount of CSS by probably 50-60 lines if I took the mobile-first approach. I was more worried about learning how to use REM and EM units for websites. I think I used the REM and EM units right. For the next challenge, I will attempt a mobile-first approach to get used to having to visualize how it will effect both the desktop and mobile phones at the same time.

I need some input on what I could improve. I had trouble implementing the social media icons for the footer, along with the REM and EM units for font size, margins, and padding.

What questions I have

• Did I use REM and EM right? I mixed the sizing with pixels too so I might have messed that up.
• Did I correctly set up alt tags for the social media icon SVGs? I don't know how to set up the text that screen readers will play for SVGs that are loaded inline.
• How could I better set up the transitions for the buttons? I wanted a fade in and out for the pink color for all the buttons, but the fade out I had to get rid of because the transition on the class would load when website is loading and when you stop hovering over the button.

I had difficulty with the images, specifically the SVGs. I couldn't change the fill color of the SVG with classes without doing an inline SVG. Can someone help me figure out how to use object or an element like that to be able to change an SVGs fill color?

I know the responsiveness isn't the best but for this practice I was more focused on playing with the SVGs, background images, and shadows.