All solutions

For his project I used a combination of flex and grid layouts. Once again I had trouble centering the card vertically for desktop view, but I finally managed using grid layout.

Somehow I can't make it work using display: flex;

Other than that it was a fun challenge! If you have any advice I'd love hear it :)

Had fun with this challenge! The image hover effect had me struggling for a while, but finally managed to get it working :) Any feedback such as best practices is extremely welcome

While building this project I ran into 2 issues: First one was centering the card on the page, I tried using:

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

But this didn't center the card vertically, I ended up using:

position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);

This worked, but I'm wondering why display:flex; didn't work (I tried adding it to the body, main and .container)

2nd issue was positioning the profile pic correctly and adding a border. I ended up creating a <div> container for the image. Is that a valid way?

Thanks so much!

Is there a way to align all buttons to be at the same vertical position? The paragraphs contain a different amount of words, when resizing the browser, this causes some alignment issues with the buttons. Any tips or advice is appreciated!

Wanted to improve my previous submission, so here's my 2nd attempt! Any feedback is welcome :)

Hi All! This was my first ever project on Frontend Mentor so I hope I did everything the correct way :) All feedback is extremely welcome