I made extensive use of the CSS clamp function for fluid typography and paddings. My gaol was to avoid jarring jumps at media query break points.
This looks absolutely amazing. You've nailed the design.
This is a very good project which could serve as a page cover for a portfolio entry and i am glad i got the result i had on my first attempt of doing this project
What challenges did you encounter, and how did you overcome them?the challenge i had was figuring out the exact width and height to use and i made sure i worked with something responsive
What specific areas of your project would you like help with?width and height, must especially the resonsiveness
Good job completing the challenge! But I think this needs a lot of improvement with the overall design.
The html looks pretty fine, but in the links div, you can use a <ul> tag for the list of the <a> tags.
<div class="links">
<a href="https://github.com/hoppYo" target="_blank" class="github"
>GitHub</a
>
<a
href="https://www.frontendmentor.io/profile/hoppYo"
target="_blank"
class="mentor"
>Frontend Mentor</a
>
<a href="" class="linkedin">LinkedIn</a>
<a href="https://x.com/hoppyd1st" target="_blank" class="twitter"
>Twitter</a
>
<a
href="https://www.instagram.com/hoppythe1st/"
target="_blank"
class="instagram"
>Instagram</a
>
</div>
The links need the hover effect using the :hover pseudo class. If this approach is followed, instead of creating styles for each link, you can apply styles for the <ul>, <li> <a> tags as a whole.
the reason the card has taken the entire height is because of the height: 100vh; style for the .container class. For the card width, use the max-width css property and assigna fixed max width.
I would recommend throughly going through CSS theory (such s on w3schools) and get the right undrstanding of what the CSS properties are and when to use them.
Best of luck on your future projects