All solutions

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

"I believe I managed to make the responsiveness work well."

What challenges did you encounter, and how did you overcome them?

Regarding the footer: it was really a puzzle for me to find out how to turn green to white logo using only the files and colors given in the Style Guide. I managed how to do it after a long time testing pseudo-classes and filters, but then the :hover state didn't work anymore, so I gave up and just changed the logo color in the SVG file and used color picker to get the color-background.

What specific areas of your project would you like help with?

All improvement suggestions are welcome!

What challenges did you encounter, and how did you overcome them?

It was a challenge to keep the images (backgrounds and illustrations) responsive to different screen sizes and still match the proposed design.

What specific areas of your project would you like help with?

I used vw and percentages on header, main and footer sections thinking it would be the easiest way to make the page responsive. I would like to know if it was indeed a good solution.

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

It was my first time using a media query and I got a satisfactory result.

What specific areas of your project would you like help with?

I would like to know if there is any another way to make the hover styles on the main image link other than using pseudo-elements.

.card .link-main-image{
    display: flex;
    position: relative;
}

.card .link-main-image::before{
    content: '';
    display: none;
    background-color: var(--cyan);
    border-radius: 10px;
    opacity: 40%;
    position: absolute;
    width: 100%;
    height: 100%;
}

.card .link-main-image::after{
    content: '';
    display: none;
    background: url('../images/icon-view.svg') no-repeat center;
    position: absolute;
    width: 100%;
    height: 100%;
}

.card .link-main-image:hover::before,
.card .link-main-image:hover::after{
    display: block;
}