All solutions

What are you most proud of, and what would you do differently next time?

Is there a way to make a pointer change color when hovering?

I tried care-color property but I couldn't make it work.

Also should I have used on the social links rather than?

How can I affect another element when hovering another element? I wanted to also make the card box-shadow move when hovering h1.

I tried different variations of selectors but still doesn't work.

.h1:hover + .card {
color: var(--primary-color)
box-shadow: box-shadow: 15px 15px 0px 0px var(--text-color)
}

.h1:hover  .card {
color: var(--primary-color)
box-shadow: box-shadow: 15px 15px 0px 0px var(--text-color)
}

Is my CSS easy to read? how should I format it to prevent redundancy or cluttering?

Had trouble doing the overlay image while hovering the main image. luckily I found a video regarding the problem. (linked it on the github solution README)

• How is my solution to the hover on main image? Is there a better way to do it?

Thanks for the help! 👍

There are a couple of problems I encountered. . .

• The hero image is not shrinking even with max-width and % used?

• Is there a way to position the icons inside the circle better?

• How can I make both the icon and the circle border change color on hover at the same time?

Any advice regarding CSS if there are declarations I can remove would be greatly appreciated, Thanks!

Still not confident about how I use CSS. I feel like my code has a lot of unnecessary input.

• Can my CSS be more efficient and clean?

• Is there a set breakpoint for responsive media query?

• I have not yet grasped on how to use the media query that much, any tips on how to avoid being confused with it?

• Is it better to use margin vs padding when spacing contents/texts?

I'm not sure why the Design comparison screenshot is showing a different result compared to the Preview Site 😔

• I am not sure if I should place the image inside the container or outside. Is there a way to prevent the image file to be included when adding a padding if it's inside the card-container?

• Is it better to use <ul> rather than <p> for the Annual Plan and Price area?

-Any tips on how to write or know what CSS declaration to use? I feel inefficient and take too long in CSS, Thanks!